3D Objects in WebGLLoading 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• http://srchea.com/experimenting-with-web-audio-api-thre

e-js-webgl• http://threejsplaygnd.brangerbriz.net/• http://w-labs.at/experiments/audioviz/• http://airtightinteractive.com/demos/js/reactive/• http://airtightinteractive.com/demos/• http://www.michaelbromley.co.uk/blog/42/audio-

visualization-with-web-audio-canvas-and-the-soundcloud-api

• https://developer.mozilla.org/en-US/demos/detail/3d-audio-spectrum-visualizer/launch

5

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

6

Qick Review of the Bump Mapping Lab (last week)

Bump Mapped Cube

Bump Mapped Cube(HTML code)

<script id="fragment-shader" type="x-shader/x-fragment">...void main() {... // Normal variation stored in the texture is within [0,1]. // Convert it to [-1, 1] vec4 texel = texture2D( texture, fTexCoord ) * 2.0 - 1.0; N.xy += texel.xy; N = normalize( N );

...

gl_FragColor = (ambient + diffuse) * fColor + specular;}</script>

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 Solutions1. Define the data in JS:

– For example: teapot-streams.js in:https://www.khronos.org/registry/webgl/sdk/demos/google/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– https://github.com/machinezilla/webgl-programming-guide

• Example:– http://140.122.185.90/CG/code/WebGL%20Programming

%20Guide/ch10/OBJViewer.html

15

A Simple Example – OBJ

• Array of vertices• Array of polygons• Optional:

– Normals– Textures– Groups

v -0.5 -0.5 -0.6v 0.5 -0.5 -0.6v -0.5 -0.5 0.4v 0.5 -0.5 0.4v -0.5 0.5 -0.6v 0.5 0.5 -0.6v -0.5 0.5 0.4v 0.5 0.5 0.4# 8 vertices

vn 1 0 0vn -1 0 0vn 0 1 0vn 0 -1 0vn 0 0 1vn 0 0 -1

vt 0 0vt 1 0vt 0 1vt 1 1#4 texture coordinates

g defaultf 1/1/4 3/2/4 4/4/4 2/3/4f 5/1/3 6/2/3 8/4/3 7/3/3f 1/1/6 2/2/6 6/4/6 5/3/6f 2/1/1 4/2/1 8/4/1 6/3/1f 4/1/5 3/2/5 7/4/5 8/3/5f 3/1/2 1/2/2 5/4/2 7/3/2# 6 faces