Webgl - When changing viewpoint triangle parts disappear

Question

I'm following examples from an intro to webgl book (WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL) and I'm having trouble understanding why an orthographic projection helps solve this specific problem.

One of the examples has us changing the 'eye point' of how we're viewing 3 triangles by applying some matrix transformation. They show that if we change the viewpoint enough to the right (+X) that the triangle starts to disappear. Here is the exact webgl example from the book's website (Press right arrow key to rotate triangle): http://www.magic.ubc.ca/webgl-pg/uploads/examples/ch07/LookAtTrianglesWithKeys.html

The book says that this happens because "This is because you haven’t specified the visible range (the boundaries of what you can actually see) correctly."

To solve this they apply an orthographic projection matrix to each vertex first and the problem is then solved. Why does this solve the problem, how can a matrix transformation cause something which did not exist before to now be visible? Where can I find the full explanation as to why webgl chose to not display the triangle anymore?

Answer 1

The coordinate system in which the objects in OpenGL are rendered (screen space) has an range of [-1,1] for x, y, and z.

With viewMatrix.setLookAt(g_eyeX, g_eyeY, g_eyeZ, 0, 0, 0, 0, 1, 0); your example creates a transform matrix that is used to transforms the coordinates of the triangles from world space to camera space (the direction from which you look onto that object).

Because this transformation will change the coordinates of the triangles these may not be in the range of [-1,1] anymore, in your example this happens for the z coordinate (moving behind your screen).

To solve this issue you can use an orthographic to change the range of the z coordinates without changing the perspective look, only the current z values of the screen spaces are scaled.