Home > Articles > Programming

This chapter is from the book

Moving, Rotating, and Scaling

Now that you understand the basics of drawing shapes like triangles and rectangles, let’s take another step and try to move (translate), rotate, and scale the triangle and display the results on the screen. These operations are called transformations (affine transformations). This section introduces some math to explain each transformation and help you to understand how each operation can be realized. However, when you write your own programs, you don’t need the math; instead, you can use one of several convenient libraries, explained in the next section, that handle the math for you.

If you find reading this section and in particular the math too much on first read, it’s okay to skip it and return later. Or, if you already know that transformations can be written using a matrix, you can skip this section as well.

First, let’s write a sample program, TranslatedTriangle, that moves a triangle 0.5 units to the right and 0.5 units up. You can use the triangle you drew in the previous section. The right direction means the positive direction of the x-axis, and the up direction means the positive direction of the y-axis. (See the coordinate system in Chapter 2.) Figure 3.18 shows TranslatedTriangle.

Figure 3.18

Figure 3.18 TranslatedTriangle

Translation

Let us examine what kind of operations you need to apply to each vertex coordinate of a shape to translate (move) the shape. Essentially, you just need to add a translation distance for each direction (x and y) to each component of the coordinates. Looking at Figure 3.19, the goal is to translate the point p (x, y, z) to the point p’ (x’, y’, z’), so the translation distance for the x, y, and z direction is Tx, Ty, and Tz, respectively. In this figure, Tz is 0.

To determine the coordinates of p’, you simply add the T values, as shown in Equation 3.1.

Equation 3.1

x’ = x + Tx

y’ = y + Ty

z’ = z + Tz

Figure 3.19

Figure 3.19 Calculating translation distances

These simple equations can be implemented in a WebGL program just by adding each constant value to each vertex coordinate. You’ve probably realized already that because they are a per-vertex operation, you need to implement the operations in a vertex shader. Conversely, they clearly aren’t a per-fragment operation, so you don’t need to worry about the fragment shader.

Once you understand this explanation, implementation is easy. You need to pass the translation distances Tx, Ty, and Tz to the vertex shader, apply Equation 3.1 using the distances, and then assign the result to gl_Position. Let’s look at a sample program that does this.

Sample Program (TranslatedTriangle.js)

Listing 3.4 shows TranslatedTriangle.js, in which the vertex shader is partially modified to carry out the translation operation. However, the fragment shader is the same as in HelloTriangle.js in the previous section. To support the modification to the vertex shader, some extra code is added to the main() function in the JavaScript.

Listing 3.4 TranslatedTriangle.js

 1 // TranslatedTriangle.js
 2 // Vertex shader program
 3 var VSHADER_SOURCE =
 4   'attribute vec4 a_Position;\n' +
 5   'uniform vec4 u_Translation;\n' +
 6   'void main() {\n' +
 7   '  gl_Position = a_Position + u_Translation;\n' +
 8   '}\n';
 9
10 // Fragment shader program
    ...
16 // The translation distance for x, y, and z direction
17 var Tx = 0.5, Ty = 0.5, Tz = 0.0;
18
19 function main() {
    ...
23   // Get the rendering context for WebGL
24   var gl = getWebGLContext(canvas);
    ...
30   // Initialize shaders
31   if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    ...
34  }
35
36   // Set the positions of vertices
37   var n = initVertexBuffers(gl);
    ...
43   // Pass the translation distance to the vertex shader
44   var u_Translation = gl.getUniformLocation(gl.program, 'u_Translation');
    ...
49   gl.uniform4f(u_Translation, Tx, Ty, Tz, 0.0);
50
51   // Set the color for clearing <canvas>
    ...
57   // Draw a triangle
58   gl.drawArrays(gl.TRIANGLES, 0, n);
59 }
60
61 function initVertexBuffers(gl) {
62   var vertices = new Float32Array([
63     0.0.0, 0.5,   -0.5, -0.5,   0.5, -0.5
64   ]);
65   var n = 3; // The number of vertices
    ...
90   return n;
93 }

First, let’s examine main() in JavaScript. Line 17 defines the variables for each translation distance of Equation 3.1:

17 var Tx = 0.5, Ty = 0.5, Tz = 0.0;

Because Tx, Ty, and Tz are fixed (uniform) values for all vertices, you use the uniform variable u_Translation to pass them to a vertex shader. Line 44 retrieves the storage location of the uniform variable, and line 49 assigns the data to the variable:

44 var u_Translation = gl.getUniformLocation(gl.program, 'u_Translation');
...
49 gl.uniform4f(u_Translation, Tx, Ty, Tz, 0.0);

Note that gl.uniform4f() requires a homogenous coordinate, so we supply a fourth argument (w) of 0.0. This will be explained in more detail later in this section.

Now, let’s take a look at the vertex shader that uses this translation data. As you can see, the uniform variable u_Translation in the shader, to which the translation distances are passed, is defined as type vec4 at line 5. This is because you want to add the components of u_Translation to the vertex coordinates passed to a_Position (as defined by Equation 3.1) and then assign the result to the variable gl_Position, which has type vec4. Remember, per Chapter 2, that the assignment operation in GLSL ES is only allowed between variables of the same types:

4   'attribute vec4 a_Position;\n' +
5   'uniform vec4 u_Translation;\n' +
6   'void main() {\n' +
7   '  gl_Position = a_Position + u_Translation;\n' +
8   '}\n';

After these preparations have been completed, the rest of tasks are straightforward. To calculate Equation 3.1 within the vertex shader, you just add each translation distance (Tx, Ty, Tz) passed in u_Translation to each vertex coordinate (x, y, z) passed in a_Position.

Because both variables are of type vec4, you can use the + operator, which will actually add the four components simultaneously (see Figure 3.20). This easy addition of vectors is a feature of GLSL ES and will be explained in more detail in Chapter 6.

Figure 3.20

Figure 3.20 Addition of vec4 variables

Now, we’ll return to the fourth element, (w), of the vector. As explained in Chapter 2, you need to specify the homogeneous coordinate to gl_Position, which is a four-dimensional coordinate. If the last component of the homogeneous coordinate is 1.0, the coordinate indicates the same position as the three-dimensional coordinate. In this case, because the last component is w1+w2 to ensure that w1+w2 is 1.0, you need to specify 0.0 to the value of w (the fourth parameter of gl.uniform4f()).

Finally, at line 58, gl.drawArrays(gl.TRIANGLES, 0, n) executes the vertex shader. For each execution, the following three steps are performed:

  1. Each vertex coordinate set is passed to a_Position.
  2. u_Translation is added to a_Position.
  3. The result is assigned to gl_Position.

Once executed, you’ve achieved your goal because each vertex coordinate set is modified (translated), and then the translated shape (in this case, a triangle) is displayed on the screen. If you now load TranslatedTriangle.html into your browser, you will see the translated triangle.

Now that you’ve mastered translation (moving), the next step is to look at rotation. The basic approach to realize rotation is the same as translation, requiring you to manipulate the vertex coordinates in the vertex shader.

Rotation

Rotation is a little more complex than translation because you have to specify multiple items of information. The following three items are required:

  • Rotation axis (the axis the shape will be rotated around)
  • Rotation direction (the direction: clockwise or counterclockwise)
  • Rotation angle (the number of degrees the shape will be rotated through)

In this section, to simplify the explanation, you can assume that the rotation is performed around the z-axis, in a counterclockwise direction, and for β degrees. You can use the same approach to implement other rotations around the x-axis or y-axis.

In the rotation, if β is positive, the rotation is performed in a counterclockwise direction around the rotation axis looking at the shape toward the negative direction of the z-axis (see Figure 3.21); this is called positive rotation. Just as for the coordinate system, your hand can define the direction of rotation. If you take your right hand and have your thumb follow the direction of the rotation axis, your fingers show the direction of rotation. This is called the right-hand-rule rotation. As we discussed in Chapter 2, it’s the default we are using for WebGL in this book.

Now let’s find the expression to calculate the rotation in the same way that you did for translation. As shown in Figure 3.22, we assume that the point p’ (x’, y’, z’) is the β degree rotated point of p (x, y, z) around the z-axis. Because the rotation is around the z-axis, the z coordinate does not change, and you can ignore it for now. The explanation is a little mathematical, so let’s take it a step at a time.

Figure 3.21

Figure 3.21Positive rotation around the z-axis

Figure 3.22

Figure 3.22 Calculating rotation around the z-axis

In Figure 3.22, r is the distance from the origin to the point p, and α is the rotation angle from the x-axis to the point. You can use these items of information to represent the coordinates of p, as shown in Equation 3.2.

Equation 3.2

x = r cos α

y = r sin α

Similarly, you can find the coordinate of p’ by using r, α, and β as follows:

x’ = r cos (α + β)

y’ = r sin (α + β)

Then you can use the addition theorem of trigonometric functions1 to get the following:

x’ = r (cos α cos β – sin α sin β)

y’ = r (sin α cos β + cos α sin β)

Finally, you get the following expressions (Equation 3.3) by assigning Equation 3.2 to the previous expressions and removing r and α.

Equation 3.3

x’ = x cos β – y sin β

y’ = x sin β + y cos β

z’ = z

So by passing the values of sin β and cos β to the vertex shader and then calculating Equation 3.3 in the shader, you get the coordinates of the rotated point. To calculate sin β and cos β, you can use the methods of the JavaScript Math object.

Let’s look at a sample program, RotatedTriangle, which rotates a triangle around the z-axis, in a counterclockwise direction, by 90 degrees. Figure 3.23 shows RotatedTriangle.

Figure 3.23

Figure 3.23 RotatedTriangle

cos(a ± b) = cos a cos b β sin a sin b

Sample Program (RotatedTriangle.js)

Listing 3.5 shows RotatedTriangle.js which, in a similar manner to TranslatedTriangle.js, modifies the vertex shader to carry out the rotation operation. The fragment shader is the same as in TranslatedTriangle.js and, as usual, is not shown. Again, to support the shader modification, several processing steps are added to main() in the JavaScript program. Additionally, Equation 3.3 is added in the comments from lines 4 to 6 to remind you of the calculation needed.

Listing 3.5 RotatedTriangle.js

 1   // RotatedTriangle.js
 2   // Vertex shader program
 3   var VSHADER_SOURCE =
 4    // x' = x cos b - y sin b
 5    // y' = x sin b + y cos b                             Equation 3.3
 6    // z' = z
 7    'attribute vec4 a_Position;\n' +
 8    'uniform float u_CosB, u_SinB;\n' +
 9    'void main() {\n' +
10   '  gl_Position.x = a_Position.x * u_CosB - a_Position.y *u_SinB;\n'+
11  '  gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;\n'+
12   '  gl_Position.z = a_Position.z;\n' +
13   '  gl_Position.w = 1.0;\n' +
14   '}\n';
15
16   // Fragment shader program
      ...
22   // Rotation angle
23   var ANGLE = 90.0;
24
25   function main() {
        ...
42      // Set the positions of vertices
43      var n = initVertexBuffers(gl);
         ...
49      // Pass the data required to rotate the shape to the vertex shader
50      var radian = Math.PI * ANGLE / 180.0; // Convert to radians
51      var cosB = Math.cos(radian);
52      var sinB = Math.sin(radian);
53
54      var u_CosB = gl.getUniformLocation(gl.program, 'u_CosB');
55      var u_SinB = gl.getUniformLocation(gl.program, 'u_SinB');
         ...
60   gl.uniform1f(u_CosB, cosB);
61   gl.uniform1f(u_SinB, sinB);
62
63      // Set the color for clearing <canvas>
         ...
69      // Draw a triangle
70      gl.drawArrays(gl.TRIANGLES, 0, n);
71   }
72
73   function initVertexBuffers(gl) {
74      var vertices = new Float32Array([
75        0.0, 0.5,  -0.5, -0.5,  0.5, -0.5
76      ]);
77      var n = 3; // The number of vertices
         ...
105      return n;
106   }

Let’s look at the vertex shader, which is straightforward:

 2   // Vertex shader program
 3   var VSHADER_SOURCE =
 4    // x' = x cos b - y sin b
 5    // y' = x sin b + y cos b
 6    // z' = z
 7    'attribute vec4 a_Position;\n' +
 8    'uniform float u_CosB, u_SinB;\n' +
 9    'void main() {\n' +
10   '  gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;\n'+
11   '  gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;\n'+
12   '  gl_Position.z = a_Position.z;\n' +
13   '  gl_Position.w = 1.0;\n' +
14   '}\n';

Because the goal is to rotate the triangle by 90 degrees, the sine and cosine of 90 need to be calculated. Line 8 defines two uniform variables for receiving these values, which are calculated in the JavaScript program and then passed to the vertex shader.

You could pass the rotation angle to the vertex shader and then calculate the values of sine and cosine in the shader. However, because they are identical for all vertices, it is more efficient to do it once in the JavaScript.

The name of these uniform variables, u_CosB and u_SinB, are defined following the naming rule used throughout this book. As you will remember, you use the uniform variable because the values of these variables are uniform (unchanging) per vertex.

As in the previous sample programs, x, y, z, and w are passed in a group to the attribute variable a_Position in the vertex shader. To apply Equation 3.3 to x, y, and z, you need to access each component in a_Position separately. You can do this easily using the. operator, such as a_Position.x, a_Position.y, and a_Position.z (see Figure 3.24 and Chapter 6).

Figure 3.24

Figure 3.24 Access methods for each component in a vec4

Handily, you can use the same operator to access each component in gl_Position to which the vertex coordinate is written, so you can calculate x’ = x cos β – y sin β from Equation 3.3 as shown at line 10:

10   '  gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;\n'+

Similarly, you can calculate y’ as follows:

11   '  gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;\n'+

According to Equation 3.3, you just need to assign the original z coordinate to z’ directly at line 12. Finally, you need to assign 1.0 to the last component w2:

12   '  gl_Position.z = a_Position.z;\n' +
13   '  gl_Position.w = 1.0;\n' +

Now look at main() in the JavaScript code, which starts from line 25. This code is mostly the same as in TranslatedTriangle.js. The only difference is passing cos β and sin β to the vertex shader. To calculate the sine and cosine of β, you can use the JavaScript Math.sin() and Math.cos() methods. However, these methods expect parameters in radians, not degrees, so you need to convert from degrees to radians by multiplying the number of degrees by pi and then dividing by 180. You can utilize Math.PI as the value of pi as shown at line 50, where the variable ANGLE is defined as 90 (degrees) at line 23:

50 var radian = Math.PI * ANGLE / 180.0; // Converts degrees to radians

Once you have the angle in radians, lines 51 and 52 calculate cos β and sin β, and then lines 60 and 61 pass them to the uniform variables in the vertex shader:

51   var cosB = Math.cos(radian);
52   var sinB = Math.sin(radian);
53
54   var u_CosB = gl.getUniformLocation(gl.program, 'u_CosB');
55   var u_SinB = gl.getUniformLocation(gl.program, 'u_SinB');
...
60   gl.uniform1f(u_CosB, cosB);
61   gl.uniform1f(u_SinB, sinB);

When you load this program into your browser, you can see the triangle, rotated through 90 degrees, on the screen. If you specify a negative value to ANGLE, you can rotate the triangle in the opposite direction (clockwise). You can also use the same equation. For example, to rotate the triangle in the clockwise direction, you can specify –90 instead of 90 at line 23, and Math.cos() and Math.sin() will deal with the remaining tasks for you.

For those of you concerned with speed and efficiency, the approach taken here (using two uniform variables to pass the values of cos β and sin β) isn’t optimal. To pass the values as a group, you can define the uniform variable as follows:

uniform vec2 u_CosBSinB;

and then pass the values by:

gl.uniform2f(u_CosBSinB,cosB, sinB);

Then in the vertex shader, you can access them using u_CosBSinB.x and u_CosBSinB.y.

Transformation Matrix: Rotation

For simple transformations, you can use mathematical expressions. However, as your needs become more complex, you’ll quickly find that applying a series of equations becomes quite complex. For example a “translation after rotation” as shown in Figure 3.25 can be realized by using Equations 3.1 and 3.3 to find the new mathematical expressions for the transformation and then implementing them in a vertex shader.

Figure 3.25

Figure 3.25 Rotate first and then translate a triangle

However, it is time consuming to determine the mathematical expressions every time you need a new set of transformation and then implement them in a vertex shader. Fortunately, there is another tool in the mathematical toolbox, the transformation matrix, which is excellent for manipulating computer graphics.

As shown in Figure 3.26, a matrix is a rectangular array of numbers arranged in rows (in the horizontal direction) and columns (in the vertical direction). This notation makes it easy to write the calculations explained in the previous sections. The brackets indicate that these numbers are a group.

Figure 3.26

Figure 3.26 Example of a matrix

Before explaining the details of how to use a transformation matrix to replace the equations used here, you need to make sure you understand the multiplication of a matrix and a vector. A vector is an object represented by an n-tuple of numbers, such as the vertex coordinates (0.0, 0.5, 1.0).

The multiplication of a matrix and a vector can be written as shown in Equation 3.4. (Although the multiply operator × is often omitted, we explicitly write the operator in this book for clarity.) Here, our new vector (on the left) is the result of multiplying a matrix (in the center) by our original vector (on the right). Note that matrix multiplication is noncommutative. In other words, A × B is not the same as B × A. We discuss this further in Chapter 6.

Equation 3.4

03equ01.jpg

This matrix has three rows and three columns and is called a 3×3 matrix. The rightmost part of the equation is a vector composed of x, y, and z. (In the case of a multiplication of a matrix and vector, the vector is written vertically, but it has the same meaning as when it is written horizontally.) This vector has three elements, so it is called a three-dimensional vector. Again, the brackets on both sides of the array of numbers (vector) are also just notation for recognizing that these numbers are a group.

In this case, x’, y’, and z’ are defined using the elements of the matrix and the vector, as shown by Equation 3.5. Note that the multiplication of a matrix and vector can be defined only if the number of columns in a matrix matches the number of rows in a vector.

Equation 3.5

x’ = ax + by + cz

y’ = dx + ey + fz

z’ = gx + hy + iz

Now, to understand how to use a matrix instead of our original equations, let’s compare the matrix equations and Equation 3.3 (shown again as Equation 3.6).

Equation 3.6

x’ = x cos β – y sin β

y’ = x sin β + y cos β

z’ = z

For example, compare the equation for x’:

x’ = ax + by + cz

x’ = x cos β – y sin β

In this case, if you set a = cos β, b = -sin β, and c = 0, the equations become the same. Similarly, let us compare the equation for y’:

y’ = dx + ey + fz

y’ = x sin β + y cos β

In this case, if you set d = sin β, e = cos β, and f = 0, you get the same equation. The last equation about z’ is easy. If you set g = 0, h = 0, and i = 1, you get the same equation.

Then, by assigning these results to Equation 3.4, you get Equation 3.7.

Equation 3.7

03equ02.jpg

This matrix is called a transformation matrix because it “transforms” the right-side vector (x, y, z) to the left-side vector (x’, y’, z’). The transformation matrix representing a rotation is called a rotation matrix.

You can see that the elements of the matrix in Equation 3.7 are an array of coefficients in Equation 3.6. Once you become accustomed to matrix notation, it is easier to write and use matrices than to have to deal with a set of transformation equations.

As you would expect, because matrices are used so often in 3DCG, multiplication of a matrix and a vector is easy to implement in shaders. However, before exploring how, let’s quickly look at other types of transformation matrices, and then we will start to use them in shaders.

Transformation Matrix: Translation

Obviously, if we can use a transformation matrix to represent a rotation, we should be able to use it for other types of transformation, such as translation. For example, let us compare the equation for x’ in Equation 3.1 to that in Equation 3.5 as follows:

x’ = ax + by + cz - - - from Equation (3.5)

x’ = x + Tx - - - from Equation (3.1)

Here, the second equation has the constant term Tx, but the first one does not, meaning that you cannot deal with the second one by using the 3×3 matrix of the first equation. To solve this problem, you can use a 4×4 matrix and the fourth components of the coordinate, which are set to 1 to introduce the constant terms. That is to say, we assume that the coordinates of point p are (x, y, z, 1), and the coordinates of the translated point p (p’) are (x’, y’, z’, 1). This gives us Equation 3.8.

Equation 3.8

03equ03.jpg

This multiplication is defined as follows:

Equation 3.9

x’ = ax + by + cz +d

y’ = ex + fy + gz + h

z’ = ix + jy + kz + l

1 = mx + ny + oz+ p

From the equation1 = mx + ny + oz + p, it is easy to find that the coefficients are m = 0, n = 0, o = 0, and p = 1. In addition, these equations have the constant terms d, h, and l, which look helpful to deal with Equation 3.1 because it also has constant terms. Let us compare Equation 3.9 and Equation 3.1 (translation), which is reproduced again:

x’ = x + Tx

y’ = y + Ty

z’ = z + Tz

When you compare the x’ component of both equations, you can see that a=1, b=0, c=0, and d=Tx. Similarly, when comparing y’ from both equations, you find e = 0, f = 1, g = 0, and h = Ty; when comparing z’ you see i=0, j=0, k=1, and l=Tz. You can use these results to write a matrix that represents a translation, called a translation matrix, as shown in Equation 3.10.

Equation 3.10

03equ04.jpg

Rotation Matrix, Again

At this stage you have successfully created a rotation and a translation matrix, which are equivalent to the two equations you used in the example programs earlier. The final step is to combine these two matrices; however, the rotation matrix (3×3 matrix) and transformation matrix (4×4 matrix) have different numbers of elements. Unfortunately, you cannot combine matrices of different sizes, so you need a mechanism to make them the same size.

To do that, you need to change the rotation matrix (3×3 matrix) into a 4×4 matrix. This is straightforward and requires you to find the coefficient of each equation in Equation 3.9 by comparing it with Equation 3.3. The following shows both equations:

x’ = x cos β – y sin β

y’ = x sin β + y cos β

z’ = z

x’ = ax + by + cz + d

y’ = ex + fy + gz + h

z’ = ix + iy + kz + l

1 = mx + ny + oz + p

For example, when you compare x’ = x cos β – y sin β with x’ = ax + by + cz +d, you find a = cos β, b = –sin β, c = 0, and d = 0. In the same way, after comparing in terms of y and z, you get the rotation matrix shown in Equation 3.11:

Equation 3.11

03equ05.jpg

This allows you to represent both a rotation matrix and translation matrix in the same 4×4 matrix, achieving the original goal!

Sample Program (RotatedTriangle_Matrix.js)

Having constructed a 4×4 rotation matrix, let’s go ahead and use this matrix in a WebGL program by rewriting the sample program RotatedTriangle, which rotates a triangle 90 degrees around the z-axis in a counterclockwise direction, using the rotation matrix. Listing 3.6 shows RotatedTriangle_Matrix.js, whose output will be the same as Figure 3.23 shown earlier.

Listing 3.6 RotatedTriangle_Matrix.js

 1  // RotatedTriangle_Matrix.js
 2  // Vertex shader program
 3  var VSHADER_SOURCE =
 4    'attribute vec4 a_Position;\n' +
 5    'uniform mat4 u_xformMatrix;\n' +
 6    'void main() {\n' +
 7    '  gl_Position = u_xformMatrix * a_Position;\n' +
 8    '}\n';
 9
10  // Fragment shader program
     ...
16  // Rotation angle
17  var ANGLE = 90.0;
18
19  function main() {
      ...
36    // Set the positions of vertices
37    var n = initVertexBuffers(gl);
      ...
43    // Create a rotation matrix
44    var radian = Math.PI * ANGLE / 180.0; // Convert to radians
45    var cosB = Math.cos(radian), sinB = Math.sin(radian);
46
47     // Note: WebGL is column major order
48    var xformMatrix = new Float32Array([
49       cosB, sinB, 0.0, 0.0,
50       -sinB, cosB, 0.0, 0.0,
51       0.0, 0.0, 1.0, 0.0,
52       0.0, 0.0, 0.0, 1.0
53    ]);
54
55    // Pass the rotation matrix to the vertex shader
56     var u_xformMatrix = gl.getUniformLocation(gl.program, 'u_xformMatrix');
       ...
61    gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);
62
63    // Set the color for clearing <canvas>
      ...
69    // Draw a triangle
70    gl.drawArrays(gl.TRIANGLES, 0, n);
71  }
72
73  function initVertexBuffers(gl) {
74    var vertices = new Float32Array([
75      0.0, 0.5, -0.5, -0.5, 0.5, -0.5
76    ]);
77    var n = 3; // Number of vertices
      ...
105   return n;
106  }

First, let us examine the vertex shader:

2  // Vertex shader program
3  var VSHADER_SOURCE =
4    'attribute vec4 a_Position;\n' +
5    'uniform mat4 u_xformMatrix;\n' +
6    'void main() {\n' +
7    '  gl_Position = u_xformMatrix * a_Position;\n' +
8    '}\n';

At line 7, u_xformMatrix, containing the rotation matrix described in Equation 3.11, and a_Position, containing the vertex coordinates (this is the right-side vector in Equation 3.11), are multiplied, literally implementing Equation 3.11.

In the sample program TranslatedTriangle, you were able to implement the addition of two vectors in one line (gl_Position = a_Position + u_Translation). In the same way, a multiplication of a matrix and vector can be written in one line in GLSL ES. This is convenient, allowing the calculation of the four equations (Equation 3.9) in one line. Again, this shows how GLSL ES has been designed specifically for 3D computer graphics by supporting powerful operations like this.

Because the transformation matrix is a 4×4 matrix and GLSL ES requires the data type for all variables, line 5 declares u_xformMatrix as type mat4. As you would expect, mat4 is a data type specifically for holding a 4×4 matrix.

Within the main JavaScript program, the rest of the changes just calculate the rotation matrix from Equation 3.11 and then pass it to u_xformMatrix. This part starts from line 44:

43   // Create a rotation matrix
44   var radian = Math.PI * ANGLE / 180.0; // Convert to radians
45   var cosB = Math.cos(radian), sinB = Math.sin(radian);
46
47   // Note: WebGL is column major order
48   var xformMatrix = new Float32Array([
49      cosB, sinB, 0.0, 0.0,
50     -sinB, cosB, 0.0, 0.0,
51       0.0, 0.0, 1.0, 0.0,
52       0.0, 0.0, 0.0, 1.0
53   ]);
54
55   // Pass the rotation matrix to the vertex shader
    ...
61   gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);

Lines 44 and 45 calculate the values of cosine and sine, which are required in the rotation matrix. Then line 48 creates the matrix xformMatrix using a Float32Array. Unlike GLSL ES, because JavaScript does not have a dedicated object for representing a matrix, you need to use the Float32Array. One question that arises is in which order you should store the elements of the matrix (which is arranged in rows and columns) in the elements of the array (which is arranged in a line). There are two possible orders: row major order and column major order (see Figure 3.27).

Figure 3.27

Figure 3.27 Row major order and column major order

WebGL, just like OpenGL, requires you to store the elements of a matrix in the elements of an array in column major order. So, for example, the matrix shown in Figure 3.27 is stored in an array as follows: [a, e, i, m, b, f, j, n, c, g, k, o, d, h, l, p]. In the sample program, the rotation matrix is stored in the Float32Array in this order in lines 49 to 52.

The array created is then passed to the uniform variable u_xformMatrix by using gl.uniformMatrix4fv() at line 61. Note that the last letter of this method name is v, which indicates that the method can pass multiple data values to the variable.

gl.uniformMatrix4fv (location, transpose, array)

Assign the 4×4 matrix specified by array to the uniform variable specified by location.

Parameters

location

Specifies the storage location of the uniform variable.

Transpose

Must be false in WebGL.3

array

Specifies an array containing a 4×4 matrix in column major order (typed array).

Return value

None

Errors

INVALID_OPERATION

There is no current program object.

INVALID_VALUE

transpose is not false, or the length of array is less than 16.

If you load and run the sample program in your browser, you’ll see the rotated triangle. Congratulations! You have successfully learned how to use a transformation matrix to rotate a triangle.

Reusing the Same Approach for Translation

Now, as you have seen with Equations 3.10 and 3.11, you can represent both a translation and a rotation using the same type of 4×4 matrix. Both equations use the matrices in the form <new coordinates> = <transformation matrix> * <original coordinates>. This is coded in the vertex shader as follows:

7   '   gl_Position = u_xformMatrix * a_Position;\n' +

This means that if you change the elements of the array xformMatrix from those of a rotation matrix to those of a translation matrix, you will be able to apply the translation matrix to the triangle to achieve the same result as shown earlier but which used an equation (Figure 3.18).

To do that, change line 17 in RotatedTriangle_Matrix.js using the translation distances from the previous example:

17   varTx = 0.5, Ty = 0.5, Tz = 0.0;

You need to rewrite the code for creating the matrix, remembering that you need to store the elements of the matrix in column major order. Let’s keep the same name for the array variable, xformMatrix, even though it’s now being used to hold a translation matrix, because it reinforces the fact that we are using essentially the same code. Finally, you are not using the variable ANGLE, so lines 43 to 45 are commented out:

43   // Create a rotation matrix
44   // var radian = Math.PI * ANGLE / 180.0; // Convert to radians
45   // var cosB = Math.cos(radian), sinB = Math.sin(radian);
46
47    // Note: WebGL is column major order
48    var xformMatrix = new Float32Array([
49       1.0, 0.0, 0.0, 0.0,
50       0.0, 1.0, 0.0, 0.0,
51       0.0, 0.0, 1.0, 0.0,
52       Tx, Ty, Tz, 1.0
53    ]);

Once you’ve made the changes, run the modified program, and you will see the same output as shown in Figure 3.18. By using a transformation matrix, you can apply various transformations using the same vertex shader. This is why the transformation matrix is such a convenient and powerful tool for 3D graphics, and it’s why we’ve covered it in detail in this chapter.

Transformation Matrix: Scaling

Finally, let’s define the transformation matrix for scaling using the same assumption that the original point is p and the point after scaling is p’.

Figure 3.28

Figure 3.28 A scaling transformation

Assuming the scaling factor for the x-axis, y-axis, and z-axis is Sx, Sy, and Sz respectively, you obtain the following equations:

x’ = Sx × x

y’ = Sy × y

z’ = Sz × z

The following transformation matrix can be obtained by comparing these equations with Equation 3.9.

03equ06.jpg

As with the previous example, if you store this matrix in xformMatrix, you can scale the triangle by using the same vertex shader you used in RotatedTriangle_Matrix.js. For example, the following sample program will scale the triangle by a factor of 1.5 in a vertical direction, as shown in Figure 3.29:

17   varSx = 1.0, Sy = 1.5, Sz = 1.0;
      ...
47     // Note: WebGL is column major order
48     var xformMatrix = new Float32Array([
49        Sx, 0.0, 0.0, 0.0,
50        0.0, Sy, 0.0, 0.0,
51        0.0, 0.0, Sz, 0.0,
52        0.0, 0.0, 0.0, 1.0
53     ]
Figure 3.29

Figure 3.29 Triangle scaled in a vertical direction

Note that if you specify 0.0 to Sx, Sy, or Sz, the scaled size will be 0.0. If you want to keep the original size, specify 1.0 as the scaling factor.

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites, develop new products and services, conduct educational research and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email information@informit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by InformIT. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.informit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020