|
|
@@ -0,0 +1,302 @@
|
|
|
+<!DOCTYPE HTML>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <title>three.js webgl - deferred rendering</title>
|
|
|
+ <meta charset="utf-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ background-color: #000;
|
|
|
+ margin: 0px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ #info {
|
|
|
+ position: absolute;
|
|
|
+ top: 20px; 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ #stats { position: absolute; top:10px; left: 5px }
|
|
|
+ #stats #fps { background: transparent !important }
|
|
|
+ #stats #fps #fpsText { color: #aaa !important }
|
|
|
+ #stats #fps #fpsGraph { display: none }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+
|
|
|
+ <body>
|
|
|
+ <div id="info">
|
|
|
+ <a href="http://threejs.org" target="_blank">three.js</a> - deferred area lights WebGL demo by <a href="http://de.redplant.de" target=_blank>redPlant</a> -
|
|
|
+ based on <a href="http://www.gamedev.net/topic/552315-glsl-area-light-implementation/" target=_blank>ArKano22's</a> glsl implementation
|
|
|
+ </div>
|
|
|
+ <div id="container"></div>
|
|
|
+
|
|
|
+ <script src="../build/three.min.js"></script>
|
|
|
+
|
|
|
+ <script src="js/Detector.js"></script>
|
|
|
+ <script src="js/libs/stats.min.js"></script>
|
|
|
+
|
|
|
+ <script src="js/renderers/WebGLDeferredRenderer.js"></script>
|
|
|
+ <script src="js/ShaderDeferred.js"></script>
|
|
|
+
|
|
|
+ <script src="js/shaders/CopyShader.js"></script>
|
|
|
+ <script src="js/shaders/FXAAShader.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>
|
|
|
+
|
|
|
+ if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
|
|
+
|
|
|
+ var SCALE = 1;
|
|
|
+ var MARGIN = 100;
|
|
|
+
|
|
|
+ var WIDTH = window.innerWidth;
|
|
|
+ var HEIGHT = window.innerHeight - 2 * MARGIN;
|
|
|
+
|
|
|
+ var NEAR = 1.0, FAR = 350.0;
|
|
|
+ var VIEW_ANGLE = 40;
|
|
|
+
|
|
|
+ // controls
|
|
|
+
|
|
|
+ var mouseX = 0;
|
|
|
+ var mouseY = 0;
|
|
|
+
|
|
|
+ var targetX = 0, targetY = 0;
|
|
|
+ var angle = 0;
|
|
|
+ var target = new THREE.Vector3( 0, 0, 0 );
|
|
|
+
|
|
|
+ var windowHalfX = window.innerWidth / 2;
|
|
|
+ var windowHalfY = window.innerHeight / 2;
|
|
|
+
|
|
|
+ // core
|
|
|
+
|
|
|
+ var renderer, camera, scene, stats, clock;
|
|
|
+
|
|
|
+ // lights
|
|
|
+
|
|
|
+ var numLights = 50;
|
|
|
+ var lights = [];
|
|
|
+
|
|
|
+ //
|
|
|
+
|
|
|
+ init();
|
|
|
+ animate();
|
|
|
+
|
|
|
+ // -----------------------------
|
|
|
+
|
|
|
+ function init() {
|
|
|
+
|
|
|
+ // renderer
|
|
|
+
|
|
|
+ renderer = new THREE.WebGLDeferredRenderer( { width: WIDTH, height: HEIGHT, scale: SCALE, antialias: true } );
|
|
|
+
|
|
|
+ renderer.domElement.style.position = "absolute";
|
|
|
+ renderer.domElement.style.top = MARGIN + "px";
|
|
|
+ renderer.domElement.style.left = "0px";
|
|
|
+
|
|
|
+ var container = document.getElementById( 'container' );
|
|
|
+ container.appendChild( renderer.domElement );
|
|
|
+
|
|
|
+ // camera
|
|
|
+
|
|
|
+ camera = new THREE.PerspectiveCamera( VIEW_ANGLE, WIDTH / HEIGHT, NEAR, FAR );
|
|
|
+ camera.position.y = 40;
|
|
|
+
|
|
|
+ // scene
|
|
|
+
|
|
|
+ scene = new THREE.Scene();
|
|
|
+ scene.add( camera );
|
|
|
+
|
|
|
+ // 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();
|
|
|
+
|
|
|
+ // add lights
|
|
|
+
|
|
|
+ initLights();
|
|
|
+
|
|
|
+ // add objects
|
|
|
+
|
|
|
+ initObjects();
|
|
|
+
|
|
|
+ // events
|
|
|
+
|
|
|
+ document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
|
+ window.addEventListener( 'resize', onWindowResize, false );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // -----------------------------
|
|
|
+
|
|
|
+ function createAreaEmitter( light ) {
|
|
|
+
|
|
|
+ var geometry = new THREE.CubeGeometry( 1, 1, 1 );
|
|
|
+ var material = new THREE.MeshBasicMaterial( { color: light.color.getHex() } );
|
|
|
+
|
|
|
+ var emitter = new THREE.Mesh( geometry, material );
|
|
|
+
|
|
|
+ emitter.position = light.position;
|
|
|
+ emitter.rotation = light.rotation;
|
|
|
+ emitter.scale.set( light.width * 2, 0.2, light.height * 2 );
|
|
|
+
|
|
|
+ return emitter;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function setupAreaLight( light ) {
|
|
|
+
|
|
|
+ var matrix = light.matrixWorld;
|
|
|
+
|
|
|
+ light.right.set( 1, 0, 0 );
|
|
|
+ light.normal.set( 0, -1, 0 );
|
|
|
+ light.right = matrix.multiplyVector3( light.right );
|
|
|
+ light.normal = matrix.multiplyVector3( light.normal );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function initLights() {
|
|
|
+
|
|
|
+ var areaLight1 = new THREE.AreaLight( 0xffffff );
|
|
|
+ areaLight1.position.set( 0.0001, 10.0001, -19.5001 );
|
|
|
+ areaLight1.rotation.set( -0.74719, 0.0001, 0.0001 );
|
|
|
+ areaLight1.width = 10;
|
|
|
+ areaLight1.height = 1;
|
|
|
+
|
|
|
+ scene.add( areaLight1 );
|
|
|
+
|
|
|
+ var meshEmitter = createAreaEmitter( areaLight1 );
|
|
|
+ scene.add( meshEmitter );
|
|
|
+
|
|
|
+ //
|
|
|
+
|
|
|
+ var areaLight2 = new THREE.AreaLight( 0x00ff00 );
|
|
|
+ areaLight2.position.set( -19.0001, 3.0001, 0.0001 );
|
|
|
+ areaLight2.rotation.set( -1.5707, 0.0001, 1.5707 );
|
|
|
+ areaLight2.width = 8;
|
|
|
+ areaLight2.height = 1;
|
|
|
+
|
|
|
+ scene.add( areaLight2 );
|
|
|
+
|
|
|
+ var meshEmitter = createAreaEmitter( areaLight2 );
|
|
|
+ scene.add( meshEmitter );
|
|
|
+
|
|
|
+ //
|
|
|
+
|
|
|
+ var areaLight3 = new THREE.AreaLight( 0x0000ff );
|
|
|
+ areaLight3.position.set( 19.0001, 3.0001, 0.0001 );
|
|
|
+ areaLight3.rotation.set( 1.5707, 0.0001, -1.5707 );
|
|
|
+ areaLight3.width = 8;
|
|
|
+ areaLight3.height = 1;
|
|
|
+
|
|
|
+ scene.add( areaLight3 );
|
|
|
+
|
|
|
+ var meshEmitter = createAreaEmitter( areaLight3 );
|
|
|
+ scene.add( meshEmitter );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // -----------------------------
|
|
|
+
|
|
|
+ function initObjects() {
|
|
|
+
|
|
|
+ var loader = new THREE.BinaryLoader();
|
|
|
+ loader.load( "obj/box/box.js", function( geometry, materials ) {
|
|
|
+
|
|
|
+ var object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( ) );
|
|
|
+ object.position.x = 0;
|
|
|
+ object.position.y = 0;
|
|
|
+ object.scale.multiplyScalar( 2 );
|
|
|
+ scene.add( object );
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // -----------------------------
|
|
|
+
|
|
|
+ function onWindowResize( event ) {
|
|
|
+
|
|
|
+ windowHalfX = window.innerWidth / 2;
|
|
|
+ windowHalfY = window.innerHeight / 2;
|
|
|
+
|
|
|
+ WIDTH = window.innerWidth;
|
|
|
+ HEIGHT = window.innerHeight - 2 * MARGIN;
|
|
|
+
|
|
|
+ renderer.setSize( WIDTH, HEIGHT );
|
|
|
+
|
|
|
+ camera.aspect = WIDTH / HEIGHT;
|
|
|
+ camera.updateProjectionMatrix();
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function onDocumentMouseMove( event ) {
|
|
|
+
|
|
|
+ mouseX = ( event.clientX - windowHalfX ) * 1;
|
|
|
+ mouseY = ( event.clientY - windowHalfY ) * 1;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // -----------------------------
|
|
|
+
|
|
|
+ function animate() {
|
|
|
+
|
|
|
+ requestAnimationFrame( animate );
|
|
|
+
|
|
|
+ render();
|
|
|
+ stats.update();
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function render() {
|
|
|
+
|
|
|
+ // update camera
|
|
|
+
|
|
|
+ var delta = clock.getDelta();
|
|
|
+
|
|
|
+ targetX = mouseX * .001;
|
|
|
+ targetY = mouseY * .001;
|
|
|
+
|
|
|
+ angle += 0.05 * ( targetX - angle );
|
|
|
+
|
|
|
+ camera.position.x = -Math.sin( angle ) * 40;
|
|
|
+ camera.position.z = Math.cos( angle ) * 40;
|
|
|
+
|
|
|
+ camera.lookAt( target );
|
|
|
+
|
|
|
+ // render
|
|
|
+
|
|
|
+ renderer.render( scene, camera );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+
|
|
|
+</html>
|
alteredq