1. 1 3D Transformations CS 234 Jeff Parker

2. 2 Objectives Notifications Homework Gallery Pen and Paper Review transformations Apply these ideas to 3D movement

3. 3 Notifications I've figured out how to get notified by iSite:

4. 4 Notifications I've figured out how to get notified by iSite:

5. 5 Notifications I've figured out how to get notified by iSite:

6. 6 Gallery & Three Requests We will look at three examples: I have posted the code for each Please include a.jpg of your project A jpg makes it easy for me to include your screenshot We do like.pdfs, but don't want to tear them apart Please include your name in all your files Makes it easier for us to match you to your work Please mimic Angel's organization Create a folder with your name on it. Develop your source in folder. Zip the folder and submit. Root Common JohnDoeHw4

7. 7 Gallery Charles

8. 8 Gallery Dan

9. 9 // set up the tic tac toe board drawRectP(0.32, 1, 0.34, -1); drawRectP(-0.32, 1, -0.34, -1); drawRectP(-1, 0.32, 1, 0.34); drawRectP(-1, -0.32, 1, -0.34); canvas.addEventListener("mousedown", function(e) { if ( moves >8) return; // we'll say that the first player is X, then O // Get the x/y index of where the user clicked... var clickedBox = getClickedBox(e);

10. 10 Dan function getClickedBox(e) { var x = e.offsetX==undefined?e.layerX:e.offsetX; var y = e.offsetY==undefined?e.layerY:e.offsetY; var p = vec2(2*x/canvas.width-1, 2*(canvas.height-y)/canvas.height-1); var yIndex; var xIndex; if (p[0] < -0.32) { xIndex = 0; } else if (p[0] > -0.34 && p[0] < 0.32) { xIndex = 1;...

11. 11 Dan // we'll say that the first player is X, then O // first we get the x/y index of where the user... var clickedBox = getClickedBox(e); var xIndex = clickedBox[0]; var yIndex = clickedBox[1]; // if user clicked in a box if (typeof xIndex != 'undefined' && typeof yIndex != 'undefined') { var boxIndex = (xIndex * 3) + yIndex; if (usedBoxes.indexOf(boxIndex) > -1) return; usedBoxes.push(boxIndex);

12. 12 Dan // we draw in that location, 0,0 bottom left, 2,2 moves++; var xCenter = -1 + ((xIndex * 0.66) +.165); var yCenter = -1 + ((yIndex * 0.66) +.165); if (first) { // draw "X" as first player drawX(xCenter, yCenter); first = false; } else { // draw "O" as second player first = true; drawO(xCenter, yCenter); }

13. 13 Gallery Polina Note the instructions The checkers are lovely

14. 14 Gallery Polina Note the instructions The checkers are lovely

15. 15 Gallery Polina Note the instructions The checkers are lovely Two colors Selected & User Selected is Black or white Interpolate between

16. 16 Gallery Multiple instances of same shape Move the object before rasterizing Output of the program: caught and missed Alexander

17. 17 Alex 2D Sierpinski Gasket attribute vec3 vPosition; attribute vec3 vColor; uniform float dgrs; uniform vec3 trnsX; varying vec4 color;

18. 18 Alex 2D Sierpinski Gasket attribute vec3 vPosition; attribute vec3 vColor; uniform float dgrs; uniform vec3 trnsX; varying vec4 color; Please include your name in all files Check title

19. 19 Alex... uniform float dgrs; uniform vec3 trnsX;... void main(){ mat4 rotateMat = mat4( 1, 0, 0, 0, 0, cos(dgrs), sin(dgrs), 0, 0, -sin(dgrs), cos(dgrs), 0, 0, 0, 0, 1); mat4 translationMat = mat4( 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, trnsX[0], trnsX[1], trnsX[2], 1); gl_Position = translationMat * rotateMat * vec4(vPosition, 1.0); color = vec4(vColor, 1.0); }

20. 20 Alex's JS // Renders the circle which represents the hole function renderHole(){ gl.uniform1f(rotateDegrees, 0.95); gl.uniform3fv(translateVector, [holePosition[0], holePosition[1], holePosition[2]]); gl.drawArrays( gl.TRIANGLE_FAN, spherePoints, circlePoints ); } // Renders the sphere(s) function renderCphere(){ gl.uniform1f(rotateDegrees, 0.55); for(var i = 0; i < spheresPositions.length; i++){ gl.uniform3fv(translateVector, spheresPositions[i]); gl.drawArrays( gl.TRIANGLE_STRIP, 0, spherePoints ); } Draw multiple copies of same thing

21. 21 Gallery Derrick Thoughts?

22. 22 Gallery Derrick "I downloaded a picture of a go board from the internet and then used an eye dropper tool from Pixelmator to choose the color with the rgb values." - Derrick

23. 23 Gallery Multiple instances of same shape Move the object before rasterizing Derrick var baseColors = [ vec4(0.77, 0.64, 0.39, 1.0), //background vec4(0.0, 0.0, 0.0, 1.0), //black vec4(1.0, 1.0, 1.0, 1.0) //white ];

24. 24 Derrick function render() { gl.clear( gl.COLOR_BUFFER_BIT ); // board grid lines for (var i=0; i < 80; i=i+2) gl.drawArrays(gl.LINE_LOOP, i, 2); // render go stones for (var i=80; i < index; i=i+numOfCirclePoints) gl.drawArrays(gl.TRIANGLE_FAN, i, numOfCirclePoints); window.requestAnimFrame(render); } Uses same buffer to hold lines and triangles

25. 25 Derrick for (var j=0; j < boardDimension; j++) { for (var i=0; i < boardDimension; i++) { vertPos=((j*boardDimension) + i)*4; if ((i % 2)==(j % 2)) { square (vertices[vertPos], vertices[vertPos+1], vertices[vertPos+2], vertices[vertPos+3], 0); } else { square (vertices[vertPos], vertices[vertPos+1], vertices[vertPos+2], vertices[vertPos+3], 1); } if ((i==(boardDimension-1)) && (j != (boardDimension-1))) { triangle (vertices[vertPos+2], vertices[vertPos+3], vertices[vertPos+3], 0 ); triangle (vertices[vertPos+3], vertices[vertPos+3], vertices[vertPos+4], 0 ); }

26. 26 Review: Pipeline Implementation transformationrasterizer u v u v T T(u) T(v) T(u) T(v) vertices pixels frame buffer

27. 27 Affine Transformations We want our transformations to be Line Preserving Characteristic of many physically important transformations Rigid body transformations: Rotation, Translation Non-Rigid transformations: Scaling, Shear We need only transform endpoints of line segments Let GPU connect transformed endpoints

28. 28 Rotations Matrices provide a compact representation for rotations, and many other transformation T (x, y) = (x cos(a) - y sin(a), x sin(a) + y cos(a)) To multiply matrices, multiply the rows of first by the columns of second

29. 29 Euler Angles Rotations about x, y, or z axis Perform the rotations in fixed order Any rotation is the produce of three of these rotations Euler Angles Not unique Not obvious how to find the angles Different order would give different angles Euler Angles Wikipedia

30. 30 Determinant If the length of each column is 1, the matrix preserves the length of vectors (1, 0) and (0, 1) We also will look at the Determinant Determinant of a rotation is 1 But determinant == 1 does not imply a rotation

31. 31 Scaling S = S(s x, s y, s z ) = x’=s x x y’=s y x z’=s z x p’=Sp Expand or contract along each axis (fixed point of origin) user.xmission.com/~nate/tutors.html

32. 32 Reflection Reflection corresponds to negative scale factors Has determinant == -1 Example below sends (x, y, z)  (-x, y, z) Note that the product of two reflections is a rotation original s x = -1 s y = 1 s x = -1 s y = -1 s x = 1 s y = -1

33. 33 Order of Transformations Note that matrix on the right is the first applied to the point p Mathematically, the following are equivalent p’ = ABCp = A(B(Cp)) We use column matrices to represent points. In terms of row matrices p ’T = p T C T B T A T That is, the "last" transformation is applied first. We will see that the implicit transformations have the same order property

34. 34 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 )

35. 35 Instancing In modeling, we often start with a simple object centered at the origin, oriented with the axis, and at a standard size We apply an instance transformation to its vertices to Scale Orient (rotate) Locate (translate) TRS

36. 36 Shear Helpful to add one more basic transformation Equivalent to pulling faces in opposite directions

37. 37 Shear Matrix Consider simple shear along x axis x’ = x + y cot  y’ = y z’ = z H(  ) =

38. 38 Translations We cannot define a translation in 2D space with a 2x2 matrix No choice for a, b, c, and d that moves the origin, (0, 0), to some other point, such as (5, 3) in the equation above

39. 39 Translation To address this, we consider 2D movements in 3D We pick a representative – we let (x, y, 1) represent (x, y) Like coasters on glass coffee table one unit above the floor Track the movement of these representatives

40. 40 Translation We use a shear transformation T(x, y, z) in 3D Note that T(0, 0, 0) = (0, 0, 0) However, T(0, 0, 1) = (5, 3, 1) Combines with scaling, reflection, and rotation

41. 41 Translation We use a shear transformation T(x, y, z) in 3D Note that T(0, 0, 0) = (0, 0, 0) - Vector However, T(0, 0, 1) = (5, 3, 1) - Point Combines with scaling, reflection, and rotation

42. 42 Projective Space What happens if transformation moves point (x, y, 1) off the plane z = 1? We rescale - divide by the z value For example, the point (9, 21, 3)  (3, 7, 1) We may reduce to "lowest form" – when z = 1 Project onto the plane z = 1 We have many representatives of the form: (3t, 7t, t) There are all equivalent in our Projective Model

43. 43 Projective Space The same trick works to perform 3D Translations Represent triples (x, y, z) as (x, y, z, 1) in 4D Harder to visualize this Mathematicians reason by analogy to lower dimensions

44. 44 GLSL uses col major form... uniform float dgrs; uniform vec3 trnsX;... void main(){ mat4 rotateMat = mat4( 1, 0, 0, 0, 0, cos(dgrs), sin(dgrs), 0, 0, -sin(dgrs), cos(dgrs), 0, 0, 0, 0, 1); mat4 translationMat = mat4( 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, trnsX[0], trnsX[1], trnsX[2], 1); gl_Position = translationMat * rotateMat * vec4(vPosition, 1.0); color = vec4(vColor, 1.0); }

45. 45 Inverses We can find inverses for all of our transformations Focus on the basic moves we have studied – Translation – translate back in the opposite direction Rotation – rotate the the same angle, backwards Reflection – reflect a second time in the same plane Scale – rescale by the reciprocal: If you doubled x, halve x.

46. 46 Rotating Cube Angel gives us two versions They look the same Difference is in how we send traingles to GPU "All problems in computer science can be solved by another level of indirection" – David Wheeler

47. 47 HTML files $ diff cube.html cubev.html 43c43,45 < precision mediump float; --- > #ifdef GL_ES > precision highp float; > #endif 57c59 --- >...

48. 48 HTML files The first difference can be removed The versions on iSite have been edited to align them Changes to html and js files $ diff cube.html cubev.html 57c59 --- >

49. 49 cube.js var NumVertices = 36; var points = []; var colors = []; var xAxis = 0; var yAxis = 1; var zAxis = 2; var axis = 0; var theta = [ 0, 0, 0 ];

50. 50 cube.js var axis = 0; var theta = [ 0, 0, 0 ]; function render() { gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); theta[axis] += 2.0; gl.uniform3fv(thetaLoc, theta); gl.drawArrays( gl.TRIANGLES, 0, NumVertices ); requestAnimFrame( render ); } // Euler Angles

51. 51 cube.js document.getElementById( "xButton" ).onclick = function () { axis = xAxis; }; document.getElementById( "yButton" ).onclick = function () { axis = yAxis; }; document.getElementById( "zButton" ).onclick = function () { axis = zAxis; }; render(); }

52. 52 cube.html attribute vec4 vPosition; attribute vec4 vColor; varying vec4 fColor; uniform vec3 theta; void main() { // Compute the sines and cosines of theta for // each of the three axes in one step. vec3 angles = radians( theta ); vec3 c = cos( angles ); vec3 s = sin( angles );

53. 53 Vertex Shader vec3 angles = radians( theta ); vec3 c = cos( angles ); vec3 s = sin( angles ); // Remeber: thse matrices are column-major mat4 rx = mat4( 1.0, 0.0, 0.0, 0.0, 0.0, c.x, s.x, 0.0, 0.0, -s.x, c.x, 0.0, 0.0, 0.0, 0.0, 1.0 ); mat4 ry = mat4( c.y, 0.0, -s.y, 0.0, 0.0, 1.0, 0.0, 0.0, s.y, 0.0, c.y, 0.0, 0.0, 0.0, 0.0, 1.0 );

54. 54 Vertex Shader mat4 ry = mat4( c.y, 0.0, -s.y, 0.0, 0.0, 1.0, 0.0, 0.0, s.y, 0.0, c.y, 0.0, 0.0, 0.0, 0.0, 1.0 ); mat4 rz = mat4( c.z, -s.z, 0.0, 0.0, s.z, c.z, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0 ); fColor = vColor; gl_Position = rz * ry * rx * vPosition; }

55. 55 Fragment Shader precision mediump float; varying vec4 fColor; void main() { gl_FragColor = fColor; }

56. 56 Cube Geometry: JavaScript function colorCube() { 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 ); }

57. 57 Cube Geometry: JavaScript function colorCube() { 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 ); }

58. 58 Cube Geometry: JavaScript function quad(a, b, c, d) {... // Parition the quad into two triangles to render it // We create two triangles from the quad indices //vertex color assigned by the index of the vertex 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 colored faces use //colors.push(vertexColors[a]); }

59. 59 Solid Colors function quad(a, b, c, d) {... // Parition the quad into two triangles to render it // We create two triangles from the quad indices //vertex color assigned by the index of the vertex 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 colored faces use colors.push(vertexColors[a]); }

60. 60 Cube Geometry: JavaScript function quad(a, b, c, d) { 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 ) ];

61. 61 Cube Geometry: JavaScript function quad(a, b, c, d) { var vertices = [ vec3( -0.5, -0.5, 0.5 ),... ]; var vertexColors = [ [ 0.0, 0.0, 0.0, 1.0 ], // black [ 1.0, 0.0, 0.0, 1.0 ], // red [ 1.0, 1.0, 0.0, 1.0 ], // yellow [ 0.0, 1.0, 0.0, 1.0 ], // green [ 0.0, 0.0, 1.0, 1.0 ], // blue [ 1.0, 0.0, 1.0, 1.0 ], // magenta [ 1.0, 1.0, 1.0, 1.0 ], // white [ 0.0, 1.0, 1.0, 1.0 ] // cyan ];

62. 62 Cube Geometry: Vector Version var indices = [ 1, 0, 3, 3, 2, 1, 2, 3, 7, 7, 6, 2, 3, 0, 4, 4, 7, 3, 6, 5, 1, 1, 2, 6, 4, 5, 6, 6, 7, 4, 5, 4, 0, 0, 1, 5 ];

63. 63 Cube Geometry: Vector Version var indices = [ 1, 0, 3, 3, 2, 1, 2, 3, 7, 7, 6, 2, 3, 0, 4, 4, 7, 3, 6, 5, 1, 1, 2, 6, 4, 5, 6, 6, 7, 4,... Replaces function colorCube() { 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 ); }

64. 64 Diffs I edited the files to align them $ diff cube.js cubev.js 7,9d6 < var points = []; < var colors = []; < 40a38,52 > // indices of the 12 triangles that comprise the cube > var indices = [ > 1, 0, 3, > 3, 2, 1, > 2, 3, 7, > 7, 6, 2, > 3, 0, 4,

65. 65 Diffs 49,50d60 < colorCube(); < 61a72,77 > // array element buffer > var iBuffer = gl.createBuffer(); > gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuffer); > gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices), gl.STATIC_DRAW); > 66c82 < gl.bufferData( gl.ARRAY_BUFFER, flatten(colors), gl.STATIC_DRAW ); --- > gl.bufferData( gl.ARRAY_BUFFER, flatten(vertexColors), gl.STATIC_DRAW );

66. 66 Diffs 99,128d114 < function colorCube() < { < quad( 1, 0, 3, 2 ); < quad( 2, 3, 7, 6 );... < quad( 5, 4, 0, 1 ); < } < < function quad(a, b, c, d) < { < // We need to partition the quad into two triangles in order for < // WebGL to be able to render it. In this case, we create two

67. 67 Diffs (cont) 136c122 < gl.drawArrays( gl.TRIANGLES, 0, NumVertices ); --- > gl.drawElements( gl.TRIANGLES, NumVertices, gl.UNSIGNED_BYTE, 0 ); glDrawElements specifies multiple geometric primitives with very few subroutine calls. Instead of calling a GL function to pass each individual vertex, normal, texture coordinate, edge flag, or color, you can prespecify separate arrays of vertices, normals, and so on, and use them to construct a sequence of primitives with a single call to glDrawElements.

68. 68 Droste Effect

69. 69 Droste Effect Royal Can transformation is just scaling. Droste has rotation and translation

70. 70 Escher-Droste http://wakaba.c3.cx/w/escher_droste.html Try Firefox… Started with question from Charles – I want to understand that!

71. 71 All work in Fragment Shader precision highp float; uniform sampler2D texture; uniform vec2 size; uniform float time; uniform float p1,p2; uniform int dipole; const float factor=256.0; const float pi=3.1415926535;

72. 72 Reading Texture in GPU void main() {... vec2 transformed=cmul(logpos,vec2(p2,- p1*log(factor)/(2.0*pi))); vec2 texcoords = vec2(-transformed.y/(2.0*pi), transformed.x/log(factor)-0.35-time*0.1); gl_FragColor = texture2D(texture,texcoords); }

73. 73 Initialize texture in CPU... texture=gl.createTexture(); texture.image=new Image(); texture.image.onload=function() { gl.bindTexture(gl.TEXTURE_2D,texture);... gl.generateMipmap(gl.TEXTURE_2D); } texture.image.src="/images/escher.jpg";

74. 74 Escher-Droste http://wakaba.c3.cx/w/escher_droste.html Try Firefox… http://wakaba.c3.cx/images/escher.jpg

75. 75 Math: Convex Sum Vector Operations We can add or subtract two vectors Can multiply vector by scalar We have two ways to multiple two vectors Dot product: gives scalar Works in any dimension In 3D, cross product: gives vector Weaker version exists in 7D No Jacobi Identity in 7D

76. 76 Point Operations We can add a vector and a point We can subtract two points We cannot multiply a point by a scalar We cannot add two points

77. 77 Point Operations We can add a vector and a point We can subtract two points We cannot multiply a point by a scalar We cannot add two points But we can average two points

78. 78 Point Operations Given points P and Q

79. 79 Point Operations Given points P and Q Can find a point midway between them

80. 80 Point Operations Given points P and Q Can find a point midway between them

81. 81 Point Operations Given points P and Q Can find a point closer to P

82. 82 Point Operations Given points P and Q Can find any point between P and Q

83. 83 Point Operations Given points P and Q Let v be the vector from Q to P

84. 84 Point Operations Give P, Q, and R, can form sums That is, the coefficients sum to 1: convex sum Called the Barycentric Coefficients

85. 85 Convex Sum We want polygons to be convex Illustration of convex hull of a set of points

86. 86 Convex Sum When we rasterize, we will be working on scan lines We will interpolate attributes, such as color Interpolate down the edges – convex sum For each scan line, interpolate the endpoints Use Barycentric Coefficients as weights

87. 87 Parametric Equations We have seen several ways to describe a line (1) Point-slope form (2) General Equation Can describe a vertical line (3) General Equation as dot product We looked at two new forms (4) Two Point form Rise over run of typical point (5) Parameterized by a variable t Let's look at parameterized versions of other curves

88. 88 Parametric Equations Consider the circle While this is a form you recognize, has problems It is not a function: when x = a, there are two legal values for y Does not give instructions on how to traverse the curve (!?!) Why would we worry about this? Important in animation: characters move on curves An alternative is to describe the points as traced by point We parameterize the point via the angle As theta runs from 0 to 2pi, we trace out the unit circle The form to match the equation above is

89. 89 Parameterized Lines Once again, we start with a line defined by two endpoints We will start at e 1 and travel to e 2 Define v 1 as the vector from the origin to e 1 Define v 2 as the vector from the origin to e 2 Define v 3 = v 2 – v 1 Consider v 1 + tv 3 = v 1 + t(v 2 – v 1 ) When t = 0, this is v 1 When t = 1, this is v 1 + (v 2 -v 1 ) = v 2 In between, this is (1-t)v 1 + tv 2

90. 90 Application Does a line segment intersect a line? Does line segment ( (1, 1,), (4, 3) ) intersect 3x – 2y = 5? v 3 = v 2 – v 1 = (4, 3) – (1, 1) = (3, 2) Define the line segment as (x, y) = (1, 1) + t(3, 2) = (1 + 3t, 1 + 2t) Runs from (1, 1) to (4, 3) as t goes from 0 to 1 Plug this into equation of the line 3x – 2y = 5, and solve for t 3(1 + 3t) - 2(1 + 2t) = 5 3 – 2 + 9t – 4t = 5 1 + 5t = 5 Does this have a root in [0, 1]?

91. 91 Painter's Algorithm Painter's Algorithm performs hidden surface removal Sort the objects by their distance from the eye Paint the furthest things first, working your way to front

92. 92 Painter's Algorithm One difficulty is that we have to sort the objects A second difficulty is that most objects don't have a fixed depth We can have circular chains

93. 93 Painter's Algorithm We can solve the problem by throwing memory at it Assign a buffer to hold depth of pixel As we paint each pixel that will appear, remember the depth in the Z-Buffer

94. 94 ZBuffer We start with two images: remember color and depth

95. 95 ZBuffer

96. 96 Using z-Buffer To use the z-Buffer, you must 1) Ask for a depth buffer when you create your window. 2) Place a call to glEnable (GL_DEPTH_TEST) in your program's initialization routine, after a context is created and made current. 3) Ensure that your zNear and zFar clipping planes are set correctly and in a way that provides adequate depth buffer precision. In particular, zNear and zFar should be positive (not zero or negative) values. 4) Pass GL_DEPTH_BUFFER_BIT as a parameter to glClear When zNear is too small, you get "z fighting"

97. 97 Project for next week Construct a 3D world Must have multiple objects At least two different objects, multiple copies of one Must have animation and user control of some aspect We are going to have a "fly over" coming up http://www.youtube.com/watch?v=nCYZjmfyQFc Build an interesting world by Steve Davis Teapot is an OpenGL primitive

98. 98 Summary Looked at work of fellow students We have moved to animating the 3 rd Dimension We have found a way to represent translations Next week, transformations to provide perspective We have seen a new way to write the equation of a line