Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science Laboratory University of New Mexico
WebGL Transformations Ed Angel Professor Emeritus of Computer Science University of New Mexico 2
Objectives Learn how to carry out transformations in WebGL - Rotation - Translation - Scaling Introduce MV.js transformations - Model-view - Projection 3
Pre 3. OpenGL Matrices In Pre 3. OpenGL matrices were part of the state Multiple types - Model-View (GL_MODELVIEW) - Projection (GL_PROJECTION) - Texture (GL_TEXTURE) - Color(GL_COLOR) Single set of functions for manipulation Select which to manipulated by - glmatrixmode(gl_modelview); - glmatrixmode(gl_projection); 4
Why Deprecation Functions were based on carrying out the operations on the CPU as part of the fixed function pipeline Current model-view and projection matrices were automatically applied to all vertices using CPU We will use the notion of a current transformation matrix with the understanding that it may be applied in the shaders 5
Current Transformation Matrix (CTM) Conceptually there is a 4 x 4 homogeneous coordinate matrix, the current transformation matrix (CTM) that is part of the state and is applied to all vertices that pass down the pipeline The CTM is defined in the user program and loaded into a transformation unit vertices p C CTM p =Cp vertices 6
CTM operations The CTM can be altered either by loading a new CTM or by postmutiplication Load an identity matrix: C I Load an arbitrary matrix: C M Load a translation matrix: C T Load a rotation matrix: C R Load a scaling matrix: C S Postmultiply by an arbitrary matrix: C CM Postmultiply by a translation matrix: C CT Postmultiply by a rotation matrix: C C R Postmultiply by a scaling matrix: C C S 7
Rotation about a Fixed Point Start with identity matrix: C I Move fixed point to origin: C CT Rotate: C CR Move fixed point back: C CT - Result: C = TR T which is backwards. This result is a consequence of doing postmultiplications. Let s try again. 8
Reversing the Order We want C = T R T so we must do the operations in the following order C I C CT - C CR C CT Each operation corresponds to one function call in the program. Note that the last operation specified is the first executed in the program 9
CTM in WebGL OpenGL had a model-view and a projection matrix in the pipeline which were concatenated together to form the CTM We will emulate this process 0
Using the ModelView Matrix In WebGL, the model-view matrix is used to - Position the camera Can be done by rotations and translations but is often easier to use the lookat function in MV.js - Build models of objects The projection matrix is used to define the view volume and to select a camera lens Although these matrices are no longer part of the OpenGL state, it is usually a good strategy to create them in our own applications q = P*MV*p
Rotation, Translation, Scaling Create an identity matrix: var m = mat4(); Multiply on right by rotation matrix of theta in degrees where (vx, vy, vz) define axis of rotation var r = rotate(theta, vx, vy, vz) m = mult(m, r); Also have rotatex, rotatey, rotatez Do same with translation and scaling: var s = scale( sx, sy, sz) var t = translate(dx, dy, dz); m = mult(s, t); 2
Example Rotation about z axis by 30 degrees with a fixed point of (.0, 2.0, 3.0) var m = mult(translate(.0, 2.0, 3.0), rotate(30.0, 0.0, 0.0,.0)); m = mult(m, translate(-.0, -2.0, -3.0)); Remember that last matrix specified in the program is the first applied 3
Arbitrary Matrices Can load and multiply by matrices defined in the application program Matrices are stored as one dimensional array of 6 elements by MV.js but can be treated as 4 x 4 matrices in row major order OpenGL wants column major data gl.unifrommatrix4f has a parameter for automatic transpose by it must be set to false. flatten function converts to column major order which is required by WebGL functions 4
Matrix Stacks In many situations we want to save transformation matrices for use later - Traversing hierarchical data structures (Chapter 9) Pre 3. OpenGL maintained stacks for each type of matrix Easy to create the same functionality in JS - push and pop are part of Array object var stack = [ ] stack.push(modelviewmatrix); modelviewmatrix = stack.pop(); 5