Date post: | 18-Jan-2018 |
Category: |
Documents |
Upload: | berenice-horton |
View: | 219 times |
Download: | 0 times |
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