1 / 18

Announcement

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. Topics for Midterm Exam.

jaimef
Download Presentation

Announcement

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related