WebGL Textures & Vertices

Beginner's Guide

Page Fifty Three

Perspective Projection

This section introduces the purpose and implementation of perspective projection. We describe how to prepare and upload a perspective projection matrix.

We previously discussed the controller's calls to getProgram() and getShader(). Next the controller calls getProgramVariables(). First getProgramVariables() prepares and uploads a perspective projection matrix. Later getProgramVariables() accesses and processes shader variables.

Perspective Projection Overview

Perspective projection provides the illusion of depth and volume. Mesh elements in the distance appear smaller and closer together. Lines converge toward one point, as they appear to extend into the distance. The book uses a 4 x 4 matrix to accomplish perspective projection.

The Book's Perspective Projection Matrix

The book prepares one JavaScript 4 x 4 matrix for perspective projection, then uploads the matrix to the vertex shader's uniform named um4_pmatrix. The vertex shader then multiplies every vertex in a mesh by the matrix.

When the matrix modifies the location of every vertex, then the appearance of the entire mesh changes. The following line from the vertex shader, demonstrates how to multiply each vertex by the perspective projection uniform named um4_pmatrix. The attribute a_position contains coordinates for one vertex at a time. The uniform um4_matrix represents rotation around the Y axis and translation along the Z axis. When the vertex shader completes processing every vertex in a mesh, then the mesh appears rotated and in perspective.

gl_Position = um4_pmatrix * um4_matrix * a_position;

Listing 46: Perspective Projection in the Vertex Shader

The book's perspective projection matrix applies operations to each vertex in a mesh, based on one point called the center of projection. The center of projection is similar to the artistic concept of a vanishing point. The center of projection represents a point far in the distance, where objects appear so small they seem to vanish.

Our perspective projection matrix generates a center of projection at the exact mid point of the canvas. The farther a vertex is from the viewport along the Z axis, the closer the vertex appears to the center of the canvas.

The following illustration demonstrates the center of projection with a cube. The vertices which outline the back of the cube, appear closer to the center of projection, than those vertices which outline the front face of the cube. The back face of the cube is smaller and farther right, than the front face of the cube. The top edge of the cube's right face angles downward toward the center of projection. The bottom edge of the cube's right face angles upward toward the center of projection.

Center of Projection

Diagram 17: Center of Projection

WebGL Beginner's Guide Introduction WebGL Beginner's Guide
Copyright © 2015 Seven Thunder Software. All Rights Reserved.