patched fixes with alteredq and added support for gentilis

examples/canvas_geometry_text.html

@@ -23,7 +23,7 @@
 		      
 		<!-- load the font file from canvas-text -->
 
-		<script type="text/javascript" src="js/helvetiker-normal-normal.js"></script>
+		<script type="text/javascript" src="fonts/helvetiker_regular.typeface.js"></script>
         
 
 		<script type="text/javascript">

examples/fonts/LICENSE

+Copyright © 2004 by MAGENTA Ltd. All Rights Reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of the fonts accompanying this license ("Fonts") and associated documentation files (the "Font Software"), to reproduce and distribute the Font Software, including without limitation the rights to use, copy, merge, publish, distribute, and/or sell copies of the Font Software, and to permit persons to whom the Font Software is furnished to do so, subject to the following conditions:
+
+The above copyright and this permission notice shall be included in all copies of one or more of the Font Software typefaces.
+
+The Font Software may be modified, altered, or added to, and in particular the designs of glyphs or characters in the Fonts may be modified and additional glyphs or characters may be added to the Fonts, only if the fonts are renamed to names not containing the word "MgOpen", or if the modifications are accepted for inclusion in the Font Software itself by the each appointed Administrator.
+
+This License becomes null and void to the extent applicable to Fonts or Font Software that has been modified and is distributed under the "MgOpen" name.
+
+The Font Software may be sold as part of a larger software package but no copy of one or more of the Font Software typefaces may be sold by itself.
+
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL MAGENTA OR PERSONS OR BODIES IN CHARGE OF ADMINISTRATION AND MAINTENANCE OF THE FONT SOFTWARE BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE. 

examples/webgl_geometry_text.html

@@ -30,11 +30,7 @@
 				<br/>Simple Dynamic 3D Text WebGL Example by <a href="http://www.lab4games.net/zz85/blog">zz85</a>
 			</div>
 			
-			
-<!--
-        <script type="text/javascript" src="http://mrdoob.github.com/three.js/build/Three.js"></script>
 
--->
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
@@ -42,22 +38,25 @@
      
 		<link href="js/gui/gui.css" media="screen" rel="stylesheet" type="text/css" />
 		<script type="text/javascript" src="js/gui/gui.min.js"></script>
-		 <script type="text/javascript" src="../src/extras/geometries/Text.js"></script> 
-            <!--  
-        
-         http://canvas-text.googlecode.com/svn-history/r41/trunk/faces/dejavu_serif-normal-normal.js
-  optimer-normal-normal.js
-  gentilis-normal-normal
-  http://canvas-text.googlecode.com/svn-history/r41/trunk/faces/helvetiker-normal-normal.js
-	http://canvas-text.googlecode.com/svn-history/r41/trunk/faces/dejavu_sans-normal-normal.js
-
-	http://canvas-text.googlecode.com/svn-history/r41/trunk/faces/optimer-normal-normal.js
-	http://canvas-text.googlecode.com/svn-history/r41/trunk/faces/gentilis-normal-normal.js
-	optimer-bold-normal
-  -->
-	<script type="text/javascript" src="http://canvas-text.googlecode.com/svn-history/r41/trunk/faces/gentilis-normal-normal.js"></script>
-
-        	<script type="text/javascript" src="js/helvetiker-normal-normal.js"></script>
+		
+		<script type="text/javascript" src="../src/extras/geometries/Text.js"></script> 
+		
+	<!--  
+		<script type="text/javascript" src="http://canvas-text.googlecode.com/svn-history/r41/trunk/faces/optimer-normal-normal.js"></script>
+		
+		http://canvas-text.googlecode.com/svn-history/r41/trunk/faces/dejavu_serif-normal-normal.js
+		
+		http://canvas-text.googlecode.com/svn-history/r41/trunk/faces/helvetiker-normal-normal.js
+		http://canvas-text.googlecode.com/svn-history/r41/trunk/faces/dejavu_sans-normal-normal.js
+
+		http://canvas-text.googlecode.com/svn-history/r41/trunk/faces/optimer-normal-normal.js
+		http://canvas-text.googlecode.com/svn-history/r41/trunk/faces/gentilis-normal-normal.js
+		
+	-->
+
+		<script type="text/javascript" src="fonts/helvetiker_regular.typeface.js"></script>
+		<script type="text/javascript" src="fonts/optimer_regular.typeface.js"></script>
+
 		<script type="text/javascript">
 
 			var container, stats;
@@ -94,7 +93,12 @@
 
 				scene = new THREE.Scene();
 
-                //THREE.FontUtils.weight = "bold";
+				// text
+
+			
+
+				
+                
                 
 				// Materials
 				
@@ -162,15 +166,13 @@
                    theText = hash;
                   }
                 
-				textParams = {
+				//var
+				   text3d = new THREE.Text(theText, {
 						size: 80, 
 						height:40,
 						curveSegments:2,
-						font: "gentilis" //gentilis helvetiker
-					};
-				
-				//var
-				   text3d = new THREE.Text(theText, textParams);//dejavu sans
+						font: "optimer"
+					});//dejavu sans
 					
                 //MEsh Normal MeshBasic
                 //MeshPhongMaterial MeshLambertMaterial MeshPhongMaterial
@@ -312,7 +314,12 @@
 					*/
 					
 					scene.removeChild(text);
-					 text3d = new THREE.Text(effectController.text, textParams);
+					 text3d = new THREE.Text(effectController.text, {
+							size: 80, 
+							height:40,
+							curveSegments:2,
+							font: "helvetiker" //"helvetiker"
+						});
 					text = new THREE.Mesh( text3d, textMaterial)
 					scene.addChild(text);
 					
@@ -483,4 +490,4 @@
         </script>
 
 	</body>
-</html>
+</html>
\ No newline at end of file

examples/webgl_text.html

+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<title>three.js webgl - geometry - text</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
+		<style type="text/css">
+			body {
+				font-family: Monospace;
+				background-color: #000;
+				color: #fff;
+				margin: 0px;
+				overflow: hidden;
+			}
+			#info {
+				position: absolute;
+				top: 10px;
+				width: 100%;
+				text-align: center;
+				z-index: 100;
+				display:block;
+			}
+			#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
+		</style>
+	</head>
+	<body>
+
+		<div id="info">
+		<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - procedural 3D text by <a href="http://www.lab4games.net/zz85/blog" target="_blank">zz85</a> &amp; alteredq (fonts from <a href="http://typeface.neocracy.org/">typeface.js</a>)
+		<br/>type to enter new text, drag to spin the text
+		<br/><span class="button" id="color">change color</span>, 
+			<span class="button" id="font">change font</span>, 
+			<span class="button" id="weight">change weight</span>, 
+			<span class="button" id="postprocessing">change postprocessing</span>, 
+			<a id="permalink" href="#">permalink</a>
+		</div>
+
+
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/Detector.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
+		      
+		<!-- load the font file from canvas-text -->
+
+		<!--
+		
+		
+		-->
+		<script type="text/javascript" src="fonts/gentilis_bold.typeface.js"></script>
+		<script type="text/javascript" src="fonts/gentilis_regular.typeface.js"></script>
+		<script type="text/javascript" src="fonts/optimer_bold.typeface.js"></script>
+		<script type="text/javascript" src="fonts/optimer_regular.typeface.js"></script>
+		<script type="text/javascript" src="fonts/helvetiker_bold.typeface.js"></script>
+		<script type="text/javascript" src="fonts/helvetiker_regular.typeface.js"></script>
+
+		<script type="text/javascript">
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var container, stats, permalink, hex, color;
+
+			var camera, scene, renderer;
+
+			var textMesh1, textMesh2, textGeo, textMaterial, parent;
+
+			var firstLetter = true;
+			
+			var text = "three.js",
+				height = 20,
+				size = 80,
+				hover = 30,
+				curveSegments = 6,
+				font = "optimer", 		// helvetiker optimer gentilis
+				weight = "bold",		// normal bold
+				style = "normal";		// normal italic
+
+			var mirror = true;
+			
+			var fontMap = {
+			"helvetiker" : 0,
+			"optimer"  	 : 1,
+			"gentilis" : 2
+			
+			};
+			
+			var weightMap = {
+			"normal"	: 0,
+			"bold"		: 1
+			}
+
+			var reverseFontMap = {};
+			var reverseWeightMap = {};
+			
+			for ( var i in fontMap ) reverseFontMap[ fontMap[i] ] = i;
+			for ( var i in weightMap ) reverseWeightMap[ weightMap[i] ] = i;
+			
+			var targetRotation = 0;
+			var targetRotationOnMouseDown = 0;
+
+			var mouseX = 0;
+			var mouseXOnMouseDown = 0;
+
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
+
+			var postprocessing = { enabled : true };
+			var glow = 0.9;
+
+			init();
+			animate();
+
+			function capitalize( txt ) {
+			
+				return txt.substring( 0, 1 ).toUpperCase() + txt.substring( 1 );
+
+			}
+			
+			function decimalToHex( d ) {
+  
+				var hex = Number( d ).toString( 16 );
+				hex = "000000".substr( 0, 6 - hex.length ) + hex; 
+				return hex.toUpperCase();
+
+			}
+			
+			function init() {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				permalink = document.getElementById( "permalink" );
+				
+				camera = new THREE.Camera( 30, window.innerWidth / window.innerHeight, 1, 1500 );
+				camera.position.y = 400;
+				camera.position.z = 700;
+				camera.target.position.y = 100;
+
+				scene = new THREE.Scene();
+				
+				scene.fog = new THREE.Fog( 0x000000, 250, 1400 );
+
+				var dirLight = new THREE.DirectionalLight( 0xffffff, 0.125 );
+				dirLight.position.set( 0, 0, 1 );
+				dirLight.position.normalize();
+				scene.addLight( dirLight );
+
+				var pointLight = new THREE.PointLight( 0xffffff, 1.5 );
+				pointLight.position.set( 0, 100, 50 );
+				scene.addLight( pointLight );				
+
+				//text = capitalize( font ) + " " + capitalize( weight );
+				//text = "abcdefghijklmnopqrstuvwxyz0123456789";
+				//text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+
+				// Get text from hash
+
+				var hash = document.location.hash.substr( 1 );
+				
+				if ( hash.length !== 0 ) {
+                   
+					var colorhash  = hash.substring( 0, 6 );
+					var fonthash   = hash.substring( 6, 7 );
+					var weighthash = hash.substring( 7, 8 );
+					var pphash 	   = hash.substring( 8, 9 );
+					var texthash   = hash.substring( 10 );					
+
+					hex = colorhash;
+					pointLight.color.setHex( parseInt( colorhash, 16 ) );
+					
+					font = reverseFontMap[ parseInt( fonthash ) ];
+					weight = reverseWeightMap[ parseInt( weighthash ) ];
+					
+					postprocessing.enabled = parseInt( pphash );
+					
+					text = decodeURI( texthash );
+
+					updatePermalink();
+
+				} else {
+
+					pointLight.color.setHSV( Math.random(), 0.95, 0.85 );					
+					pointLight.color.updateHex();
+					hex = decimalToHex( pointLight.color.hex );
+
+				}
+				
+                textGeo = new THREE.Text( text, {
+
+					size: size, 
+					height: height,
+					curveSegments: curveSegments,
+					font: font,
+					weight: weight,
+					style: style
+
+				});
+				
+                textMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, wireframe: false } );
+				
+				parent = new THREE.Object3D();
+				
+				textMesh1 = new THREE.Mesh( textGeo, textMaterial );
+
+                textMesh1.position.x = 0;
+                textMesh1.position.y = hover;
+                textMesh1.position.z = 0;
+
+                textMesh1.rotation.x = 0;
+                textMesh1.rotation.y = Math.PI * 2;
+
+                parent.addChild( textMesh1 );
+
+				if ( mirror ) {
+
+					textMesh2 = new THREE.Mesh( textGeo, textMaterial );
+
+					textMesh2.position.x = 0;
+					textMesh2.position.y = -hover;
+					textMesh2.position.z = height;
+
+					textMesh2.rotation.x = Math.PI;
+					textMesh2.rotation.y = Math.PI * 2;
+
+					parent.addChild( textMesh2 );
+					
+				}
+
+				parent.position.y = 100;
+				scene.addChild( parent );
+
+				var plane = new THREE.Mesh( new THREE.Plane( 10000, 10000 ), new THREE.MeshBasicMaterial( { color: 0xffffff, opacity: 0.5, transparent: true } ) );
+				plane.rotation.x = -1.57;
+				plane.position.y = 100;
+				scene.addChild( plane );
+
+				renderer = new THREE.WebGLRenderer( { antialias: false } );
+                renderer.setSize( window.innerWidth, window.innerHeight );
+				
+				renderer.setClearColor( scene.fog.color, 1 );
+
+				container.appendChild( renderer.domElement );
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				//container.appendChild( stats.domElement );
+
+				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
+				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
+				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
+				document.addEventListener( 'keypress', onDocumentKeyPress, false );
+				document.addEventListener( 'keydown', onDocumentKeyDown, false );
+
+				document.getElementById( "color" ).addEventListener( 'click', function() {
+				
+					pointLight.color.setHSV( Math.random(), 0.95, 0.85 );
+					pointLight.color.updateHex();
+					hex = decimalToHex( pointLight.color.hex );
+					
+					updatePermalink();					
+					
+				}, false );
+
+				document.getElementById( "font" ).addEventListener( 'click', function() {
+				
+					if ( font == "helvetiker" ) {
+
+						font = "optimer";
+
+					} else if ( font == "optimer" ) {
+						
+						font = "gentilis";
+						
+					} else {
+					
+						font = "helvetiker";
+						
+					}
+					
+					refreshText();
+					
+				}, false );
+
+				document.getElementById( "weight" ).addEventListener( 'click', function() {
+				
+					if ( weight == "bold" ) {
+
+						weight = "normal";
+
+					} else {
+					
+						weight = "bold";
+						
+					}
+					
+					refreshText();
+					
+				}, false );
+
+				document.getElementById( "postprocessing" ).addEventListener( 'click', function() {
+				
+					postprocessing.enabled = !postprocessing.enabled;
+					updatePermalink();
+					
+				}, false );
+
+				initPostprocessing();
+				renderer.autoClear = false;
+
+			}
+			
+			//
+			
+			function boolToNum( b ) {
+				
+				return b ? 1 : 0;
+
+			}
+			
+			function updatePermalink() {
+			
+				var link = hex + fontMap[ font ] + weightMap[ weight ] + boolToNum( postprocessing.enabled ) + "#" + encodeURI( text );
+				
+				permalink.href = "#" + link;
+				window.location.hash = link;
+
+			}
+
+			function onDocumentKeyDown( event ) {
+
+				if ( firstLetter ) {
+				
+					firstLetter = false;
+					text = "";
+
+				}
+				
+				var keyCode = event.keyCode;
+				
+				// backspace
+
+				if ( keyCode == 8 ) {
+
+					event.preventDefault();
+
+					text = text.substring( 0, text.length - 1 );
+					refreshText();
+
+					return false;
+					
+				}
+
+			}
+			
+			function onDocumentKeyPress( event ) {
+				
+				var keyCode = event.which;
+				
+				// backspace
+
+				if ( keyCode == 8 ) {
+					
+					event.preventDefault();					
+					
+				} else {
+				
+					var ch = String.fromCharCode( keyCode );
+					text += ch;
+
+					refreshText();
+
+				}
+
+			}
+			
+			function refreshText() {
+
+				updatePermalink();
+				
+				scene.removeChild( textMesh1 );
+
+                textGeo = new THREE.Text( text, {
+
+					size: size, 
+					height: height,
+					curveSegments: curveSegments,
+					font: font,
+					weight: weight,
+					style: style
+
+				});
+
+				textMesh1 = new THREE.Mesh( textGeo, textMaterial );
+
+                textMesh1.position.x = 0;
+                textMesh1.position.y = hover;
+                textMesh1.position.z = 0;
+
+                textMesh1.rotation.x = 0;
+                textMesh1.rotation.y = Math.PI * 2;
+
+				parent.addChild( textMesh1 );
+
+				if ( mirror ) {
+
+					scene.removeChild( textMesh2 );
+
+					textMesh2 = new THREE.Mesh( textGeo, textMaterial );
+
+					textMesh2.position.x = 0;
+					textMesh2.position.y = -hover;
+					textMesh2.position.z = height;
+
+					textMesh2.rotation.x = Math.PI;
+					textMesh2.rotation.y = Math.PI * 2;
+					
+					
+					parent.addChild( textMesh2 );
+					
+				}
+
+			}
+			
+			function onDocumentMouseDown( event ) {
+
+				event.preventDefault();
+
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
+				document.addEventListener( 'mouseout', onDocumentMouseOut, false );
+
+				mouseXOnMouseDown = event.clientX - windowHalfX;
+				targetRotationOnMouseDown = targetRotation;
+
+			}
+
+			function onDocumentMouseMove( event ) {
+
+				mouseX = event.clientX - windowHalfX;
+
+				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
+
+			}
+
+			function onDocumentMouseUp( event ) {
+
+				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
+				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
+				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
+
+			}
+
+			function onDocumentMouseOut( event ) {
+
+				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
+				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
+				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
+
+			}
+
+			function onDocumentTouchStart( event ) {
+
+				if ( event.touches.length == 1 ) {
+
+					event.preventDefault();
+
+					mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
+					targetRotationOnMouseDown = targetRotation;
+
+				}
+
+			}
+
+			function onDocumentTouchMove( event ) {
+
+				if ( event.touches.length == 1 ) {
+
+					event.preventDefault();
+
+					mouseX = event.touches[ 0 ].pageX - windowHalfX;
+					targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
+
+				}
+
+			}
+
+			//
+			
+			function initPostprocessing() {
+
+				postprocessing.scene = new THREE.Scene();
+
+				postprocessing.camera = new THREE.Camera();
+				postprocessing.camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2,  window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
+				postprocessing.camera.position.z = 100;
+
+				var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
+				postprocessing.rtTexture1 = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
+				postprocessing.rtTexture2 = new THREE.WebGLRenderTarget( 512, 512, pars );
+				postprocessing.rtTexture3 = new THREE.WebGLRenderTarget( 512, 512, pars );
+
+				var screen_shader = THREE.ShaderUtils.lib["screen"];
+				var screen_uniforms = THREE.UniformsUtils.clone( screen_shader.uniforms );
+
+				screen_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
+				screen_uniforms["opacity"].value = 1.0;
+
+				postprocessing.materialScreen = new THREE.MeshShaderMaterial( {
+
+					uniforms: screen_uniforms,
+					vertexShader: screen_shader.vertexShader,
+					fragmentShader: screen_shader.fragmentShader,
+					blending: THREE.AdditiveBlending,
+					transparent: true
+
+				} );
+
+				var convolution_shader = THREE.ShaderUtils.lib["convolution"];
+				var convolution_uniforms = THREE.UniformsUtils.clone( convolution_shader.uniforms );
+
+				postprocessing.blurx = new THREE.Vector2( 0.001953125, 0.0 ),
+				postprocessing.blury = new THREE.Vector2( 0.0, 0.001953125 );
+
+				convolution_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
+				convolution_uniforms["uImageIncrement"].value = postprocessing.blurx;
+				convolution_uniforms["cKernel"].value = THREE.ShaderUtils.buildKernel( 4.0 );
+
+				postprocessing.materialConvolution = new THREE.MeshShaderMaterial( {
+
+					uniforms: convolution_uniforms,
+					vertexShader:   "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertexShader,
+					fragmentShader: "#define KERNEL_SIZE 25\n"   + convolution_shader.fragmentShader
+
+				} );
+
+				var film_shader = THREE.ShaderUtils.lib["film"];
+				var film_uniforms = THREE.UniformsUtils.clone( film_shader.uniforms );
+
+				film_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
+
+				postprocessing.materialFilm = new THREE.MeshShaderMaterial( { uniforms: film_uniforms, vertexShader: film_shader.vertexShader, fragmentShader: film_shader.fragmentShader } );
+				postprocessing.materialFilm.uniforms.grayscale.value = 0;
+				postprocessing.materialFilm.uniforms.nIntensity.value = 0.15;
+				postprocessing.materialFilm.uniforms.sIntensity.value = 0.25;
+				postprocessing.materialFilm.uniforms.sCount.value = 2048;
+
+				//postprocessing.materialFilm.uniforms.nIntensity.value = 0;
+				//postprocessing.materialFilm.uniforms.sIntensity.value = 0;
+
+				postprocessing.materialScreen.uniforms.opacity.value = glow;
+
+				postprocessing.quad = new THREE.Mesh( new THREE.Plane( window.innerWidth, window.innerHeight ), postprocessing.materialConvolution );
+				postprocessing.quad.position.z = - 500;
+				postprocessing.scene.addObject( postprocessing.quad );
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			var delta, time, oldTime;
+
+			function render() {
+
+				if ( ! oldTime ) oldTime = new Date().getTime();
+
+				time = new Date().getTime();
+				delta = 0.1 * ( time - oldTime );
+				oldTime = time;
+				
+				parent.rotation.y += ( targetRotation - parent.rotation.y ) * 0.05;
+				
+				if ( postprocessing.enabled ) {
+
+					renderer.clear();
+
+					// Render scene into texture
+
+					renderer.render( scene, camera, postprocessing.rtTexture1, true );
+
+					// Render quad with blured scene into texture (convolution pass 1)
+
+					postprocessing.quad.materials[ 0 ] = postprocessing.materialConvolution;
+
+					postprocessing.materialConvolution.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
+					postprocessing.materialConvolution.uniforms.uImageIncrement.value = postprocessing.blurx;
+
+					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture2, true );
+
+					// Render quad with blured scene into texture (convolution pass 2)
+
+					postprocessing.materialConvolution.uniforms.tDiffuse.texture = postprocessing.rtTexture2;
+					postprocessing.materialConvolution.uniforms.uImageIncrement.value = postprocessing.blury;
+
+					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture3, true );
+
+					// Render original scene with superimposed blur to texture
+
+					postprocessing.quad.materials[ 0 ] = postprocessing.materialScreen;
+
+					postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture3;
+
+					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture1, false );
+
+					// Render to screen
+
+					postprocessing.materialFilm.uniforms.time.value += 0.01;
+					postprocessing.quad.materials[ 0 ] = postprocessing.materialFilm;
+
+					postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
+					renderer.render( postprocessing.scene, postprocessing.camera );
+
+				} else {
+
+					renderer.clear();
+					renderer.render( scene, camera );
+
+				}				
+
+			}
+
+		</script>
+
+	</body>
+</html>