topical media & game development

talk show tell print

graphic-webgl-scenejs-examples-enable-layers-enable-layers.js / js



  /*
   Introductory SceneJS scene which demonstrates enabling/disabling layers.
  
   In this example, we'll define a scene containing four teapots, each in a seperate layer.
  
   Then just before we render this scene we'll enable/disable a selection of the layers to
   specify which of them are included in the scene traversal.
  
   We can specify a priority for layers if we wanted to control the order in which the
   geometries within them are rendered, but for this example we're just specifying the
   default priority of 0 because we're just demonstrating enabling/disabling of layers.
  
   Lindsay S. Kay,
   lindsay.kay@xeolabs.com
  
   */
  
  /*----------------------------------------------------------------------
   * Scene graph definition
   *---------------------------------------------------------------------*/
  
  SceneJS.createScene({
    type: "scene",
    id: "theScene",
    canvasId: "theCanvas",
    loggingElementId: "theLoggingDiv",
  
    nodes: [
      {
        type: "lookAt",
        eye : { x: -5.0, y: 0.0, z: 20.0},
        look : { x : 10.0, y : 0.0, z : 0 },
        up : { x: 0.0, y: 1.0, z: 0.0 },
  
        nodes: [
          {
            type: "camera",
            optics: {
              type: "perspective",
              fovy : 65.0,
              aspect : 1.47,
              near : 0.10,
              far : 300.0
            },
  
            nodes: [
              {
                type: "light",
                mode:          "dir",
                color:         { r: 1.0, g: 1.0, b: 1.0 },
                diffuse:        true,
                specular:        true,
                dir:          { x: 1.0, y: -0.5, z: -1.0 }
              },
  
              {
                type: "light",
                mode:          "dir",
                color:         { r: 1.0, g: 1.0, b: 0.8 },
                diffuse:        true,
                specular:        false,
                dir:          { x: 0.0, y: -0.5, z: -1.0 }
              },
  
              {
                type: "library",
                nodes: [
                  {
                    type: "layer",
                    id: "teapotLayerNode",
                    coreId: "teapotLayerCore",
                    enabled: true
                  },
                  {
                    type: "layer",
                    id: "cubeLayerNode",
                    coreId: "cubeLayerCore",
                    enabled: true
                  },
                  {
                    type: "layer",
                    id: "sphereLayerNode",
                    coreId: "sphereLayerCore",
                    enabled: true
                  }
                ]
              },
  
              {
                type: "material",
                baseColor:   { r: 1.0, g: 1.0, b: 0.0 },
                specularColor: { r: 1.0, g: 1.0, b: 1.0 },
                specular:    0.3,
                shine:     6.0,
  
                nodes: [
                  {
                    type : "layer",
                    coreId: "teapotLayerCore",
  
                    nodes: [
                      {
                        type: "translate",
                        x : 5,
                        z : 6,
                        y: 1,
  
                        nodes: [
                          {
                            type: "teapot"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    type : "layer",
                    coreId: "cubeLayerCore",
  
                    nodes: [
                      {
                        type:"translate",
                        x : 5,
                        z : 6,
                        y: -2,
  
                        nodes: [
                          {
                            type: "cube"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    type : "layer",
                    coreId: "sphereLayerCore",
  
                    nodes: [
                      {
                        type: "translate",
                        x : 5,
                        z : 6,
  
                        nodes: [
                          {
                            type: "sphere"
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                type: "material",
                baseColor:   { r: 1.0, g: 0.0, b: 2.0 },
                specularColor: { r: 1.0, g: 1.0, b: 1.0 },
                specular:    0.3,
                shine:     6.0,
  
                nodes: [
                  {
                    type : "layer",
                    coreId: "teapotLayerCore",
  
                    nodes: [
                      {
                        type: "translate",
                        x : 15,
                        z : 6,
                        y: 1,
  
                        nodes: [
                          {
                            type: "teapot"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    type : "layer",
                    coreId: "cubeLayerCore",
  
                    nodes: [
                      {
                        type:"translate",
                        x : 15,
                        z : 6,
                        y: -2,
  
                        nodes: [
                          {
                            type: "cube"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    type : "layer",
                    coreId: "sphereLayerCore",
  
                    nodes: [
                      {
                        type: "translate",
                        x : 15,
                        z : 6,
  
                        nodes: [
                          {
                            type: "sphere"
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  });
  
  var scene = SceneJS.scene("theScene");
  scene.start();
  
  var cubeLayer = scene.findNode("cubeLayerNode");
  var teapotLayer = scene.findNode("teapotLayerNode");
  var sphereLayer = scene.findNode("sphereLayerNode");
  
  var i = 0;
  
  setInterval(function() {
  
    switch (i) {
      case 0:
        cubeLayer.set("enabled", true);
        sphereLayer.set("enabled", false);
        teapotLayer.set("enabled", false);
        i++;
        break;
  
      case 1:
        cubeLayer.set("enabled", false);
        sphereLayer.set("enabled", true);
        teapotLayer.set("enabled", false);
        i++;
        break;
  
      case 2:
        cubeLayer.set("enabled", false);
        sphereLayer.set("enabled", false);
        teapotLayer.set("enabled", true);
        i = 0;
        break;
    }
  }, 1000);
  


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.