Merge pull request #8252 from bhouston/improved_envmap_hdr

Improved envmap hdr example

examples/js/loaders/HDRCubeMapLoader.js → examples/js/loaders/HDRCubeTextureLoader.js

@@ -3,7 +3,7 @@
 * @author Ben Houston / http://clara.io / bhouston
 */
 
-THREE.HDRCubeMapLoader = function (manager) {
+THREE.HDRCubeTextureLoader = function (manager) {
   this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;
   // override in sub classes
   this.hdrLoader = new THREE.RGBELoader();
@@ -11,7 +11,7 @@ THREE.HDRCubeMapLoader = function (manager) {
   if( THREE.Encodings === undefined ) throw new Error( "HDRCubeMapLoader requires THREE.Encodings" );
 }
 
-THREE.HDRCubeMapLoader.prototype.load = function(type, urls, onLoad, onProgress, onError) {
+THREE.HDRCubeTextureLoader.prototype.load = function(type, urls, onLoad, onProgress, onError) {
   var texture = new THREE.CubeTexture( [] );
 
   texture.type = type;

examples/js/pmrem/PMREMGenerator.js

@@ -3,27 +3,34 @@
  * @author Ben Houston / bhouston, https://clara.io
  */
 
- THREE.PMREMGenerator = function( cubeTexture ) {
-	if ( cubeTexture instanceof THREE.CubeTexture ) {
+ THREE.PMREMGenerator = function( sourceTexture ) {
+	if ( sourceTexture instanceof THREE.CubeTexture ) {
 
-		if ( cubeTexture.images[ 0 ] === undefined )
-		  console.error( "CubeTexture Not Initialized" );
-      if(cubeTexture.images[ 0 ] instanceof THREE.DataTexture) {
-          this.resolution = cubeTexture.images[ 0 ].image.width;
+		if ( sourceTexture.images[ 0 ] === undefined )
+		  console.error( "sourceTexture Not Initialized" );
+      if(sourceTexture.images[ 0 ] instanceof THREE.DataTexture) {
+          this.resolution = sourceTexture.images[ 0 ].image.width;
       }
       else {
-          this.resolution = cubeTexture.images[ 0 ].width;
+          this.resolution = sourceTexture.images[ 0 ].width;
       }
 
 	}
-	else if ( cubeTexture instanceof THREE.WebGLRenderTargetCube ) {
-		if ( cubeTexture === undefined ) console.error( "Render Target Not Initialized" );
-		this.resolution = cubeTexture.width;
+	else if ( sourceTexture instanceof THREE.WebGLRenderTargetCube ) {
+		if ( sourceTexture === undefined ) console.error( "Render Target Not Initialized" );
+		this.resolution = sourceTexture.width;
 	}
 	else {
 		console.error( "Wrong Input to PMREMGenerator" );
 	}
-	this.sourceTexture = cubeTexture;
+	this.sourceTexture = sourceTexture;
+
+  var monotonicEncoding = ( sourceTexture.encoding === THREE.LinearEncoding ) ||
+    ( sourceTexture.encoding === THREE.GammaEncoding ) || ( sourceTexture.encoding === THREE.sRGBEncoding );
+
+  this.sourceTexture.minFilter = ( monotonicEncoding ) ? THREE.LinearFilter : THREE.NearestFilter;
+  this.sourceTexture.magFilter = ( monotonicEncoding ) ? THREE.LinearFilter : THREE.NearestFilter;
+  this.sourceTexture.generateMipmaps = this.sourceTexture.generateMipmaps && monotonicEncoding;
 
 	this.cubeLods = [];
 

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,51 @@
 				}
 				*/
 
-				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;
+				torusMesh1.receiveShadow = 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,41 +154,42 @@
 					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;
+				} );
+
+
+				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;
 				} );
 
 				// Lights
@@ -197,6 +235,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 +272,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;
+					}
 
 				}