Cleaned up webgl_materials_envmaps_exr and webgl_materials_envmaps_hdr.

examples/webgl_materials_envmaps_exr.html

@@ -51,15 +51,17 @@
 
 			}
 
-			var container, stats;
 			var params = {
 				envMap: 'EXR',
 				roughness: 0.0,
 				metalness: 0.0,
 				exposure: 1.0,
-				showBackground: true,
+				debug: false,
 			};
-			var camera, scene, renderer, controls, objects = [];
+
+			var container, stats;
+			var camera, scene, renderer, controls;
+			var torusMesh, planeMesh;
 			var standardMaterial, floorMaterial;
 			var pngCubeRenderTarget, exrCubeRenderTarget;
 			var pngBackground, exrBackground;
@@ -76,40 +78,34 @@
 				camera.position.set( 0, 0, 120 );
 
 				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x000000 );
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.toneMapping = THREE.LinearToneMapping;
 
-				standardMaterial = new THREE.MeshStandardMaterial( {
-					map: null,
-					color: 0xffffff,
+				//
+
+				var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
+				var material = new THREE.MeshStandardMaterial( {
 					metalness: params.roughness,
 					roughness: params.metalness,
 					envMapIntensity: 1.0
 				} );
 
-				var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
-
-				var torusMesh1 = new THREE.Mesh( geometry, standardMaterial );
+				torusMesh = new THREE.Mesh( geometry, material );
+				scene.add( torusMesh );
 
-				scene.add( torusMesh1 );
-				objects.push( torusMesh1 );
+				var geometry = new THREE.PlaneBufferGeometry( 200, 200 );
+				var material = new THREE.MeshBasicMaterial();
 
-				floorMaterial = new THREE.MeshBasicMaterial( {
-					color: 0xffffff
-				} );
-
-				var planeGeometry = new THREE.PlaneBufferGeometry( 200, 200 );
-				var planeMesh1 = new THREE.Mesh( planeGeometry, floorMaterial );
-				planeMesh1.position.y = - 50;
-				planeMesh1.rotation.x = - Math.PI * 0.5;
-				scene.add( planeMesh1 );
+				planeMesh = new THREE.Mesh( geometry, material );
+				planeMesh.position.y = - 50;
+				planeMesh.rotation.x = - Math.PI * 0.5;
+				scene.add( planeMesh );
 
 				new THREE.EXRLoader().load( 'textures/piz_compressed.exr', function ( texture ) {
 
 					texture.minFilter = THREE.NearestFilter;
-					texture.magFilter = THREE.NearestFilter;
+					// texture.magFilter = THREE.NearestFilter;
 					texture.encoding = THREE.LinearEncoding;
 
 					var cubemapGenerator = new THREE.EquirectangularToCubeGenerator( texture, { resolution: 512, type: THREE.HalfFloatType } );
@@ -176,7 +172,7 @@
 				gui.add( params, 'roughness', 0, 1 );
 				gui.add( params, 'metalness', 0, 1 );
 				gui.add( params, 'exposure', 0, 2 );
-				gui.add( params, 'showBackground', true);
+				gui.add( params, 'debug', false );
 				gui.open();
 
 			}
@@ -205,10 +201,11 @@
 
 			function render() {
 
-				standardMaterial.roughness = params.roughness;
-				standardMaterial.metalness = params.metalness;
+				torusMesh.material.roughness = params.roughness;
+				torusMesh.material.metalness = params.metalness;
 
-				var newEnvMap = standardMaterial.envMap;
+				var newEnvMap = torusMesh.material.envMap;
+				var background = scene.background;
 
 				switch ( params.envMap ) {
 
@@ -223,36 +220,22 @@
 
 				}
 
-				if ( newEnvMap !== standardMaterial.envMap ) {
+				if ( newEnvMap !== torusMesh.material.envMap ) {
 
-					standardMaterial.envMap = newEnvMap;
-					standardMaterial.needsUpdate = true;
+					torusMesh.material.envMap = newEnvMap;
+					torusMesh.material.needsUpdate = true;
 
-					floorMaterial.map = newEnvMap;
-					floorMaterial.needsUpdate = true;
-
-				}
-
-				if ( ! params.showBackground ) {
-
-					scene.background = null;
-
-				} else {
-
-					scene.background = background;
+					planeMesh.material.map = newEnvMap;
+					planeMesh.material.needsUpdate = true;
 
 				}
 
+				torusMesh.rotation.y += 0.005;
+				planeMesh.visible = params.debug;
 
+				scene.background = background;
 				renderer.toneMappingExposure = params.exposure;
 
-				for ( var i = 0, l = objects.length; i < l; i ++ ) {
-
-					var object = objects[ i ];
-					object.rotation.y += 0.005;
-
-				}
-
 				renderer.render( scene, camera );
 
 			}

examples/webgl_materials_envmaps_hdr.html

@@ -52,16 +52,17 @@
 
 			}
 
-			var container, stats;
 			var params = {
 				envMap: 'HDR',
 				roughness: 0.0,
 				metalness: 0.0,
 				exposure: 1.0,
-				showBackground: true
+				debug: false
 			};
-			var camera, scene, renderer, controls, objects = [];
-			var standardMaterial, floorMaterial;
+
+			var container, stats;
+			var camera, scene, renderer, controls;
+			var torusMesh, planeMesh;
 			var ldrCubeRenderTarget, hdrCubeRenderTarget, rgbmCubeRenderTarget;
 			var ldrCubeMap, hdrCubeMap, rgbmCubeMap;
 
@@ -82,91 +83,85 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.toneMapping = THREE.LinearToneMapping;
 
-				standardMaterial = new THREE.MeshStandardMaterial( {
+				//
+
+				var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
+				var material = new THREE.MeshStandardMaterial( {
 					color: 0xffffff,
 					metalness: params.metalness,
 					roughness: params.roughness
 				} );
 
-				var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
+				torusMesh = new THREE.Mesh( geometry, material );
+				scene.add( torusMesh );
 
-				var torusMesh1 = new THREE.Mesh( geometry, standardMaterial );
 
-				scene.add( torusMesh1 );
-				objects.push( torusMesh1 );
+				var geometry = new THREE.PlaneBufferGeometry( 200, 200 );
+				var material = new THREE.MeshBasicMaterial();
 
-				floorMaterial = new THREE.MeshBasicMaterial( {
-					color: 0xffffff,
-				} );
-
-				var planeGeometry = new THREE.PlaneBufferGeometry( 200, 200 );
-				var planeMesh1 = new THREE.Mesh( planeGeometry, floorMaterial );
-				planeMesh1.position.y = - 50;
-				planeMesh1.rotation.x = - Math.PI * 0.5;
-				scene.add( planeMesh1 );
-
-				var genCubeUrls = function ( prefix, postfix ) {
+				planeMesh = new THREE.Mesh( geometry, material );
+				planeMesh.position.y = - 50;
+				planeMesh.rotation.x = - Math.PI * 0.5;
+				scene.add( planeMesh );
 
-					return [
-						prefix + 'px' + postfix, prefix + 'nx' + postfix,
-						prefix + 'py' + postfix, prefix + 'ny' + postfix,
-						prefix + 'pz' + postfix, prefix + 'nz' + postfix
-					];
+				var hdrUrls = [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ];
+				hdrCubeMap = new THREE.HDRCubeTextureLoader()
+					.setPath( './textures/cube/pisaHDR/' )
+					.load( THREE.UnsignedByteType, hdrUrls, function () {
 
-				};
+						var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
+						pmremGenerator.update( renderer );
 
-				var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' );
-				hdrCubeMap = new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrUrls, function () {
+						var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
+						pmremCubeUVPacker.update( renderer );
 
-					var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
-					pmremGenerator.update( renderer );
+						hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
 
-					var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
-					pmremCubeUVPacker.update( renderer );
+						pmremGenerator.dispose();
+						pmremCubeUVPacker.dispose();
 
-					hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
+					} );
 
-					pmremGenerator.dispose();
-					pmremCubeUVPacker.dispose();
+				var ldrUrls = [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ];
+				ldrCubeMap = new THREE.CubeTextureLoader()
+					.setPath( './textures/cube/pisa/' )
+					.load( ldrUrls, function () {
 
-				} );
-
-				var ldrUrls = genCubeUrls( './textures/cube/pisa/', '.png' );
-				ldrCubeMap = new THREE.CubeTextureLoader().load( ldrUrls, function () {
+						ldrCubeMap.encoding = THREE.GammaEncoding;
 
-					ldrCubeMap.encoding = THREE.GammaEncoding;
+						var pmremGenerator = new THREE.PMREMGenerator( ldrCubeMap );
+						pmremGenerator.update( renderer );
 
-					var pmremGenerator = new THREE.PMREMGenerator( ldrCubeMap );
-					pmremGenerator.update( renderer );
+						var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
+						pmremCubeUVPacker.update( renderer );
 
-					var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
-					pmremCubeUVPacker.update( renderer );
+						ldrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
 
-					ldrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
+						pmremGenerator.dispose();
+						pmremCubeUVPacker.dispose();
 
-					pmremGenerator.dispose();
-					pmremCubeUVPacker.dispose();
+					} );
 
-				} );
 
+				var rgbmUrls = [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ];
+				rgbmCubeMap = new THREE.CubeTextureLoader()
+					.setPath( './textures/cube/pisaRGBM16/' )
+					.load( rgbmUrls, function () {
 
-				var rgbmUrls = genCubeUrls( './textures/cube/pisaRGBM16/', '.png' );
-				rgbmCubeMap = new THREE.CubeTextureLoader().load( rgbmUrls, function () {
+						rgbmCubeMap.encoding = THREE.RGBM16Encoding;
 
-					rgbmCubeMap.encoding = THREE.RGBM16Encoding;
+						var pmremGenerator = new THREE.PMREMGenerator( rgbmCubeMap );
+						pmremGenerator.update( renderer );
 
-					var pmremGenerator = new THREE.PMREMGenerator( rgbmCubeMap );
-					pmremGenerator.update( renderer );
+						var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
+						pmremCubeUVPacker.update( renderer );
 
-					var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
-					pmremCubeUVPacker.update( renderer );
+						rgbmCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
 
-					rgbmCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
+						pmremGenerator.dispose();
+						pmremCubeUVPacker.dispose();
 
-					pmremGenerator.dispose();
-					pmremCubeUVPacker.dispose();
-
-				} );
+					} );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -191,7 +186,7 @@
 				gui.add( params, 'roughness', 0, 1 );
 				gui.add( params, 'metalness', 0, 1 );
 				gui.add( params, 'exposure', 0, 2 );
-				gui.add( params, 'showBackground', true );
+				gui.add( params, 'debug', false );
 				gui.open();
 
 			}
@@ -220,8 +215,8 @@
 
 			function render() {
 
-				standardMaterial.roughness = params.roughness;
-				standardMaterial.metalness = params.metalness;
+				torusMesh.material.roughness = params.roughness;
+				torusMesh.material.metalness = params.metalness;
 
 				var renderTarget, cubeMap;
 
@@ -243,33 +238,21 @@
 
 				var newEnvMap = renderTarget ? renderTarget.texture : null;
 
-				if ( newEnvMap && newEnvMap !== standardMaterial.envMap ) {
-
-					standardMaterial.envMap = newEnvMap;
-					standardMaterial.needsUpdate = true;
-
-					floorMaterial.map = newEnvMap;
-					floorMaterial.needsUpdate = true;
-				}
-
-				if ( ! params.showBackground ) {
+				if ( newEnvMap && newEnvMap !== torusMesh.material.envMap ) {
 
-					scene.background = null;
+					torusMesh.material.envMap = newEnvMap;
+					torusMesh.material.needsUpdate = true;
 
-				} else {
-
-					scene.background = cubeMap;
+					planeMesh.material.map = newEnvMap;
+					planeMesh.material.needsUpdate = true;
 
 				}
 
-				renderer.toneMappingExposure = params.exposure;
-
-				for ( var i = 0, l = objects.length; i < l; i ++ ) {
+				torusMesh.rotation.y += 0.005;
+				planeMesh.visible = params.debug;
 
-					var object = objects[ i ];
-					object.rotation.y += 0.005;
-
-				}
+				scene.background = cubeMap;
+				renderer.toneMappingExposure = params.exposure;
 
 				renderer.render( scene, camera );