1. 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

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

3. 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!

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

5. Piazza For fastest responses to questions
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!

6. 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

7. WebGL Resources General Resources Tutorials Google StackOverflow
Mozzilla WebGL API reference
Tutorials
Learning WebGL (
Tutorials Point

8. Student Graphics @ Illinois
UIUC Student Chapter of ACM SIGGRAPH
Short Films, Video Games, Graphics Research
GameBuilders
Video Games

9. 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

10. Chrome Development Tools
Recommended Development Environment
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

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

12. Can You Hack the HelloColor Example?
Grab the example from
Can you have it draw 2 triangles?

13. 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.0,
0.50, -0.75, 0.0,
0.50, 0.75, 0.0
]);

14. 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.0,
-0.50, , 0.0,
-0.50, , 0.0,
0.50, , ]);
var indices = new Int32Array([
0,1,2,
2,3,0 ]);

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

16. 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;

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

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

19. Result

20. 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……

21. Scaling

22. Scaling

23. Translation

24. Translation

25. Rotation

26. Rotation
You may also specify rotation
about an arbitrary axis…

27. 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

28. 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();

29. 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();

30. 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();

31. 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();

32. 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();

33. 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.

34. Exercise Walk-Through