3d objects in webgl loading 3d model files. announcement midterm exam on 12/2 –no internet...
DESCRIPTION
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. 3TRANSCRIPT
![Page 1: 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](https://reader034.vdocuments.site/reader034/viewer/2022042800/5a4d1b617f8b9ab0599ad72c/html5/thumbnails/1.jpg)
3D Objects in WebGLLoading 3D model files
![Page 2: 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](https://reader034.vdocuments.site/reader034/viewer/2022042800/5a4d1b617f8b9ab0599ad72c/html5/thumbnails/2.jpg)
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
![Page 3: 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](https://reader034.vdocuments.site/reader034/viewer/2022042800/5a4d1b617f8b9ab0599ad72c/html5/thumbnails/3.jpg)
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
![Page 4: 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](https://reader034.vdocuments.site/reader034/viewer/2022042800/5a4d1b617f8b9ab0599ad72c/html5/thumbnails/4.jpg)
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
![Page 5: 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](https://reader034.vdocuments.site/reader034/viewer/2022042800/5a4d1b617f8b9ab0599ad72c/html5/thumbnails/5.jpg)
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
![Page 6: 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](https://reader034.vdocuments.site/reader034/viewer/2022042800/5a4d1b617f8b9ab0599ad72c/html5/thumbnails/6.jpg)
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
![Page 7: 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](https://reader034.vdocuments.site/reader034/viewer/2022042800/5a4d1b617f8b9ab0599ad72c/html5/thumbnails/7.jpg)
Qick Review of the Bump Mapping Lab (last week)
![Page 8: 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](https://reader034.vdocuments.site/reader034/viewer/2022042800/5a4d1b617f8b9ab0599ad72c/html5/thumbnails/8.jpg)
Bump Mapped Cube
![Page 9: 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](https://reader034.vdocuments.site/reader034/viewer/2022042800/5a4d1b617f8b9ab0599ad72c/html5/thumbnails/9.jpg)
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>
![Page 10: 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](https://reader034.vdocuments.site/reader034/viewer/2022042800/5a4d1b617f8b9ab0599ad72c/html5/thumbnails/10.jpg)
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
![Page 11: 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](https://reader034.vdocuments.site/reader034/viewer/2022042800/5a4d1b617f8b9ab0599ad72c/html5/thumbnails/11.jpg)
Tangent, Normal, Binormal• What does the (dX, dY) in bump map
mean?
11
![Page 12: 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](https://reader034.vdocuments.site/reader034/viewer/2022042800/5a4d1b617f8b9ab0599ad72c/html5/thumbnails/12.jpg)
• 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
![Page 13: 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](https://reader034.vdocuments.site/reader034/viewer/2022042800/5a4d1b617f8b9ab0599ad72c/html5/thumbnails/13.jpg)
Loading 3D Models into WebGL
![Page 14: 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](https://reader034.vdocuments.site/reader034/viewer/2022042800/5a4d1b617f8b9ab0599ad72c/html5/thumbnails/14.jpg)
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
![Page 15: 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](https://reader034.vdocuments.site/reader034/viewer/2022042800/5a4d1b617f8b9ab0599ad72c/html5/thumbnails/15.jpg)
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
![Page 16: 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](https://reader034.vdocuments.site/reader034/viewer/2022042800/5a4d1b617f8b9ab0599ad72c/html5/thumbnails/16.jpg)
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