Important Announcement: Midterm Exam on November 14

1. Announcement • Midterm exam on November 14: • No Internet connection. • Lecture slides, example code and exam questions will be on USB disks. • Books and paper references are NOT allowed. • Electronic devices are NOT allowed. • Cheating in exam automatically fails the course.

2. Topics for Midterm Exam • How to add user interface elements in HTML and event handlers in JS? • How to add new vertex attributes (in both shaders and JS)? • How to apply modeling, viewing, and projection matrices properly in the shaders? • How to pass uniform variables to the shaders? • How to combine the above to calculate the lighting in the shaders? • You will be asked to modify existing codes to achieve the goals defined in the problems.

3. 3D Objects in WebGL Loading 3D model files

4. Example: Sphere Lighting

5. Vertex Shader in HTML (HTML code: cube3+sphere.html) <script id="vertex-shader" type="x-shader/x-vertex"> // vertex attributes attribute vec4 vPosition; attribute vec4 vColor; attribute vec4 vNormal; varying vec4 fColor; uniform mat4 modelingMatrix; uniform mat4 viewingMatrix; uniform mat4 projectionMatrix; uniform vec4 lightPosition; uniform vec4 materialAmbient; uniform vec4 materialDiffuse; uniform vec4 materialSpecular; uniform float shininess;

6. (HTML code) void main() { vec4 eye = vec4(0.0, 0.0, 2.0, 1.0); // The default eye position vec4 L = normalize( lightPosition ); vec4 N = normalize( vNormal ); vec4 V = normalize( eye - vPosition ); // Eye vector. vec4 H = normalize( L + V ); // Halfway vector // Compute terms in the illumination equation vec4 ambient = materialAmbient; float Kd = max( dot(L, N), 0.0 ); vec4 diffuse = Kd * materialDiffuse; float Ks = pow( max(dot(N, H), 0.0), shininess ); // HW3 hint: complete the next line to compute the specular component // vec4 specular = ... fColor = ... gl_Position = ... }

7. Setting Up Sphere(JavaScript code: cube3+sphere.js) function sphere() { var step = 10; ... for (phi=-90+step; phi<=90; phi+=step) { ... for (theta=step; theta<=360; theta+=step) { rT1 = lastTheta / 180.0 * Math.PI; rT2 = theta / 180.0 * Math.PI; // first triangle spherePoint(rT1, rP1); spherePoint(rT2, rP1); spherePoint(rT1, rP2); // second triangle spherePoint(rT2, rP2); ... }

8. (JavaScript code) window.onload = function init() { var canvas = document.getElementById( "gl-canvas" ); ... // Generate pointsArray[], colorsArray[] and normalsArray[] from // vertices[] and vertexColors[]. // colorCube(); sphere(); // normal array atrribute buffer var nBuffer = gl.createBuffer(); gl.bindBuffer( gl.ARRAY_BUFFER, nBuffer ); gl.bufferData( gl.ARRAY_BUFFER, flatten(normalsArray), gl.STATIC_DRAW ); var vNormal = gl.getAttribLocation( program, "vNormal" ); gl.vertexAttribPointer( vNormal, 4, gl.FLOAT, false, 0, 0 ); gl.enableVertexAttribArray( vNormal );

9. (JavaScript code) function render() { modeling = mult(rotate(theta[xAxis], 1, 0, 0), mult(rotate(theta[yAxis], 0, 1, 0), rotate(theta[zAxis], 0, 0, 1))); viewing = lookAt([0,0,-2], [0,0,0], [0,1,0]);  A BAD IDEA!! projection = perspective(45, 1.0, 1.0, 3.0); ... gl.uniformMatrix4fv( modelingLoc, 0, flatten(modeling) ); gl.uniformMatrix4fv( viewingLoc, 0, flatten(viewing) ); gl.uniformMatrix4fv( projectionLoc, 0, flatten(projection) ); gl.drawArrays( gl.TRIANGLES, 0, numVertices ); requestAnimFrame( render ); }

10. A Quick Summary • sphere() fills in the data at pointsArray, colorsArray, and normalsArray. • The eye position is currently hard coded, which is bad in software engineering. The solution: • Create a uniform in the shaders. • Pass the eye position from the JS code to the shaders.

11. 3D Objects Using the basic-objects-IFS.js Utility

12. Cube, uvSphere, uvTorus, Teapot, … and more • new cube(side) • new uvSphere(radius, slices, stacks) • teapotModel return { vertexPositions: ..., vertexNormals: ..., vertexTextureCoords: ..., indices: ... }

13. Lab Time • Can you draw the teapotModel? • Note that the models use “indexed vertices”. Therefore you must call drawElements() instead of drawArrays(). • Hint: cube1.js uses indexed vertices.

14. Loading 3D Models into WebGL

15. For Further Reading • Teapot-streams.js is from https://www.khronos.org/registry/webgl/sdk/demos/google/shiny-teapot/ • Beginning WebGL: • Chapter 8: Meshes (OBJ, JSON) • WebGL Programming Guide: • Chapter 10: OBJViewer.js • https://github.com/machinezilla/webgl-programming-guide

16. Many Different Solutions • Define the data in JS: • For example: teapot-streams.js in: https://www.khronos.org/registry/webgl/sdk/demos/google/shiny-teapot/ • Using utilities such as THREE.js: • See Beginning WebGL Chapter 8: Meshes (OBJ, JSON)

17. OBJ Loader • WebGL Programming Guide: • Chapter 10: OBJViewer.js • https://github.com/machinezilla/webgl-programming-guide • Example: • http://140.122.185.90/CG/code/WebGL%20Programming%20Guide/ch10/OBJViewer.html

18. v -0.5 -0.5 -0.6 v 0.5 -0.5 -0.6 v -0.5 -0.5 0.4 v 0.5 -0.5 0.4 v -0.5 0.5 -0.6 v 0.5 0.5 -0.6 v -0.5 0.5 0.4 v 0.5 0.5 0.4 # 8 vertices vn 1 0 0 vn -1 0 0 vn 0 1 0 vn 0 -1 0 vn 0 0 1 vn 0 0 -1 vt 0 0 vt 1 0 vt 0 1 vt 1 1 #4 texture coordinates g default f 1/1/4 3/2/4 4/4/4 2/3/4 f 5/1/3 6/2/3 8/4/3 7/3/3 f 1/1/6 2/2/6 6/4/6 5/3/6 f 2/1/1 4/2/1 8/4/1 6/3/1 f 4/1/5 3/2/5 7/4/5 8/3/5 f 3/1/2 1/2/2 5/4/2 7/3/2 # 6 faces A Simple Example – OBJ • Array of vertices • Array of polygons • Optional: • Normals • Textures • Groups