attack of the clones image source: imperialmarch.jpg
DESCRIPTION
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). 3TRANSCRIPT
![Page 1: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/1.jpg)
Attack of the Clones
Image source: https://en.wikipedia.org/wiki/File:Imperialmarch.jpg
![Page 2: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/2.jpg)
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
![Page 3: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/3.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).
3
![Page 4: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/4.jpg)
Win Me
4
![Page 5: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/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: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/6.jpg)
For Further Reading• Angel 7th Ed:
– Chaper 9• Web Audio API:
– http://srchea.com/experimenting-with-web-audio-api-three-js-webgl
• WebGL Programming Guide:– Chapter 10: OBJViewer.js– https://github.com/machinezilla/webgl-programming-guide
6
![Page 7: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/7.jpg)
Clones of the Cube
![Page 8: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/8.jpg)
5x5x5 Array of Cubes(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 ); }}
}
![Page 9: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/9.jpg)
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
![Page 10: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/10.jpg)
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
![Page 11: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/11.jpg)
WEB AUDIO
11
![Page 12: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/12.jpg)
Web Audio API (link) 1/2request.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;
![Page 13: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/13.jpg)
Web Audio API (link) 2/2 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);}
...
);};
![Page 14: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/14.jpg)
Visualizationvar 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); }}
![Page 15: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/15.jpg)
Scene Graph & Game Engines
![Page 16: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/16.jpg)
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
![Page 17: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/17.jpg)
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
![Page 18: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/18.jpg)
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
![Page 19: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/19.jpg)
19
Object-Oriented Programming Model
Application Cube 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
![Page 20: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/20.jpg)
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]=………
![Page 21: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/21.jpg)
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();
![Page 22: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/22.jpg)
22
Building the Cube Objectclass cube { public: float color[3]; float matrix[4][4]; // public methods
private:
// implementation
}
![Page 23: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/23.jpg)
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
![Page 24: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/24.jpg)
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)
![Page 25: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/25.jpg)
25
Application Codecube mycube;material plastic;mycube.setMaterial(plastic);
camera frontView;frontView.position(x ,y, z);
![Page 26: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/26.jpg)
26
Light Objectclass 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];}
![Page 27: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/27.jpg)
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
![Page 28: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/28.jpg)
28
Scene Graph
![Page 29: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/29.jpg)
29
Preorder TraversalPushAttribPushMatrix ColorTranslateRotateObject1TranslateObject2PopMatrixPopAttrib…
![Page 30: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/30.jpg)
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
![Page 31: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/31.jpg)
Open Scene Graph Inventor VRML OpenSG (http://www.opensg.org/)
A scene graph metaphor on top of OpenGL
![Page 32: Attack of the Clones Image source: Imperialmarch.jpg](https://reader035.vdocuments.net/reader035/viewer/2022062905/5a4d1af37f8b9ab05997ff0b/html5/thumbnails/32.jpg)
Game Engines Unity 3D: http://unity3d.com/ Unreal Engine: http://www.unrealengine.com/ Unigene Heaven:
http://unigine.com/products/heaven/download/ CryEngine:
http://www.crytek.com/cryengine/cryengine3/downloads
Ogre 3D: http://www.ogre3d.org/