float and half HDR CUbe Maps load and are properly generated. Something wrong when using RGBE encoding.

examples/js/loaders/HDRCubeMapLoader.js

@@ -17,9 +17,10 @@ THREE.HDRCubeMapLoader.prototype.load = function(type, urls, onLoad, onProgress,
   texture.type = type;
   texture.encoding = (type === THREE.UnsignedByteType) ? THREE.RGBEEncoding : THREE.LinearEncoding;
   texture.format = (type === THREE.UnsignedByteType ) ? THREE.RGBAFormat : THREE.RGBFormat;
-  texture.minFilter = THREE.LinearFilter;
-  texture.magFilter = THREE.LinearFilter;
-  texture.generateMipmaps = false;
+  texture.minFilter = (texture.encoding === THREE.RGBEEncoding ) ? THREE.NearestFilter : THREE.LinearFilter;
+  texture.magFilter = (texture.encoding === THREE.RGBEEncoding ) ? THREE.NearestFilter : THREE.LinearFilter;
+  texture.generateMipmaps = (texture.encoding !== THREE.RGBEEncoding );
+  texture.anisotropy = 0;
 
   var scope = this.hdrLoader;
 
@@ -48,9 +49,9 @@ THREE.HDRCubeMapLoader.prototype.load = function(type, urls, onLoad, onProgress,
         var numElements = ( texData.data.length / 4 )*3;
         var halfdata = new Uint16Array( numElements );
         for( var j=0; j<numElements; j++) {
-          THREE.Encodings.RGBEByteToRGBHalf( texData.data, j*4, floatdata, j*3 );
+          THREE.Encodings.RGBEByteToRGBHalf( texData.data, j*4, halfdata, j*3 );
         }
-        texData.data = floatdata;
+        texData.data = halfdata;
       }
 
       if ( undefined !== texData.image ) {

examples/js/pmrem/PMREMGenerator.js

@@ -4,7 +4,6 @@
  */
 
  THREE.PMREMGenerator = function( cubeTexture ) {
-   console.trace( 'cubeTexture', cubeTexture );
 	if ( cubeTexture instanceof THREE.CubeTexture ) {
 
 		if ( cubeTexture.images[ 0 ] === undefined )
@@ -34,8 +33,11 @@
 	this.numLods = Math.log2( size ) - 2;
   for ( var i = 0; i < this.numLods; i ++ ) {
 		var renderTarget = new THREE.WebGLRenderTargetCube( size, size, params );
-		renderTarget.texture.generateMipmaps = false;
+		renderTarget.texture.generateMipmaps = this.sourceTexture.generateMipmaps;
+    renderTarget.texture.anisotropy = this.sourceTexture.anisotropy;
     renderTarget.texture.encoding = this.sourceTexture.encoding;
+    renderTarget.texture.minFilter = this.sourceTexture.minFilter;
+    renderTarget.texture.magFilter = this.sourceTexture.magFilter;
 		this.cubeLods.push( renderTarget );
 		size = Math.max( 16, size / 2 );
 	}
@@ -84,7 +86,6 @@ THREE.PMREMGenerator.prototype = {
 	},
 
 	renderToCubeMapTargetFace: function( renderer, renderTarget, faceIndex ) {
-    console.log( 'renderTarget', renderTarget );
 		renderTarget.activeCubeFace = faceIndex;
 		this.shader.uniforms[ "faceIndex" ].value = faceIndex;
 		renderer.render( this.scene, this.camera, renderTarget, true );
@@ -150,7 +151,7 @@ THREE.PMREMGenerator.prototype = {
            return mat3(b1, b2, n);\n\
         }\n\
         \n\
-        vec4 testColorMap() {\n\
+        vec4 testColorMap(float Roughness) {\n\
            vec4 color;\n\
            if(faceIndex == 0)\n\
                color = vec4(1.0,0.0,0.0,1.0);\n\
@@ -164,6 +165,7 @@ THREE.PMREMGenerator.prototype = {
                color = vec4(0.0,1.0,1.0,1.0);\n\
            else\n\
                color = vec4(1.0,0.0,1.0,1.0);\n\
+           color *= ( 1.0 - Roughness );\n\
            return color;\n\
         }\n\
         void main() {\n\
@@ -207,6 +209,7 @@ THREE.PMREMGenerator.prototype = {
                rgbColor.rgb += color;\n\
            }\n\
            rgbColor /= float(NumSamples);\n\
+           //rgbColor = testColorMap( roughness ).rgb;\n\
            gl_FragColor = linearToOutputTexel( vec4( rgbColor, 1.0 ) );\n\
         }"
       }

examples/js/pmrem/PMREM_CubeUVPacker.js

@@ -13,9 +13,8 @@ THREE.PMREM_CubeUVPacker = function( cubeTextureLods, numLods ) {
 	this.CubeUVRenderTarget = new THREE.WebGLRenderTarget( size, size,
 	{ format: THREE.RGBAFormat, magFilter: THREE.LinearFilter, minFilter: THREE.LinearFilter, type:cubeTextureLods[ 0 ].type } );
 	this.CubeUVRenderTarget.texture.generateMipmaps = false;
-                this.CubeUVRenderTarget.mapping = THREE.CubeUVReflectionMapping;
+  this.CubeUVRenderTarget.mapping = THREE.CubeUVReflectionMapping;
 	this.camera = new THREE.OrthographicCamera( - size * 0.5, size * 0.5, - size * 0.5, size * 0.5, 0.0, 1000 );
-                this.CubeUVRenderTarget.encoding = this.cubeLods[0].encoding;
 
 	this.scene = new THREE.Scene();
 	this.scene.add( this.camera );
@@ -64,7 +63,8 @@ THREE.PMREM_CubeUVPacker = function( cubeTextureLods, numLods ) {
 
 				// 6 Cube Faces
 				var material = this.getShader();
-				material.uniforms[ "cubeTexture" ].value = this.cubeLods[ i ];
+				material.uniforms[ "envMap" ].value = this.cubeLods[ i ];
+				material.envMap = this.cubeLods[ i ]
 				material.uniforms[ "faceIndex" ].value = k;
 				material.uniforms[ "mapSize" ].value = mipSize;
 				var color = material.uniforms[ "testColor" ].value;
@@ -104,12 +104,12 @@ THREE.PMREM_CubeUVPacker.prototype = {
 
   getShader: function() {
 
-    return new THREE.ShaderMaterial( {
+    var shaderMaterial = new THREE.ShaderMaterial( {
 
       uniforms: {
        	"faceIndex": { type: 'i', value: 0 },
        	"mapSize": { type: 'f', value: 0 },
-       	"cubeTexture": { type: 't', value: null },
+       	"envMap": { type: 't', value: null },
        	"testColor": { type: 'v3', value: new THREE.Vector3( 1, 1, 1 ) }
       },
 
@@ -124,7 +124,7 @@ THREE.PMREM_CubeUVPacker.prototype = {
       fragmentShader:
        "precision highp float;\
         varying vec2 vUv;\
-        uniform samplerCube cubeTexture;\
+        uniform samplerCube envMap;\
         uniform float mapSize;\
         uniform vec3 testColor;\
         uniform int faceIndex;\
@@ -134,7 +134,7 @@ THREE.PMREM_CubeUVPacker.prototype = {
           float sinTheta = sin(theta);\
           float cosTheta = cos(theta);\
           vec3 sampleDir = vec3(cos(phi) * sinTheta, cosTheta, sin(phi) * sinTheta);\
-          vec4 color = textureCube(cubeTexture, sampleDir);\
+          vec4 color = envMapTexelToLinear( textureCube(envMap, sampleDir) );\
           return color * vec4(testColor, 1.0);\
         }\
         void main() {\
@@ -160,11 +160,20 @@ THREE.PMREM_CubeUVPacker.prototype = {
           else {\
               sampleDirection = normalize(vec3(-uv.x, uv.y, -1.0));\
           }\
-          vec4 color = textureCube(cubeTexture, (sampleDirection));\
-          gl_FragColor = color * vec4(testColor, 1.0);\
-        }"
+          vec4 color = envMapTexelToLinear( textureCube( envMap, sampleDirection ) );\
+          gl_FragColor = linearToOutputTexel( color * vec4(testColor, 1.0) );\
+        }",
+
+			blending: THREE.CustomBlending,
+			blendSrc: THREE.OneFactor,
+			blendDst: THREE.ZeroFactor,
+			blendSrcAlpha: THREE.OneFactor,
+			blendDstAlpha: THREE.ZeroFactor,
+			blendEquation: THREE.AddEquation
     });
 
+		return shaderMaterial;
+
   }
 
 };

examples/webgl_materials_envmaps_hdr.html

@@ -29,7 +29,7 @@
 		<div id="container"></div>
 		<div id="info"><a href="http://threejs.org" target="_blank">threejs</a> - PMREM Generator by Prashant Sharma and <a href="http://clara.io/" target="_blank">Ben Houston</a>.</div>
 
-		<script src="../build/three.js"></script>
+		<script src="../build/three.min.js"></script>
 		<script src="../examples/js/controls/OrbitControls.js"></script>
 		<script src="../src/loaders/BinaryTextureLoader.js"></script>
 		<script src="../examples/js/loaders/RGBELoader.js"></script>
@@ -149,8 +149,6 @@
 			  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;
@@ -218,7 +216,7 @@
 					//reflectionCube.encoding = THREE.sRGB;
 					//reflectionCube.format = THREE.RGBFormat;
 
-					hdrCubeMap = new THREE.HDRCubeMapLoader().load(THREE.UnsignedByteType, hdrurls, onTextureLoad);
+					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' );
@@ -237,40 +235,7 @@
 					  textureCube.format = THREE.RGBFormat;
 					  return textureCube;
 					}();
-					var standardNodeMaterial = new THREE.StandardNodeMaterial();
-					var mask = new THREE.SwitchNode( new THREE.TextureNode( decalDiffuse ), 'w' );
-					var normalScale = new THREE.FloatNode( 0.3 );
-					var roughnessA = new THREE.FloatNode( 0.5 );
-					var metalnessA = new THREE.FloatNode( 0.5 );
-					var roughnessB = new THREE.FloatNode( 0 );
-					var metalnessB = new THREE.FloatNode( 1 );
-					var roughness = new THREE.Math3Node(
-					  roughnessA,
-					  roughnessB,
-					  mask,
-					  THREE.Math3Node.MIX
-					);
-					var metalness = new THREE.Math3Node(
-					  metalnessA,
-					  metalnessB,
-					  mask,
-					  THREE.Math3Node.MIX
-					);
-					var normalMask = new THREE.OperatorNode(
-					  new THREE.Math1Node( mask, THREE.Math1Node.INVERT ),
-					  normalScale,
-					  THREE.OperatorNode.MUL
-					);
-					standardNodeMaterial.color = new THREE.ColorNode( 0xFFFFFF );
-					standardNodeMaterial.roughness = roughness;
-					standardNodeMaterial.metalness = metalness;
-					standardNodeMaterial.environment = new THREE.CubeTextureNode( cubemap );
-					standardNodeMaterial.normal = new THREE.TextureNode( grassNormal );
-					standardNodeMaterial.normalScale = normalMask;
-					standardNodeMaterial.build();
-					var torusMesh2 = new THREE.Mesh( torusGeometry, standardNodeMaterial );
-					torusMesh2.position.x = 30.0;
-					scene.add( torusMesh2 );
+
 
 					particleLight = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
 				//scene.add( particleLight );
@@ -303,7 +268,7 @@
 				container.appendChild( renderer.domElement );
 
 				renderer.gammaInput = true;
-				renderer.gammaOutput = false;
+				renderer.gammaOutput = true;
 
                                                                 var renderScene = new THREE.RenderPass(scene, camera);
 

src/renderers/shaders/ShaderChunk/encodings.glsl

@@ -19,12 +19,13 @@ vec4 LinearTosRGB( in vec4 value ) {
 }
 
 vec4 RGBEToLinear( in vec4 value ) {
-  return vec4( value.xyz * exp2( value.w*256.0 - 128.0 ), 1.0 );
+  return vec4( value.rgb * exp2( value.a * 256.0 - 128.0 ), 1.0 );
 }
 vec4 LinearToRGBE( in vec4 value ) {
-  float maxComponent = max(max(value.r, value.g), value.b );
-  float fExp = ceil( log2(maxComponent) );
-  return vec4( value.rgb / exp2(fExp), (fExp + 128.0) / 255.0 );
+  float maxComponent = max( max( value.r, value.g ), value.b );
+  float fExp = ceil( log2( maxComponent ) );
+  return vec4( value.rgb / exp2( fExp ), ( fExp + 128.0 ) / 256.0 );
+//  return vec4( value.brg, ( 3.0 + 128.0 ) / 256.0 );
 }
 
 // reference: http://iwasbeingirony.blogspot.ca/2010/06/difference-between-rgbm-and-rgbd.html
@@ -33,7 +34,7 @@ vec4 RGBMToLinear( in vec4 value, in float maxRange ) {
 }
 vec4 LinearToRGBM( in vec4 value, in float maxRange ) {
   float maxRGB = max( value.x, max( value.g, value.b ) );
-  float M      = maxRGB / maxRange;
+  float M      = clamp( maxRGB / maxRange, 0.0, 1.0 );
   M            = ceil( M * 255.0 ) / 255.0;
   return vec4( value.rgb / ( M * maxRange ), M );
 }

src/renderers/webgl/WebGLPrograms.js

@@ -70,18 +70,17 @@ THREE.WebGLPrograms = function ( renderer, capabilities ) {
 	function getTextureEncodingFromMap( map, gammaOverrideLinear ) {
 
 		var encoding;
-
 		if( ! map ) {
 
 			encoding = THREE.LinearEncoding;
 
 		}
-		else if( map instanceof THREE.Texture ) {
+		else if( map instanceof THREE.Texture || map instanceof THREE.CubeTexture ) {
 
 			encoding = map.encoding;
 
 		}
-		else if( map instanceof THREE.WebGLRenderTarget ) {
+		else if( map instanceof THREE.WebGLRenderTarget || map instanceof THREE.THREE.WebGLRenderTargetCube ) {
 
 			encoding = map.texture.encoding;
 
@@ -117,7 +116,7 @@ THREE.WebGLPrograms = function ( renderer, capabilities ) {
 			}
 
 		}
-		console.log( "renderer.getCurrentRenderTarget()", renderer.getCurrentRenderTarget() );
+
 		var parameters = {
 
 			shaderID: shaderID,
@@ -181,7 +180,7 @@ THREE.WebGLPrograms = function ( renderer, capabilities ) {
 			flipSided: material.side === THREE.BackSide
 
 		};
-		console.log( 'parameters', parameters );
+
 		return parameters;
 
 	};