1. Attack of the Clones Image source: https://en.wikipedia.org/wiki/File:Imperialmarch.jpg

2. Announcement Grading of midterm exams is done. –Please see the TA if you need a copy of your files. –Grade distribution: 9 人 100 分 24 人 90~99 分 5 人 60~89 分 7 人 0~59 分 2

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). 3

4. Win Me 4

5. Inspiration http://srchea.com/experimenting-with-web-audio-api- three-js-webglhttp://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-apihttp://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/launchhttps://developer.mozilla.org/en-US/demos/detail/3d- audio-spectrum-visualizer/launch 5

6. For Further Reading Angel 7 th Ed: –Chaper 9 Web Audio API: –http://srchea.com/experimenting-with-web-audio-api-three-js-webglhttp://srchea.com/experimenting-with-web-audio-api-three-js-webgl WebGL Programming Guide: –Chapter 10: OBJViewer.js –htt ps://github.com/machinezilla/webgl-programming-guidehtt ps://github.com/machinezilla/webgl-programming-guide 6

7. Clones of the Cube

8. 5x5x5 Array of Cubes (JS code)JS code) function render() {... gl.uniformMatrix4fv( viewingLoc, 0, flatten(viewing) ); gl.uniformMatrix4fv( projectionLoc, 0, flatten(projection) ); gl.uniformMatrix4fv( lightMatrixLoc,0, flatten(moonRotationMatrix) ); for (i=-2; i<=2; i++) { for (j=-2; j<=2; j++) { for (k=-2; k<=2; k++) { var cloned = mult(modeling, mult( translate(0.2*i, 0.2*j, 0.2*k), scale(0.12, 0.12, 0.12))); gl.uniformMatrix4fv( modelingLoc, 0, flatten(cloned) ); gl.drawArrays( gl.TRIANGLES, 0, numVertices ); }

9. MV.Js bug Two versions of scale() in MV.js –function Scale( x, y, z ) –function Scale( s, u ) The solution is rename scale(s, u). 9

10. Lab Time! Uncomment the line that sets “var cloned” and see what happens. Create more cube! How about 10x10x10? 100x100x100? Can your PC handle them? Can you display 5x5x5 cows using the OBJViewer example of last week? How about using different colors for the cubes? –Passing different color attributes to the shaders? –How about changing the colors directly within the shaders? 10

11. WEB AUDIO 11

12. Web Audio API (link) 1/2link request.onload = function() { context.decodeAudioData( request.response, function(buffer) { if(!buffer) { // Error decoding file data return; } sourceJs = context.createJavaScriptNode(2048); sourceJs.buffer = buffer; sourceJs.connect(context.destination); analyser = context.createAnalyser(); analyser.smoothingTimeConstant = 0.6; analyser.fftSize = 512;

13. Web Audio API (link) 2/2link source = context.createBufferSource(); source.buffer = buffer; source.connect(analyser); analyser.connect(sourceJs); source.connect(context.destination); sourceJs.onaudioprocess = function(e) { array = new Uint8Array(analyser.frequencyBinCount); analyser.getByteFrequencyData(array); }; source.start(0); }... ); };

14. Visualization var k = 0; for(var i = 0; i < cubes.length; i++) { for(var j = 0; j < cubes[i].length; j++) { var scale = array[k] / 30; cubes[i][j].scale.z = (scale < 1 ? 1 : scale); k += (k < array.length ? 1 : 0); }

15. Scene Graph & Game Engines

16. 16 Limitations of Immediate Mode Graphics  When we define a geometric object in an application, upon execution of the code the object is passed through the pipeline  It then disappears from the graphical system  To redraw the object, either changed or the same, we must reexecute the code  Display lists provide only a partial solution to this problem

17. 17 OpenGL and Objects  OpenGL lacks an object orientation  Consider, for example, a green sphere We can model the sphere with polygons or use OpenGL quadrics Its color is determined by the OpenGL state and is not a property of the object  Defies our notion of a physical object  We can try to build better objects in code using object-oriented languages/techniques

18. 18 Imperative Programming Model  Example: rotate a cube  The rotation function must know how the cube is represented Vertex list Edge list Application Rotate cube data results

19. 19 Object-Oriented Programming Model ApplicationCube Object  In this model, the representation is stored with the object  The application sends a message to the object  The object contains functions (methods) which allow it to transform itself message

20. 20 Cube Object  Suppose that we want to create a simple cube object that we can scale, orient, position and set its color directly through code such as cube mycube; mycube.color[0]=1.0; mycube.color[1]= mycube.color[2]=0.0; mycube.matrix[0][0]=………

21. 21 Cube Object Functions  We would also like to have functions that act on the cube such as mycube.translate(1.0, 0.0,0.0); mycube.rotate(theta, 1.0, 0.0, 0.0); setcolor(mycube, 1.0, 0.0, 0.0);  We also need a way of displaying the cube mycube.render();

22. 22 Building the Cube Object class cube { public: float color[3]; float matrix[4][4]; // public methods private: // implementation }

23. 23 The Implementation  Can use any implementation in the private part such as a vertex list  The private part has access to public members and the implementation of class methods can use any implementation without making it visible  Render method is tricky but it will invoke the standard OpenGL drawing functions

24. 24 Other Objects  Other objects have geometric aspects Cameras Light sources  But we should be able to have nongeometric objects too Materials Colors Transformations (matrices)

25. 25 Application Code cube mycube; material plastic; mycube.setMaterial(plastic); camera frontView; frontView.position(x,y, z);

26. 26 Light Object class light { // match Phong model public: boolean type; //ortho or perspective boolean near; float position[3]; float orientation[3]; float specular[3]; float diffuse[3]; float ambient[3]; }

27. 27 Scene Descriptions  If we recall figure model, we saw that We could describe model either by tree or by equivalent code We could write a generic traversal to display  If we can represent all the elements of a scene (cameras, lights,materials, geometry) as C++ objects, we should be able to show them in a tree Render scene by traversing this tree

28. 28 Scene Graph

29. 29 Preorder Traversal PushAttrib PushMatrix Color Translate Rotate Object1 Translate Object2 PopMatrix PopAttrib …

30. 30 Group Nodes  Necessary to isolate state chages Equivalent to Push/Pop  Note that as with the figure model We can write a universal traversal algorithm The order of traversal can matter  If we do not use the group node, state changes can persist

31. Open Scene Graph  Inventor  VRML  OpenSG (http://www.opensg.org/)http://www.opensg.org/ A scene graph metaphor on top of OpenGL

32. Game Engines  Unity 3D: http://unity3d.com/http://unity3d.com/  Unreal Engine: http://www.unrealengine.com/http://www.unrealengine.com/  Unigene Heaven: http://unigine.com/products/heaven/download/ http://unigine.com/products/heaven/download/  CryEngine: http://www.crytek.com/cryengine/cryengine3/downl oads http://www.crytek.com/cryengine/cryengine3/downl oads  Ogre 3D: http://www.ogre3d.org/