Interactive Computer Graphics CS 418 – Fall 2017 TAs: Kartik Agrawal.  Office Hour: Tuesday 2:00-3:00 SC 0207 Bolun Qi. Office Hour: Thursday 12:00-1:00 SC 0207 Xiaofo Yu. Office Hour: Thursday 2:30-3:30 SC 0207 Peiyuan Zhao. Ofc. Hour: Friday 2:00-3:00 SC 0207

Agenda for today Class Information Useful WebGL Programming Resources Programming Meshes Programming Transformations Programming Exercise (get out your laptops)

General Pattern for Discussion Present Information (Useful for Doing MPs) Walk Through Slides Look at Demo Code Do an Exercise (Useful for Doing MPs) Write or Modify Some Code Do a Worksheet Do Pencil & Paper Problems BRING YOUR LAPTOPS!

Other Things We Do in Discussion Exam Review (Useful for Taking Exams) MP Q&A Days (Useful for Doing the MPs)

Piazza For fastest responses to questions www.piazza.com Post questions that might be beneficial to everyone You can also help each other out by answering your classmates’ questions Don’t wait until the night before the exam or the night before the MP is due (!) Send in your questions and ask for help soon!

TA Info Kartik Agrawal. Office Hour: Tuesday 2:00-3:00 SC 0207 Bolun Qi. Office Hour: Thursday 12:00-1:00 SC 0207 Xiaofo Yu. Office Hour: Thursday 2:30-3:30 SC 0207 Peiyuan Zhao. Ofc. Hour: Friday 2:00-3:00 SC 0207

WebGL Resources General Resources Tutorials Google StackOverflow Mozzilla WebGL API reference https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API Tutorials Learning WebGL (http://learningwebgl.com/blog/?page_id=1217) Tutorials Point http://www.tutorialspoint.com/webgl/

Student Graphics @ Illinois UIUC Student Chapter of ACM SIGGRAPH http://www.acm.uiuc.edu/siggraph/ Short Films, Video Games, Graphics Research GameBuilders http://www.acm.uiuc.edu/gamebuilders/ Video Games

Brackets Useful Editor for WebGL http://brackets.io File->Open Folder points Brackets to your code Click on a file to edit it, File->Save to save it To run a WebGL program, click on its html file, then click the lightening bolt

Chrome Development Tools Recommended Development Environment http://www.google.com/chrome Built-in debugging environment within Google Chrome browser Use this to set breakpoints, examine variables, etc. (the usual debugging functions) Check out the chrome devtools overview https://developer.chrome.com/devtools

Tips for success Start Early Write modular code (test progressively) Ask questions early (if it bugs you ask) Avoid long (all night) debug sessions Take breaks during debugging (sleep)

Can You Hack the HelloColor Example? Grab the example from https://courses.engr.illinois.edu/cs418/fa2017/HelloColor.html Can you have it draw 2 triangles?

Mesh Data Structure Here is a data structure which can be used to draw two triangles vertexPositionBuffer = gl.createBuffer(); var triangleVertices = new Float32Array([ 0.50, 0.75, 0.0, -0.5, 0.75, 0.0, -0.5, -0.75, 0.0, 0.50, -0.75, 0.0, 0.50, 0.75, 0.0 ]);

Mesh Data Structure: Indexed Face Sets But you can store vertex attributes in one array and face indices in another array (a more efficient way): vertexPositionBuffer = gl.createBuffer(); indexBuffer = gl.createBuffer(); var vertices = new Float32Array([ 0.50, 0.75, 0.0, -0.50, 0.75, 0.0, -0.50, -0.75, 0.0, 0.50, -0.75, 0.0 ]); var indices = new Int32Array([ 0,1,2, 2,3,0 ]);

Indexed Face Sets: Display Your Mesh gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer); gl.bufferData(gl.ARRAY_BUFFER, vertices ,gl.STATIC_DRAW); vertexPositionBuffer.itemSize = 3; vertexPositionBuffer.numberOfItems = 4; gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices ,gl.STATIC_DRAW); indexBuffer.itemSize = 1; indexBuffer.numberOfItems = 6; gl.drawElements(gl.TRIANGLES, indexBuffer.numberOfItems, gl.UNSIGNED_INT, 0);

Color Your Mesh colors = new Float32Array([ 1.0, 0.0, 0.0, 1.0, //red 0.0, 1.0, 0.0, 1.0, //green 0.0, 0.0, 1.0, 1.0, //blue 0.0, 0.0, 0.0, 1.0 //black ]); gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer); gl.bufferData(gl.ARRAY_BUFFER, colors ,gl.STATIC_DRAW); vertexColorBuffer.itemSize = 4; vertexColorBuffer.numberOfItems = 4;

Build the Bridge Between the Shader Program and WebGL Bind the program Get the variable location Enable that shader variable Do all the buffer setup we just saw Finally point the shader variable to the buffers we created earlier gl.useProgram(shaderProgram); shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute); … gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, vertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

In a Nut Shell gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer); gl.bufferData(gl.ARRAY_BUFFER, vertices ,gl.STATIC_DRAW); vertexPositionBuffer.itemSize = 3; vertexPositionBuffer.numberOfItems = 4; gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, vertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer); gl.bufferData(gl.ARRAY_BUFFER, colors ,gl.STATIC_DRAW); vertexColorBuffer.itemSize = 4; vertexColorBuffer.numberOfItems = 4; gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, vertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices ,gl.STATIC_DRAW); indexBuffer.itemSize = 1; indexBuffer.numberOfItems = 6; gl.drawElements(gl.TRIANGLES, indexBuffer.numberOfItems, gl.UNSIGNED_SHORT, 0);

Result

Programming Transformations One way to move geometry is to apply an affine transformation to it. We can encode that transformation using a matrix multiplication The transformation can be implemented in the vertex shader In the JavaScript we create a matrix using the glMatrix library That matrix is then passed to the vertex shader as a Uniform variable Let’s look at the math and the code……

Scaling

Scaling

Translation

Translation

Rotation

Rotation You may also specify rotation about an arbitrary axis…

Last Transform Applied First var mvMatrix = mat4.create(); var mvMatrix = mat4.create(); mat4.rotateX(mvMatrix…) mat4.translate(mvMatrix…) mat4.translate(mvMatrix…) mat4.rotateX(mvMatrix…) M=IR T M=ITR

Exercise: Slide 1 Draw the result of the following OpenGL transformation code. var mvMatrix = mat4.create(); mat4.scale(mvMatrix,mvMatrix,vec3.fromValues(1.5, 1.0, 1.0)); mat4.rotateZ(mvMatrix, mvMatrix, degToRad(90)); mat4.translate(mvMatrix, mvMatrix,vec3.fromValues(2.0, 2.0, 0.0)); draw_teapot_image();

Exercise: Slide 2 var mvMatrix = mat4.create(); mat4.scale(mvMatrix,mvMatrix,vec3.fromValues(1.5, 1.0, 1.0)); mat4.rotateZ(mvMatrix, mvMatrix, degToRad(90)); mat4.translate(mvMatrix, mvMatrix,vec3.fromValues(2.0, 2.0, 0.0)); draw_teapot_image();

Exercise: Slide 3 var mvMatrix = mat4.create(); mat4.scale(mvMatrix,mvMatrix,vec3.fromValues(1.5, 1.0, 1.0)); mat4.rotateZ(mvMatrix, mvMatrix, degToRad(90)); mat4.translate(mvMatrix, mvMatrix,vec3.fromValues(2.0, 2.0, 0.0)); draw_teapot_image();

Exercise: Slide 4 var mvMatrix = mat4.create(); mat4.scale(mvMatrix,mvMatrix,vec3.fromValues(1.5, 1.0, 1.0)); mat4.rotateZ(mvMatrix, mvMatrix, degToRad(90)); mat4.translate(mvMatrix, mvMatrix,vec3.fromValues(2.0, 2.0, 0.0)); draw_teapot_image();

Exercise: Slide 5 var mvMatrix = mat4.create(); mat4.scale(mvMatrix,mvMatrix,vec3.fromValues(1.5, 1.0, 1.0)); mat4.rotateZ(mvMatrix, mvMatrix, degToRad(90)); mat4.translate(mvMatrix, mvMatrix,vec3.fromValues(2.0, 2.0, 0.0)); draw_teapot_image();

Programming Exercise Download Brackets if you need an editor Download the demo code bundle from the discussion website, and unzip it Your Mission: Modify the code to display a capital block I instead of an L Make it multi-colored. You could change it to display a gradient from orange to blue, for example. Apply an affine transformation to the colored block I.

Exercise Walk-Through