浏览代码

Trailing spaces clean up and formating.

Mr.doob 13 年之前
父节点
当前提交
6e4d5088cb
共有 1 个文件被更改,包括 109 次插入118 次删除
  1. 109 118
      examples/webgl_postprocessing_godrays.html

+ 109 - 118
examples/webgl_postprocessing_godrays.html

@@ -37,8 +37,6 @@
 		<script src="js/ShaderGodRays.js"></script>
 		<script src="js/ShaderGodRays.js"></script>
 		<script src="js/Stats.js"></script>
 		<script src="js/Stats.js"></script>
 
 
-		<script src='js/DAT.GUI.min.js'></script>
-
 		<div id="info">
 		<div id="info">
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl god-rays example - tree by <a href="http://www.turbosquid.com/3d-models/free-tree-3d-model/592617" target="_blank">stanloshka</a>
 			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl god-rays example - tree by <a href="http://www.turbosquid.com/3d-models/free-tree-3d-model/592617" target="_blank">stanloshka</a>
 		</div>
 		</div>
@@ -49,16 +47,15 @@
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 
 			var container, stats;
 			var container, stats;
-			var camera, scene, renderer,
-				parameters, material_depth;
+			var camera, scene, renderer, parameters, material_depth;
 			
 			
-            var tree_mesh, sphere_mesh;
-            
-    		var proj = new THREE.Projector();
-            var sunPos = new THREE.Vector3(0,1000,-1000);
-            
+			var tree_mesh, sphere_mesh;
+
+			var proj = new THREE.Projector();
+			var sunPos = new THREE.Vector3( 0, 1000, -1000 );
+
 			var mouseX = 0, mouseY = 0;
 			var mouseX = 0, mouseY = 0;
-            
+
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 			var windowHalfY = window.innerHeight / 2;
 
 
@@ -86,34 +83,35 @@
 
 
 				renderer.sortObjects = false;
 				renderer.sortObjects = false;
 
 
-                // todo - try with fog
+				// todo - try with fog
 				//scene.fog = new THREE.Fog( 0xffaa55, 1000, FAR );
 				//scene.fog = new THREE.Fog( 0xffaa55, 1000, FAR );
 				//THREE.ColorUtils.adjustHSV( scene.fog.color, 0.02, -0.15, -0.65 );
 				//THREE.ColorUtils.adjustHSV( scene.fog.color, 0.02, -0.15, -0.65 );
-                
+
 				material_depth = new THREE.MeshDepthMaterial();
 				material_depth = new THREE.MeshDepthMaterial();
 
 
 				parameters = { color: 0x000000, shading: THREE.FlatShading };
 				parameters = { color: 0x000000, shading: THREE.FlatShading };
-                var zmat = new THREE.MeshBasicMaterial( parameters );
-        		
-        		// tree mesh	
-                var jsonLoader = new THREE.JSONLoader();
-                jsonLoader.load( "obj/tree/tree.js",
-                    function( geometry ) {
-                        var m = new THREE.Mesh( geometry, zmat );
-				        m.position.set( 0, -150, -150 );
-				        var sc = 400;
-				        m.scale.set( sc, sc, sc );
-				        m.matrixAutoUpdate = false;
-				        m.updateMatrix();
-				        scene.add( m );
-				        tree_mesh = m;
-                    }
-                    );
+				var zmat = new THREE.MeshBasicMaterial( parameters );
+
+				// tree mesh	
+				var jsonLoader = new THREE.JSONLoader();
+				jsonLoader.load( "obj/tree/tree.js", function( geometry ) {
+
+					var m = new THREE.Mesh( geometry, zmat );
+					m.position.set( 0, -150, -150 );
+
+					var sc = 400;
+					m.scale.set( sc, sc, sc );
+					m.matrixAutoUpdate = false;
+					m.updateMatrix();
+					scene.add( m );
+					tree_mesh = m;
+
+				} );
 
 
 				var geo = new THREE.SphereGeometry( 1, 20, 10 );
 				var geo = new THREE.SphereGeometry( 1, 20, 10 );
 				mesh = new THREE.Mesh( geo, zmat );
 				mesh = new THREE.Mesh( geo, zmat );
 
 
-                var sc = 20;
+				var sc = 20;
 				mesh.scale.set( sc, sc, sc );
 				mesh.scale.set( sc, sc, sc );
 
 
 				mesh.matrixAutoUpdate = false;
 				mesh.matrixAutoUpdate = false;
@@ -127,7 +125,7 @@
 				initPostprocessing();
 				initPostprocessing();
 
 
 				renderer.autoClear = false;
 				renderer.autoClear = false;
-                renderer.setClearColorHex( 0x000033, 1);
+				renderer.setClearColorHex( 0x000033, 1);
 
 
 				renderer.domElement.style.position = 'absolute';
 				renderer.domElement.style.position = 'absolute';
 				renderer.domElement.style.top = "50px";
 				renderer.domElement.style.top = "50px";
@@ -142,25 +140,6 @@
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
 
-                /*
-				var effectController  = {
-                    
-                    intensity:  0.69,
-                    patchSize: 0.3,
-				};
-
-				var matChanger = function( ) {
-
-					postprocessing.godray_combine_uniforms[ "fGodRayIntensity" ].value = effectController.intensity;
-					patchSize = effectController.patchSize;
-				};
-
-				var gui = new DAT.GUI();
-				gui.add( effectController, "intensity", 0.0, 1.0, 0.001 ).onChange( matChanger );
-				gui.add( effectController, "patchSize", 0.0, 1.0, 0.001 ).onChange( matChanger );
-				gui.close();
-				*/
-
 			}
 			}
 
 
 			function onDocumentMouseMove( event ) {
 			function onDocumentMouseMove( event ) {
@@ -205,7 +184,7 @@
 				
 				
 				// Switching the depth formats to luminance from rgb doesn't seem to work. I didn't
 				// Switching the depth formats to luminance from rgb doesn't seem to work. I didn't
 				// investigate further for now.
 				// investigate further for now.
-				//pars.format = THREE.LuminanceFormat;
+				// pars.format = THREE.LuminanceFormat;
 				
 				
 				// I would have this quarter size and use it as one of the ping-pong render
 				// I would have this quarter size and use it as one of the ping-pong render
 				// targets but the aliasing causes some temporal flickering
 				// targets but the aliasing causes some temporal flickering
@@ -217,35 +196,43 @@
 				postprocessing.rtTextureGodRays1 = new THREE.WebGLRenderTarget( w, h, pars );
 				postprocessing.rtTextureGodRays1 = new THREE.WebGLRenderTarget( w, h, pars );
 				postprocessing.rtTextureGodRays2 = new THREE.WebGLRenderTarget( w, h, pars );
 				postprocessing.rtTextureGodRays2 = new THREE.WebGLRenderTarget( w, h, pars );
 				
 				
-                // god-ray shaders
+				// god-ray shaders
 
 
 				var godray_gen_shader = THREE.ShaderGodRays[ "godrays_generate" ];
 				var godray_gen_shader = THREE.ShaderGodRays[ "godrays_generate" ];
 				postprocessing.godray_gen_uniforms = THREE.UniformsUtils.clone( godray_gen_shader.uniforms );
 				postprocessing.godray_gen_uniforms = THREE.UniformsUtils.clone( godray_gen_shader.uniforms );
 				postprocessing.materialGodraysGenerate = new THREE.ShaderMaterial( {
 				postprocessing.materialGodraysGenerate = new THREE.ShaderMaterial( {
+
 					uniforms: postprocessing.godray_gen_uniforms,
 					uniforms: postprocessing.godray_gen_uniforms,
 					vertexShader: godray_gen_shader.vertexShader,
 					vertexShader: godray_gen_shader.vertexShader,
 					fragmentShader: godray_gen_shader.fragmentShader
 					fragmentShader: godray_gen_shader.fragmentShader
+
 				} );
 				} );
-                
-                var godrays_combine_shader = THREE.ShaderGodRays[ "godrays_combine" ];
+
+				var godrays_combine_shader = THREE.ShaderGodRays[ "godrays_combine" ];
 				postprocessing.godray_combine_uniforms = THREE.UniformsUtils.clone( godrays_combine_shader.uniforms );
 				postprocessing.godray_combine_uniforms = THREE.UniformsUtils.clone( godrays_combine_shader.uniforms );
 				postprocessing.materialGodraysCombine = new THREE.ShaderMaterial( {
 				postprocessing.materialGodraysCombine = new THREE.ShaderMaterial( {
+
 					uniforms: postprocessing.godray_combine_uniforms,
 					uniforms: postprocessing.godray_combine_uniforms,
 					vertexShader: godrays_combine_shader.vertexShader,
 					vertexShader: godrays_combine_shader.vertexShader,
 					fragmentShader: godrays_combine_shader.fragmentShader
 					fragmentShader: godrays_combine_shader.fragmentShader
+
 				} );
 				} );
-                
-                var godrays_fake_sun_shader = THREE.ShaderGodRays[ "godrays_fake_sun" ];
+
+				var godrays_fake_sun_shader = THREE.ShaderGodRays[ "godrays_fake_sun" ];
 				postprocessing.godrays_fake_sun_uniforms = THREE.UniformsUtils.clone( godrays_fake_sun_shader.uniforms );
 				postprocessing.godrays_fake_sun_uniforms = THREE.UniformsUtils.clone( godrays_fake_sun_shader.uniforms );
 				postprocessing.materialGodraysFakeSun = new THREE.ShaderMaterial( {
 				postprocessing.materialGodraysFakeSun = new THREE.ShaderMaterial( {
+
 					uniforms: postprocessing.godrays_fake_sun_uniforms,
 					uniforms: postprocessing.godrays_fake_sun_uniforms,
 					vertexShader: godrays_fake_sun_shader.vertexShader,
 					vertexShader: godrays_fake_sun_shader.vertexShader,
 					fragmentShader: godrays_fake_sun_shader.fragmentShader
 					fragmentShader: godrays_fake_sun_shader.fragmentShader
+
 				} );
 				} );
 				
 				
 				postprocessing.quad = new THREE.Mesh( new THREE.PlaneGeometry( window.innerWidth, window.innerHeight ), postprocessing.materialGodraysGenerate );
 				postprocessing.quad = new THREE.Mesh( new THREE.PlaneGeometry( window.innerWidth, window.innerHeight ), postprocessing.materialGodraysGenerate );
 				postprocessing.quad.position.z = -9900;
 				postprocessing.quad.position.z = -9900;
+				postprocessing.quad.rotation.x = Math.PI / 2;
 				postprocessing.scene.add( postprocessing.quad );
 				postprocessing.scene.add( postprocessing.quad );
+
 			}
 			}
 
 
 			function animate() {
 			function animate() {
@@ -259,33 +246,33 @@
 
 
 			function render() {
 			function render() {
 
 
-                if( sphere_mesh ) {
-                    var radius = 100;
-                    sphere_mesh.position.x = 200*Math.cos(Date.now()/4000);
-                    sphere_mesh.position.z = 200*Math.sin(Date.now()/4000)-100;
-                    sphere_mesh.updateMatrix();
-                }
-                
+				if ( sphere_mesh ) {
+
+					var radius = 100;
+					sphere_mesh.position.x = 200*Math.cos(Date.now()/4000);
+					sphere_mesh.position.z = 200*Math.sin(Date.now()/4000)-100;
+					sphere_mesh.updateMatrix();
+
+				}
+
 				camera.position.x += ( mouseX - camera.position.x ) * 0.036;
 				camera.position.x += ( mouseX - camera.position.x ) * 0.036;
 				camera.position.y += ( - (mouseY) - camera.position.y ) * 0.036;
 				camera.position.y += ( - (mouseY) - camera.position.y ) * 0.036;
 
 
 				camera.lookAt( scene.position );
 				camera.lookAt( scene.position );
 				
 				
-				if (  postprocessing.enabled ) {
-                    
-                    // Find the screenspace position of the sun
-		            var sspos = new THREE.Vector3( sunPos.x, sunPos.y, sunPos.z);
-    				proj.projectVector(sspos,camera);
-    				sspos.x = (sspos.x+1)/2;
-    				sspos.y = (sspos.y+1)/2;
-    				
-    				// Give it to the god-ray and sun shaders
-					postprocessing.godray_gen_uniforms[ "vSunPositionScreenSpace" ].value = 
-					    new THREE.Vector2(sspos.x,sspos.y);
-					postprocessing.godrays_fake_sun_uniforms[ "vSunPositionScreenSpace" ].value = 
-					    new THREE.Vector2(sspos.x,sspos.y);
+				if ( postprocessing.enabled ) {
+
+					// Find the screenspace position of the sun
+					var sspos = new THREE.Vector3( sunPos.x, sunPos.y, sunPos.z);
+					proj.projectVector(sspos,camera);
+					sspos.x = (sspos.x+1)/2;
+					sspos.y = (sspos.y+1)/2;
+
+					// Give it to the god-ray and sun shaders
+					postprocessing.godray_gen_uniforms[ "vSunPositionScreenSpace" ].value = new THREE.Vector2(sspos.x,sspos.y);
+					postprocessing.godrays_fake_sun_uniforms[ "vSunPositionScreenSpace" ].value = new THREE.Vector2(sspos.x,sspos.y);
 					
 					
-					// Draw sky and sun ----------------------------------
+					// -- Draw sky and sun --
 					
 					
 					// Clear colors and depths, will clear to sky color
 					// Clear colors and depths, will clear to sky color
 					renderer.clearTarget(postprocessing.rtTextureColors,true,true,false);
 					renderer.clearTarget(postprocessing.rtTextureColors,true,true,false);
@@ -298,13 +285,13 @@
 					sspos.x *= window.innerWidth;
 					sspos.x *= window.innerWidth;
 					sspos.y *= height;
 					sspos.y *= height;
 					renderer.setScissor( sspos.x-sunsqW/2,sspos.y-sunsqH/2,sunsqW,sunsqH );
 					renderer.setScissor( sspos.x-sunsqW/2,sspos.y-sunsqH/2,sunsqW,sunsqH );
-					renderer.enableScissorTest ( true );
+					renderer.enableScissorTest( true );
 					postprocessing.godrays_fake_sun_uniforms[ "fAspect" ].value = window.innerWidth / height;
 					postprocessing.godrays_fake_sun_uniforms[ "fAspect" ].value = window.innerWidth / height;
 					postprocessing.scene.overrideMaterial = postprocessing.materialGodraysFakeSun;
 					postprocessing.scene.overrideMaterial = postprocessing.materialGodraysFakeSun;
 					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTextureColors );
 					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTextureColors );
-					renderer.enableScissorTest ( false );
+					renderer.enableScissorTest( false );
 					
 					
-					// Draw scene objects ----------------------------------
+					// -- Draw scene objects --
 					
 					
 					// Colors
 					// Colors
 					scene.overrideMaterial = null;
 					scene.overrideMaterial = null;
@@ -313,51 +300,55 @@
 					// Depth
 					// Depth
 					scene.overrideMaterial = material_depth;
 					scene.overrideMaterial = material_depth;
 					renderer.render( scene, camera, postprocessing.rtTextureDepth, true );
 					renderer.render( scene, camera, postprocessing.rtTextureDepth, true );
-                    
-					// Render god-rays ----------------------------------
-                    
-                    // Maximum length of god-rays (in texture space [0,1]X[0,1])
-    				var filterLen = 1.0;
-    				// Samples taken by filter
-    				var TAPS_PER_PASS = 6.0;
-    				
-    				// Pass order could equivalently be 3,2,1 (instead of 1,2,3), which
-    				// would start with a small filter support and grow to large. however
-    				// the large-to-small order produces less objectionable aliasing artifacts that
-    				// appear as a glimmer along the length of the beams
-    				
-                    // pass 1 - render into first ping-pong target
-    				var pass = 1.0;
-    				var stepLen = filterLen*Math.pow(TAPS_PER_PASS, -pass);
-    				postprocessing.godray_gen_uniforms[ "fStepSize" ].value = stepLen;
-    				postprocessing.godray_gen_uniforms[ "tInput" ].texture = postprocessing.rtTextureDepth;
+
+					// -- Render god-rays --
+
+					// Maximum length of god-rays (in texture space [0,1]X[0,1])
+					var filterLen = 1.0;
+					// Samples taken by filter
+					var TAPS_PER_PASS = 6.0;
+
+					// Pass order could equivalently be 3,2,1 (instead of 1,2,3), which
+					// would start with a small filter support and grow to large. however
+					// the large-to-small order produces less objectionable aliasing artifacts that
+					// appear as a glimmer along the length of the beams
+
+					// pass 1 - render into first ping-pong target
+					var pass = 1.0;
+					var stepLen = filterLen*Math.pow(TAPS_PER_PASS, -pass);
+					postprocessing.godray_gen_uniforms[ "fStepSize" ].value = stepLen;
+					postprocessing.godray_gen_uniforms[ "tInput" ].texture = postprocessing.rtTextureDepth;
 					postprocessing.scene.overrideMaterial = postprocessing.materialGodraysGenerate;
 					postprocessing.scene.overrideMaterial = postprocessing.materialGodraysGenerate;
-				    renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTextureGodRays2 );
-					
-				    // pass 2 - render into second ping-pong target
-    				pass = 2.0;
-    				stepLen = filterLen*Math.pow(TAPS_PER_PASS, -pass);
-				    postprocessing.godray_gen_uniforms[ "fStepSize" ].value = stepLen;
-				    postprocessing.godray_gen_uniforms[ "tInput" ].texture = postprocessing.rtTextureGodRays2;
-			        renderer.render( postprocessing.scene, postprocessing.camera , postprocessing.rtTextureGodRays1  );
-				    
-			        // pass 3 - 1st RT
-			        pass = 3.0;
-				    stepLen = filterLen*Math.pow(TAPS_PER_PASS, -pass);
-			        postprocessing.godray_gen_uniforms[ "fStepSize" ].value = stepLen;
-			        postprocessing.godray_gen_uniforms[ "tInput" ].texture = postprocessing.rtTextureGodRays1;
-			        renderer.render( postprocessing.scene, postprocessing.camera , postprocessing.rtTextureGodRays2  );
-			        
-			        // final pass - composite god-rays onto colors
-			        postprocessing.godray_combine_uniforms["tColors"].texture = postprocessing.rtTextureColors;
-			        postprocessing.godray_combine_uniforms["tGodRays"].texture = postprocessing.rtTextureGodRays2;
+					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTextureGodRays2 );
+
+					// pass 2 - render into second ping-pong target
+					pass = 2.0;
+					stepLen = filterLen*Math.pow(TAPS_PER_PASS, -pass);
+					postprocessing.godray_gen_uniforms[ "fStepSize" ].value = stepLen;
+					postprocessing.godray_gen_uniforms[ "tInput" ].texture = postprocessing.rtTextureGodRays2;
+					renderer.render( postprocessing.scene, postprocessing.camera , postprocessing.rtTextureGodRays1  );
+
+					// pass 3 - 1st RT
+					pass = 3.0;
+					stepLen = filterLen*Math.pow(TAPS_PER_PASS, -pass);
+					postprocessing.godray_gen_uniforms[ "fStepSize" ].value = stepLen;
+					postprocessing.godray_gen_uniforms[ "tInput" ].texture = postprocessing.rtTextureGodRays1;
+					renderer.render( postprocessing.scene, postprocessing.camera , postprocessing.rtTextureGodRays2  );
+
+					// final pass - composite god-rays onto colors
+					postprocessing.godray_combine_uniforms["tColors"].texture = postprocessing.rtTextureColors;
+					postprocessing.godray_combine_uniforms["tGodRays"].texture = postprocessing.rtTextureGodRays2;
 					postprocessing.scene.overrideMaterial = postprocessing.materialGodraysCombine;
 					postprocessing.scene.overrideMaterial = postprocessing.materialGodraysCombine;
-			        renderer.render( postprocessing.scene, postprocessing.camera );
-    				postprocessing.scene.overrideMaterial = null;
+					renderer.render( postprocessing.scene, postprocessing.camera );
+					postprocessing.scene.overrideMaterial = null;
+
 				} else {
 				} else {
+
 					renderer.clear();
 					renderer.clear();
 					renderer.render( scene, camera );
 					renderer.render( scene, camera );
+
 				}
 				}
+
 			}
 			}
 		</script>
 		</script>
 	</body>
 	</body>