1. User Input and Animation

2. For Further Reading Angel 7 th Ed: –Chapter 3: Input and Animation. –Chapter 4: Rotation and other transformation. Beginning WebGL: –Chapter 1: Animation and Model Movement. 2

3. Example 2 from Last Week

4. Triangle with Per-Vertex Color (HTML code)HTML code attribute vec4 vPosition; attribute vec4 vColor; varying vec4 fColor; void main() { fColor = vColor; gl_Position = vPosition; } precision mediump float; varying vec4 fColor; // Note that this will be interpolated... void main() { gl_FragColor = fColor; }

5. Triangle with Per-Vertex Color (JavaScript code)JavaScript code window.onload = function init() { var canvas = document.getElementById( "gl-canvas" ); gl = WebGLUtils.setupWebGL( canvas ); if ( !gl ) { alert( "WebGL isn't available" ); } // Three Vertices var vertices = [ vec3( -1, -1, 0 ), vec3( 0, 1, 0 ), vec3( 1, -1, 0 ) ]; var colors = [ vec3( 1, 0, 0 ), vec3( 0, 1, 0 ), vec3( 0, 0, 1 ) ];

6. (Nothing New Here) // // Configure WebGL // gl.viewport( 0, 0, canvas.width, canvas.height ); gl.clearColor( 1.0, 1.0, 1.0, 1.0 ); // Load shaders and initialize attribute buffers var program = initShaders( gl, "vertex-shader", "fragment-shader" ); gl.useProgram( program ); // Load the data into the GPU var bufferId = gl.createBuffer(); gl.bindBuffer( gl.ARRAY_BUFFER, bufferId ); gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );

7. // Associate our shader variables with our data buffer var vPosition = gl.getAttribLocation( program, "vPosition" ); gl.vertexAttribPointer( vPosition, 3, gl.FLOAT, false, 0, 0 ); gl.enableVertexAttribArray( vPosition ); // Repeat the above process for the color attributes of the vertices. var cBufferId = gl.createBuffer(); gl.bindBuffer( gl.ARRAY_BUFFER, cBufferId ); gl.bufferData( gl.ARRAY_BUFFER, flatten(colors), gl.STATIC_DRAW ); var vColor = gl.getAttribLocation( program, "vColor" ); gl.vertexAttribPointer( vColor, 3, gl.FLOAT, false, 0, 0 ); gl.enableVertexAttribArray( vColor ); render(); };

8. Homework #1 Draw at least two triangles with per-vertex colors. 8

9. What are Still Missing? 3D data, but still 2D look. Can we move the object? –How to draw it many time?  animation! –How to move it?  transformation! –How to control it?  user input! 9

10. Example 1: Rotating Triangle Rotated along the X axis:

11. Rotating Triangle (HTML code)HTML code attribute vec4 vPosition; attribute vec4 vColor; varying vec4 fColor; uniform mat4 rotate; void main() { fColor = vColor; gl_Position = rotate * vPosition; }

12. Oops... your browser doesn't support the HTML5 canvas element Rotate X Rotate Y Rotate Z

13. Notice! The rotation is done with the matrix in “uniform mat4 rotate” in the vertex shader. Buttons are added to the HTML element. What do we need to change in JS? –To set up the matrix –To handle the button inputs 13

14. Rotating Triangle (JavaScript code)JavaScript code var xAxis = 0; var yAxis = 1; var zAxis = 2; var axis = 0; var theta = [ 0, 0, 0 ]; var matrixLoc; var rotateMatrix = mat4();... matrixLoc = gl.getUniformLocation(program, "rotate"); //event listeners for buttons document.getElementById( "xButton" ).onclick = rotateX; document.getElementById( "yButton" ).onclick = rotateY; document.getElementById( "zButton" ).onclick = rotateZ; render();

15. function rotateX() { axis = xAxis; }; function rotateY() {... function render() { gl.clear( gl.COLOR_BUFFER_BIT ); theta[axis] += 2.0; rotateMatrix = mult(rotate(theta[xAxis], 1, 0, 0), mult(rotate(theta[yAxis], 0, 1, 0), rotate(theta[zAxis], 0, 0, 1) )); gl.uniformMatrix4fv(matrixLoc, 0, flatten(rotateMatrix)); gl.drawArrays( gl.TRIANGLES, 0, 3 ); requestAnimFrame( render ); }

16. Summary HTML5 Add event listener: document.getElementById( ).onclick Call requestAnimFrame( ) after drawing Use a uniform matrix in the vertex shader. 16

17. Lab Time! Add a “Pause” button to stop/start the rotation. Hint: Use a Boolean variable to control the change of theta[axis]. 17

18. Transformations

19. 19 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Vectors Physical definition: a vector is a quantity with two attributes ­Direction ­Magnitude Examples include ­Force ­Velocity ­Directed line segments Most important example for graphics Can map to other types v

20. 20 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Vector Operations Every vector has an inverse ­Same magnitude but points in opposite direction Every vector can be multiplied by a scalar There is a zero vector ­Zero magnitude, undefined orientation The sum of any two vectors is a vector ­Use head-to-tail axiom v -v vv v u w

21. 21 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Linear Vector Spaces Mathematical system for manipulating vectors Operations ­Scalar-vector multiplication u =  v ­Vector-vector addition: w = u + v Expressions such as v=u+2w-3r Make sense in a vector space

22. 22 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Coordinate Systems Consider a basis v 1, v 2,…., v n A vector is written v=  1 v 1 +  2 v 2 +….+  n v n The list of scalars {  1,  2, ….  n } is the representation of v with respect to the given basis We can write the representation as a row or column array of scalars a=[  1  2 ….  n ] T =

23. 23 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Example V=2v1+3v2-4v3 A=[2 3 –4] Note that this representation is with respect to a particular basis For example, in OpenGL we start by representing vectors using the world basis but later the system needs a representation in terms of the camera or eye basis

24. 24 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Coordinate Systems Which is correct? Both are because vectors have no fixed location v v

25. 25 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Frames Coordinate System is insufficient to present points If we work in an affine space we can add a single point, the origin, to the basis vectors to form a frame P0P0 v1v1 v2v2 v3v3

26. 26 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Frame determined by (P 0, v 1, v 2, v 3 ) Within this frame, every vector can be written as v=  1 v 1 +  2 v 2 +….+  n v n Every point can be written as P = P 0 +  1 v 1 +  2 v 2 +….+  n v n

27. 27 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Confusing Points and Vectors Consider the point and the vector P = P 0 +  1 v 1 +  2 v 2 +….+  n v n v=  1 v 1 +  2 v 2 +….+  n v n They appear to have the similar representations p=[  1  2  3 ] v=[  1  2  3 ] which confuse the point with the vector A vector has no position v p v can place anywhere fixed

28. 28 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 A Single Representation If we define 0P = 0 and 1P =P then we can write v=  1 v 1 +  2 v 2 +  3 v 3 = [  1  2  3 0 ] [v 1 v 2 v 3 P 0 ] T P = P 0 +  1 v 1 +  2 v 2 +  3 v 3 = [  1  2  3 1 ] [v 1 v 2 v 3 P 0 ] T Thus we obtain the four-dimensional homogeneous coordinate representation v = [  1  2  3 0 ] T p = [  1  2  3 1 ] T

29. 29 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Homogeneous Coordinates The general form of four dimensional homogeneous coordinates is p=[x y z w] T We return to a three dimensional point (for w  0 ) by x  x/w y  y/w z  z/w If w=0, the representation is that of a vector Note that homogeneous coordinates replaces points in three dimensions by lines through the origin in four dimensions

30. 30 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Homogeneous Coordinates and Computer Graphics Homogeneous coordinates are key to all computer graphics systems ­All standard transformations (rotation, translation, scaling) can be implemented by matrix multiplications with 4 x 4 matrices ­Hardware pipeline works with 4 dimensional representations ­For orthographic viewing, we can maintain w=0 for vectors and w=1 for points ­For perspective we need a perspective division

31. 31 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Change of Coordinate Systems Consider two representations of a the same vector with respect to two different bases. The representations are v=  1 v 1 +  2 v 2 +  3 v 3 = [  1  2  3 ] [v 1 v 2 v 3 ] T =  1 u 1 +  2 u 2 +  3 u 3 = [  1  2  3 ] [u 1 u 2 u 3 ] T a=[  1  2  3 ] b=[  1  2  3 ] where

32. 32 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Representing second basis in terms of first Each of the basis vectors, u1,u2, u3, are vectors that can be represented in terms of the first basis u 1 =  11 v 1 +  12 v 2 +  13 v 3 u 2 =  21 v 1 +  22 v 2 +  23 v 3 u 3 =  31 v 1 +  32 v 2 +  33 v 3 v

33. 33 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Matrix Form The coefficients define a 3 x 3 matrix and the basis can be related by see text for numerical examples a=M T b M =

34. 34 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Change of Frames We can apply a similar process in homogeneous coordinates to the representations of both points and vectors Consider two frames Any point or vector can be represented in each (P 0, v 1, v 2, v 3 ) (Q 0, u 1, u 2, u 3 ) P0P0 v1v1 v2v2 v3v3 Q0Q0 u1u1 u2u2 u3u3

35. 35 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Representing One Frame in Terms of the Other u 1 =  11 v 1 +  12 v 2 +  13 v 3 u 2 =  21 v 1 +  22 v 2 +  23 v 3 u 3 =  31 v 1 +  32 v 2 +  33 v 3 Q 0 =  41 v 1 +  42 v 2 +  43 v 3 +  44 P 0 Extending what we did with change of bases defining a 4 x 4 matrix M =

36. 36 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Working with Representations Within the two frames any point or vector has a representation of the same form a=[  1  2  3  4 ] in the first frame b=[  1  2  3  4 ] in the second frame where  4   4  for points and  4   4  for vectors and The matrix M is 4 x 4 and specifies an affine transformation in homogeneous coordinates a=M T b

37. 37 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Affine Transformations Every linear transformation is equivalent to a change in frames Every affine transformation preserves lines However, an affine transformation has only 12 degrees of freedom because 4 of the elements in the matrix are fixed and are a subset of all possible 4 x 4 linear transformations

38. 38 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Affine Transformations Line preserving Characteristic of many physically important transformations ­Rigid body transformations: rotation, translation ­Scaling, shear Importance in graphics is that we need only transform endpoints of line segments and let implementation draw line segment between the transformed endpoints

39. 39 2D Transformation Translation P(x, y) P’(x’, y’) x y dxdx dydy

40. 40 2D Transformation Scaling x y P 0 (x 0, y 0 ) P 1 (x 1, y 1 ) y1y1 1 2 y0y0 y1y1 y0y0 1 2 x1x1 1 2 x0x0 1 2 x1x1 x0x0

41. 41 2D Transformation Rotation P(x, y) P’(x’, y’) x y 

42. 42 2D Transformation Derivation of the rotation equation P(x, y) P’(x’, y’) x y   r rcos  rsin  rcos(  +  ) rsin(  +  )

43. 43 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Translation Move (translate, displace) a point to a new location Displacement determined by a vector d ­Three degrees of freedom ­P’=P+d P P’ d

44. 44 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Translation Using Representations Using the homogeneous coordinate representation in some frame p=[ x y z 1] T p’=[x’ y’ z’ 1] T d=[dx dy dz 0] T Hence p’ = p + d or x’=x+d x y’=y+d y z’=z+d z note that this expression is in four dimensions and expresses that point = vector + point

45. 45 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Translation Matrix We can also express translation using a 4 x 4 matrix T in homogeneous coordinates p ’= Tp where T = T (d x, d y, d z ) = This form is better for implementation because all affine transformations can be expressed this way and multiple transformations can be concatenated together

46. 46 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Rotation Matrix R = R z (  ) =

47. 47 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Rotation about x and y axes Same argument as for rotation about z axis ­For rotation about x axis, x is unchanged ­For rotation about y axis, y is unchanged R = R x (  ) = R = R y (  ) =

48. 48 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Scaling S = S(s x, s y, s z ) = x’=s x x y’=s y y z’=s z z p’=Sp Expand or contract along each axis (fixed point of origin)

49. 49 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Reflection corresponds to negative scale factors original s x = -1 s y = 1 s x = -1 s y = -1s x = 1 s y = -1

50. 50 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Inverses Although we could compute inverse matrices by general formulas, we can use simple geometric observations ­Translation: T -1 (d x, d y, d z ) = T (-d x, -d y, -d z ) ­Rotation: R -1 (  ) = R(-  ) Holds for any rotation matrix Note that since cos(-  ) = cos(  ) and sin(-  )=-sin(  ) R -1 (  ) = R T (  ) ­Scaling: S -1 (s x, s y, s z ) = S(1/s x, 1/s y, 1/s z )

51. 51 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Concatenation We can form arbitrary affine transformation matrices by multiplying together rotation, translation, and scaling matrices Because the same transformation is applied to many vertices, the cost of forming a matrix M=ABCD is not significant compared to the cost of computing Mp for many vertices p The difficult part is how to form a desired transformation from the specifications in the application

52. 52 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Order of Transformations Note that matrix on the right is the first applied Mathematically, the following are equivalent p’ = ABCp = A(B(Cp)) Note many references use column matrices to present points. In terms of column matrices p T ’ = p T C T B T A T

53. 53 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 General Rotation About the Origin  x z y v A rotation by  about an arbitrary axis can be decomposed into the concatenation of rotations about the x, y, and z axes R(  ) = R z (  z ) R y (  y ) R x (  x )  x  y  z are called the Euler angles Note that rotations do not commute We can use rotations in another order but with different angles

54. 54 Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Rotation About a Fixed Point other than the Origin Move fixed point to origin Rotate Move fixed point back M = T(p f ) R(  ) T(-p f )

55. Additional Comments

56. Common/MV.js We have used the following functions in Common/MV.js: –mat4(): 4x4 matrix constructor –rotate(angle, axis) –mult(A, B): compute A*B Other Matrix libraries in JavaScript are available, e.g., The Beginning WebGL book recommends gl-matrix.js (See https://github.com/toji/gl-matrix) 56

57. Other User Inputs & Mouse Click Plenty of online resource: –Google “HTML5 input” leads us to http://www.w3schools.com/html/html_form_in put_types.asp 57

58. CAD-like Examples www.cs.unm.edu/~angel/WebGL/7E/03 square.html: puts a colored square at location of each mouse click triangle.html: first three mouse clicks define first triangle of triangle strip. Each succeeding mouse clicks adds a new triangle at end of strip 58 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

59. Returning Position from Click Event Canvas specified in HTML file of size canvas.width x canvas.height Returned window coordinates are event.clientX and event.clientY 59 // add a vertex to GPU for each click canvas.addEventListener("click", function() { gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer); var t = vec2(-1+2*event.clientX/canvas.width, -1+2*(canvas.height-event.clientY)/canvas.height); gl.bufferSubData(gl.ARRAY_BUFFER, sizeof[’vec2’]*index, t); index++; }); Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

60. Window Coordinates 60 w h (0, 0) (w -1, h-1) (x w, y w ) Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

61. Window to Clip Coordinates 61 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015