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 ("zz") 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 ("ww") 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.