Created
October 9, 2009 07:17
-
-
Save xeolabs/205816 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var scene = new Guava.Graph({ | |
children: [ | |
/* A Canvas node activates a DOM canvas element for its subtree. You can have more | |
* than one Canvas node in your scene if you want multiple views of the scene on multiple | |
* canvas tags throughout your page (alternatively, you could have multiple ViewPorts on the | |
* same Canvas). | |
*/ | |
new Guava.Canvas({ | |
canvasId: 'mycanvas', | |
clearColor: new Guava.Color(0.8, 0.8, 0.9, 1.0), | |
depthTest: true, | |
clearDepth: 1.0, | |
children: [ | |
/* | |
* We've configured the backend with a ShaderBackend plugin of type "example-shader-1", | |
* which our Shader activates to provide OpenGL Shading Language scripts to the GL engine. | |
* You can have many Shader nodes in your scene, to activate different shading scripts for different | |
* subtrees. | |
*/ | |
new Guava.Shader({ | |
type: 'example-shader-1', | |
/* | |
* One of our Shader scripts has a light source variable, which we can provide a | |
* value for here. We could also provide values in ScriptVars nodes anywhere | |
* within the Shader's subtree. | |
*/ | |
vars: { | |
light: { | |
pos: { | |
x: -100.0, | |
y: -200.0, | |
z: 200.0 | |
} | |
} | |
}, | |
children: [ | |
/* | |
* A ViewPort node selects the area of the Canvas that sub nodes will affect | |
*/ | |
new Guava.Viewport({ | |
x : 1, | |
y : 1, | |
width: 500, | |
height: 400, | |
children: [ | |
/* | |
* A Pespective node sets up the perspective transform applied to sub nodes. | |
* Internally, it generates a perspective matrix and loads it into a special | |
* projection matrix variable in the Shader scripts. | |
*/ | |
new Guava.Perspective({ | |
fovy : 60.0, | |
aspect : 1.0, | |
near : 0.1, | |
far : 400.0, | |
children: [ | |
/* | |
* A LookAt node sets up the model-view transform to apply to sub nodes | |
* before the perspective transform. | |
* Internally, it generates a model-view matrix and loads it into | |
* a special variable in the Shader scripts. | |
*/ | |
new Guava.LookAt({ | |
eye : { z: -50.0 }, | |
up : { y: 1.0 }, | |
children: [ | |
new Guava.Layer({ | |
renderMethods: { | |
cullBackfaces: false | |
}, | |
children: [ | |
/* A Rotate node concatenates a rotation transform onto | |
* the model-view matrix and reloads the matrix into | |
* the Shader scripts | |
*/ | |
new Guava.Rotate({ | |
x: 1.0, | |
angle: -45.0, | |
children: [ | |
new Guava.Rotate({ | |
y: 1.0, | |
angle: 45.0, | |
children: [ | |
/* A Scale node concatenates a scaling | |
* transformation onto the model-view | |
* matrix and reloads the matrix into the | |
* Shader scripts | |
*/ | |
new Guava.Scale({ | |
x: 5.0, | |
y: 5.0, | |
z: 5.0, | |
children: [ | |
/* A Teapot node is a specialised | |
* Geometry node, which loads | |
* vertices, normals and faces | |
* for the venerable OpenGL teapot | |
* into special variables in | |
* the Shader scripts | |
*/ | |
new Guava.scene.ux.Teapot() | |
] | |
}) // Guava.Scale | |
] | |
}) // Guava.Rotate | |
] | |
}) // Guava.Rotate | |
] | |
}) // Guava.Layer | |
] | |
}) // Guava.LookAt | |
] | |
}) // Guava.Perspective | |
] | |
}) // Guava.ViewPort | |
] | |
}) // Guava.Shader | |
] | |
}) // Guava.Canvas | |
] | |
}); // Guava.Graph | |
/* Lets do it - render one frame of the scene graph. To recap, the canvas tag with ID "example-canvas" will display | |
* a perspective projection of a teapot, scaled, rotated a little bit, translated back into the Z-axis and shaded. | |
* | |
* Note that if your scene graph was interactive or animated, you would call this method in a loop. | |
*/ | |
scene.traverse(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment