1. Graphics CSCI 343, Fall 2017 Lecture 13 More on WebGL

2. Concatenation of Transformations
Suppose you want to:
Scale an object
Rotate the object
Translate the object
For each vertex, we apply a series of transformations:
P1 = SP
P2 = RP1 = RSP
P3 = TP2 = TRSP
For efficiency, we create a new matrix, M = TRS.
Each new point can be computed directly as P3 = MP
Note: Matrix multiplication is not commutative. Order Matters!

3. Example Transformations: Double the height
Rotate by 90 deg clockwise about the Z axis
Translate horizontally by

4. Transformations in WebGL
Ways to perform transformations:
Create your own “current transformation matrix” (ctm):
Compute transformation in advance.
Enter matrix into an array (in column major order). OR
Use the transformation functions provided in MV.js
1. Multiply the ctm by each transformation matrix in reverse order.
In both cases A and B, next:
Pass the ctm to the vertex shader.
Draw object.
In the vertex shader, multiply each vertex by the ctm.

5. Precomputing a matrix
Example: Scale by 2 in both the x and y directions, then translate vertically by 0.2. P1 P1
Not drawn to scale P3 P2 P3 P2
M =

6. Representing a matrix in WebGL
A matrix is stored as a 16 element array in column major order.
The flatten( ) function in MV.js converts to column major order.

7. Example Code //Scale by 2.0 in x and y directions and
//Move up 0.2 units in y direction
mvMatrix = mat4(2.0, 0.0, 0.0, 0.0,
0.0, 2.0, 0.0, 0.2,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0);
gl.uniformMatrix4fv(modelView, false, flatten(mvMatrix) );
gl.drawArrays(gl.LINE_LOOP, 0, 3);

8. Drawing in 3D Drawing in 3D is the same as 2D, but we use 3D points.
Example:
//Vertices of a cube
var vertices = [
vec3( -0.5, -0.5, 0.5 ),
vec3( -0.5, 0.5, 0.5 ),
vec3( 0.5, 0.5, 0.5 ),
vec3( 0.5, -0.5, 0.5 ),
vec3( -0.5, -0.5, -0.5 ),
vec3( -0.5, 0.5, -0.5 ),
vec3( 0.5, 0.5, -0.5 ),
vec3( 0.5, -0.5, -0.5 ) ];

9. Hidden Surface Removal
If you don't use a mechanism to remove hidden surfaces, then the last surface drawn will be the one that's seen, even if it is behind other surfaces.
To remove hidden surfaces:
In init( ):
gl.enable(gl.DEPTH_TEST);
In render( ):
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

10. colorCube( ) function function colorCube() {
//quad takes 4 parameters indicating which vertices
//to use to make a square
quad( 1, 0, 3, 2 );
quad( 2, 3, 7, 6 );
quad( 3, 0, 4, 7 );
quad( 6, 5, 1, 2 );
quad( 4, 5, 6, 7 );
quad( 5, 4, 0, 1 ); }

11. quad( ) function quad(a, b, c, d) {
//Specify vertex array and color array here …
//order to use with gl.TRIANGLES
var indices = [ a, b, c, a, c, d ];
for ( var i = 0; i < indices.length; ++i ) {
points.push( vertices[indices[i]] );
colors.push( vertexColors[indices[i]] );
//for solid colors use:
//colors.push(vertexColors[a]); }