User:Lindsaystanleykay/SceneJS

SceneJS is a JavaScript framework that allows interactive 3-dimensional scenes to be created on the WebGL HTML5 canvas element.

• 
  Caption1

Its scene graphs are defined in a terse, declarative style. Below is a an example which renders the OpenGL teapot. To render the teapot, SceneJS will traverse the scene graph in depth-first order. Each scene node is a function that will set some OpenGL state on entry, then un-set it again before exit. In this scene, a renderer node activates a WebGL Canvas element and clears depth and colour buffers, a shader activates some OpenGL Shading Language (GLSL) scripts, and the rest of the nodes set various matrices, vectors and geometry variables within the scripts.

with (SceneJs) {

  var exampleScene = scene({},

    renderer({ canvasId: 'theCanvas',
               clear : { depth : true, color : true} },

        shader({ type: 'simple-shader' },

          lights({
              lights: [
                  { pos: { x: 30.0, y: 30.0, z: 30.0 } }
              ]},

            perspective({ fovy : 25.0, aspect : 1.0,
                                   near : 0.10, far : 300.0 },

              lookAt({
                  eye : { x: 5.0, y: 5.0, z: -7.0 },
                  up  : { y: 1.0 }
                },

                rotate(function(scope) {
                       return {
                           angle: scope.get('angle'),
                           y : 1.0
                       };
                    },

                    material({
                            ambient: { r:0.2, g:0.2, b:0.5 },
                            diffuse: { r:0.6, g:0.6, b:0.9 }
                        },

                        objects.teapot()
                    )
                 ) 
              ) 
            ) 
          ) 
        ) 
      ) 
    ) 
  ); 

  exampleScene.render({angle: 45.0});
}

Note that node declarations generally have the form node({configs}, child,child...). For brevity, node configurations need only specify values where defaults are overridden, such as non-zero vector components, for example.

External links

• scenejs.com

• 
  Caption1
• 
  Caption2

</gallery>