SceneJS.createScene({
    type: "scene",
    id: "theScene",
    canvasId: "theCanvas",
  
    nodes: [
  
      /*----------------------------------------------------------------------------
       * View and projection
       *---------------------------------------------------------------------------*/
  
      {
        type: "lookAt",
        eye : { x: 0.0, y: 0.0, z: 10},
        look : { x : 0.0, y : 0.0, z : 0 },
        up : { x: 0.0, y: 1.0, z: 0.0 },
  
        nodes: [
          {
            type: "camera",
            optics: {
              type: "perspective",
              fovy : 25.0,
              aspect : 1.47,
              near : 0.10,
              far : 300.0
            },
  
            /*----------------------------------------------------------------------------
             * Some light sources
             *---------------------------------------------------------------------------*/
  
            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.0, z: -1.0 }
              },
              {
                type: "light",
                mode:         "dir",
                color:         { r: 1.0, g: 1.0, b: 1.0 },
                diffuse:        true,
                specular:        true,
                dir:          { x: 0.0, y: 1.0, z: 0.0 }
              },
              {
                type: "light",
                mode:         "dir",
                color:         { r: 1.0, g: 1.0, b: 1.0 },
                diffuse:        true,
                specular:        true,
                dir:          { x: -1.0, y: 0.0, z: 0.0 }
              },
              {
                type: "material",
                baseColor:   { r: 1.0, g: 1.0, b: 1.0 },
                specularColor: { r: 1.0, g: 1.0, b: 1.0 },
                specular:    0.2,
                shine:     6.0,
  
                nodes: [
  
                  /*------------------------------------------------------------------
                   * Our texture atlas
                   *
                   * The atlas is the General Zod portrait and the brickwall pattern,
                   * arranged side-by-side within the same image file.
                   *-----------------------------------------------------------------*/
  
                  {
                    type: "texture",
  
                    layers: [
                      {
                        uri:"graphic-webgl-scenejs-examples-web-images-texture-atlas.jpg",
                        applyTo:"baseColor",
                        blendMode: "multiply"
                      }
                    ],
  
                    nodes: [
                      {
                        type: "rotate",
                        id: "pitch",
                        angle: -30.0,
                        x : 1.0,
  
                        nodes: [
                          {
                            type: "rotate",
                            id: "yaw",
                            angle: -30.0,
                            y : 1.0,
  
                            nodes: [
  
                              /*--------------------------------------------------------------
                               * Two quads - geometry nodes that define a four-sided polygon.
                               *
                               * These are arranged on the X-axis by a couple of translate
                               * nodes.
                               *
                               * Each of the quads have different UV coordinates, causing
                               * their verices to map to different regions within the texture.
                               *
                               * The first quad maps to GeneralZod, while second maps to
                               * the brick wall.
                               *-----------------------------------------------------------------*/
  
                              /* General Zod
                               */
                              {
                                type: "translate",
  
                                x: 1.5,
  
                                nodes: [
                                  {
                                    type: "geometry",
                                    positions : [ 1, 1, 0, - 1, 1, 0, -1, -1, 0, 1, -1, 0 ],
                                    normals : [ 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1 ],
  
                                    /* UV coords map to left half of texture image
                                     */
                                    uv : [ 1, 1, .5, 1, .5, 0, 1, 0 ],
                                    indices : [ 0, 1, 2,0, 2, 3]
                                  }
                                ]
                              },
  
                              /* Brick wall
                               */
                              {
                                type: "translate",
  
                                x: -1.5,
  
                                nodes: [
                                  {
                                    type: "geometry",
                                    positions : [ 1, 1, 0, - 1, 1, 0, -1, -1, 0, 1, -1, 0 ],
                                    normals : [ 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1 ],
  
                                    /* UV coords map to right half of texture image
                                     */
                                    uv : [ .5, 1, 0, 1, 0, 0, .5, 0 ],
                                    indices : [ 0, 1, 2,0, 2, 3]
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  });
  
  /*----------------------------------------------------------------------
   * Scene rendering loop and mouse handler stuff
   *---------------------------------------------------------------------*/
  
  var yaw = -30;
  var pitch = -30;
  var lastX;
  var lastY;
  var dragging = false;
  
  var texAngle = 0.0;
  var texScale = 1.0;
  
  /* For texture animation
   */
  var timeLast = (new Date()).getTime();
  
  var canvas = document.getElementById("theCanvas");
  
  function mouseDown(event) {
    lastX = event.clientX;
    lastY = event.clientY;
    dragging = true;
  }
  
  function touchStart(event) {
    lastX = event.targetTouches[0].clientX;
    lastY = event.targetTouches[0].clientY;
    dragging = true;
  }
  
  function mouseUp() {
    dragging = false;
  }
  
  function touchEnd() {
    dragging = false;
  }
  
  var scene = SceneJS.scene("theScene");
  
  function mouseMove(event) {
    var posX = event.clientX;
    var posY = event.clientY;
    actionMove(posX,posY);
  }
  
  function touchMove(event) {
    var posX = event.targetTouches[0].clientX;
    var posY = event.targetTouches[0].clientY;
    actionMove(posX,posY);
  }
  
  function actionMove(posX, posY) {
    if (dragging) {
      yaw += (posX - lastX) * 0.5;
      pitch += (posY - lastY) * -0.5;
      lastX = posX;
      lastY = posY;
  
      scene.findNode("pitch").set("angle", pitch);
      scene.findNode("yaw").set("angle", yaw);
    }
  }
  
  canvas.addEventListener('mousedown', mouseDown, true);
  canvas.addEventListener('mousemove', mouseMove, true);
  canvas.addEventListener('mouseup', mouseUp, true);
  canvas.addEventListener('touchstart', touchStart, true);
  canvas.addEventListener('touchmove', touchMove, true);
  canvas.addEventListener('touchend', touchEnd, true);
  
  scene.start();