Add ability to switch between LDR, HDR and RGBM textures in envmap_hdr example.

examples/webgl_materials_envmaps_hdr.html

@@ -34,7 +34,7 @@
 		<script src="../examples/js/controls/OrbitControls.js"></script>
 		<script src="../src/loaders/BinaryTextureLoader.js"></script>
 		<script src="../examples/js/loaders/RGBELoader.js"></script>
-		<script src="../examples/js/loaders/HDRCubeMapLoader.js"></script>
+		<script src="../examples/js/loaders/HDRCubeTextureLoader.js"></script>
 
 		<script src="../examples/js/Detector.js"></script>
 		<script src="../examples/js/libs/stats.min.js"></script>
@@ -60,6 +60,7 @@
 
 			var container, stats;
 			var params = {
+				envMap: "HDR",
 				projection: 'normal',
 				roughness: 1.0,
 				bumpScale: 0.3,
@@ -68,7 +69,8 @@
 			var camera, scene, renderer, controls, objects = [];
 			var hdrCubeMap;
 			var composer;
-			var standardMaterial;
+			var standardMaterial, floorMaterial;
+			var ldrCubeRenderTarget, hdrCubeRenderTarget, rgbmCubeRenderTarget;
 
 			init();
 			animate();
@@ -83,15 +85,6 @@
 
 				scene = new THREE.Scene();
 
-				// Materials
-				var hdrpath = "../examples/textures/cube/hdrPisa/";
-				var hdrformat = '.hdr';
-				var hdrurls = [
-					hdrpath + 'px' + hdrformat, hdrpath + 'nx' + hdrformat,
-					hdrpath + 'py' + hdrformat, hdrpath + 'ny' + hdrformat,
-					hdrpath + 'pz' + hdrformat, hdrpath + 'nz' + hdrformat
-				];
-
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
 
 				var roughnessTexture = THREE.ImageUtils.loadTexture( "../examples/textures/roughness_map.jpg" );
@@ -109,7 +102,49 @@
 				}
 				*/
 
-				var hdrCubeMap = new THREE.HDRCubeMapLoader().load( hdrType, hdrurls, function ( hdrCubeMap ) {
+				standardMaterial = new THREE.MeshStandardMaterial( {
+					map: null,
+					roughnessMap: roughnessTexture,
+					bumpScale: - 0.05,
+					bumpMap: roughnessTexture,
+					color: 0xffffff,
+					metalness: 0.9,
+					roughness: 1.0,
+					shading: THREE.SmoothShading
+				} );
+				var geometry = new THREE.TorusKnotGeometry( 18, 8, 150, 20 );;
+				var torusMesh1 = new THREE.Mesh( geometry, standardMaterial );
+				torusMesh1.position.x = 0.0;
+				torusMesh1.castShadow = true;
+				scene.add( torusMesh1 );
+				objects.push( torusMesh1 );
+
+				floorMaterial = new THREE.MeshStandardMaterial( {
+					map: null,
+					roughnessMap: null,
+					color: 0xffffff,
+					metalness: 0.0,
+					roughness: 0.0,
+					shading: THREE.SmoothShading
+				} );
+
+				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;
+				planeMesh1.receiveShadow = true;
+				scene.add( planeMesh1 );
+
+				var genCubeUrls = function( prefix, postfix ) {
+					return [
+						prefix + 'px' + postfix, prefix + 'nx' + postfix,
+						prefix + 'py' + postfix, prefix + 'ny' + postfix,
+						prefix + 'pz' + postfix, prefix + 'nz' + postfix
+					];
+				};
+
+				var hdrUrls = genCubeUrls( "../examples/textures/cube/pisaHDR/", ".hdr" );
+				new THREE.HDRCubeTextureLoader().load( hdrType, hdrUrls, function ( hdrCubeMap ) {
 
 					var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
 					pmremGenerator.update( renderer );
@@ -117,40 +152,54 @@
 					var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
 					pmremCubeUVPacker.update( renderer );
 
-					standardMaterial = new THREE.MeshStandardMaterial( {
-						map: null,
-						roughnessMap: roughnessTexture,
-						bumpScale: - 0.05,
-						bumpMap: roughnessTexture,
-						color: 0xffffff,
-						metalness: 0.9,
-						roughness: 1.0,
-						envMap: pmremCubeUVPacker.CubeUVRenderTarget,
-						shading: THREE.SmoothShading
-					} );
-					var geometry = new THREE.TorusKnotGeometry( 18, 8, 150, 20 );;
-					var torusMesh1 = new THREE.Mesh( geometry, standardMaterial );
-					torusMesh1.position.x = 0.0;
-					torusMesh1.castShadow = true;
-					scene.add( torusMesh1 );
-					objects.push( torusMesh1 );
-
-					var floorMaterial = new THREE.MeshStandardMaterial( {
-						map: null,
-						roughnessMap: null,
-						color: 0xffffff,
-						metalness: 0.0,
-						roughness: 0.0,
-						envMap: pmremCubeUVPacker.CubeUVRenderTarget,
-						shading: THREE.SmoothShading
-					} );
-
-					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;
-					planeMesh1.receiveShadow = true;
-					scene.add( planeMesh1 );
+					hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
+
+					standardMaterial.envMap = hdrCubeRenderTarget;
+					standardMaterial.needsUpdate = true;
+
+					floorMaterial.envMap = hdrCubeRenderTarget;
+					floorMaterial.needsUpdate = true;
+
+				} );
+
+				var ldrUrls = genCubeUrls( "../examples/textures/cube/pisa/", ".png" );
+				new THREE.CubeTextureLoader().load( ldrUrls, function ( ldrCubeMap ) {
+
+					ldrCubeMap.encoding = THREE.GammaEncoding;
+
+					var pmremGenerator = new THREE.PMREMGenerator( ldrCubeMap );
+					pmremGenerator.update( renderer );
+
+					var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
+					pmremCubeUVPacker.update( renderer );
+
+					ldrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
+
+			/*		standardMaterial.envMap = ldrCubeRenderTarget;
+					standardMaterial.needsUpdate = true;
+					floorMaterial.envMap = ldrCubeRenderTarget;
+					floorMaterial.needsUpdate = true;*/
+
+				} );
+
+
+				var rgbmUrls = genCubeUrls( "../examples/textures/cube/pisaRGBM16/", ".png" );
+				new THREE.CubeTextureLoader().load( rgbmUrls, function ( rgbmCubeMap ) {
+
+					rgbmCubeMap.encoding = THREE.RGBM16Encoding;
+
+					var pmremGenerator = new THREE.PMREMGenerator( rgbmCubeMap );
+					pmremGenerator.update( renderer );
+
+					var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
+					pmremCubeUVPacker.update( renderer );
+
+					rgbmCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
+
+			/*		standardMaterial.envMap = rgbmCubeRenderTarget;
+					standardMaterial.needsUpdate = true;
+					floorMaterial.envMap = rgbmCubeRenderTarget;
+					floorMaterial.needsUpdate = true;*/
 
 				} );
 
@@ -197,6 +246,7 @@
 
 				var gui = new dat.GUI();
 
+				gui.add( params, 'envMap', [ 'LDR', 'HDR', 'RGBM16' ] );
 				gui.add( params, 'roughness', 0, 1 );
 				gui.add( params, 'bumpScale', - 1, 1 );
 				gui.open();
@@ -233,6 +283,11 @@
 
 					standardMaterial.roughness = params.roughness;
 					standardMaterial.bumpScale = - 0.05 * params.bumpScale;
+					switch( params.envMap ) {
+						case 'LDR': standardMaterial.envMap = ldrCubeRenderTarget; break;
+						case 'HDR': standardMaterial.envMap = hdrCubeRenderTarget; break;
+						case 'RGBM16': standardMaterial.envMap = rgbmCubeRenderTarget; break;
+					}
 
 				}