Vertex z position -5+5 Use projection matrix (perspective): |

This example adds some simple interaction to the basic example.

WebGL renders into a 2×2×2 clip volume, use the slider to move the top vertex. For values greater than 1 and less than -1 the triangle is clipped.

Checking the perspective checkbox applies a perspective transformation to each vertex rendering the triangle in 3D. Now moving the vertex will not necessarily clip the triangle.

The matrix mtxModelView moves each vertex by -3.333 away from the camera.

The matrix mtxProjection applies a perspective to each vertex (magic numbers).

Note that matrix operations (e.g. multiplication) are supported natively by GLSL.

Changing the colour of the triangle is left as an exercise for the reader.