浏览代码

PMREM bug fixes

* fix bug where gammaInput/gammaOutput were reset by the PMREM generators.

# Conflicts:
#	examples/js/pmrem/PMREMCubeUVPacker.js

* propagate encodings properly between PMREM CubeUVPacker and PMREMGenerator as well as through texture constructors.

# Conflicts:
#	examples/js/pmrem/PMREMCubeUVPacker.js

* turn off tonemapping, fix None HDR map option.

# Conflicts:
#	examples/webgl_materials_envmaps_hdr.html

* minor envmaps_hdr improvements.

# Conflicts:
#	examples/webgl_materials_envmaps_hdr.html

* fix double decode.

* recalc materials when changing texture encodings.

# Conflicts:
#	examples/webgl_materials_envmaps_hdr.html

* clean up envmap_hdr example.
Ben Houston (Clara.io) 9 年之前
父节点
当前提交
cc2373f486

+ 24 - 10
examples/js/pmrem/PMREMCubeUVPacker.js

@@ -20,10 +20,18 @@ THREE.PMREMCubeUVPacker = function( cubeTextureLods, numLods ) {
 	this.numLods = numLods;
 	var size = cubeTextureLods[ 0 ].width * 4;
 
-	this.CubeUVRenderTarget = new THREE.WebGLRenderTarget( size, size,
-	{ format: THREE.RGBAFormat, magFilter: THREE.LinearFilter, minFilter: THREE.LinearFilter, type: cubeTextureLods[ 0 ].texture.type } );
-	this.CubeUVRenderTarget.texture.generateMipmaps = false;
-  this.CubeUVRenderTarget.mapping = THREE.CubeUVReflectionMapping;
+	var sourceTexture = cubeTextureLods[ 0 ].texture;
+	var params = {
+		format: sourceTexture.format,
+		magFilter: sourceTexture.magFilter,
+		minFilter: sourceTexture.minFilter,
+		type: sourceTexture.type,
+		generateMipmaps: sourceTexture.generateMipmaps,
+		anisotropy: sourceTexture.anisotropy,
+		encoding: sourceTexture.encoding
+	};
+	this.CubeUVRenderTarget = new THREE.WebGLRenderTarget( size, size, params );
+	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.scene = new THREE.Scene();
@@ -99,13 +107,18 @@ THREE.PMREMCubeUVPacker.prototype = {
 
 		var gammaInput = renderer.gammaInput;
     var gammaOutput = renderer.gammaOutput;
+		var toneMapping = renderer.toneMapping;
+		var toneMappingExposure = renderer.toneMappingExposure;
     renderer.gammaInput = false;
     renderer.gammaOutput = false;
-
-		renderer.render( this.scene, this.camera, this.CubeUVRenderTarget, true );
-
-    renderer.gammaInput = renderer.gammaInput;
-    renderer.gammaOutput = renderer.gammaOutput;
+		renderer.toneMapping = THREE.LinearToneMapping;
+		renderer.toneMappingExposure = 1.0;
+		renderer.render( this.scene, this.camera, this.CubeUVRenderTarget, false );
+
+		renderer.toneMapping = toneMapping;
+		renderer.toneMappingExposure = toneMappingExposure;
+		renderer.gammaInput = gammaInput;
+    renderer.gammaOutput = gammaOutput;
 	},
 
   getShader: function() {
@@ -159,10 +172,11 @@ THREE.PMREMCubeUVPacker.prototype = {
               sampleDirection = normalize(vec3(-uv.x, uv.y, -1.0));\
           }\
           vec4 color = envMapTexelToLinear( textureCube( envMap, sampleDirection ) );\
-          gl_FragColor = linearToOutputTexel( color * vec4(testColor, 1.0) );\
+          gl_FragColor = linearToOutputTexel( color );\
         }",
 
 			blending: THREE.CustomBlending,
+			premultipliedAlpha: false,
 			blendSrc: THREE.OneFactor,
 			blendDst: THREE.ZeroFactor,
 			blendSrcAlpha: THREE.OneFactor,

+ 19 - 9
examples/js/pmrem/PMREMGenerator.js

@@ -26,18 +26,21 @@ THREE.PMREMGenerator = function( sourceTexture ) {
 	this.cubeLods = [];
 
 	var size = this.resolution;
-  var params = { format: this.sourceTexture.format, magFilter: this.sourceTexture.magFilter, minFilter: this.sourceTexture.minFilter, type: this.sourceTexture.type };
+  var params = {
+		format: this.sourceTexture.format,
+		magFilter: this.sourceTexture.magFilter,
+		minFilter: this.sourceTexture.minFilter,
+		type: this.sourceTexture.type,
+		generateMipmaps: this.sourceTexture.generateMipmaps,
+    anisotropy: this.sourceTexture.anisotropy,
+    encoding: this.sourceTexture.encoding
+	 };
 
   // how many LODs fit in the given CubeUV Texture.
 	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 = 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 );
+    this.cubeLods.push( renderTarget );
 		size = Math.max( 16, size / 2 );
 	}
 
@@ -78,6 +81,11 @@ THREE.PMREMGenerator.prototype = {
 
     var gammaInput = renderer.gammaInput;
     var gammaOutput = renderer.gammaOutput;
+		var toneMapping = renderer.toneMapping;
+		var toneMappingExposure = renderer.toneMappingExposure;
+
+    renderer.toneMapping = THREE.LinearToneMapping;
+		renderer.toneMappingExposure = 1.0;
     renderer.gammaInput = false;
     renderer.gammaOutput = false;
 		for ( var i = 0; i < this.numLods; i ++ ) {
@@ -92,8 +100,10 @@ THREE.PMREMGenerator.prototype = {
 
 		}
 
-    renderer.gammaInput = renderer.gammaInput;
-    renderer.gammaOutput = renderer.gammaOutput;
+		renderer.toneMapping = toneMapping;
+		renderer.toneMappingExposure = toneMappingExposure;
+    renderer.gammaInput = gammaInput;
+    renderer.gammaOutput = gammaOutput;
 
 	},
 

+ 17 - 22
examples/webgl_materials_envmaps_hdr.html

@@ -94,7 +94,7 @@
 					map: null,
 					bumpScale: - 0.05,
 					color: 0xffffff,
-					metalness: 0.9,
+					metalness: 1.0,
 					roughness: 1.0,
 					shading: THREE.SmoothShading
 				} );
@@ -152,9 +152,6 @@
 					pmremCubeUVPacker.update( renderer );
 
 					hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
-
-					standardMaterial.envMap = hdrCubeRenderTarget;
-					standardMaterial.needsUpdate = true;
 				} );
 
 				var ldrUrls = genCubeUrls( "./textures/cube/pisa/", ".png" );
@@ -202,19 +199,10 @@
 				renderer.shadowMap.enabled = true;
 				container.appendChild( renderer.domElement );
 
+				//renderer.toneMapping = THREE.ReinhardToneMapping;
 				renderer.gammaInput = true;
 				renderer.gammaOutput = true;
 
-				composer = new THREE.EffectComposer( renderer );
-				composer.setSize( window.innerWidth, window.innerHeight );
-
-				var renderScene = new THREE.RenderPass( scene, camera );
-				composer.addPass( renderScene );
-
-				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
-				copyPass.renderToScreen = true;
-				composer.addPass( copyPass );
-
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';
@@ -229,7 +217,7 @@
 
 				var gui = new dat.GUI();
 
-				gui.add( params, 'envMap', [ 'LDR', 'HDR', 'RGBM16' ] );
+				gui.add( params, 'envMap', [ 'None', 'LDR', 'HDR', 'RGBM16' ] );
 				gui.add( params, 'roughness', 0, 1 );
 				gui.add( params, 'bumpScale', - 1, 1 );
 				gui.add( params, 'exposure', 0.1, 2 );
@@ -246,7 +234,6 @@
 				camera.updateProjectionMatrix();
 
 				renderer.setSize( width, height );
-				composer.setSize( width, height );
 
 			}
 
@@ -268,15 +255,23 @@
 
 					standardMaterial.roughness = params.roughness;
 					standardMaterial.bumpScale = - 0.05 * params.bumpScale;
+					var newEnvMap = standardMaterial.envMap;
 					switch( params.envMap ) {
-						case 'LDR': standardMaterial.envMap = ldrCubeRenderTarget; break;
-						case 'HDR': standardMaterial.envMap = hdrCubeRenderTarget; break;
-						case 'RGBM16': standardMaterial.envMap = rgbmCubeRenderTarget; break;
+						case 'None': newEnvMap = null; break;
+						case 'LDR': newEnvMap = ldrCubeRenderTarget; break;
+						case 'HDR': newEnvMap = hdrCubeRenderTarget; break;
+						case 'RGBM16': newEnvMap = rgbmCubeRenderTarget; break;
+					}
+					if( newEnvMap !== standardMaterial.envMap ) {
+						standardMaterial.envMap = newEnvMap;
+						standardMaterial.needsUpdate = true;
+						floorMaterial.emissive = new THREE.Color( 1, 1, 1 );
+						floorMaterial.emissiveMap = newEnvMap;
+						floorMaterial.needsUpdate = true;
 					}
-
 				}
 
-				renderer.toneMappingExposure = params.exposure;
+				renderer.toneMappingExposure = Math.pow( params.exposure, 4.0 );
 
 				var timer = Date.now() * 0.00025;
 
@@ -289,7 +284,7 @@
 
 				}
 
-				composer.render();
+				renderer.render( scene, camera );
 
 			}
 

+ 1 - 1
src/renderers/WebGLRenderTarget.js

@@ -25,7 +25,7 @@ THREE.WebGLRenderTarget = function ( width, height, options ) {
 
 	if ( options.minFilter === undefined ) options.minFilter = THREE.LinearFilter;
 
-	this.texture = new THREE.Texture( undefined, undefined, options.wrapS, options.wrapT, options.magFilter, options.minFilter, options.format, options.type, options.anisotropy );
+	this.texture = new THREE.Texture( undefined, undefined, options.wrapS, options.wrapT, options.magFilter, options.minFilter, options.format, options.type, options.anisotropy, options.encoding );
 
 	this.depthBuffer = options.depthBuffer !== undefined ? options.depthBuffer : true;
 	this.stencilBuffer = options.stencilBuffer !== undefined ? options.stencilBuffer : true;

+ 8 - 4
src/renderers/shaders/ShaderChunk/lights_pars.glsl

@@ -205,6 +205,8 @@ vec3 getAmbientLightIrradiance( const in vec3 ambientLightColor ) {
 
 			#endif
 
+			envMapColor.rgb = envMapTexelToLinear( envMapColor ).rgb;
+
 		#elif defined( ENVMAP_TYPE_CUBE_UV )
 
 			vec3 queryVec = flipNormal * vec3( flipEnvMap * worldNormal.x, worldNormal.yz );
@@ -216,8 +218,6 @@ vec3 getAmbientLightIrradiance( const in vec3 ambientLightColor ) {
 
 		#endif
 
-		envMapColor.rgb = envMapTexelToLinear( envMapColor ).rgb;
-
 		return PI * envMapColor.rgb * envMapIntensity;
 
 	}
@@ -276,6 +276,8 @@ vec3 getAmbientLightIrradiance( const in vec3 ambientLightColor ) {
 
 			#endif
 
+			envMapColor.rgb = envMapTexelToLinear( envMapColor ).rgb;
+
 		#elif defined( ENVMAP_TYPE_CUBE_UV )
 
 			vec3 queryReflectVec = flipNormal * vec3( flipEnvMap * reflectVec.x, reflectVec.yz );
@@ -297,6 +299,8 @@ vec3 getAmbientLightIrradiance( const in vec3 ambientLightColor ) {
 
 			#endif
 
+			envMapColor.rgb = envMapTexelToLinear( envMapColor ).rgb;
+
 		#elif defined( ENVMAP_TYPE_SPHERE )
 
 			vec3 reflectView = flipNormal * normalize((viewMatrix * vec4( reflectVec, 0.0 )).xyz + vec3(0.0,0.0,1.0));
@@ -311,9 +315,9 @@ vec3 getAmbientLightIrradiance( const in vec3 ambientLightColor ) {
 
 			#endif
 
-		#endif
+			envMapColor.rgb = envMapTexelToLinear( envMapColor ).rgb;
 
-		envMapColor.rgb = envMapTexelToLinear( envMapColor ).rgb;
+		#endif
 
 		return envMapColor.rgb * envMapIntensity;
 

+ 2 - 2
src/textures/CompressedTexture.js

@@ -2,9 +2,9 @@
  * @author alteredq / http://alteredqualia.com/
  */
 
-THREE.CompressedTexture = function ( mipmaps, width, height, format, type, mapping, wrapS, wrapT, magFilter, minFilter, anisotropy ) {
+THREE.CompressedTexture = function ( mipmaps, width, height, format, type, mapping, wrapS, wrapT, magFilter, minFilter, anisotropy, encoding ) {
 
-	THREE.Texture.call( this, null, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy );
+	THREE.Texture.call( this, null, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding );
 
 	this.image = { width: width, height: height };
 	this.mipmaps = mipmaps;

+ 2 - 2
src/textures/CubeTexture.js

@@ -2,12 +2,12 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-THREE.CubeTexture = function ( images, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy ) {
+THREE.CubeTexture = function ( images, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding ) {
 
 	images = images !== undefined ? images : [];
 	mapping = mapping !== undefined ? mapping : THREE.CubeReflectionMapping;
 
-	THREE.Texture.call( this, images, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy );
+	THREE.Texture.call( this, images, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding );
 
 	this.flipY = false;
 

+ 2 - 2
src/textures/DataTexture.js

@@ -2,9 +2,9 @@
  * @author alteredq / http://alteredqualia.com/
  */
 
-THREE.DataTexture = function ( data, width, height, format, type, mapping, wrapS, wrapT, magFilter, minFilter, anisotropy ) {
+THREE.DataTexture = function ( data, width, height, format, type, mapping, wrapS, wrapT, magFilter, minFilter, anisotropy, encoding ) {
 
-	THREE.Texture.call( this, null, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy );
+	THREE.Texture.call( this, null, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding );
 
 	this.image = { data: data, width: width, height: height };
 

+ 2 - 2
src/textures/Texture.js

@@ -4,7 +4,7 @@
  * @author szimek / https://github.com/szimek/
  */
 
-THREE.Texture = function ( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy ) {
+THREE.Texture = function ( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding ) {
 
 	Object.defineProperty( this, 'id', { value: THREE.TextureIdCount ++ } );
 
@@ -42,7 +42,7 @@ THREE.Texture = function ( image, mapping, wrapS, wrapT, magFilter, minFilter, f
 	//
 	// Also changing the encoding after already used by a Material will not automatically make the Material
 	// update.  You need to explicitly call Material.needsUpdate to trigger it to recompile.
-	this.encoding = THREE.LinearEncoding;
+	this.encoding = encoding !== undefined ? encoding :  THREE.LinearEncoding;
 
 	this.version = 0;
 	this.onUpdate = null;