1 / 21

Announcement

Announcement. Final project proposal due in one week. Demo on Jan. 14, 2018?. Final Projects. Individual or Team of 2. Voting during the demo. Do NOT use THREE.js Themes for this semester: Interactive Art in WebGL Animating objects with changing colors, positions, shapes, …etc.

istrand
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 • Final project proposal due in one week. • Demo on Jan. 14, 2018?

  2. Final Projects • Individual or Team of 2. • Voting during the demo. • Do NOT use THREE.js • Themes for this semester: Interactive Art in WebGL • Animating objects with changing colors, positions, shapes, …etc. • Interacts with mouse input, audio input (music), or gyro input.

  3. Win Me

  4. Recap for the Past 10 Weeks • Response to the review comments • Answers to the Midterm Exam questions • Final Project • More 3D models!

  5. Comments from the Reviews • 逐步講解程式碼 • 更詳細講解每個函式的用法 • 增加實作的比重 • 數學好難，希望老師講仔細一點 • 可以大聲一點

  6. Midterm Results • 100分:18人 • 80-90分:15人 • 60-70分:15人 • <60分:6人

  7. Answers to the Midterm Qs Q1: Fix the path to the common folder, Change vertexColors, or change the shaders, gl.clearColor() Q2: Change the texCoord Q3: Init(): timeLoc = gl.getUniformLocation(program, “time"); render(): gl.uniform1f(timeLoc, time);

  8. Answers to the Midterm Qs Q4: materialAmbient, materialDiffuse, and materialSpecular Q5: gl.drawArrays( gl.TRIANGLES, 0, numCubeVertices ); modeling = rotate(0, 1, 0, 0); gl.uniformMatrix4fv( modelingLoc, 0, flatten(modeling) ); gl.drawArrays( gl.TRIANGLES, numCubeVertices, numFloorVertices );

  9. 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, mobile phone gyro sensor input, or audio input (music).

  10. Inspiration • http://srchea.com/experimenting-with-web-audio-api-three-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

  11. 3D Objects An “Object” Oriented Approach

  12. Example: Sphere Lighting

  13. Vertex Shader in HTML (HTML code) <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 eyePosition; uniform vec4 lightPosition; uniform vec4 materialAmbient; uniform vec4 materialDiffuse; uniform vec4 materialSpecular; uniform float shininess;

  14. (HTML code) void main() { vec4 L = normalize( lightPosition - modelingMatrix * vPosition ); vec4 N = normalize( modelingMatrix * vNormal ); vec4 V = normalize( eyePosition - modelingMatrix * vPosition ); 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 ); vec4 specular = Ks * materialSpecular; fColor = (ambient + diffuse) * vColor + specular; gl_Position = ... }

  15. Sphere as a JS “Object”(JavaScript code) function sphere() { this.numVertices = 0; this.pointsArray = []; this.colorsArray = []; this.normalsArray = []; this.spherePoint = function (theta, phi) { var V = vec4(Math.cos(theta)*Math.cos(phi), ... var smallV = scalev(0.5, V); // scale to [-0.5, 0.5] this.pointsArray.push(smallV); V[3]=0.0; // convert point to vector normalize(V, 1); this.normalsArray.push(V); this.colorsArray.push(vec4(1.0, 0.0, 0.0, 1.0)); } ... }

  16. (JavaScript code) var ball = new sphere(); window.onload = function init() { ... var vBuffer = gl.createBuffer(); gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer ); gl.bufferData( gl.ARRAY_BUFFER, flatten(ball.pointsArray), ...); ... var cBuffer = gl.createBuffer(); gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer ); gl.bufferData( gl.ARRAY_BUFFER, flatten(ball.colorsArray), ...); ... var nBuffer = gl.createBuffer(); gl.bindBuffer( gl.ARRAY_BUFFER, nBuffer ); gl.bufferData( gl.ARRAY_BUFFER, flatten(ball.normalsArray), ...); ... }

  17. (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 = ... projection = ... ... gl.drawArrays( gl.TRIANGLES, 0, ball.numVertices ); requestAnimFrame( render ); }

  18. A Quick Summary • numVertices, pointsArray, colorsArray, and normalsArray are now members of the sphere object. • The variable ball is an instance of the sphere object, created by “new sphere()”

  19. 3D Objects Using the basic-objects-IFS.js Utility

  20. Cube, uvSphere, uvTorus, Teapot, … and more • new cube(side) • new uvSphere(radius, slices, stacks) • teapotModel return { vertexPositions: ..., vertexNormals: ..., vertexTextureCoords: ..., indices: ... }

  21. Lab Time • Try to draw at least 2 different objects (e.g., a sphere and a torus or a teapot)

More Related