|
|
@@ -0,0 +1,555 @@
|
|
|
+<!doctype html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8" />
|
|
|
+ <title>redPlant WebGL Deferred Rendering with Three.js</title>
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ background-color: #000;
|
|
|
+ margin: 0px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ #info {
|
|
|
+ position: absolute;
|
|
|
+ top: 0px; width: 100%;
|
|
|
+ color: #ffffff;
|
|
|
+ padding: 5px;
|
|
|
+ font-family: Monospace;
|
|
|
+ font-size: 13px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ color: #ff0080;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+ a:hover {
|
|
|
+ color: #0080ff;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<div id="info">
|
|
|
+ <a href="http://threejs.org" target="_blank">three.js</a> - deferred point lights WebGL demo by <a href="http://de.redplant.de" target=_blank>redPlant</a>.<br />
|
|
|
+ Walt Disney head by <a href="http://davidoreilly.com/post/18087489343/disneyhead" target="_blank">David OReilly</a><br>
|
|
|
+ Point Light attenuation formula by <a href="http://imdoingitwrong.wordpress.com/tag/glsl/" target=_blank>Tom Madams</a>
|
|
|
+</div>
|
|
|
+<div id="container">
|
|
|
+</div>
|
|
|
+</body>
|
|
|
+
|
|
|
+<script src="js/three/three.js"></script>
|
|
|
+<script src="js/three/Stats.js"></script>
|
|
|
+
|
|
|
+<script src="js/scripts/requestAnimationFrame.js"></script>
|
|
|
+<script src="js/scripts/ShaderExtras.js"></script>
|
|
|
+
|
|
|
+<script src="js/postprocessing/EffectComposer.js"></script>
|
|
|
+<script src="js/postprocessing/RenderPass.js"></script>
|
|
|
+<script src="js/postprocessing/ShaderPass.js"></script>
|
|
|
+<script src="js/postprocessing/MaskPass.js"></script>
|
|
|
+
|
|
|
+<script>
|
|
|
+var WIDTH = window.innerWidth;
|
|
|
+HEIGHT = window.innerHeight;
|
|
|
+var NEAR = 1.0, FAR = 250.0;
|
|
|
+var VIEW_ANGLE = 45;
|
|
|
+var ASPECT = WIDTH / HEIGHT;
|
|
|
+
|
|
|
+// core
|
|
|
+var renderer, camera, controls, stats, clock;
|
|
|
+
|
|
|
+// scenes and scene nodes
|
|
|
+var lightScene, lightNode, scene, sceneNode, emitterScene, emitterNode, quadScene, quadNode;
|
|
|
+// rendertargets
|
|
|
+var rtNormals, rtDepth, rtLightBuffer, rtEmitter;
|
|
|
+
|
|
|
+// composer
|
|
|
+var compNormals, compDepth, compLightBuffer, compFinal, compEmitter, compositePass;
|
|
|
+
|
|
|
+// materials
|
|
|
+var matNormal, matClipDepth, matBasic, matUnlit;
|
|
|
+
|
|
|
+var numLights = 0;
|
|
|
+var lights = new Array();
|
|
|
+
|
|
|
+// -----------------------
|
|
|
+// shader definitions
|
|
|
+// -----------------------
|
|
|
+var clipdepth_frag = ""+
|
|
|
+"varying vec4 clipPos;"+
|
|
|
+"void main() {"+
|
|
|
+"gl_FragColor = vec4(clipPos.z / clipPos.w, 1.0, 1.0, 1.0);"+
|
|
|
+"}";
|
|
|
+
|
|
|
+var clipdepth_vert = "" +
|
|
|
+"varying vec4 clipPos;"+
|
|
|
+
|
|
|
+"void main() {"+
|
|
|
+"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );"+
|
|
|
+"clipPos = gl_Position;"+
|
|
|
+"}";
|
|
|
+// -----------------------
|
|
|
+var normals_vert = "" +
|
|
|
+"varying vec3 normalView;"+
|
|
|
+
|
|
|
+"void main() {"+
|
|
|
+"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );"+
|
|
|
+"normalView = normalize(normalMatrix * normal);"+
|
|
|
+"}";
|
|
|
+var normals_frag = "" +
|
|
|
+"varying vec3 normalView;"+
|
|
|
+"void main() {"+
|
|
|
+"gl_FragColor = vec4(vec3(normalView * 0.5 + 0.5), 1.0);"+
|
|
|
+"}";
|
|
|
+// -----------------------
|
|
|
+var unlit_vert = "" +
|
|
|
+"varying vec4 clipPos;"+
|
|
|
+"void main() {"+
|
|
|
+"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );"+
|
|
|
+"clipPos = gl_Position;"+
|
|
|
+"}";
|
|
|
+
|
|
|
+var unlit_frag = "" +
|
|
|
+"varying vec4 clipPos;"+
|
|
|
+"uniform sampler2D samplerDepth;"+
|
|
|
+
|
|
|
+"uniform float viewHeight;"+
|
|
|
+"uniform float viewWidth;"+
|
|
|
+
|
|
|
+"uniform vec3 lightColor;" +
|
|
|
+
|
|
|
+"void main() {"+
|
|
|
+"vec2 texCoord = gl_FragCoord.xy / vec2(viewWidth, viewHeight);"+
|
|
|
+"float z = texture2D(samplerDepth, texCoord).x;"+
|
|
|
+"vec4 color = vec4(lightColor, 1.0);"+
|
|
|
+"float depth = (clipPos.z/clipPos.w);"+
|
|
|
+"if(depth > z && z > 0.0) color.w = 0.0;"+
|
|
|
+"gl_FragColor = color;"+
|
|
|
+"}";
|
|
|
+// -----------------------
|
|
|
+var deferredlight_vert = "" +
|
|
|
+"varying vec3 lightView;" +
|
|
|
+"uniform vec3 lightPos;" +
|
|
|
+"uniform mat4 matView;" +
|
|
|
+"void main()" +
|
|
|
+"{" +
|
|
|
+"gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.),lightView=vec3(matView*vec4(lightPos,1.));" +
|
|
|
+"}"
|
|
|
+
|
|
|
+var deferredlight_frag = "" +
|
|
|
+"varying vec3 lightView;"+
|
|
|
+
|
|
|
+"uniform sampler2D samplerDepth;"+
|
|
|
+"uniform sampler2D samplerNormals;"+
|
|
|
+"uniform sampler2D samplerLightBuffer;"+
|
|
|
+
|
|
|
+"uniform float lightRadius;"+
|
|
|
+"uniform float lightIntensity;"+
|
|
|
+"uniform float viewHeight;"+
|
|
|
+"uniform float viewWidth;"+
|
|
|
+
|
|
|
+"uniform vec3 lightColor;"+
|
|
|
+
|
|
|
+"uniform mat4 matProjInverse;"+
|
|
|
+
|
|
|
+"void main()"+
|
|
|
+"{"+
|
|
|
+"vec2 texCoord = gl_FragCoord.xy / vec2(viewWidth, viewHeight);"+
|
|
|
+"float z = texture2D(samplerDepth, texCoord).x;"+
|
|
|
+"if(z == 0.0)"+
|
|
|
+"{"+
|
|
|
+"gl_FragColor = vec4(vec3(0.0), 1.0);"+
|
|
|
+"return;"+
|
|
|
+"}"+
|
|
|
+"float x = texCoord.x * 2.0 - 1.0;"+
|
|
|
+"float y = texCoord.y * 2.0 - 1.0;"+
|
|
|
+
|
|
|
+"vec4 projectedPos = vec4(x, y, z, 1.0);"+
|
|
|
+
|
|
|
+"vec4 viewPos = matProjInverse * projectedPos;"+
|
|
|
+"viewPos.xyz /= viewPos.w;"+
|
|
|
+"viewPos.w = 1.0;"+
|
|
|
+
|
|
|
+"vec3 lightDir = lightView - viewPos.xyz;"+
|
|
|
+"float dist = length(lightDir);"+
|
|
|
+
|
|
|
+"float cutoff = 0.3;"+
|
|
|
+"float denom = dist/lightRadius + 1.0;"+
|
|
|
+"float attenuation = 1.0 / (denom*denom);"+
|
|
|
+"attenuation = (attenuation - cutoff) / (1.0 - cutoff);"+
|
|
|
+"attenuation = max(attenuation, 0.0);"+
|
|
|
+
|
|
|
+"vec3 normal = texture2D( samplerNormals, texCoord).xyz * 2.0 - 1.0;" +
|
|
|
+"float diffuse = max(dot(normal, normalize(lightDir)), 0.0);" +
|
|
|
+
|
|
|
+"vec4 color = vec4(0.0);"+
|
|
|
+"color.xyz = lightColor * lightIntensity;"+
|
|
|
+"color.w = attenuation;"+
|
|
|
+"gl_FragColor = color * diffuse;"+
|
|
|
+"}";
|
|
|
+var composite_vert = "" +
|
|
|
+"varying vec2 texCoord;"+
|
|
|
+"void main() {"+
|
|
|
+"vec4 pos = vec4(sign(position.xy),0.0,1.0);"+
|
|
|
+"texCoord=pos.xy*vec2(0.5,0.5)+0.5;"+
|
|
|
+"gl_Position = pos;"+
|
|
|
+"}";
|
|
|
+
|
|
|
+var composite_frag = "" +
|
|
|
+"varying vec2 texCoord;"+
|
|
|
+"uniform sampler2D samplerLightBuffer;" +
|
|
|
+"uniform sampler2D samplerEmitter;" +
|
|
|
+"uniform vec3 lightPos;" +
|
|
|
+
|
|
|
+"void main()" +
|
|
|
+"{" +
|
|
|
+"vec3 color = texture2D(samplerLightBuffer, texCoord).xyz;" +
|
|
|
+"vec3 emitter = texture2D(samplerEmitter, texCoord).xyz;"+
|
|
|
+"if(emitter != vec3(0.0)){"+
|
|
|
+"gl_FragColor = vec4(emitter, 1.0);" +
|
|
|
+"}"+
|
|
|
+"else{"+
|
|
|
+"gl_FragColor = vec4(color, 1.0);}" +
|
|
|
+"}"
|
|
|
+// -----------------------
|
|
|
+var normalShader = {
|
|
|
+ uniforms: {},
|
|
|
+ vertexShader: normals_vert,
|
|
|
+ fragmentShader: normals_frag
|
|
|
+};
|
|
|
+// -----------------------
|
|
|
+var clipDepthShader = {
|
|
|
+ uniforms: {},
|
|
|
+ vertexShader: clipdepth_vert,
|
|
|
+ fragmentShader: clipdepth_frag
|
|
|
+};
|
|
|
+// -----------------------
|
|
|
+var unlitShader = {
|
|
|
+ uniforms: {
|
|
|
+ samplerDepth: { type: "t", value: 0, texture: null },
|
|
|
+ viewWidth: { type: "f", value: WIDTH},
|
|
|
+ viewHeight: { type: "f", value: HEIGHT},
|
|
|
+ lightColor: { type: "v3", value: new THREE.Vector3( 0, 0, 0 )}
|
|
|
+ },
|
|
|
+ vertexShader: unlit_vert,
|
|
|
+ fragmentShader: unlit_frag
|
|
|
+};
|
|
|
+// -----------------------
|
|
|
+var lightShader = {
|
|
|
+ uniforms: {
|
|
|
+ samplerLightBuffer: { type: "t", value: 0, texture: null },
|
|
|
+ samplerNormals: { type: "t", value: 1, texture: null },
|
|
|
+ samplerDepth: { type: "t", value: 2, texture: null },
|
|
|
+ matView : { type: "m4", value: new THREE.Matrix4()},
|
|
|
+ matProjInverse : { type: "m4", value: new THREE.Matrix4()},
|
|
|
+ viewWidth: { type: "f", value: WIDTH},
|
|
|
+ viewHeight: { type: "f", value: HEIGHT},
|
|
|
+ lightPos: { type: "v3", value: new THREE.Vector3( 0, 0, 0 )},
|
|
|
+ lightColor: { type: "v3", value: new THREE.Vector3( 0, 0, 0 )},
|
|
|
+ lightIntensity: { type: "f", value: 1.0},
|
|
|
+ lightRadius: { type: "f", value: 1.0}
|
|
|
+ },
|
|
|
+ vertexShader: deferredlight_vert,
|
|
|
+ fragmentShader: deferredlight_frag
|
|
|
+};
|
|
|
+
|
|
|
+// -----------------------
|
|
|
+var compositeShader = {
|
|
|
+ uniforms: {
|
|
|
+ samplerLightBuffer: { type: "t", value: 0, texture: null },
|
|
|
+ samplerEmitter: { type: "t", value: 1, texture: null }
|
|
|
+ },
|
|
|
+ vertexShader: composite_vert,
|
|
|
+ fragmentShader: composite_frag
|
|
|
+};
|
|
|
+// -----------------------------
|
|
|
+function bootstrap()
|
|
|
+{
|
|
|
+ renderer = new THREE.WebGLRenderer();
|
|
|
+ renderer.setSize(WIDTH, HEIGHT);
|
|
|
+ renderer.setClearColorHex(0x000000);
|
|
|
+
|
|
|
+ var container = document.getElementById( 'container' );
|
|
|
+ container.appendChild(renderer.domElement);
|
|
|
+
|
|
|
+ // scene camera and shadow camera
|
|
|
+ camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
|
|
|
+ camera.position.z = 150;
|
|
|
+
|
|
|
+ controls = new THREE.TrackballControls( camera, renderer.domElement );
|
|
|
+
|
|
|
+ // scene for walt's head model
|
|
|
+ scene = new THREE.Scene();
|
|
|
+ sceneNode = new THREE.Object3D();
|
|
|
+ scene.add(sceneNode);
|
|
|
+ scene.add(camera);
|
|
|
+
|
|
|
+ // scene for light proxy geometry
|
|
|
+ lightScene = new THREE.Scene();
|
|
|
+ lightNode = new THREE.Object3D();
|
|
|
+ lightScene.add(lightNode);
|
|
|
+
|
|
|
+ // scene for the coloured emitter spheres
|
|
|
+ emitterScene = new THREE.Scene();
|
|
|
+ emitterNode = new THREE.Object3D();
|
|
|
+ emitterScene.add(emitterNode);
|
|
|
+
|
|
|
+ // full screen quad for compositing
|
|
|
+ quadScene = new THREE.Scene();
|
|
|
+ quadNode = new THREE.Object3D();
|
|
|
+ quadScene.add(quadNode);
|
|
|
+ quadNode.add(new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 )));
|
|
|
+
|
|
|
+ // stats
|
|
|
+ stats = new Stats();
|
|
|
+ stats.domElement.style.position = 'absolute';
|
|
|
+ stats.domElement.style.top = '8px';
|
|
|
+ stats.domElement.style.zIndex = 100;
|
|
|
+ container.appendChild( stats.domElement );
|
|
|
+
|
|
|
+ // clock
|
|
|
+ clock = new THREE.Clock();
|
|
|
+}
|
|
|
+// -----------------------------
|
|
|
+function createRenderTargets(){
|
|
|
+ var rtParams = {minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter,
|
|
|
+ format: THREE.RGBAFormat, type:THREE.FloatType};
|
|
|
+
|
|
|
+ // ----------------------------------------------------------
|
|
|
+ // g-buffer
|
|
|
+ // ----------------------------------------------------------
|
|
|
+ rtNormals = new THREE.WebGLRenderTarget( WIDTH, HEIGHT, rtParams );
|
|
|
+ rtDepth = new THREE.WebGLRenderTarget( WIDTH, HEIGHT, rtParams );
|
|
|
+
|
|
|
+ var passNormals = new THREE.RenderPass( scene, camera);
|
|
|
+ compNormals = new THREE.EffectComposer( renderer, rtNormals );
|
|
|
+ compNormals.addPass(passNormals );
|
|
|
+
|
|
|
+ var passDepth = new THREE.RenderPass( scene, camera);
|
|
|
+ compDepth = new THREE.EffectComposer( renderer, rtDepth );
|
|
|
+ compDepth.addPass( passDepth );
|
|
|
+
|
|
|
+ // ----------------------------------------------------------
|
|
|
+ // light emitter spheres
|
|
|
+ // ----------------------------------------------------------
|
|
|
+ var emitterPass = new THREE.RenderPass( emitterScene, camera);
|
|
|
+ rtEmitter = new THREE.WebGLRenderTarget( WIDTH, HEIGHT, rtParams );
|
|
|
+ compEmitter = new THREE.EffectComposer( renderer, rtEmitter);
|
|
|
+ compEmitter.addPass( emitterPass );
|
|
|
+
|
|
|
+ // ----------------------------------------------------------
|
|
|
+ // lighting pass
|
|
|
+ // ----------------------------------------------------------
|
|
|
+ rtLightBuffer = new THREE.WebGLRenderTarget( WIDTH, HEIGHT, rtParams );
|
|
|
+ rtLightBuffer.generateMipmaps = false;
|
|
|
+
|
|
|
+ var passLight = new THREE.RenderPass( lightScene, camera);
|
|
|
+ compLightBuffer = new THREE.EffectComposer( renderer, rtLightBuffer );
|
|
|
+ compLightBuffer.addPass(passLight);
|
|
|
+
|
|
|
+ lightShader.uniforms['samplerNormals'].texture = compNormals.renderTarget2;
|
|
|
+ lightShader.uniforms['samplerDepth'].texture = compDepth.renderTarget2;
|
|
|
+ lightShader.uniforms['samplerLightBuffer'].texture = rtLightBuffer;
|
|
|
+
|
|
|
+ for(var x = 0; x < numLights; x++){
|
|
|
+ // setup material
|
|
|
+ var matLight = new THREE.ShaderMaterial({
|
|
|
+ uniforms: THREE.UniformsUtils.clone( lightShader.uniforms ),
|
|
|
+ vertexShader: lightShader.vertexShader,
|
|
|
+ fragmentShader: lightShader.fragmentShader
|
|
|
+ });
|
|
|
+ matLight.blending = THREE.AdditiveBlending;
|
|
|
+ matLight.transparent = true;
|
|
|
+ matLight.depthWrite = false;
|
|
|
+ matLight.uniforms["lightPos"].value = lights[x].position;
|
|
|
+ matLight.uniforms["lightRadius"].value = lights[x].distance;
|
|
|
+ matLight.uniforms["lightIntensity"].value = lights[x].intensity;
|
|
|
+ matLight.uniforms["lightColor"].value = lights[x].color;
|
|
|
+
|
|
|
+ // setup proxy geometry for this light
|
|
|
+ var geomLight = new THREE.SphereGeometry(lights[x].distance, 10, 10);
|
|
|
+ var meshLight = new THREE.Mesh(geomLight, matLight);
|
|
|
+ lightNode.add(meshLight);
|
|
|
+
|
|
|
+ // create emitter sphere
|
|
|
+ var geomEmitter = new THREE.SphereGeometry(0.7, 7, 7);
|
|
|
+ var matEmitter = new THREE.ShaderMaterial({
|
|
|
+ uniforms: THREE.UniformsUtils.clone( unlitShader.uniforms ),
|
|
|
+ vertexShader: unlitShader.vertexShader,
|
|
|
+ fragmentShader: unlitShader.fragmentShader
|
|
|
+ });
|
|
|
+ var meshEmitter = new THREE.Mesh(geomEmitter, matEmitter);
|
|
|
+ meshEmitter.position = lights[x].position;
|
|
|
+ emitterNode.add(meshEmitter);
|
|
|
+
|
|
|
+ // add emitter to light node
|
|
|
+ meshLight.emitter = meshEmitter;
|
|
|
+ }
|
|
|
+ // ----------------------------------------------------------
|
|
|
+ // composite
|
|
|
+ // ----------------------------------------------------------
|
|
|
+ compositeShader.uniforms['samplerLightBuffer'].texture = compLightBuffer.renderTarget2;
|
|
|
+ compositeShader.uniforms['samplerEmitter'].texture = compEmitter.renderTarget2;
|
|
|
+
|
|
|
+ compositePass = new THREE.ShaderPass( compositeShader );
|
|
|
+ compositePass.needsSwap = true;
|
|
|
+ compositePass.renderToScreen = true;
|
|
|
+
|
|
|
+ compFinal = new THREE.EffectComposer( renderer, quadScene );
|
|
|
+ compFinal.addPass( compositePass );
|
|
|
+}
|
|
|
+// -----------------------------
|
|
|
+function initScene(geometry){
|
|
|
+ geometry.computeVertexNormals();
|
|
|
+
|
|
|
+ var meshHead = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial());
|
|
|
+ meshHead.position.y = -35;
|
|
|
+ sceneNode.add(meshHead);
|
|
|
+}
|
|
|
+// -----------------------------
|
|
|
+function initMaterials(){
|
|
|
+ //
|
|
|
+ matNormal = new THREE.ShaderMaterial({
|
|
|
+ uniforms: normalShader.uniforms,
|
|
|
+ vertexShader: normalShader.vertexShader,
|
|
|
+ fragmentShader: normalShader.fragmentShader
|
|
|
+ });
|
|
|
+
|
|
|
+ matClipDepth = new THREE.ShaderMaterial({
|
|
|
+ uniforms: clipDepthShader.uniforms,
|
|
|
+ vertexShader: clipDepthShader.vertexShader,
|
|
|
+ fragmentShader: clipDepthShader.fragmentShader
|
|
|
+ });
|
|
|
+}
|
|
|
+// -----------------------------
|
|
|
+function initLights(){
|
|
|
+ var tmp = new THREE.PointLight();
|
|
|
+ tmp.color = new THREE.Vector3( 0.0, 0.0, 1.0);
|
|
|
+ tmp.intensity = 1.0;
|
|
|
+ tmp.distance = 50;
|
|
|
+ lights[0] = tmp;
|
|
|
+
|
|
|
+ var tmp = new THREE.PointLight();
|
|
|
+ tmp.color = new THREE.Vector3( 0.0, 1.0, 0.0);
|
|
|
+ tmp.intensity = 1.0;
|
|
|
+ tmp.distance = 50;
|
|
|
+ lights[1] = tmp;
|
|
|
+
|
|
|
+ var tmp = new THREE.PointLight();
|
|
|
+ tmp.color = new THREE.Vector3( 1.0, 0.0, 0.0);
|
|
|
+ tmp.intensity = 1.0;
|
|
|
+ tmp.distance = 50;
|
|
|
+ lights[2] = tmp;
|
|
|
+
|
|
|
+ var tmp = new THREE.PointLight();
|
|
|
+ tmp.color = new THREE.Vector3( 0.0, 1.0, 1.0);
|
|
|
+ tmp.intensity = 1.0;
|
|
|
+ tmp.distance = 50;
|
|
|
+ lights[3] = tmp;
|
|
|
+
|
|
|
+ numLights = 4;
|
|
|
+}
|
|
|
+// -----------------------------
|
|
|
+function animate()
|
|
|
+{
|
|
|
+ requestAnimFrame(animate);
|
|
|
+ controls.update();
|
|
|
+ stats.update();
|
|
|
+ render();
|
|
|
+}
|
|
|
+// -----------------------------
|
|
|
+function render()
|
|
|
+{
|
|
|
+ // -----------------------------
|
|
|
+ // g-buffer depth
|
|
|
+ for(var idx in sceneNode.children)
|
|
|
+ {
|
|
|
+ var tmp = sceneNode.children[idx];
|
|
|
+ tmp.material = matClipDepth;
|
|
|
+ }
|
|
|
+ compDepth.render();
|
|
|
+ // -----------------------------
|
|
|
+ // g-buffer normals
|
|
|
+ for(var idx in sceneNode.children)
|
|
|
+ {
|
|
|
+ var tmp = sceneNode.children[idx];
|
|
|
+ tmp.material = matNormal;
|
|
|
+ }
|
|
|
+ compNormals.render();
|
|
|
+
|
|
|
+ // -----------------------------
|
|
|
+ // emitter pass
|
|
|
+ for(var idx in lightNode.children)
|
|
|
+ {
|
|
|
+ var light = lightNode.children[idx];
|
|
|
+ var color = light.material.uniforms["lightColor"].value;
|
|
|
+ var emitter = light.emitter;
|
|
|
+ emitter.material.uniforms['samplerDepth'].texture = compDepth.renderTarget2;
|
|
|
+ emitter.material.uniforms["lightColor"].value = color;
|
|
|
+ }
|
|
|
+ compEmitter.render();
|
|
|
+
|
|
|
+ // -----------------------------
|
|
|
+ // light pass
|
|
|
+ for(var idx in lightNode.children)
|
|
|
+ {
|
|
|
+ camera.projectionMatrixInverse.getInverse(camera.projectionMatrix);
|
|
|
+ lightNode.children[idx].material.uniforms["matProjInverse"].value = camera.projectionMatrixInverse;
|
|
|
+ lightNode.children[idx].material.uniforms["matView"].value = camera.matrixWorldInverse;
|
|
|
+ }
|
|
|
+
|
|
|
+ var time = Date.now() * 0.0005;
|
|
|
+ // update lights
|
|
|
+ var lightPosition = lightNode.children[0].material.uniforms["lightPos"].value;
|
|
|
+ lightPosition.x = Math.sin( time * 0.7 ) * 30;
|
|
|
+ lightPosition.y = Math.cos( time * 0.5 ) * 40;
|
|
|
+ lightPosition.z = Math.cos( time * 0.3 ) * 30;
|
|
|
+ lightNode.children[0].emitter.position = lightPosition;
|
|
|
+
|
|
|
+ lightPosition = lightNode.children[1].material.uniforms["lightPos"].value;
|
|
|
+ lightPosition.x = Math.sin( time * 0.5 ) * 30;
|
|
|
+ lightPosition.y = Math.cos( time * 0.5 ) * 40;
|
|
|
+ lightPosition.z = Math.cos( time * 0.7 ) * 30;
|
|
|
+ lightNode.children[1].emitter.position = lightPosition;
|
|
|
+
|
|
|
+ lightPosition = lightNode.children[2].material.uniforms["lightPos"].value;
|
|
|
+ lightPosition.x = Math.sin( time * 0.7 ) * 30;
|
|
|
+ lightPosition.y = Math.cos( time * 0.3 ) * 40;
|
|
|
+ lightPosition.z = Math.cos( time * 0.5 ) * 30;
|
|
|
+ lightNode.children[2].emitter.position = lightPosition;
|
|
|
+
|
|
|
+ lightPosition = lightNode.children[3].material.uniforms["lightPos"].value;
|
|
|
+ lightPosition.x = Math.sin( time * 0.3 ) * 30;
|
|
|
+ lightPosition.y = Math.cos( time * 0.7 ) * 40;
|
|
|
+ lightPosition.z = Math.cos( time * 0.5 ) * 30;
|
|
|
+ lightNode.children[3].emitter.position = lightPosition;
|
|
|
+
|
|
|
+ compLightBuffer.render();
|
|
|
+
|
|
|
+ // -----------------------------
|
|
|
+ // composite pass
|
|
|
+ compFinal.render();
|
|
|
+}
|
|
|
+
|
|
|
+// -----------------------------
|
|
|
+// entry point
|
|
|
+var binLoader = new THREE.BinaryLoader();
|
|
|
+binLoader.load( "assets/models/waltdisney.js", function(geometry) {
|
|
|
+ bootstrap();
|
|
|
+ initScene(geometry);
|
|
|
+ initMaterials();
|
|
|
+ initLights();
|
|
|
+ createRenderTargets();
|
|
|
+ animate();
|
|
|
+});
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+</html>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
alteredq