WebGL Textures & Vertices

Beginner's Guide

Page Fifty One

Matrix Translation

The last row of the matrix provides translation along the X, Y, and Z axes. The term translation applies to movement. Translation along the X axis moves vertices left or right. Translation along the Y axis moves vertices up or down. Translation along the Z axis moves vertices toward the viewport or away from the viewport. In other words, modify values in the last row to move entities with a matrix. The first column translates along the X axis. The second column translates along the Y axis. The third column translates along the Z axis. The following diagram shows translation axes in a matrix. Entries Tx, Ty and Tz identify cells useful to move an entity along an axis.

Matrix Translation

Diagram 14: Matrix Translation

Default Matrix for Each Entity

The GLEntity class provided with the book, includes a property named matrix. The matrix assigns default values to every entry, except the Z translation cell.

The book's examples arrange vertices centered around the origin at (0.0,0.0,0.0). For every vertex within a 2 dimensional mesh, the Z coordinate equals 0.0. For example the Lighthouse Texture Map project, stretches the image of a lighthouse across a 2D square plane. The coordinates for X and Y change for each vertex, however the Z coordinate always equals 0.0. The mesh would not display, if rendered without translation. 0.0 places the mesh directly on the viewport.

The default GLEntity matrix accessed within the vertex shader, moves each mesh away from the viewport. Negative values along the Z axis cause elements to appear farther from the view screen. Every entity begins 4 units away from the view screen, along the Z axis. The following graphic shows values supplied to the GLEntity default matrix property.

Entity Matrix

Diagram 15: GLEntity Default matrix Property

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