/* Custom fog 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 defines a fog effect. * * The shader binds two custom functions into the fragment shader that * is automatically generated by SceneJS; one function collects the * view-space fragment position, while the other function intercepts * the outgoing fragment colour and applies the fog effect to it, which is * computed from the fragment position's Z-depth. * * 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: "fogShader", shaders: [ /*---------------------------------------------------------------------- * Custom fog fragment shader *--------------------------------------------------------------------*/ { stage: "fragment", code: [ /* Parameter uniforms */ "uniform float fogMode;", "uniform float fogDensity;", "uniform float fogStart;", "uniform float fogEnd;", "uniform vec3 fogColor;", /* Collected view-space fragment position */ "vec4 _viewPos;", /* Collects view-space fragment position */ "void fogViewPosFunc(vec4 viewPos) {", " _viewPos = viewPos;", "}", /* Modifies fragment colour */ "vec4 fogPixelColorFunc(vec4 color) {", " if (fogMode != 0.0) {", // not "disabled" " float fogFactor = (1.0 - fogDensity);", " if (fogMode != 4.0) {", // not "constant" " if (fogMode == 1.0) {", // "linear" " fogFactor *= clamp(pow(max((fogEnd - length(- _viewPos.xyz)) / " + " (fogEnd - fogStart), 0.0), 2.0), 0.0, 1.0);", " } else {", // "exp" or "exp2" " fogFactor *= clamp((fogEnd - length(- _viewPos.xyz)) / (fogEnd - fogStart), 0.0, 1.0);", " }", " }", " return color * (fogFactor + vec4(fogColor, 1.0)) * (1.0 - fogFactor);", " }", " return color;", "}" ], /* Bind our functions to hooks */ hooks: { viewPos: "fogViewPosFunc", pixelColor: "fogPixelColorFunc" } } ], /* Declare parameters and set default values */ params: { fogMode: 0.0, // 0.0 disabled, 1.0 linear, 2.0 exponential, 3.0 quadratic, 4.0 constant fogDensity: 1.0, // Fog density in range of [0.0..1.0] fogStart: 0.0, // Nearest point of fog in view space (receeding Z-axis is positive) fogEnd: 1000.0, // Furthest point of fog in view space fogColor: [0.0, 0.0, 0.0, 1.0] // Colour of fog - the colour that objects blend into } } ] }, /*---------------------------------------------------------------------- * 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.3, g: 0.3, b: 1.0 }, 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. *--------------------------------------------------------------------*/ /*---------------------------------------------------------------------- * First teapot, wrapped in an instance of the shader, which is * parameterised to make the teapot red *--------------------------------------------------------------------*/ // Instance the custom shader { type: "shader", coreId: "fogShader", nodes: [ // Set the shader's params { type: "shaderParams", params: { fogMode: 3.0, fogDensity: 0.5, fogStart: 20.0, fogEnd: 30.0, fogColor: [0.0, 0.0, 0.0] }, nodes: [ { type: "translate", x: -7.0, nodes: [ { type : "teapot" } ] }, { type: "translate", x: 0.0, nodes: [ { type : "teapot" } ] }, { type: "translate", x: 7.0, nodes: [ { type : "teapot" } ] } ] } ] } ] } ] } ] } ] } ] } ] }); /*---------------------------------------------------------------------- * 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 touchStart(event) { lastX = event.targetTouches[0].clientX; lastY = event.targetTouches[0].clientY; dragging = true; } function mouseUp() { dragging = false; } function touchEnd() { dragging = false; } 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); } /* On a mouse/touch drag, we'll re-render the scene, passing in * incremented angles in each time. */ function actionMove(posX, posY) { if (dragging) { yaw += (posX - lastX) * 0.5; pitch += (posY - lastY) * 0.5; yawRotate.set("angle", yaw); pitchRotate.set("angle", pitch); lastX = posX; lastY = posY; } } 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();