Merge remote-tracking branch 'mrdoob/dev' into dev

editor/css/main.css

@@ -116,6 +116,18 @@ textarea, input { outline: none; } /* osx */
 	color: #8888ee;
 }
 
+.Line {
+	color: #88ee88;
+}
+
+.LineSegments {
+	color: #88ee88;
+}
+
+.Points {
+	color: #ee8888;
+}
+
 /* */
 
 .PointLight {

examples/js/loaders/ColladaLoader.js

@@ -120,7 +120,7 @@
 
 		parse: function( text ) {
 
-			COLLADA = new DOMParser().parseFromString( text, 'text/xml' );
+			COLLADA = new DOMParser().parseFromString( text, 'application/xml' );
 
 			this.parseAsset();
 			this.setUpConversion();

examples/js/loaders/ColladaLoader2.js

@@ -84,7 +84,7 @@ THREE.ColladaLoader.prototype = {
 
 		// library
 
-		function buildLibrary( data, libraryName, nodeName, parser ) {
+		function parseLibrary( data, libraryName, nodeName, parser ) {
 
 			var library = xml.getElementsByTagName( libraryName )[ 0 ];
 
@@ -94,8 +94,7 @@ THREE.ColladaLoader.prototype = {
 
 				for ( var i = 0; i < elements.length; i ++ ) {
 
-					var element = elements[ i ];
-					data[ element.getAttribute( 'id' ) ] = parser( element );
+					parser( elements[ i ] );
 
 				}
 
@@ -103,13 +102,48 @@ THREE.ColladaLoader.prototype = {
 
 		}
 
+		function buildLibrary( data, builder ) {
+
+			for ( var name in data ) {
+
+				var object = data[ name ];
+				object.build = builder( data[ name ] );
+
+			}
+
+		}
+
+		// get
+
+		function getBuild( data, builder ) {
+
+			if ( data.build !== undefined ) return data.build;
+
+			data.build = builder( data );
+
+			return data.build;
+
+		}
+
 		// image
 
 		var imageLoader = new THREE.ImageLoader();
 
 		function parseImage( xml ) {
 
-			var url = xml.getElementsByTagName( 'init_from' )[ 0 ].textContent;
+			var data = {
+				url: xml.getElementsByTagName( 'init_from' )[ 0 ].textContent
+			};
+
+			library.images[ xml.getAttribute( 'id' ) ] = data;
+
+		}
+
+		function buildImage( data ) {
+
+			if ( data.build !== undefined ) return data.build;
+
+			var url = data.url;
 
 			if ( baseUrl !== undefined ) url = baseUrl + url;
 
@@ -117,11 +151,25 @@ THREE.ColladaLoader.prototype = {
 
 		}
 
+		function getImage( id ) {
+
+			return getBuild( library.images[ id ], buildImage );
+
+		}
+
 		// effect
 
 		function parseEffect( xml ) {
 
-			// console.log( xml );
+		}
+
+		function buildEffect( data ) {
+
+		}
+
+		function getEffect( id ) {
+
+			return getBuild( library.effects[ id ], buildEffect );
 
 		}
 
@@ -129,14 +177,29 @@ THREE.ColladaLoader.prototype = {
 
 		function parseCamera( xml ) {
 
-			console.log( 'ColladaLoader.parseCamera: TODO')
+			var data = {
+				name: xml.getAttribute( 'name' )
+			};
+
+			library.cameras[ xml.getAttribute( 'id' ) ] = {};
+
+		}
+
+		function buildCamera( data ) {
 
 			var camera = new THREE.PerspectiveCamera();
-			camera.name = xml.getAttribute( 'name' );
+			camera.name = data.name;
+
 			return camera;
 
 		}
 
+		function getCamera( id ) {
+
+			return getBuild( library.cameras[ id ], buildCamera );
+
+		}
+
 		// light
 
 		function parseLight( xml ) {
@@ -159,34 +222,7 @@ THREE.ColladaLoader.prototype = {
 
 			}
 
-			//
-
-			var light;
-
-			switch ( data.technique ) {
-
-				case 'directional':
-					light = new THREE.DirectionalLight();
-					break;
-
-				case 'point':
-					light = new THREE.PointLight();
-					break;
-
-				case 'spot':
-					light = new THREE.SpotLight();
-					break;
-
-				case 'ambient':
-					light = new THREE.AmbientLight();
-					break;
-
-			}
-
-			if ( data.parameters.color ) light.color.copy( data.parameters.color );
-			if ( data.parameters.distance ) light.distance = data.parameters.distance;
-
-			return light;
+			library.lights[ xml.getAttribute( 'id' ) ] = data;
 
 		}
 
@@ -252,15 +288,48 @@ THREE.ColladaLoader.prototype = {
 
 		}
 
-		// geometry
+		function buildLight( data ) {
+
+			var light;
+
+			switch ( data.technique ) {
+
+				case 'directional':
+					light = new THREE.DirectionalLight();
+					break;
+
+				case 'point':
+					light = new THREE.PointLight();
+					break;
+
+				case 'spot':
+					light = new THREE.SpotLight();
+					break;
 
-		var lineMaterial = new THREE.LineBasicMaterial();
-		var meshMaterial = new THREE.MeshPhongMaterial();
+				case 'ambient':
+					light = new THREE.AmbientLight();
+					break;
+
+			}
+
+			if ( data.parameters.color ) light.color.copy( data.parameters.color );
+			if ( data.parameters.distance ) light.distance = data.parameters.distance;
+
+			return light;
+
+		}
+
+		function getLight( id ) {
+
+			return getBuild( library.lights[ id ], buildLight );
+
+		}
+
+		// geometry
 
 		function parseGeometry( xml ) {
 
 			var data = {
-				id: xml.getAttribute( 'id' ),
 				name: xml.getAttribute( 'name' ),
 				sources: {},
 				primitives: []
@@ -302,7 +371,51 @@ THREE.ColladaLoader.prototype = {
 
 			}
 
-			//
+			library.geometries[ xml.getAttribute( 'id' ) ] = data;
+
+		}
+
+		function parseGeometryPrimitive( xml ) {
+
+			var primitive = {
+				type: xml.nodeName,
+				inputs: {},
+				stride: 0
+			};
+
+			for ( var i = 0, l = xml.childNodes.length; i < l; i ++ ) {
+
+				var child = xml.childNodes[ i ];
+
+				if ( child.nodeType !== 1 ) continue;
+
+				switch ( child.nodeName ) {
+
+					case 'input':
+						var id = parseId( child.getAttribute( 'source' ) );
+						var semantic = child.getAttribute( 'semantic' );
+						var offset = parseInt( child.getAttribute( 'offset' ) );
+						primitive.inputs[ semantic ] = { id: id, offset: offset };
+						primitive.stride = Math.max( primitive.stride, offset + 1 );
+						break;
+
+					case 'vcount':
+						primitive.vcount = parseInts( child.textContent );
+						break;
+
+					case 'p':
+						primitive.p = parseInts( child.textContent );
+						break;
+
+				}
+
+			}
+
+			return primitive;
+
+		}
+
+		function buildGeometry( data ) {
 
 			var group = new THREE.Group();
 
@@ -412,16 +525,16 @@ THREE.ColladaLoader.prototype = {
 				switch ( primitive.type ) {
 
 					case 'lines':
-						group.add( new THREE.LineSegments( geometry, lineMaterial ) );
+						group.add( new THREE.LineSegments( geometry ) );
 						break;
 
 					case 'linestrips':
-						group.add( new THREE.Line( geometry, lineMaterial ) );
+						group.add( new THREE.Line( geometry ) );
 						break;
 
 					case 'triangles':
 					case 'polylist':
-						group.add( new THREE.Mesh( geometry, meshMaterial ) );
+						group.add( new THREE.Mesh( geometry ) );
 						break;
 
 				}
@@ -440,43 +553,9 @@ THREE.ColladaLoader.prototype = {
 
 		}
 
-		function parseGeometryPrimitive( xml ) {
+		function getGeometry( id ) {
 
-			var primitive = {
-				type: xml.nodeName,
-				inputs: {},
-				stride: 0
-			};
-
-			for ( var i = 0, l = xml.childNodes.length; i < l; i ++ ) {
-
-				var child = xml.childNodes[ i ];
-
-				if ( child.nodeType !== 1 ) continue;
-
-				switch ( child.nodeName ) {
-
-					case 'input':
-						var id = parseId( child.getAttribute( 'source' ) );
-						var semantic = child.getAttribute( 'semantic' );
-						var offset = parseInt( child.getAttribute( 'offset' ) );
-						primitive.inputs[ semantic ] = { id: id, offset: offset };
-						primitive.stride = Math.max( primitive.stride, offset + 1 );
-						break;
-
-					case 'vcount':
-						primitive.vcount = parseInts( child.textContent );
-						break;
-
-					case 'p':
-						primitive.p = parseInts( child.textContent );
-						break;
-
-				}
-
-			}
-
-			return primitive;
+			return getBuild( library.geometries[ id ], buildGeometry );
 
 		}
 
@@ -487,10 +566,14 @@ THREE.ColladaLoader.prototype = {
 
 		function parseNode( xml ) {
 
-			var node = {
+			var data = {
 				name: xml.getAttribute( 'name' ),
 				matrix: new THREE.Matrix4(),
-				children: []
+				instanceCameras: [],
+				instanceLights: [],
+				instanceGeometries: [],
+				instanceNodes: [],
+				nodes: []
 			};
 
 			for ( var i = 0; i < xml.childNodes.length; i ++ ) {
@@ -502,45 +585,46 @@ THREE.ColladaLoader.prototype = {
 				switch ( child.nodeName ) {
 
 					case 'instance_camera':
-						node.camera = library.cameras[ parseId( child.getAttribute( 'url' ) ) ];
+						data.instanceCameras.push( parseId( child.getAttribute( 'url' ) ) );
 						break;
 
 					case 'instance_light':
-						node.light = library.lights[ parseId( child.getAttribute( 'url' ) ) ];
+						data.instanceLights.push( parseId( child.getAttribute( 'url' ) ) );
 						break;
 
 					case 'instance_geometry':
-						node.geometry = library.geometries[ parseId( child.getAttribute( 'url' ) ) ];
+						data.instanceGeometries.push( parseId( child.getAttribute( 'url' ) ) );
 						break;
 
 					case 'instance_node':
-						node.children.push( library.nodes[ parseId( child.getAttribute( 'url' ) ) ] );
+						data.instanceNodes.push( parseId( child.getAttribute( 'url' ) ) );
 						break;
 
 					case 'matrix':
 						var array = parseFloats( child.textContent );
-						node.matrix.multiply( matrix.fromArray( array ).transpose() ); // .transpose() when Z_UP?
+						data.matrix.multiply( matrix.fromArray( array ).transpose() ); // .transpose() when Z_UP?
 						break;
 
 					case 'node':
-						node.children.push( parseNode( child ) );
+						parseNode( child );
+						data.nodes.push( child.getAttribute( 'id' ) );
 						break;
 
 					case 'translate':
 						var array = parseFloats( child.textContent );
 						vector.fromArray( array );
-						node.matrix.multiply( matrix.makeTranslation( vector.x, vector.y, vector.z ) );
+						data.matrix.multiply( matrix.makeTranslation( vector.x, vector.y, vector.z ) );
 						break;
 
 					case 'rotate':
 						var array = parseFloats( child.textContent );
 						var angle = THREE.Math.degToRad( array[ 3 ] );
-						node.matrix.multiply( matrix.makeRotationAxis( vector.fromArray( array ), angle ) );
+						data.matrix.multiply( matrix.makeRotationAxis( vector.fromArray( array ), angle ) );
 						break;
 
 					case 'scale':
 						var array = parseFloats( child.textContent );
-						node.matrix.scale( vector.fromArray( array ) );
+						data.matrix.scale( vector.fromArray( array ) );
 						break;
 
 					case 'extra':
@@ -554,40 +638,65 @@ THREE.ColladaLoader.prototype = {
 
 			}
 
-			//
+			if ( xml.getAttribute( 'id' ) !== null ) {
 
-			var object;
+				library.nodes[ xml.getAttribute( 'id' ) ] = data;
 
-			if ( node.camera !== undefined ) {
+			}
 
-				object = node.camera.clone();
+			return data;
 
-			} else if ( node.light !== undefined) {
+		}
 
-				object = node.light.clone();
+		function buildNode( data ) {
 
-			} else if ( node.geometry !== undefined ) {
+			var group = new THREE.Group();
+			group.name = data.name;
+			data.matrix.decompose( group.position, group.quaternion, group.scale );
+
+			var instanceCameras = data.instanceCameras;
+			var instanceLights = data.instanceLights;
+			var instanceGeometries = data.instanceGeometries;
+			var instanceNodes = data.instanceNodes;
+			var nodes = data.nodes;
+
+			for ( var i = 0, l = instanceCameras.length; i < l; i ++ ) {
+
+				group.add( getCamera( instanceCameras[ i ] ).clone() );
+
+			}
+
+			for ( var i = 0, l = instanceLights.length; i < l; i ++ ) {
 
-				object = node.geometry.clone();
+				group.add( getLight( instanceLights[ i ] ).clone() );
 
-			} else {
+			}
+
+			for ( var i = 0, l = instanceGeometries.length; i < l; i ++ ) {
 
-				object = new THREE.Group();
+				group.add( getGeometry( instanceGeometries[ i ] ).clone() );
 
 			}
 
-			object.name = node.name;
-			node.matrix.decompose( object.position, object.quaternion, object.scale );
+			for ( var i = 0, l = instanceNodes.length; i < l; i ++ ) {
 
-			var children = node.children;
+				group.add( getNode( instanceNodes[ i ] ).clone() );
+
+			}
 
-			for ( var i = 0, l = children.length; i < l; i ++ ) {
+			for ( var i = 0, l = nodes.length; i < l; i ++ ) {
 
-				object.add( children[ i ] );
+				group.add( getNode( nodes[ i ] ).clone() );
 
 			}
 
-			return object;
+			return group;
+
+		}
+
+		function getNode( id ) {
+
+			return getBuild( library.nodes[ id ], buildNode );
 
 		}
 
@@ -595,15 +704,33 @@ THREE.ColladaLoader.prototype = {
 
 		function parseVisualScene( xml ) {
 
-			var group = new THREE.Group();
-			group.name = xml.getAttribute( 'name' );
+			var data = {
+				name: xml.getAttribute( 'name' ),
+				children: []
+			};
 
 			var elements = xml.getElementsByTagName( 'node' );
 
 			for ( var i = 0; i < elements.length; i ++ ) {
 
-				var element = elements[ i ];
-				group.add( parseNode( element ) );
+				data.children.push( parseNode( elements[ i ] ) );
+
+			}
+
+			library.visualScenes[ xml.getAttribute( 'id' ) ] = data;
+
+		}
+
+		function buildVisualScene( data ) {
+
+			var group = new THREE.Group();
+			group.name = data.name;
+
+			var children = data.children;
+
+			for ( var i = 0; i < children.length; i ++ ) {
+
+				group.add( buildNode( children[ i ] ) );
 
 			}
 
@@ -611,13 +738,19 @@ THREE.ColladaLoader.prototype = {
 
 		}
 
+		function getVisualScene( id ) {
+
+			return getBuild( library.visualScenes[ id ], buildVisualScene );
+
+		}
+
 		// scenes
 
 		function parseScene( xml ) {
 
 			var scene = xml.getElementsByTagName( 'scene' )[ 0 ];
 			var instance = scene.getElementsByTagName( 'instance_visual_scene' )[ 0 ];
-			return library.visualScenes[ parseId( instance.getAttribute( 'url' ) ) ];
+			return getVisualScene( parseId( instance.getAttribute( 'url' ) ) );
 
 		}
 
@@ -625,13 +758,13 @@ THREE.ColladaLoader.prototype = {
 
 		console.time( 'ColladaLoader: DOMParser' );
 
-		var xml = new DOMParser().parseFromString( text, 'text/xml' );
+		var xml = new DOMParser().parseFromString( text, 'application/xml' );
 
 		console.timeEnd( 'ColladaLoader: DOMParser' );
 
 		var library = {
 			images: {},
-			effects: {},
+			// effects: {},
 			cameras: {},
 			lights: {},
 			geometries: {},
@@ -639,13 +772,31 @@ THREE.ColladaLoader.prototype = {
 			visualScenes: {}
 		};
 
-		buildLibrary( library.images, 'library_images', 'image', parseImage );
-		buildLibrary( library.effects, 'library_effects', 'effect', parseEffect );
-		buildLibrary( library.cameras, 'library_cameras', 'camera', parseCamera );
-		buildLibrary( library.lights, 'library_lights', 'light', parseLight );
-		buildLibrary( library.geometries, 'library_geometries', 'geometry', parseGeometry );
-		buildLibrary( library.nodes, 'library_nodes', 'node', parseNode );
-		buildLibrary( library.visualScenes, 'library_visual_scenes', 'visual_scene', parseVisualScene );
+		console.time( 'ColladaLoader: Parse' );
+
+		parseLibrary( library.images, 'library_images', 'image', parseImage );
+		// parseLibrary( library.effects, 'library_effects', 'effect', parseEffect );
+		parseLibrary( library.cameras, 'library_cameras', 'camera', parseCamera );
+		parseLibrary( library.lights, 'library_lights', 'light', parseLight );
+		parseLibrary( library.geometries, 'library_geometries', 'geometry', parseGeometry );
+		parseLibrary( library.nodes, 'library_nodes', 'node', parseNode );
+		parseLibrary( library.visualScenes, 'library_visual_scenes', 'visual_scene', parseVisualScene );
+
+		console.timeEnd( 'ColladaLoader: Parse' );
+
+		console.time( 'ColladaLoader: Build' );
+
+		// buildLibrary( library.images, buildImage );
+		// buildLibrary( library.effects, buildEffect );
+		buildLibrary( library.cameras, buildCamera );
+		buildLibrary( library.lights, buildLight );
+		buildLibrary( library.geometries, buildGeometry );
+		buildLibrary( library.nodes, buildNode );
+		buildLibrary( library.visualScenes, buildVisualScene );
+
+		console.timeEnd( 'ColladaLoader: Build' );
+
+		// console.log( library );
 
 		var scene = parseScene( xml );
 

examples/webgl_loader_sea3d.html

@@ -32,6 +32,8 @@
 		</div>
 
 		<script src="../build/three.min.js"></script>
+
+		<script src="js/MorphAnimMesh.js"></script>
 		<script src="js/loaders/collada/Animation.js"></script>
 		<script src="js/loaders/collada/AnimationHandler.js"></script>
 		<script src="js/loaders/collada/KeyFrameAnimation.js"></script>

examples/webgl_loader_sea3d_hierarchy.html

@@ -43,10 +43,14 @@
 		<script src="js/shaders/ColorCorrectionShader.js"></script>
 		<script src="js/shaders/VignetteShader.js"></script>
 
+		<script src="js/MorphAnimMesh.js"></script>
+		<script src="js/loaders/collada/animation.js"></script>
+
 		<script src="js/loaders/sea3d/SEA3D.js"></script>
 		<script src="js/loaders/sea3d/SEA3DLZMA.js"></script>
 		<script src="js/loaders/sea3d/SEA3DLoader.js"></script>
 
+
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 

examples/webgl_loader_sea3d_keyframe.html

@@ -44,6 +44,9 @@
 		<script src="js/shaders/ColorCorrectionShader.js"></script>
 		<script src="js/shaders/VignetteShader.js"></script>
 
+		<script src="js/MorphAnimMesh.js"></script>
+		<script src="js/loaders/collada/animation.js"></script>
+
 		<script src="js/loaders/sea3d/SEA3D.js"></script>
 		<script src="js/loaders/sea3d/SEA3DLZMA.js"></script>
 		<script src="js/loaders/sea3d/SEA3DLoader.js"></script>

examples/webgl_loader_sea3d_morph.html

@@ -43,6 +43,9 @@
 		<script src="js/shaders/ColorCorrectionShader.js"></script>
 		<script src="js/shaders/VignetteShader.js"></script>
 
+		<script src="js/MorphAnimMesh.js"></script>
+		<script src="js/loaders/collada/animation.js"></script>
+
 		<script src="js/loaders/sea3d/SEA3D.js"></script>
 		<script src="js/loaders/sea3d/SEA3DLZMA.js"></script>
 		<script src="js/loaders/sea3d/SEA3DLoader.js"></script>

examples/webgl_loader_sea3d_skinning.html

@@ -48,6 +48,8 @@
 		<script src="js/shaders/ColorCorrectionShader.js"></script>
 		<script src="js/shaders/VignetteShader.js"></script>
 
+		<script src="js/MorphAnimMesh.js"></script>
+
 		<script src="js/loaders/sea3d/SEA3D.js"></script>
 		<script src="js/loaders/sea3d/SEA3DLZMA.js"></script>
 		<script src="js/loaders/sea3d/SEA3DLoader.js"></script>

examples/webgl_loader_sea3d_sound.html

@@ -92,6 +92,9 @@
 		<script src="js/shaders/ColorCorrectionShader.js"></script>
 		<script src="js/shaders/VignetteShader.js"></script>
 
+		<script src="js/MorphAnimMesh.js"></script>
+		<script src="js/loaders/collada/animation.js"></script>
+
 		<script src="js/loaders/sea3d/SEA3D.js"></script>
 		<script src="js/loaders/sea3d/SEA3DLZMA.js"></script>
 		<script src="js/loaders/sea3d/SEA3DLoader.js"></script>

examples/webgl_read_float_buffer.html

@@ -0,0 +1,256 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - read float pixels</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 {
+				color: #ffffff;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+				font-weight: bold;
+				background-color: #000000;
+				margin: 0px;
+				overflow: hidden;
+			}
+
+			#info {
+				position: absolute;
+				top: 0px; width: 100%;
+				padding: 5px;
+			}
+
+			a {
+				color: #ffffff;
+			}
+
+		</style>
+	</head>
+	<body>
+
+		<div id="container"></div>
+		<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> read float pixels webgl example</div>
+
+		<script src="../build/three.min.js"></script>
+
+		<script src="js/Detector.js"></script>
+		<script src="js/libs/stats.min.js"></script>
+
+		<script id="fragment_shader_screen" type="x-shader/x-fragment">
+
+			varying vec2 vUv;
+			uniform sampler2D tDiffuse;
+
+			void main() {
+
+				gl_FragColor = texture2D( tDiffuse, vUv );
+
+			}
+
+		</script>
+
+		<script id="fragment_shader_pass_1" type="x-shader/x-fragment">
+
+			varying vec2 vUv;
+			uniform float time;
+
+			void main() {
+
+				float r = vUv.x;
+				if( vUv.y < 0.5 ) r = 0.0;
+				float g = vUv.y;
+				if( vUv.x < 0.5 ) g = 0.0;
+
+				gl_FragColor = vec4( r, g, time, 1.0 );
+
+			}
+
+		</script>
+
+		<script id="vertexShader" type="x-shader/x-vertex">
+
+			varying vec2 vUv;
+
+			void main() {
+
+				vUv = uv;
+				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+			}
+
+		</script>
+
+
+		<script>
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var container, stats;
+
+			var cameraRTT, sceneRTT, sceneScreen, renderer, zmesh1, zmesh2;
+
+			var mouseX = 0, mouseY = 0;
+
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
+
+			var rtTexture, material, quad;
+
+			var delta = 0.01;
+			var valueNode;
+
+			init();
+			animate();
+
+			function init() {
+
+				container = document.getElementById( 'container' );
+
+				cameraRTT = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 10000, 10000 );
+				cameraRTT.position.z = 100;
+
+				//
+
+				sceneRTT = new THREE.Scene();
+				sceneScreen = new THREE.Scene();
+
+				var light = new THREE.DirectionalLight( 0xffffff );
+				light.position.set( 0, 0, 1 ).normalize();
+				sceneRTT.add( light );
+
+				light = new THREE.DirectionalLight( 0xffaaaa, 1.5 );
+				light.position.set( 0, 0, - 1 ).normalize();
+				sceneRTT.add( light );
+
+				rtTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat, type: THREE.FloatType } );
+
+				material = new THREE.ShaderMaterial( {
+
+					uniforms: { time: { type: "f", value: 0.0 } },
+					vertexShader: document.getElementById( 'vertexShader' ).textContent,
+					fragmentShader: document.getElementById( 'fragment_shader_pass_1' ).textContent
+
+				} );
+
+				var materialScreen = new THREE.ShaderMaterial( {
+
+					uniforms: { tDiffuse: { type: "t", value: rtTexture } },
+					vertexShader: document.getElementById( 'vertexShader' ).textContent,
+					fragmentShader: document.getElementById( 'fragment_shader_screen' ).textContent,
+
+					depthWrite: false
+
+				} );
+
+				var plane = new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight );
+
+				quad = new THREE.Mesh( plane, material );
+				quad.position.z = - 100;
+				sceneRTT.add( quad );
+
+				var geometry = new THREE.TorusGeometry( 100, 25, 15, 30 );
+
+				var mat1 = new THREE.MeshPhongMaterial( { color: 0x555555, specular: 0xffaa00, shininess: 5 } );
+				var mat2 = new THREE.MeshPhongMaterial( { color: 0x550000, specular: 0xff2200, shininess: 5 } );
+
+				zmesh1 = new THREE.Mesh( geometry, mat1 );
+				zmesh1.position.set( 0, 0, 100 );
+				zmesh1.scale.set( 1.5, 1.5, 1.5 );
+				sceneRTT.add( zmesh1 );
+
+				zmesh2 = new THREE.Mesh( geometry, mat2 );
+				zmesh2.position.set( 0, 150, 100 );
+				zmesh2.scale.set( 0.75, 0.75, 0.75 );
+				sceneRTT.add( zmesh2 );
+
+				quad = new THREE.Mesh( plane, materialScreen );
+				quad.position.z = - 100;
+				sceneScreen.add( quad );
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.autoClear = false;
+
+				container.appendChild( renderer.domElement );
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				container.appendChild( stats.domElement );
+
+				var valueDiv = document.createElement( 'div' );
+				valueDiv.style.position = 'absolute';
+				valueDiv.style.top = '0px';
+				valueDiv.style.right = '0px';
+				valueDiv.style.width = '500px';
+				valueDiv.style.height = '300px';
+				valueDiv.style.fontSize = '60px';
+				container.appendChild( valueDiv );
+				valueNode = document.createTextNode( '' );
+				valueDiv.appendChild( valueNode );
+
+
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
+			}
+
+			function onDocumentMouseMove( event ) {
+
+				mouseX = ( event.clientX - windowHalfX );
+				mouseY = ( event.clientY - windowHalfY );
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				var time = Date.now() * 0.0015;
+
+				if ( zmesh1 && zmesh2 ) {
+
+					zmesh1.rotation.y = - time;
+					zmesh2.rotation.y = - time + Math.PI / 2;
+
+				}
+
+				if ( material.uniforms.time.value > 1 || material.uniforms.time.value < 0 ) {
+
+					delta *= - 1;
+
+				}
+
+				material.uniforms.time.value += delta;
+
+				renderer.clear();
+
+				// Render first scene into texture
+
+				renderer.render( sceneRTT, cameraRTT, rtTexture, true );
+
+				// Render full screen quad with generated texture
+
+				renderer.render( sceneScreen, cameraRTT );
+
+				var read = new Float32Array( 4 );
+				renderer.readRenderTargetPixels( rtTexture, windowHalfX + mouseX, windowHalfY - mouseY, 1, 1, read );
+
+				valueNode.nodeValue = 'r:' + read[ 0 ] + ' g:' + read[ 1 ] + ' b:' + read[ 2 ];
+
+			}
+
+		</script>
+	</body>
+</html>