Explorar o código

Cleaned bit postprocessing example code.

alteredq %!s(int64=14) %!d(string=hai) anos
pai
achega
6668440006
Modificáronse 1 ficheiros con 26 adicións e 17 borrados
  1. 26 17
      examples/postprocessing.html

+ 26 - 17
examples/postprocessing.html

@@ -217,7 +217,7 @@
 
             var container, stats;
 
-            var cameraOrtho, cameraPerspective, sceneRTT, sceneScreen, sceneBG, renderer, mesh, directionalLight;
+            var cameraOrtho, cameraPerspective, sceneModel, sceneScreen, sceneBG, renderer, mesh, directionalLight;
 			
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
@@ -238,7 +238,7 @@
 				cameraPerspective = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
 				cameraPerspective.position.z = 900;
 
-                sceneRTT = new THREE.Scene();
+                sceneModel = new THREE.Scene();
 				sceneScreen = new THREE.Scene();
 				sceneBG = new THREE.Scene();
 
@@ -247,7 +247,7 @@
 				directionalLight.position.y = 0;
 				directionalLight.position.z = 1;
 				directionalLight.position.normalize();
-				sceneRTT.addLight( directionalLight );
+				sceneModel.addLight( directionalLight );
 
                 rtTexture1 = new THREE.RenderTarget( window.innerWidth, window.innerHeight, { min_filter: THREE.LinearFilter, mag_filter: THREE.NearestFilter } );
                 rtTexture2 = new THREE.RenderTarget( 256, 512, { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter } );
@@ -256,8 +256,8 @@
                 materialColor = new THREE.MeshShaderMaterial( {
 
                     uniforms: { time: { type: "f", value: 0.0 } },
-                    vertex_shader: document.getElementById( 'vs-generic' ).textContent,
-                    fragment_shader: document.getElementById( 'fs-colors' ).textContent
+                    vertex_shader: getText( 'vs-generic' ),
+                    fragment_shader: getText( 'fs-colors' )
 
                 } );
 
@@ -266,8 +266,8 @@
                     uniforms: { tDiffuse: { type: "t", value: 0, texture: rtTexture1 },
 								opacity: { type: "f", value: 0.4 } 
 							  },
-                    vertex_shader: document.getElementById( 'vs-generic' ).textContent,
-                    fragment_shader: document.getElementById( 'fs-screen' ).textContent,
+                    vertex_shader: getText( 'vs-generic' ),
+                    fragment_shader: getText( 'fs-screen' ),
 					blending: THREE.AdditiveBlending
 
                 } );
@@ -275,17 +275,17 @@
                 materialFilm = new THREE.MeshShaderMaterial( {
 
                     uniforms: { tDiffuse: { type: "t", value: 0, texture: rtTexture1 },
-								time: { type: "f", value: 0.0 }					
+								time: { type: "f", value: 0.0 }
 							  },
-                    vertex_shader: document.getElementById( 'vs-generic' ).textContent,
-                    fragment_shader: document.getElementById( 'fs-film' ).textContent
+                    vertex_shader: getText( 'vs-generic' ),
+                    fragment_shader: getText( 'fs-film' )
 
                 } );
 
-				var kernel = buildKernel( 4.0 );
+				var kernel = buildKernel( 4.0 ), increment = 0.001953125;
 				
-				blurx = new THREE.Vector2( 0.001953125, 0.0 ),
-				blury = new THREE.Vector2( 0.0, 0.001953125 );
+				blurx = new THREE.Vector2( increment, 0.0 ),
+				blury = new THREE.Vector2( 0.0, increment );
 				
                 materialConvolution = new THREE.MeshShaderMaterial( {
 
@@ -306,7 +306,7 @@
 
 				loader = new THREE.Loader( true );
 				document.body.appendChild( loader.statusDomElement );
-				loader.loadAscii( { model: "obj/leeperrysmith/LeePerrySmith.js", callback: function( geometry ) { createMesh( geometry, sceneRTT, 100 ) } } );
+				loader.loadAscii( { model: "obj/leeperrysmith/LeePerrySmith.js", callback: function( geometry ) { createMesh( geometry, sceneModel, 100 ) } } );
 				
                 quadScreen = new THREE.Mesh( plane, materialConvolution );
 				quadScreen.position.z = -100;
@@ -324,6 +324,11 @@
 
             }
 
+			function getText( id ) {
+				
+				return document.getElementById( id ).textContent;
+			}
+			
 			function createMesh( geometry, scene, scale ) {
 
 				geometry.computeTangents();
@@ -412,11 +417,11 @@
             function loop() {
 
 				if ( ! start ) start = new Date().getTime();
-				var time = ( new Date().getTime() - start ) * 0.0004;				
+				var time = ( new Date().getTime() - start ) * 0.0004;
 
 				if ( mesh  ) {
 				
-					mesh.rotation.y = -time;			
+					mesh.rotation.y = -time;
 
 				}
 				
@@ -433,11 +438,15 @@
 				
 				// Render scene into texture
 				
+				// background 
+				
 				renderer.context.disable( renderer.context.DEPTH_TEST );
 				renderer.render( sceneBG, cameraOrtho, rtTexture1 );
 				renderer.context.enable( renderer.context.DEPTH_TEST );
 				
-                renderer.render( sceneRTT, cameraPerspective, rtTexture1 );
+				// model
+				
+                renderer.render( sceneModel, cameraPerspective, rtTexture1 );
 
 				// Render quad with blured scene into texture (convolution pass 1)