Recover and clean up WebGLDeferredRenderer (#9772)

c75213d5 · Takahiro · Mr.doob · b9ef4dce · c75213d5 · c75213d5
3 changed file
--- a/examples/files.js
+++ b/examples/files.js
@@ -10,6 +10,7 @@ var files = {
 		"webgl_clipping",
 		"webgl_clipping_advanced",
 		"webgl_decals",
+		"webgl_deferred_animation",
 		"webgl_depth_texture",
 		"webgl_effects_anaglyph",
 		"webgl_effects_parallaxbarrier",

--- a/examples/js/renderers/WebGLDeferredRenderer.js
+++ b/examples/js/renderers/WebGLDeferredRenderer.js
--- a/examples/webgl_deferred_animation.html
+++ b/examples/webgl_deferred_animation.html
+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<title>three.js webgl - deferred rendering [morphing + skinning]</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="container"></div>
+
+		<script src="js/libs/stats.min.js"></script>
+		<script src="../build/three.js"></script>
+		<script src="js/Detector.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/renderers/WebGLDeferredRenderer.js"></script>
+
+		<script>
+
+			var WIDTH = window.innerWidth;
+			var HEIGHT = window.innerHeight;
+
+			var windowHalfX = WIDTH / 2;
+			var windowHalfY = HEIGHT / 2;
+
+			var mouseX = 0, mouseY = 0;
+
+			var NEAR = 1.0, FAR = 350.0;
+			var VIEW_ANGLE = 45;
+
+			var renderer, camera, scene, stats, clock, mixer;
+
+			var numLights = 40;
+			var lights = [];
+
+			var ready = false;
+
+			init();
+			animate();
+
+			function init() {
+
+				renderer = new THREE.WebGLDeferredRenderer();
+				renderer.setSize( WIDTH, HEIGHT );
+
+				camera = new THREE.PerspectiveCamera( VIEW_ANGLE, WIDTH / HEIGHT, NEAR, FAR );
+				camera.position.z = 150;
+
+				scene = new THREE.Scene();
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '8px';
+				stats.domElement.style.zIndex = 100;
+
+				var container = document.getElementById( 'container' );
+				container.appendChild( renderer.domElement );
+				container.appendChild( stats.domElement );
+
+				initKnight();
+				initRoom();
+				initLights();
+
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+				window.addEventListener( 'resize', onWindowResize, false );
+
+				clock = new THREE.Clock();
+
+			}
+
+			function initKnight() {
+
+				var loader = new THREE.JSONLoader();
+
+				loader.load( "models/skinned/knight.js", function( geometry, materials ) {
+
+					var material = materials[ 0 ];
+					material.emissive.set( 0x101010 );
+					material.skinning = true;
+					material.morphTargets = true;
+
+					var mesh = new THREE.SkinnedMesh( geometry, material );
+					mesh.position.y = -30;
+					mesh.scale.multiplyScalar( 5 );
+
+					mixer = new THREE.AnimationMixer( mesh );
+
+					for ( var i = 0; i < mesh.geometry.animations.length; i ++ ) {
+
+						var action = mixer.clipAction( mesh.geometry.animations[ i ] );
+
+						if ( i === 1 ) action.timeScale = 0.25;
+
+						action.play();
+
+					}
+
+					scene.add( mesh );
+
+					ready = true;
+
+				} );
+
+			}
+
+			function initLights() {
+
+				var distance = 20;
+
+				var c = new THREE.Vector3();
+				var geometry = new THREE.SphereGeometry( 1, 1, 1 );
+
+				for ( var i = 0; i < numLights; i ++ ) {
+
+					var light = new THREE.PointLight( 0xffffff, 2.0, distance );
+					c.set( Math.random(), Math.random(), Math.random() ).normalize();
+					light.color.setRGB( c.x, c.y, c.z );
+					scene.add( light );
+					lights.push( light );
+
+					var material = new THREE.MeshBasicMaterial( { color: light.color } );
+					var emitter = new THREE.Mesh( geometry, material );
+					light.add( emitter );
+
+				}
+
+				var directionalLight = new THREE.DirectionalLight( 0x101010 );
+				directionalLight.position.set( -1, 1, 1 ).normalize();
+				scene.add( directionalLight );
+
+				var spotLight = new THREE.SpotLight( 0x404040 );
+				spotLight.position.set( 0, 50, 0 );
+				scene.add( spotLight );
+
+			}
+
+			function initRoom() {
+
+				var size = 100;
+				var geometry = new THREE.PlaneBufferGeometry( size, size );
+				var material = new THREE.MeshPhongMaterial( { color: 0x222222, specular: 0x222222, shininess: 75 } );
+				var transparentMaterial = new THREE.MeshPhongMaterial( { color: 0x222222, emissive: 0x88888888, specular: 0x222222, shininess: 75, opacity: 0.3, transparent: true } );
+
+				var room = new THREE.Object3D();
+				room.position.y = size / 2 - 30;
+
+				// top
+				mesh = new THREE.Mesh( geometry, material );
+				mesh.rotation.x = Math.PI/2;
+				mesh.position.y = size / 2;
+				room.add( mesh );
+
+				// bottom
+				mesh = new THREE.Mesh( geometry, material );
+				mesh.rotation.x = -Math.PI/2;
+				mesh.position.y = -size / 2;
+				room.add( mesh );
+
+				// left
+				mesh = new THREE.Mesh( geometry, material );
+				mesh.position.x = -size / 2;
+				mesh.rotation.y = Math.PI/2;
+				room.add( mesh );
+
+				// right
+				mesh = new THREE.Mesh( geometry, material );
+				mesh.position.x = size / 2;
+				mesh.rotation.y = -Math.PI/2;
+				room.add( mesh );
+
+				// back
+				mesh = new THREE.Mesh( geometry, material );
+				mesh.position.z = -size / 2;
+				room.add( mesh );
+
+				// front, to check if transparency works
+				mesh = new THREE.Mesh( geometry, transparentMaterial );
+				mesh.position.z = size / 2;
+				mesh.scale.multiplyScalar( 0.33 );
+				//room.add( mesh );
+
+				// back2, to check if transparency works
+				mesh = new THREE.Mesh( geometry, transparentMaterial );
+				mesh.position.z = -size / 4;
+				mesh.scale.multiplyScalar( 0.75 );
+				//room.add( mesh );
+
+				scene.add( room );
+
+			}
+
+			function onDocumentMouseMove( event ) {
+
+				mouseX = ( event.clientX - windowHalfX ) / 10.0;
+				mouseY = ( event.clientY - windowHalfY ) / 10.0;
+
+			}
+
+			function onWindowResize( event ) {
+
+				WIDTH = window.innerWidth;
+				HEIGHT = window.innerHeight;
+
+				windowHalfX = WIDTH / 2;
+				windowHalfY = HEIGHT / 2;
+
+				renderer.setSize( WIDTH, HEIGHT );
+
+				camera.aspect = WIDTH / HEIGHT;
+				camera.updateProjectionMatrix();
+
+			}
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				if ( ready ) {
+
+					update();
+					render();
+
+				}
+
+				stats.update();
+
+			}
+
+			function update() {
+
+				var delta = clock.getDelta();
+				var time = Date.now() * 0.0005;
+
+				mixer.update( delta / 2.0 );
+
+				for ( var i = 0, il = lights.length; i < il; i ++ ) {
+
+					var light = lights[ i ];
+					var x = Math.sin( time + i * 7.0 ) * 45;
+					var y = Math.cos( time + i * 5.0 ) * 45 + 20;
+					var z = Math.cos( time + i * 3.0 ) * 45;
+					light.position.set( x, y, z );
+
+				}
+
+			}
+
+			function render() {
+
+				camera.position.x += ( - mouseX - camera.position.x ) * .05;
+				camera.position.y += ( - mouseY - camera.position.y ) * .05;
+				camera.lookAt( scene.position );
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+	</body>
+
+</html>
\ No newline at end of file