I recently decided to build my first 3D game, after a few 2D ones. Chose to go with Three.js and WebGL, as it is supported on both Linux and Windows. Anyway, I got my first few examples, but I still need to understand things on a lower level... Things like shaders, bounding boxes, textures, models. Could you explain them to me? I do know what textures and models are, but there are still many other unknown terms that occur... I tried to read up on shaders on Wikipedia, but I need a solid example, that article seems to be written for experts, not for people that seek to learn something.

Also, if you could recommend some good books on this, I'd be grateful.

Think of an OPENGL (/WebGL) instance as an artist, well call him `Bob`, but instead of eyes, your artist takes messages. The messages that `Bob` can accept is described by the API (application programming interface).

How can you describe a 3D object to someone without eyes? Well, there are a few ways. The method used by OPENGL is "Geometric Primitives". Essentially lines and polygons. A mathematical representation.

You create a laundry list of Geometric Primitives that describe the visible structure of the object, which is called a Model.

These Models are a bit bland, they don't contain any information about colour, or to be more precise, how Light interacts with the object. (The line between Model and Light Interaction Information is a bit blurred as Light Interaction Information requires knowledge of the Model).

Complex colour information can be stored in the objects Texture. A texture is essentially a 2D array of pixels (an image).

Storing the colour information in this way has its limitations, consider creating an Ear, how would you render the veins just under the skin which show up under high intense light?

A Shader can be used to alter the attributes of a pixel (https://en.wikipedia.org/wiki/Fragment_%28computer_graphics%29) at runtime, providing more detail and realism to your rendering.

A Bounding Box is a method to "accelerate certain kinds of tests". Which can be found in Ray Tracing, and in Collision Detection. The wiki entry can explain the finer details better than I, https://en.wikipedia.org/wiki/Bounding_volume.

All the best with your future 3D projects
Mike Brown [CXZUK]

Thanks for your reply! Although, there are more things I don't understand... What is a mesh, and how is it different from a model? Is a mesh basically a rendered model?

EDIT: I have another question... How do you deal with the environment? For example, how are maps stored? Are they just another huge model? (I'm not talking about the objects on the map, like houses, they're obviously objects, but the ground of the map, the terrain.)

A model is sometimes called a mesh because it is generally made up of triangles and is often seen as wireframe during building and testing.



Most 3D models are built this way although there are other methods to build an object, like constructive solid geometry (CSG).

As for maps, smaller maps can be built just like any other object. Alternative methods are using a set of generic building blocks (think Lego) to build up an environment or the use of heightmaps to deform a flat mesh. These are smaller to store and can be used to build realistic looking 'rough' terrain.

_________________
10 PRINT "Bad Monkey ";
20 GOTO 10

I think I still need a more thural explanation of shaders... Are they separate programs? Are they like libraries? Do they go through every pixel that is about to be rendered and then perform some calculations on it's RGB(a?) value or something? Examples would be great...


Can't thank you enough, guys!

Also, character collision detection in games - is it done with a cylinder?

You pretty much nailed it.

Shaders are code files that get compiled by your graphics api (opengl or directx) and can then be used. There are different types of shaders. Vertex and Fragment shaders (in opengl, don't know the directX terminology).

Vertex shaders have the ability to manipulate every vertex you provide; for scaling and translation for instance.

Fragment shaders manipulate every pixel that is actually drawn to the screen (they're called fragments because you can take several fragment samples per actual pixel -> multisampling/antialiasing). They're used for post processing (color leveling/saturation etc) or pixel based lighting/shading.

There are geometry and tesselation shaders aswell but they're only supported by newer hardware and i haven't gotten around to experiment with them so i cannot tell you much about them.


For collision of 3d models in a 3d environment you can get good results with cylinder colliders. it all depends on the case though. A cylinder or sphere/capsule are the most basic ways to do character collision. And by basic i mean still balls hard in a mathematical sense. Do yourself a favor and use a physics library

_________________
Long pork is people!

wzl's burrow

Thanks for your reply! Are shaders compiled when the program is ran, are they included like a library, precompiled?

Anyway, I can't use a physics/3D library, because the game I'm making is going to be multiplayer. Can't trust the client and all that. Well, I just might use it on the client side, to smooth out the experience or something, but the server needs to have the final say in this - and I'm pretty sure I can't use those libraries on the server side (node.js).

EDIT: what exactly is a vertex?

Shaders are compiled at runtime so you can do it in your initialize routine or at any time.

Using server side physics will put a heavy strain on your connections if you have a lot of objects. You should differentiate between crucial physics and decorative ones (like debris, which doesn't matter if it's not simulating 100% the same on every client).

A vertex is a point in 2d/3d space that makes up your geometry. E.g the corners of your triangles.

_________________
Long pork is people!

wzl's burrow

Yeah, I'll do collision detection and important things like that, with the use of cylinders, on the serverside, and the decorative part will be on the client.

Hi, what exactly are metrices in this context? I saw two types, local and world matrices in WebGL/Three.js.

Matrices are the same as mathematical matrices, http://en.wikipedia.org/wiki/Matrix_%28mathematics%29

"A major application of matrices is to represent linear transformations, that is, generalizations of linear functions such as f(x) = 4x. For example, the rotation of vectors in three dimensional space is a linear transformation"

Your getting into physics now, and i suggest some heavy reading otherwise you wont understand any reply.

The "local" and "world" matrices i presume are stored matrices. Most likely accumulation's of multiple transformations to alter the visual perspectives.

I cant suggest any decent reading, but im sure there is a list somewhere on this wiki (or there should be).

Mike Brown.