Attack of the Clones

Image source: https://en.wikipedia.org/wiki/File:Imperialmarch.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

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

Win Me

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• 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

Clones of the Cube

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 ); }}

}

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

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

WEB AUDIO

11

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;

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);}

...

);};

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); }}

Scene Graph & Game Engines

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

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

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

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

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

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

Building the Cube Objectclass cube { public: float color[3]; float matrix[4][4]; // public methods

private:

// implementation

}

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

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

Application Codecube mycube;material plastic;mycube.setMaterial(plastic);

camera frontView;frontView.position(x ,y, z);

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];}

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

Scene Graph

29

Preorder TraversalPushAttribPushMatrix ColorTranslateRotateObject1TranslateObject2PopMatrixPopAttrib…

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

Open Scene Graph Inventor VRML OpenSG (http://www.opensg.org/)

A scene graph metaphor on top of OpenGL

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/