/*
   Custom fragment color transform shader example
  
   Demonstrates the parameterised reuse of a custom shader via a shared node core.
  
   More info on custom shaders:
  
   http://scenejs.wikispaces.com/shader
   http://scenejs.wikispaces.com/shaderParams
  
   */
  
  SceneJS.createScene({
  
    type: "scene",
    id: "theScene",
    canvasId: "theCanvas",
    loggingElementId: "theLoggingDiv",
  
    nodes: [
  
      /*----------------------------------------------------------------------
       * Library section containing a shader node which transforms outgoing
       * fragment colour.
       *
       * The shader binds a custom functions into the SceneJS fragment shader
       * to apply saturation, scale and addition operations to the outgoing
       * fragment colour.
       *
       * The fog effect is configured by a set of uniforms, which the shader
       * node exposes as parameters with default values.
       *
       * The shader is "instantiated" later in the scene by another shader
       * which shares its node core.
       *--------------------------------------------------------------------*/
  
      {
        type: "library",
        nodes: [
          {
            type: "shader",
            coreId: "colorTransShader",
  
            shaders: [
  
              /*----------------------------------------------------------------------
               * Custom colour transform fragment shader
               *--------------------------------------------------------------------*/
  
              {
                stage: "fragment",
  
                code: [
  
                  /* Parameter uniforms
                   */
                  "uniform bool  colorTransEnabled;",
                  "uniform float colorTransSaturation;",
                  "uniform vec4  colorTransScale;",
                  "uniform vec4  colorTransAdd;",
  
                  /* Modifies fragment colour
                   */
                  "vec4 colorTransPixelColorFunc(vec4 color) {",
                  "  if (colorTransEnabled) {",
                  "    if (colorTransSaturation < 0.0) {",
                  "      float intensity = 0.3 * color.r + 0.59 * color.g + 0.11 * color.b;",
                  "      color = vec4((intensity * -colorTransSaturation) + color.rgb * (1.0 + colorTransSaturation), 1.0);",
                  "    }",
                  "    color = (color * colorTransScale) + colorTransAdd;",
                  "  }",
                  "  return color;",
                  "}"
                ],
  
                /* Bind our functions to hooks
                 */
                hooks: {
                  pixelColor: "colorTransPixelColorFunc"
                }
              }
            ],
  
            /* Declare parameters and set default values
             */
            params: {
              colorTransEnabled: false,        // Shader enabled/disabled
              colorTransSaturation: 1.0,       // Saturation in range of [0.0..1.0]
              colorTransScale: [1.0, 1.0, 1.0, 1.0], // Scale factor [0.0..1.0] for each colour component
              colorTransAdd: [0.0, 0.0, 0.0, 0.0]   // Addition offset [-1.0..1.0] for each colour component
            }
          }
        ]
      },
  
      /*----------------------------------------------------------------------
       * View and projection transforms
       *--------------------------------------------------------------------*/
  
      {
        type: "lookAt",
        eye : { x: 0.0, y: 10.0, z: 25 },
        look : { y:1.0 },
        up : { y: 1.0 },
  
        nodes: [
          {
            type: "camera",
            optics: {
              type: "perspective",
              fovy : 25.0,
              aspect : 1.47,
              near : 0.10,
              far : 300.0
            },
  
            nodes: [
  
              /*----------------------------------------------------------------------
               * Lighting
               *--------------------------------------------------------------------*/
  
              {
                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 }
              },
  
              /*----------------------------------------------------------------------
               * Modelling transforms
               *--------------------------------------------------------------------*/
  
              {
                type: "rotate",
                id: "pitch",
                angle: 0.0,
                x : 1.0,
  
                nodes: [
                  {
                    type: "rotate",
                    id: "yaw",
                    angle: 0.0,
                    y : 1.0,
  
                    nodes: [
  
                      /*----------------------------------------------------------------------
                       * Material properties
                       *--------------------------------------------------------------------*/
  
                      {
                        type: "material",
                        emit: 0,
                        baseColor:   { r: 0.5, g: 0.5, b: 0.5 },
                        specularColor: { r: 0.9, g: 0.9, b: 0.9 },
                        specular:    0.7,
                        shine:     10.0,
                        alpha:     0.9,
  
                        nodes: [
  
                          /*----------------------------------------------------------------------
                           * Three teapots share the shader by instancing its node core, wrapping
                           * each teapot in a shaderParams node to set different parameters for
                           * the uniforms that are exposed by the shader as parameters.
                           *--------------------------------------------------------------------*/
  
                          // Instance the custom shader
                          {
                            type: "shader",
                            coreId: "colorTransShader",
  
                            nodes: [
  
                              // Set the shader's params
                              {
                                type: "shaderParams",
  
                                params: {
                                  colorTransEnabled: true,        // Shader enabled
                                  colorTransSaturation: 1.0,
                                  colorTransScale: [0.0, 1.0, 1.0, 1.0], // Cyan
                                  colorTransAdd: [0.0, 0.0, 0.0, 0.0]
                                },
  
                                nodes: [
                                  {
                                    type: "translate",
                                    x: -7.0,
  
                                    nodes: [
                                      {
                                        type : "teapot"
                                      }
                                    ]
                                  }
                                ]
                              }
                            ]
                          },
  
                          /*----------------------------------------------------------------------
                           * Second teapot, wrapped in an instance of the shader, which is
                           * parameterised to make the teapot green
                           *--------------------------------------------------------------------*/
  
                          // Instance the custom shader
                          {
                            type: "shader",
                            coreId: "colorTransShader",
  
                            nodes: [
  
                              // Set the shader's params
                              {
                                type: "shaderParams",
  
                                params: {
                                  colorTransEnabled: true,        // Shader enabled
                                  colorTransSaturation: 1.0,
                                  colorTransScale: [1.0, 0.0, 1.0, 1.0], // Purple
                                  colorTransAdd: [0.0, 0.0, 0.0, 0.0]
                                },
  
                                nodes: [
                                  {
                                    type: "translate",
                                    x: 0.0,
  
                                    nodes: [
                                      {
                                        type : "teapot"
                                      }
                                    ]
                                  }
                                ]
                              }
                            ]
                          },
  
                          /*----------------------------------------------------------------------
                           * First teapot, wrapped in an instance of the shader, which is
                           * parameterised to make the teapot blue
                           *--------------------------------------------------------------------*/
  
                          // Instance the custom shader
                          {
                            type: "shader",
                            coreId: "colorTransShader",
  
                            nodes: [
  
                              // Set the shader's params
                              {
                                type: "shaderParams",
  
                                params: {
                                  colorTransEnabled: true,        // Shader enabled
                                  colorTransSaturation: 1.0,
                                  colorTransScale: [1.0, 1.0, 0.0, 1.0], // Yellow
                                  colorTransAdd: [0.0, 0.0, 0.0, 0.0]
                                },
  
                                nodes: [
                                  {
                                    type: "translate",
                                    x: 7.0,
  
                                    nodes: [
                                      {
                                        type : "teapot"
                                      }
                                    ]
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  });
  
  SceneJS.setDebugConfigs({
    shading : {
      logScripts : false,
      validate: true
    }
  });
  
  /*----------------------------------------------------------------------
   * Scene rendering loop and mouse handler stuff follows
   *---------------------------------------------------------------------*/
  
  var scene = SceneJS.scene("theScene");
  var pitchRotate = scene.findNode("pitch");
  var yawRotate = scene.findNode("yaw");
  
  var yaw = 0;
  var pitch = 0;
  var lastX;
  var lastY;
  var dragging = false;
  
  var canvas = document.getElementById("theCanvas");
  
  function mouseDown(event) {
    lastX = event.clientX;
    lastY = event.clientY;
    dragging = true;
  }
  
  function mouseUp() {
    dragging = false;
  }
  
  /* On a mouse drag, we'll re-render the scene, passing in
   * incremented angles in each time.
   */
  function mouseMove(event) {
    if (dragging) {
      yaw += (event.clientX - lastX) * 0.5;
      pitch += (event.clientY - lastY) * 0.5;
  
      yawRotate("yaw").set("angle", yaw);
      pitchRotate.set("angle", pitch);
  
      lastX = event.clientX;
      lastY = event.clientY;
    }
  }
  
  canvas.addEventListener('mousedown', mouseDown, true);
  canvas.addEventListener('mousemove', mouseMove, true);
  canvas.addEventListener('mouseup', mouseUp, true);
  
  scene.start();