Browse Source

clean up envMap hdr example and related files.

Ben Houston 9 years ago
parent
commit
363c0b7c21

BIN
examples/textures/cube/hdrPisa/ny.hdr


BIN
examples/textures/cube/hdrPisa/py.hdr


+ 47 - 167
examples/webgl_materials_envmaps_hdr.html

@@ -44,61 +44,6 @@
     <script src="../examples/js/pmrem/PMREM_CubeUVPacker.js"></script>
     <script src="../examples/js/libs/dat.gui.min.js"></script>
 
-                                <!-- NodeLibrary -->
-		<script src="../examples/js/nodes/GLNode.js"></script>
-		<script src="../examples/js/nodes/RawNode.js"></script>
-		<script src="../examples/js/nodes/TempNode.js"></script>
-		<script src="../examples/js/nodes/InputNode.js"></script>
-		<script src="../examples/js/nodes/ConstNode.js"></script>
-		<script src="../examples/js/nodes/FunctionNode.js"></script>
-		<script src="../examples/js/nodes/FunctionCallNode.js"></script>
-		<script src="../examples/js/nodes/BuilderNode.js"></script>
-		<script src="../examples/js/nodes/NodeLib.js"></script>
-		<script src="../examples/js/nodes/NodeMaterial.js"></script>
-
-                                <!-- Accessors -->
-		<script src="../examples/js/nodes/accessors/PositionNode.js"></script>
-		<script src="../examples/js/nodes/accessors/NormalNode.js"></script>
-		<script src="../examples/js/nodes/accessors/UVNode.js"></script>
-		<script src="../examples/js/nodes/accessors/ScreenUVNode.js"></script>
-		<script src="../examples/js/nodes/accessors/ColorsNode.js"></script>
-		<script src="../examples/js/nodes/accessors/CameraNode.js"></script>
-		<script src="../examples/js/nodes/accessors/ReflectNode.js"></script>
-		<script src="../examples/js/nodes/accessors/LightNode.js"></script>
-
-		<!-- Inputs -->
-		<script src="../examples/js/nodes/inputs/IntNode.js"></script>
-		<script src="../examples/js/nodes/inputs/FloatNode.js"></script>
-		<script src="../examples/js/nodes/inputs/ColorNode.js"></script>
-		<script src="../examples/js/nodes/inputs/Vector2Node.js"></script>
-		<script src="../examples/js/nodes/inputs/Vector3Node.js"></script>
-		<script src="../examples/js/nodes/inputs/Vector4Node.js"></script>
-		<script src="../examples/js/nodes/inputs/TextureNode.js"></script>
-		<script src="../examples/js/nodes/inputs/CubeTextureNode.js"></script>
-
-                                <!-- Math -->
-		<script src="../examples/js/nodes/math/Math1Node.js"></script>
-		<script src="../examples/js/nodes/math/Math2Node.js"></script>
-		<script src="../examples/js/nodes/math/Math3Node.js"></script>
-		<script src="../examples/js/nodes/math/OperatorNode.js"></script>
-
-                                <!-- Utils -->
-		<script src="../examples/js/nodes/utils/SwitchNode.js"></script>
-		<script src="../examples/js/nodes/utils/JoinNode.js"></script>
-		<script src="../examples/js/nodes/utils/TimerNode.js"></script>
-		<script src="../examples/js/nodes/utils/RoughnessToBlinnExponentNode.js"></script>
-		<script src="../examples/js/nodes/utils/VelocityNode.js"></script>
-		<script src="../examples/js/nodes/utils/LuminanceNode.js"></script>
-		<script src="../examples/js/nodes/utils/ColorAdjustmentNode.js"></script>
-		<script src="../examples/js/nodes/utils/NoiseNode.js"></script>
-		<script src="../examples/js/nodes/utils/ResolutionNode.js"></script>
-
-		<script src="../examples/js/nodes/materials/PhongNode.js"></script>
-		<script src="../examples/js/nodes/materials/PhongNodeMaterial.js"></script>
-		<!-- Standard Material -->
-		<script src="../examples/js/nodes/materials/StandardNode.js"></script>
-		<script src="../examples/js/nodes/materials/StandardNodeMaterial.js"></script>
-
 		<script src="../examples/js/postprocessing/EffectComposer.js"></script>
 		<script src="../examples/js/postprocessing/RenderPass.js"></script>
 		<script src="../examples/js/postprocessing/MaskPass.js"></script>
@@ -119,11 +64,9 @@
 				background: true,
 			};
 			var camera, scene, renderer, controls, objects = [];
-			var hdrTexture, hdrCubeMap;
+			var hdrCubeMap;
 			var composer;
 			var particleLight;
-			var reflectionCube;
-			var pmremGenerator, pmremCubeUVPacker;
 			var standardMaterial;
 			var torusGeometry = new THREE.TorusGeometry( 15, 6, 16, 100 );
 			//var torusGeometry = new THREE.SphereGeometry( 15, 32, 32 );
@@ -136,55 +79,6 @@
 
 			} );
 
-			var onTextureLoad = function ( cubeMap ) {
-			  pmremGenerator = new THREE.PMREMGenerator(cubeMap);
-			  pmremCubeUVPacker = new THREE.PMREM_CubeUVPacker(pmremGenerator.cubeLods);
-			  pmremGenerator.update(renderer);
-			  pmremCubeUVPacker.update(renderer);
-
-			  var roughnessTexture = THREE.ImageUtils.loadTexture( "../examples/textures/roughness_map.jpg" );
-			  roughnessTexture.wrapS = THREE.RepeatWrapping;
-			  roughnessTexture.wrapT = THREE.RepeatWrapping;
-			  roughnessTexture.repeat.set( 3, 3 );
-			  var metalness = 1;
-			  var roughness = 0.50;
-			  var diffuseColor = new THREE.Color( 1, 1.0, 1.0 ).multiplyScalar( 1 - 0.08 );
-			  standardMaterial = new THREE.MeshStandardMaterial( { map: null, bumpMap: null, roughnessMap: null, bumpScale: 1.0, color: diffuseColor, metalness: metalness, roughness: roughness, shading: THREE.SmoothShading, envMap: pmremCubeUVPacker.CubeUVRenderTarget } )
-			  var torusMesh1 = new THREE.Mesh( torusGeometry, standardMaterial );
-			  torusMesh1.position.x = -30.0;
-			  scene.add( torusMesh1 );
-			};
-
-			function onHdrCubeMapLoad( cubeMap ) {
-			  pmremGenerator = new THREE.PMREMGenerator( cubeMap );
-			  pmremCubeUVPacker = new THREE.PMREM_CubeUVPacker(pmremGenerator.cubeLods);
-			  pmremGenerator.update(renderer);
-			  pmremCubeUVPacker.update(renderer);
-
-			  var roughnessTexture = THREE.ImageUtils.loadTexture( "../examples/textures/roughness_map.jpg" );
-			  roughnessTexture.wrapS = THREE.RepeatWrapping;
-			  roughnessTexture.wrapT = THREE.RepeatWrapping;
-			  roughnessTexture.repeat.set( 3, 3 );
-			  var metalness = 1;
-			  var roughness = 0.50;
-			  var diffuseColor = new THREE.Color( 1, 1.0, 1.0 ).multiplyScalar( 1 - 0.08 );
-			  //reflectionCube.mapping = THREE.CubeUVReflectionMapping;
-			  //pmremCubeUVPacker.CubeUVRenderTarget.mapping = THREE.CubeUVReflectionMapping;
-			  standardMaterial = new THREE.MeshStandardMaterial( { map: null, bumpMap: null, roughnessMap: null, bumpScale: 1.0, color: diffuseColor, metalness: metalness, roughness: roughness, shading: THREE.SmoothShading, envMap: pmremCubeUVPacker.CubeUVRenderTarget } )
-			  var torusMesh1 = new THREE.Mesh( torusGeometry, standardMaterial );
-			  torusMesh1.position.x = -30.0;
-			  scene.add( torusMesh1 );
-			}
-
-			function onHdrLoad() {
-			  var geometry = new THREE.PlaneGeometry( 15, 15 );
-			  var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide, map: hdrTexture} );
-			  var plane = new THREE.Mesh( geometry, material );
-			  hdrTexture.minFilter = THREE.LinearFilter;
-			  hdrTexture.magFilter = THREE.LinearFilter;
-			  scene.add( plane );
-			}
-
 			function init( font ) {
 
 				container = document.createElement( 'div' );
@@ -197,48 +91,34 @@
 
 				// Materials
 
-				var path = "../examples/textures/cube/pisa/";
 				var hdrpath = "../examples/textures/cube/hdrPisa/";
-				var format = '.png';
 				var hdrformat = '.hdr';
-				var urls = [
-						path + 'px' + format, path + 'nx' + format,
-						path + 'py' + format, path + 'ny' + format,
-						path + 'pz' + format, path + 'nz' + format
-					];
-
-                                                                var hdrurls = [
-						hdrpath + 'px' + hdrformat, hdrpath + 'nx' + hdrformat,
-						hdrpath + 'py' + hdrformat, hdrpath + 'ny' + hdrformat,
-						hdrpath + 'pz' + hdrformat, hdrpath + 'nz' + hdrformat
-					];
-					//reflectionCube = THREE.ImageUtils.loadTextureCube( urls, undefined, onTextureLoad );
-					//reflectionCube.encoding = THREE.sRGB;
-					//reflectionCube.format = THREE.RGBFormat;
-
-					hdrCubeMap = new THREE.HDRCubeMapLoader().load(THREE.HalfFloatType, hdrurls, onTextureLoad);
-
-					//                                                                hdrTexture = new THREE.RGBELoader().load( '../examples/textures/cube/hdrPisa/px.hdr', onHdrLoad );
-					var grass = new THREE.TextureLoader().load( '../examples/textures/terrain/grasslight-big.jpg' );
-					var grassNormal = new THREE.TextureLoader().load( '../examples/textures/terrain/grasslight-big-nm.jpg' );
-					var decalDiffuse = new THREE.TextureLoader().load( '../examples/textures/decal/decal-diffuse.png' );
-					decalDiffuse.wrapS = decalDiffuse.wrapT = THREE.RepeatWrapping;
-					var cubemap = function() {
-					  var path = "../examples/textures/cube/Park2/";
-					  var format = '.jpg';
-					  var urls = [
-					                  path + 'posx' + format, path + 'negx' + format,
-					                  path + 'posy' + format, path + 'negy' + format,
-					                  path + 'posz' + format, path + 'negz' + format
-					          ];
-					  var textureCube = new THREE.CubeTextureLoader().load( urls );
-					  textureCube.format = THREE.RGBFormat;
-					  return textureCube;
-					}();
-
-
-					particleLight = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
-				//scene.add( particleLight );
+				var hdrurls = [
+					hdrpath + 'px' + hdrformat, hdrpath + 'nx' + hdrformat,
+					hdrpath + 'py' + hdrformat, hdrpath + 'ny' + hdrformat,
+					hdrpath + 'pz' + hdrformat, hdrpath + 'nz' + hdrformat
+				];
+
+				var hdrCubeMap = new THREE.HDRCubeMapLoader().load( THREE.HalfFloatType, hdrurls, function ( hdrCubeMap ) {
+				  var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
+					pmremGenerator.update(renderer);
+
+				  var pmremCubeUVPacker = new THREE.PMREM_CubeUVPacker(pmremGenerator.cubeLods);
+				  pmremCubeUVPacker.update(renderer);
+
+				  var roughnessTexture = THREE.ImageUtils.loadTexture( "../examples/textures/roughness_map.jpg" );
+				  roughnessTexture.wrapS = THREE.RepeatWrapping;
+				  roughnessTexture.wrapT = THREE.RepeatWrapping;
+				  roughnessTexture.repeat.set( 3, 3 );
+
+				  var diffuseColor = new THREE.Color( 1, 1.0, 1.0 ).multiplyScalar( 1 - 0.08 );
+				  standardMaterial = new THREE.MeshStandardMaterial( { map: null, bumpMap: null, roughnessMap: null, bumpScale: 1.0, color: diffuseColor, metalness: 1.0, roughness: 0.5, shading: THREE.SmoothShading, envMap: pmremCubeUVPacker.CubeUVRenderTarget } )
+				  var torusMesh1 = new THREE.Mesh( torusGeometry, standardMaterial );
+				  torusMesh1.position.x = 0.0;
+				  scene.add( torusMesh1 );
+				} );
+
+				particleLight = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
 
 				// Lights
 
@@ -252,12 +132,12 @@
 				particleLight.add( pointLight );
 
 				var spotLight = new THREE.SpotLight( 0xffffff );
-                                                                spotLight.position.set( 10, 100, 10 );
-                                                                spotLight.angle = Math.PI/10;
-                                                                scene.add( spotLight );
+				spotLight.position.set( 10, 100, 10 );
+				spotLight.angle = Math.PI/10;
+				scene.add( spotLight );
 
-                                                                var spotLightHelper = new THREE.SpotLightHelper( spotLight );
-                                                                scene.add( spotLightHelper );
+				var spotLightHelper = new THREE.SpotLightHelper( spotLight );
+				scene.add( spotLightHelper );
 
 				renderer = new THREE.WebGLRenderer( { alpha:true, antialias: false } );
 				renderer.setClearColor( 0x0a0a0a, 0 );
@@ -270,20 +150,20 @@
 				renderer.gammaInput = true;
 				renderer.gammaOutput = true;
 
-                                                                var renderScene = new THREE.RenderPass(scene, camera);
+				var renderScene = new THREE.RenderPass(scene, camera);
 
-                                                                composer = new THREE.EffectComposer(renderer);
-                                                                composer.setSize(window.innerWidth, window.innerHeight);
-                                                                composer.addPass(renderScene);
+				composer = new THREE.EffectComposer(renderer);
+				composer.setSize(window.innerWidth, window.innerHeight);
+				composer.addPass(renderScene);
 
-                                                                bloomPass = new THREE.BloomPass(1.0, 9, 0.25, 1024);
-                                                                composer.addPass(bloomPass);
+				bloomPass = new THREE.BloomPass(1.0, 9, 0.25, 1024);
+				composer.addPass(bloomPass);
 
 				//
-                                                                effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
-                                                                effectFXAA.uniforms['resolution'].value.set(1 / (window.innerWidth), 1 / (window.innerHeight));
-                                                                effectFXAA.renderToScreen = true;
-                                                                composer.addPass(effectFXAA);
+				effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
+				effectFXAA.uniforms['resolution'].value.set(1 / (window.innerWidth), 1 / (window.innerHeight));
+				effectFXAA.renderToScreen = true;
+				composer.addPass(effectFXAA);
 
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
@@ -297,12 +177,12 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-                                                                var gui = new dat.GUI();
+				var gui = new dat.GUI();
 
-                                                                //gui.add( params, 'projection', { 'From cam to mesh': 'camera', 'Normal to mesh': 'normal' } );
-                                                                gui.add( params, 'roughnessFactor', 0, 1 );
-                                                                gui.add( params, 'background' );
-                                                                gui.open();
+				//gui.add( params, 'projection', { 'From cam to mesh': 'camera', 'Normal to mesh': 'normal' } );
+				gui.add( params, 'roughnessFactor', 0, 1 );
+				gui.add( params, 'background' );
+				gui.open();
 			}
 
 			function onWindowResize() {