3D
You may need to read the previous article about the scene graph in order to understand this one.
Orthographic
An orthographic projection is a way to draw 3D without regard to perspective.
Cull face
Notice that the back of the rotating shape in the example above shows through to the front in some places. One way to
fix this is to draw only front-facing triangles. By default, a triangle is considered front-facing if its vertices are
being rasterized in a counter-clockwise orientation relative to the camera. To do so, enable the CULL_FACE feature.
gl.enable(gl.CULL_FACE);
Enabling CULL_FACE will make any triangles that are defined in the wrong orientation invisible.
The orientation of a triangle can be reversed by swapping the last two vertices.
Depth test
Even when culling backwards-facing triangles, some triangles still show through others. This is because WebGL doesn't remember the depth of a triangle unless the depth buffer is enabled.
gl.enable(gl.DEPTH_TEST);
While the color buffer stores the RGBA values of each pixel, the depth buffer stores the depth of each pixel. The
third ("") value of gl_Position is stored in the depth buffer. The depth buffer should be cleared before every
frame just like the color buffer.
gl.clearColor(0, 0, 0, 0);
gl.clearDepth(1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
μGL's clearContext function can be used to clear both the color and depth buffers in one line, and also enables
the depth buffer if necessary.
clearContext(gl, new Color(0, 0, 0, 0), 1);
Perspective
Perspective is when things that are further away from the camera appear smaller. WebGL automatically divides the
value assigned to gl_Position by its fourth ("") value. This is usefule for applying perspective because it
is equivalent to a scaling operation.
The example below shows two cubes (one on each side of the canvas). The cube on the left uses an orthographic projection, and the cube on the right uses a perspective projection. Notice that the sides of the orthographic cube are not visible despite being to the left of the camera.
Cameras
Rather than move a scene to fit in the frustum of a camera (as is the case in all of the examples above), it is more common to move the camera to view the scene. To do so, a transformation matrix can be made to represent the camera, called the camera matrix. The camera matrix can be inverted to make a view matrix. The projection matrix (which is calculated according to different algorithms depending on the type of projection) can be multiplied by the view matrix to make a view projection matrix. Objects in a scene can be "viewed" by a camera by multiplying their world matrix by the view projection matrix to make a world view projection matrix.
The next article is about textures.