Graphics CSCI 343, Fall 2017 Lecture 13 More on WebGL

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!

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

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.

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 =

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.

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);

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 ) ];

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);

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 ); }

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]); }