scenejs-example1.js

var scene = new SceneJs.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 SceneJs.Canvas({

            canvasId: 'mycanvas',

            clearColor: new SceneJs.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 SceneJs.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 SceneJs.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 SceneJs.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 SceneJs.LookAt({

                                            eye : { z: -50.0 },
                                            up : { y: 1.0 },

                                            children: [
                                                new SceneJs.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 SceneJs.Rotate({

                                                            x: 1.0,
                                                            angle: -45.0,

                                                            children: [

                                                                new SceneJs.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 SceneJs.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 SceneJs.scene.ux.Teapot()
                                                                            ]
                                                                        }) // SceneJs.Scale
                                                                    ]
                                                                }) // SceneJs.Rotate
                                                            ]
                                                        }) // SceneJs.Rotate
                                                    ]
                                                }) // SceneJs.Layer
                                            ]
                                        }) // SceneJs.LookAt
                                    ]
                                }) // SceneJs.Perspective
                            ]
                        }) // SceneJs.ViewPort
                    ]
                }) // SceneJs.Shader
            ]
        }) // SceneJs.Canvas
    ]
}); // SceneJs.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();