浏览代码

Correct PMREM cubemap fix. See #10562.

Mr.doob 8 年之前
父节点
当前提交
27ef9f1b8f
共有 2 个文件被更改,包括 30 次插入14 次删除
  1. 13 7
      examples/js/pmrem/PMREMCubeUVPacker.js
  2. 17 7
      examples/js/pmrem/PMREMGenerator.js

+ 13 - 7
examples/js/pmrem/PMREMCubeUVPacker.js

@@ -31,7 +31,13 @@ THREE.PMREMCubeUVPacker = function( cubeTextureLods, numLods ) {
 		encoding: sourceTexture.encoding
 	};
 
+	if( sourceTexture.encoding === THREE.RGBM16Encoding ) {
+		params.magFilter = THREE.LinearFilter;
+		params.minFilter = THREE.LinearFilter;
+	}
+
 	this.CubeUVRenderTarget = new THREE.WebGLRenderTarget( size, size, params );
+	this.CubeUVRenderTarget.texture.name = "PMREMCubeUVPacker.cubeUv";
 	this.CubeUVRenderTarget.texture.mapping = THREE.CubeUVReflectionMapping;
 	this.camera = new THREE.OrthographicCamera( - size * 0.5, size * 0.5, - size * 0.5, size * 0.5, 0.0, 1000 );
 
@@ -53,7 +59,7 @@ THREE.PMREMCubeUVPacker = function( cubeTextureLods, numLods ) {
 
 	var offset2 = 0;
 	var c = 4.0;
-	this.numLods = Math.log2( cubeTextureLods[ 0 ].width ) - 2;
+	this.numLods = Math.log( cubeTextureLods[ 0 ].width ) / Math.log( 2 ) - 2; // IE11 doesn't support Math.log2
 	for ( var i = 0; i < this.numLods; i ++ ) {
 
 		var offset1 = ( textureResolution - textureResolution / c ) * 0.5;
@@ -156,17 +162,17 @@ THREE.PMREMCubeUVPacker.prototype = {
 					uv = uv * 2.0 - 1.0;\
 					uv.y *= -1.0;\
 					if(faceIndex == 0) {\
-						sampleDirection = normalize(vec3(-1.0, uv.y, -uv.x));\
+						sampleDirection = normalize(vec3(1.0, uv.y, -uv.x));\
 					} else if(faceIndex == 1) {\
-						sampleDirection = normalize(vec3(-uv.x, 1.0, uv.y));\
+						sampleDirection = normalize(vec3(uv.x, 1.0, uv.y));\
 					} else if(faceIndex == 2) {\
-						sampleDirection = normalize(vec3(-uv.x, uv.y, 1.0));\
+						sampleDirection = normalize(vec3(uv.x, uv.y, 1.0));\
 					} else if(faceIndex == 3) {\
-						sampleDirection = normalize(vec3(1.0, uv.y, uv.x));\
+						sampleDirection = normalize(vec3(-1.0, uv.y, uv.x));\
 					} else if(faceIndex == 4) {\
-						sampleDirection = normalize(vec3(-uv.x, -1.0, -uv.y));\
+						sampleDirection = normalize(vec3(uv.x, -1.0, -uv.y));\
 					} else {\
-						sampleDirection = normalize(vec3(uv.x, uv.y, -1.0));\
+						sampleDirection = normalize(vec3(-uv.x, uv.y, -1.0));\
 					}\
 					vec4 color = envMapTexelToLinear( textureCube( envMap, sampleDirection ) );\
 					gl_FragColor = linearToOutputTexel( color );\

+ 17 - 7
examples/js/pmrem/PMREMGenerator.js

@@ -11,10 +11,11 @@
  *	by this class.
  */
 
-THREE.PMREMGenerator = function( sourceTexture ) {
+THREE.PMREMGenerator = function( sourceTexture, samplesPerLevel, resolution ) {
 
 	this.sourceTexture = sourceTexture;
-	this.resolution = 256; // NODE: 256 is currently hard coded in the glsl code for performance reasons
+	this.resolution = ( resolution !== undefined ) ? resolution : 256; // NODE: 256 is currently hard coded in the glsl code for performance reasons
+	this.samplesPerLevel = ( samplesPerLevel !== undefined ) ? samplesPerLevel : 16;
 
 	var monotonicEncoding = ( sourceTexture.encoding === THREE.LinearEncoding ) ||
 		( sourceTexture.encoding === THREE.GammaEncoding ) || ( sourceTexture.encoding === THREE.sRGBEncoding );
@@ -37,11 +38,12 @@ THREE.PMREMGenerator = function( sourceTexture ) {
 	 };
 
 	// how many LODs fit in the given CubeUV Texture.
-	this.numLods = Math.log2( size ) - 2;
+	this.numLods = Math.log( size ) / Math.log( 2 ) - 2;  // IE11 doesn't support Math.log2
 
 	for ( var i = 0; i < this.numLods; i ++ ) {
 
 		var renderTarget = new THREE.WebGLRenderTargetCube( size, size, params );
+		renderTarget.texture.name = "PMREMGenerator.cube" + i;
 		this.cubeLods.push( renderTarget );
 		size = Math.max( 16, size / 2 );
 
@@ -50,6 +52,7 @@ THREE.PMREMGenerator = function( sourceTexture ) {
 	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0.0, 1000 );
 
 	this.shader = this.getShader();
+	this.shader.defines['SAMPLES_PER_LEVEL'] = this.samplesPerLevel;
 	this.planeMesh = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2, 0 ), this.shader );
 	this.planeMesh.material.side = THREE.DoubleSide;
 	this.scene = new THREE.Scene();
@@ -97,6 +100,7 @@ THREE.PMREMGenerator.prototype = {
 
 			var r = i / ( this.numLods - 1 );
 			this.shader.uniforms[ 'roughness' ].value = r * 0.9; // see comment above, pragmatic choice
+			this.shader.uniforms[ 'queryScale' ].value.x = ( i == 0 ) ? -1 : 1;
 			var size = this.cubeLods[ i ].width;
 			this.shader.uniforms[ 'mapSize' ].value = size;
 			this.renderToCubeMapTarget( renderer, this.cubeLods[ i ] );
@@ -134,12 +138,17 @@ THREE.PMREMGenerator.prototype = {
 
 		return new THREE.ShaderMaterial( {
 
+			defines: {
+				"SAMPLES_PER_LEVEL": 20,
+			},
+
 			uniforms: {
 				"faceIndex": { value: 0 },
 				"roughness": { value: 0.5 },
 				"mapSize": { value: 0.5 },
 				"envMap": { value: null },
-				"testColor": { value: new THREE.Vector3( 1, 1, 1 ) }
+				"queryScale": { value: new THREE.Vector3( 1, 1, 1 ) },
+				"testColor": { value: new THREE.Vector3( 1, 1, 1 ) },
 			},
 
 			vertexShader:
@@ -157,6 +166,7 @@ THREE.PMREMGenerator.prototype = {
 				uniform samplerCube envMap;\n\
 				uniform float mapSize;\n\
 				uniform vec3 testColor;\n\
+				uniform vec3 queryScale;\n\
 				\n\
 				float GGXRoughnessToBlinnExponent( const in float ggxRoughness ) {\n\
 					float a = ggxRoughness + 0.0001;\n\
@@ -227,12 +237,12 @@ THREE.PMREMGenerator.prototype = {
 					} else {\n\
 						sampleDirection = vec3(-uv.x, -uv.y, -1.0);\n\
 					}\n\
-					mat3 vecSpace = matrixFromVector(normalize(sampleDirection));\n\
+					mat3 vecSpace = matrixFromVector(normalize(sampleDirection * queryScale));\n\
 					vec3 rgbColor = vec3(0.0);\n\
-					const int NumSamples = 1024;\n\
+					const int NumSamples = SAMPLES_PER_LEVEL;\n\
 					vec3 vect;\n\
 					float weight = 0.0;\n\
-					for(int i=0; i<NumSamples; i++) {\n\
+					for( int i = 0; i < NumSamples; i ++ ) {\n\
 						float sini = sin(float(i));\n\
 						float cosi = cos(float(i));\n\
 						float r = rand(vec2(sini, cosi));\n\