3D Objects in WebGL Loading 3D model files

Announcement Midterm exam on 12/2 –No Internet connection. –Example code and exam questions will be on USB disks. –Books and paper references are allowed. –Electronic devices are NOT allowed. –Cheating in exam automatically fails the course. 2

Topics for Midterm Exam on 12/2 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 add new varying parameters? How to pass uniform variables to the shaders? How to make minor change to vertex shaders and fragment shaders? You will be asked to modify existing codes to achieve the goals defined in the problems. 3

Final Projects It is about time to think about your final projects. Themes for this semester: Interactive Art in WebGL –Animating objects with changing colors, positions, shapes, …etc. –Interacts with mouse input or audio input (music). 4

Inspiration three-js-webglhttp://srchea.com/experimenting-with-web-audio-api- three-js-webgl visualization-with-web-audio-canvas-and-the- soundcloud-apihttp:// visualization-with-web-audio-canvas-and-the- soundcloud-api audio-spectrum-visualizer/launchhttps://developer.mozilla.org/en-US/demos/detail/3d- audio-spectrum-visualizer/launch 5

For Further Reading Teapot-streams.js is from shiny-teapot/ shiny-teapot/ Beginning WebGL: –Chapter 8: Meshes (OBJ, JSON) WebGL Programming Guide: –Chapter 10: OBJViewer.js –htt ps://github.com/machinezilla/webgl-programming-guidehtt ps://github.com/machinezilla/webgl-programming-guide 6

Qick Review of the Bump Mapping Lab (last week)

Bump Mapped Cube

Bump Mapped Cube (HTML code)HTML code... void main() {... // Normal variation stored in the texture is within [0,1]. // Convert it to [-1, 1] vec4 texel = texture2D( texture, fTexCoord ) * ; N.xy += texel.xy; N = normalize( N );... gl_FragColor = (ambient + diffuse) * fColor + specular; }

Lab Time! Download cube3_bump_lab.html and.js Task #1: Fix the JS code that is missing the array buffer and vertex attribute for the texture coordinates. Task #2: Modify the normal vector in the fragment shader so the bump map influence the lighting. Task #3: Do you think the shader is 100% correct? If not, then what is wrong? 10

Tangent, Normal, Binormal What does the (dX, dY) in bump map mean? 11

N.xy += texel.xy is correct only if N is along the Z direction. i.e. N=(0,0,1) or (0,0,-1). texel.xy should be applied to the tangent plane spanned by T and B. But where do we get T and B in the shaders? –Needs tangent vector (T) as a new vertex attribute, just like the normal vector (N). 12

Loading 3D Models into WebGL

Many Different Solutions 1.Define the data in JS: –For example: teapot-streams.js in: ogle/shiny-teapot/ 2.Using utilities such as THREE.js: –See Beginning WebGL Chapter 8: Meshes (OBJ, JSON) 14

OBJ Loader WebGL Programming Guide: –Chapter 10: OBJViewer.js –htt ps://github.com/machinezilla/webgl-programming-guidehtt ps://github.com/machinezilla/webgl-programming-guide Example: – de/ch10/OBJViewer.htmlhttp:// /CG/code/WebGL%20Programming%20Gui de/ch10/OBJViewer.html 15

A Simple Example – OBJ Array of vertices Array of polygons Optional: –Normals –Textures –Groups v v v v v v v v # 8 vertices vn vn vn vn vn vn 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