Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 90db1750 编写于 作者: J Jordan Santell
浏览文件
操作

Reuse scene/camera/shaders across all instances of... 

Reuse scene/camera/shaders across all instances of EquirectangularToCubeGenerator, PMREMGenerator, and PMREMCubeUVPacker to eliminate memory leak from accumulating WebGLStates. Fixes #15288.
上级 653a5ec8
隐藏空白更改
内联 并排
Showing with 469 addition and 432 deletion
examples/js/loaders/EquirectangularToCubeGenerator.js
浏览文件 @ 90db1750
......@@ -2,96 +2,108 @@
* @author Richard M. / https://github.com/richardmonette
*/
THREE.EquirectangularToCubeGenerator = function ( sourceTexture, options ) {
this.sourceTexture = sourceTexture;
this.resolution = options.resolution || 512;
this.views = [
{ t: [ 1, 0, 0 ], u: [ 0, - 1, 0 ] },
{ t: [ - 1, 0, 0 ], u: [ 0, - 1, 0 ] },
{ t: [ 0, 1, 0 ], u: [ 0, 0, 1 ] },
{ t: [ 0, - 1, 0 ], u: [ 0, 0, - 1 ] },
{ t: [ 0, 0, 1 ], u: [ 0, - 1, 0 ] },
{ t: [ 0, 0, - 1 ], u: [ 0, - 1, 0 ] },
];
this.camera = new THREE.PerspectiveCamera( 90, 1, 0.1, 10 );
this.boxMesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 1, 1, 1 ), this.getShader() );
this.boxMesh.material.side = THREE.BackSide;
this.scene = new THREE.Scene();
this.scene.add( this.boxMesh );
var params = {
format: options.format || this.sourceTexture.format,
magFilter: this.sourceTexture.magFilter,
minFilter: this.sourceTexture.minFilter,
type: options.type || this.sourceTexture.type,
generateMipmaps: this.sourceTexture.generateMipmaps,
anisotropy: this.sourceTexture.anisotropy,
encoding: this.sourceTexture.encoding
THREE.EquirectangularToCubeGenerator = ( function () {
var camera = new THREE.PerspectiveCamera( 90, 1, 0.1, 10 );
var scene = new THREE.Scene();
var boxMesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 1, 1, 1 ), getShader() );
boxMesh.material.side = THREE.BackSide;
scene.add( boxMesh );
var EquirectangularToCubeGenerator = function ( sourceTexture, options ) {
this.sourceTexture = sourceTexture;
this.resolution = options.resolution || 512;
this.views = [
{ t: [ 1, 0, 0 ], u: [ 0, - 1, 0 ] },
{ t: [ - 1, 0, 0 ], u: [ 0, - 1, 0 ] },
{ t: [ 0, 1, 0 ], u: [ 0, 0, 1 ] },
{ t: [ 0, - 1, 0 ], u: [ 0, 0, - 1 ] },
{ t: [ 0, 0, 1 ], u: [ 0, - 1, 0 ] },
{ t: [ 0, 0, - 1 ], u: [ 0, - 1, 0 ] },
];
var params = {
format: options.format || this.sourceTexture.format,
magFilter: this.sourceTexture.magFilter,
minFilter: this.sourceTexture.minFilter,
type: options.type || this.sourceTexture.type,
generateMipmaps: this.sourceTexture.generateMipmaps,
anisotropy: this.sourceTexture.anisotropy,
encoding: this.sourceTexture.encoding
};
this.renderTarget = new THREE.WebGLRenderTargetCube( this.resolution, this.resolution, params );
};
this.renderTarget = new THREE.WebGLRenderTargetCube( this.resolution, this.resolution, params );
EquirectangularToCubeGenerator.prototype = {
};
constructor: EquirectangularToCubeGenerator,
THREE.EquirectangularToCubeGenerator.prototype = {
update: function ( renderer ) {
constructor: THREE.EquirectangularToCubeGenerator,
boxMesh.material.uniforms.equirectangularMap.value = this.sourceTexture;
update: function ( renderer ) {
for ( var i = 0; i < 6; i ++ ) {
for ( var i = 0; i < 6; i ++ ) {
this.renderTarget.activeCubeFace = i;
this.renderTarget.activeCubeFace = i;
var v = this.views[ i ];
var v = this.views[ i ];
camera.position.set( 0, 0, 0 );
camera.up.set( v.u[ 0 ], v.u[ 1 ], v.u[ 2 ] );
camera.lookAt( v.t[ 0 ], v.t[ 1 ], v.t[ 2 ] );
this.camera.position.set( 0, 0, 0 );
this.camera.up.set( v.u[ 0 ], v.u[ 1 ], v.u[ 2 ] );
this.camera.lookAt( v.t[ 0 ], v.t[ 1 ], v.t[ 2 ] );
renderer.render( scene, camera, this.renderTarget, true );
renderer.render( this.scene, this.camera, this.renderTarget, true );
}
}
return this.renderTarget.texture;
},
return this.renderTarget.texture;
dispose: function () {
},
this.renderTarget.dispose();
getShader: function () {
}
};
function getShader() {
var shaderMaterial = new THREE.ShaderMaterial( {
uniforms: {
"equirectangularMap": { value: this.sourceTexture },
"equirectangularMap": { value: null },
},
vertexShader:
"varying vec3 localPosition;\n\
\n\
void main() {\n\
localPosition = position;\n\
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n\
}",
"varying vec3 localPosition;\n\
\n\
void main() {\n\
localPosition = position;\n\
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n\
}",
fragmentShader:
"#include <common>\n\
varying vec3 localPosition;\n\
uniform sampler2D equirectangularMap;\n\
\n\
vec2 EquirectangularSampleUV(vec3 v) {\n\
vec2 uv = vec2(atan(v.z, v.x), asin(v.y));\n\
uv *= vec2(0.1591, 0.3183); // inverse atan\n\
uv += 0.5;\n\
return uv;\n\
}\n\
\n\
void main() {\n\
vec2 uv = EquirectangularSampleUV(normalize(localPosition));\n\
gl_FragColor = texture2D(equirectangularMap, uv);\n\
}",
"#include <common>\n\
varying vec3 localPosition;\n\
uniform sampler2D equirectangularMap;\n\
\n\
vec2 EquirectangularSampleUV(vec3 v) {\n\
vec2 uv = vec2(atan(v.z, v.x), asin(v.y));\n\
uv *= vec2(0.1591, 0.3183); // inverse atan\n\
uv += 0.5;\n\
return uv;\n\
}\n\
\n\
void main() {\n\
vec2 uv = EquirectangularSampleUV(normalize(localPosition));\n\
gl_FragColor = texture2D(equirectangularMap, uv);\n\
}",
blending: THREE.NoBlending
......@@ -101,14 +113,8 @@ THREE.EquirectangularToCubeGenerator.prototype = {
return shaderMaterial;
},
dispose: function () {
this.boxMesh.geometry.dispose();
this.boxMesh.material.dispose();
this.renderTarget.dispose();
}
};
return EquirectangularToCubeGenerator;
} )();
examples/js/pmrem/PMREMCubeUVPacker.js
浏览文件 @ 90db1750
......@@ -13,123 +13,161 @@
* The arrangement of the faces is fixed, as assuming this arrangement, the sampling function has been written.
*/
THREE.PMREMCubeUVPacker = function ( cubeTextureLods ) {
this.cubeLods = cubeTextureLods;
var size = cubeTextureLods[ 0 ].width * 4;
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 === THREE.RGBEEncoding ) ? THREE.RGBM16Encoding : sourceTexture.encoding
};
THREE.PMREMCubeUVPacker = ( function () {
if ( params.encoding === THREE.RGBM16Encoding ) {
var camera = new THREE.OrthographicCamera();
var scene = new THREE.Scene();
var shader = getShader();
params.magFilter = THREE.LinearFilter;
params.minFilter = THREE.LinearFilter;
var PMREMCubeUVPacker = function ( cubeTextureLods ) {
}
this.cubeLods = cubeTextureLods;
var size = cubeTextureLods[ 0 ].width * 4;
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, 1 ); // top and bottom are swapped for some reason?
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 === THREE.RGBEEncoding ) ? THREE.RGBM16Encoding : sourceTexture.encoding
};
this.scene = new THREE.Scene();
if ( params.encoding === THREE.RGBM16Encoding ) {
this.objects = [];
params.magFilter = THREE.LinearFilter;
params.minFilter = THREE.LinearFilter;
var geometry = new THREE.PlaneBufferGeometry( 1, 1 );
}
var faceOffsets = [];
faceOffsets.push( new THREE.Vector2( 0, 0 ) );
faceOffsets.push( new THREE.Vector2( 1, 0 ) );
faceOffsets.push( new THREE.Vector2( 2, 0 ) );
faceOffsets.push( new THREE.Vector2( 0, 1 ) );
faceOffsets.push( new THREE.Vector2( 1, 1 ) );
faceOffsets.push( new THREE.Vector2( 2, 1 ) );
this.CubeUVRenderTarget = new THREE.WebGLRenderTarget( size, size, params );
this.CubeUVRenderTarget.texture.name = "PMREMCubeUVPacker.cubeUv";
this.CubeUVRenderTarget.texture.mapping = THREE.CubeUVReflectionMapping;
this.objects = [];
var geometry = new THREE.PlaneBufferGeometry( 1, 1 );
var faceOffsets = [];
faceOffsets.push( new THREE.Vector2( 0, 0 ) );
faceOffsets.push( new THREE.Vector2( 1, 0 ) );
faceOffsets.push( new THREE.Vector2( 2, 0 ) );
faceOffsets.push( new THREE.Vector2( 0, 1 ) );
faceOffsets.push( new THREE.Vector2( 1, 1 ) );
faceOffsets.push( new THREE.Vector2( 2, 1 ) );
var textureResolution = size;
size = cubeTextureLods[ 0 ].width;
var offset2 = 0;
var c = 4.0;
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;
if ( size > 16 ) c *= 2;
var nMips = size > 16 ? 6 : 1;
var mipOffsetX = 0;
var mipOffsetY = 0;
var mipSize = size;
for ( var j = 0; j < nMips; j ++ ) {
// Mip Maps
for ( var k = 0; k < 6; k ++ ) {
// 6 Cube Faces
var material = shader.clone();
material.uniforms[ 'envMap' ].value = this.cubeLods[ i ].texture;
material.envMap = this.cubeLods[ i ].texture;
material.uniforms[ 'faceIndex' ].value = k;
material.uniforms[ 'mapSize' ].value = mipSize;
var planeMesh = new THREE.Mesh( geometry, material );
planeMesh.position.x = faceOffsets[ k ].x * mipSize - offset1 + mipOffsetX;
planeMesh.position.y = faceOffsets[ k ].y * mipSize - offset1 + offset2 + mipOffsetY;
planeMesh.material.side = THREE.BackSide;
planeMesh.scale.setScalar( mipSize );
this.objects.push( planeMesh );
}
mipOffsetY += 1.75 * mipSize;
mipOffsetX += 1.25 * mipSize;
mipSize /= 2;
var textureResolution = size;
size = cubeTextureLods[ 0 ].width;
}
offset2 += 2 * size;
if ( size > 16 ) size /= 2;
var offset2 = 0;
var c = 4.0;
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;
if ( size > 16 ) c *= 2;
var nMips = size > 16 ? 6 : 1;
var mipOffsetX = 0;
var mipOffsetY = 0;
var mipSize = size;
PMREMCubeUVPacker.prototype = {
for ( var j = 0; j < nMips; j ++ ) {
constructor: PMREMCubeUVPacker,
// Mip Maps
for ( var k = 0; k < 6; k ++ ) {
update: function ( renderer ) {
// 6 Cube Faces
var material = this.getShader();
material.uniforms[ 'envMap' ].value = this.cubeLods[ i ].texture;
material.envMap = this.cubeLods[ i ].texture;
material.uniforms[ 'faceIndex' ].value = k;
material.uniforms[ 'mapSize' ].value = mipSize;
var size = this.cubeLods[ 0 ].width * 4;
// top and bottom are swapped for some reason?
camera.left = - size * 0.5;
camera.right = size * 0.5;
camera.top = - size * 0.5;
camera.bottom = size * 0.5;
camera.near = 0;
camera.far = 1;
camera.updateProjectionMatrix();
var planeMesh = new THREE.Mesh( geometry, material );
planeMesh.position.x = faceOffsets[ k ].x * mipSize - offset1 + mipOffsetX;
planeMesh.position.y = faceOffsets[ k ].y * mipSize - offset1 + offset2 + mipOffsetY;
planeMesh.material.side = THREE.BackSide;
planeMesh.scale.setScalar( mipSize );
this.scene.add( planeMesh );
this.objects.push( planeMesh );
for ( var i = 0; i < this.objects.length; i ++ ) {
scene.add( this.objects[ i ] );
}
mipOffsetY += 1.75 * mipSize;
mipOffsetX += 1.25 * mipSize;
mipSize /= 2;
}
offset2 += 2 * size;
if ( size > 16 ) size /= 2;
var gammaInput = renderer.gammaInput;
var gammaOutput = renderer.gammaOutput;
var toneMapping = renderer.toneMapping;
var toneMappingExposure = renderer.toneMappingExposure;
var currentRenderTarget = renderer.getRenderTarget();
}
renderer.gammaInput = false;
renderer.gammaOutput = false;
renderer.toneMapping = THREE.LinearToneMapping;
renderer.toneMappingExposure = 1.0;
renderer.render( scene, camera, this.CubeUVRenderTarget, false );
};
renderer.setRenderTarget( currentRenderTarget );
renderer.toneMapping = toneMapping;
renderer.toneMappingExposure = toneMappingExposure;
renderer.gammaInput = gammaInput;
renderer.gammaOutput = gammaOutput;
THREE.PMREMCubeUVPacker.prototype = {
for ( var i = 0; i < this.objects.length; i ++ ) {
constructor: THREE.PMREMCubeUVPacker,
scene.remove( this.objects[ i ] );
update: function ( renderer ) {
}
},
var gammaInput = renderer.gammaInput;
var gammaOutput = renderer.gammaOutput;
var toneMapping = renderer.toneMapping;
var toneMappingExposure = renderer.toneMappingExposure;
var currentRenderTarget = renderer.getRenderTarget();
dispose: function () {
renderer.gammaInput = false;
renderer.gammaOutput = false;
renderer.toneMapping = THREE.LinearToneMapping;
renderer.toneMappingExposure = 1.0;
renderer.render( this.scene, this.camera, this.CubeUVRenderTarget, false );
for ( var i = 0, l = this.objects.length; i < l; i ++ ) {
renderer.setRenderTarget( currentRenderTarget );
renderer.toneMapping = toneMapping;
renderer.toneMappingExposure = toneMappingExposure;
renderer.gammaInput = gammaInput;
renderer.gammaOutput = gammaOutput;
this.objects[ i ].material.dispose();
},
}
getShader: function () {
this.objects[ 0 ].geometry.dispose();
}
};
function getShader() {
var shaderMaterial = new THREE.ShaderMaterial( {
......@@ -141,42 +179,42 @@ THREE.PMREMCubeUVPacker.prototype = {
},
vertexShader:
"precision highp float;\
varying vec2 vUv;\
void main() {\
vUv = uv;\
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\
}",
"precision highp float;\
varying vec2 vUv;\
void main() {\
vUv = uv;\
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\
}",
fragmentShader:
"precision highp float;\
varying vec2 vUv;\
uniform samplerCube envMap;\
uniform float mapSize;\
uniform vec3 testColor;\
uniform int faceIndex;\
\
void main() {\
vec3 sampleDirection;\
vec2 uv = vUv;\
uv = uv * 2.0 - 1.0;\
uv.y *= -1.0;\
if(faceIndex == 0) {\
sampleDirection = normalize(vec3(1.0, uv.y, -uv.x));\
} else if(faceIndex == 1) {\
sampleDirection = normalize(vec3(uv.x, 1.0, uv.y));\
} else if(faceIndex == 2) {\
sampleDirection = normalize(vec3(uv.x, uv.y, 1.0));\
} else if(faceIndex == 3) {\
sampleDirection = normalize(vec3(-1.0, uv.y, uv.x));\
} else if(faceIndex == 4) {\
sampleDirection = normalize(vec3(uv.x, -1.0, -uv.y));\
} else {\
sampleDirection = normalize(vec3(-uv.x, uv.y, -1.0));\
}\
vec4 color = envMapTexelToLinear( textureCube( envMap, sampleDirection ) );\
gl_FragColor = linearToOutputTexel( color );\
}",
"precision highp float;\
varying vec2 vUv;\
uniform samplerCube envMap;\
uniform float mapSize;\
uniform vec3 testColor;\
uniform int faceIndex;\
\
void main() {\
vec3 sampleDirection;\
vec2 uv = vUv;\
uv = uv * 2.0 - 1.0;\
uv.y *= -1.0;\
if(faceIndex == 0) {\
sampleDirection = normalize(vec3(1.0, uv.y, -uv.x));\
} else if(faceIndex == 1) {\
sampleDirection = normalize(vec3(uv.x, 1.0, uv.y));\
} else if(faceIndex == 2) {\
sampleDirection = normalize(vec3(uv.x, uv.y, 1.0));\
} else if(faceIndex == 3) {\
sampleDirection = normalize(vec3(-1.0, uv.y, uv.x));\
} else if(faceIndex == 4) {\
sampleDirection = normalize(vec3(uv.x, -1.0, -uv.y));\
} else {\
sampleDirection = normalize(vec3(-uv.x, uv.y, -1.0));\
}\
vec4 color = envMapTexelToLinear( textureCube( envMap, sampleDirection ) );\
gl_FragColor = linearToOutputTexel( color );\
}",
blending: THREE.NoBlending
......@@ -186,18 +224,9 @@ THREE.PMREMCubeUVPacker.prototype = {
return shaderMaterial;
},
dispose: function () {
for ( var i = 0, l = this.objects.length; i < l; i ++ ) {
this.objects[ i ].material.dispose();
}
}
this.objects[ 0 ].geometry.dispose();
}
return PMREMCubeUVPacker;
};
} )();
examples/js/pmrem/PMREMGenerator.js
浏览文件 @ 90db1750
......@@ -11,136 +11,149 @@
* by this class.
*/
THREE.PMREMGenerator = function ( sourceTexture, samplesPerLevel, resolution ) {
THREE.PMREMGenerator = ( function () {
this.sourceTexture = sourceTexture;
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 shader = getShader();
var camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0.0, 1000 );
var scene = new THREE.Scene();
var planeMesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2, 0 ), shader );
planeMesh.material.side = THREE.DoubleSide;
scene.add( planeMesh );
scene.add( camera );
var monotonicEncoding = ( this.sourceTexture.encoding === THREE.LinearEncoding ) ||
( this.sourceTexture.encoding === THREE.GammaEncoding ) || ( this.sourceTexture.encoding === THREE.sRGBEncoding );
var PMREMGenerator = function ( sourceTexture, samplesPerLevel, resolution ) {
this.sourceTexture.minFilter = ( monotonicEncoding ) ? THREE.LinearFilter : THREE.NearestFilter;
this.sourceTexture.magFilter = ( monotonicEncoding ) ? THREE.LinearFilter : THREE.NearestFilter;
this.sourceTexture.generateMipmaps = this.sourceTexture.generateMipmaps && monotonicEncoding;
this.sourceTexture = sourceTexture;
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;
this.cubeLods = [];
var monotonicEncoding = ( this.sourceTexture.encoding === THREE.LinearEncoding ) ||
( this.sourceTexture.encoding === THREE.GammaEncoding ) || ( this.sourceTexture.encoding === THREE.sRGBEncoding );
var size = this.resolution;
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
};
this.sourceTexture.minFilter = ( monotonicEncoding ) ? THREE.LinearFilter : THREE.NearestFilter;
this.sourceTexture.magFilter = ( monotonicEncoding ) ? THREE.LinearFilter : THREE.NearestFilter;
this.sourceTexture.generateMipmaps = this.sourceTexture.generateMipmaps && monotonicEncoding;
// how many LODs fit in the given CubeUV Texture.
this.numLods = Math.log( size ) / Math.log( 2 ) - 2; // IE11 doesn't support Math.log2
this.cubeLods = [];
for ( var i = 0; i < this.numLods; i ++ ) {
var size = this.resolution;
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
};
var renderTarget = new THREE.WebGLRenderTargetCube( size, size, params );
renderTarget.texture.name = "PMREMGenerator.cube" + i;
this.cubeLods.push( renderTarget );
size = Math.max( 16, size / 2 );
// how many LODs fit in the given CubeUV Texture.
this.numLods = Math.log( size ) / Math.log( 2 ) - 2; // IE11 doesn't support Math.log2
}
for ( var i = 0; i < this.numLods; i ++ ) {
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.PlaneBufferGeometry( 2, 2, 0 ), this.shader );
this.planeMesh.material.side = THREE.DoubleSide;
this.scene = new THREE.Scene();
this.scene.add( this.planeMesh );
this.scene.add( this.camera );
this.shader.uniforms[ 'envMap' ].value = this.sourceTexture;
this.shader.envMap = this.sourceTexture;
};
THREE.PMREMGenerator.prototype = {
constructor: THREE.PMREMGenerator,
/*
* Prashant Sharma / spidersharma03: More thought and work is needed here.
* Right now it's a kind of a hack to use the previously convolved map to convolve the current one.
* I tried to use the original map to convolve all the lods, but for many textures(specially the high frequency)
* even a high number of samples(1024) dosen't lead to satisfactory results.
* By using the previous convolved maps, a lower number of samples are generally sufficient(right now 32, which
* gives okay results unless we see the reflection very carefully, or zoom in too much), however the math
* goes wrong as the distribution function tries to sample a larger area than what it should be. So I simply scaled
* the roughness by 0.9(totally empirical) to try to visually match the original result.
* The condition "if(i <5)" is also an attemt to make the result match the original result.
* This method requires the most amount of thinking I guess. Here is a paper which we could try to implement in future::
* http://http.developer.nvidia.com/GPUGems3/gpugems3_ch20.html
*/
update: function ( renderer ) {
// Texture should only be flipped for CubeTexture, not for
// a Texture created via THREE.WebGLRenderTargetCube.
var tFlip = ( this.sourceTexture.isCubeTexture ) ? - 1 : 1;
this.shader.uniforms[ 'envMap' ].value = this.sourceTexture;
this.shader.envMap = this.sourceTexture;
var gammaInput = renderer.gammaInput;
var gammaOutput = renderer.gammaOutput;
var toneMapping = renderer.toneMapping;
var toneMappingExposure = renderer.toneMappingExposure;
var currentRenderTarget = renderer.getRenderTarget();
renderer.toneMapping = THREE.LinearToneMapping;
renderer.toneMappingExposure = 1.0;
renderer.gammaInput = false;
renderer.gammaOutput = false;
var renderTarget = new THREE.WebGLRenderTargetCube( size, size, params );
renderTarget.texture.name = "PMREMGenerator.cube" + i;
this.cubeLods.push( renderTarget );
size = Math.max( 16, size / 2 );
for ( var i = 0; i < this.numLods; i ++ ) {
}
var r = i / ( this.numLods - 1 );
this.shader.uniforms[ 'roughness' ].value = r * 0.9; // see comment above, pragmatic choice
// Only apply the tFlip for the first LOD
this.shader.uniforms[ 'tFlip' ].value = ( i == 0 ) ? tFlip : 1;
var size = this.cubeLods[ i ].width;
this.shader.uniforms[ 'mapSize' ].value = size;
this.renderToCubeMapTarget( renderer, this.cubeLods[ i ] );
};
if ( i < 5 ) this.shader.uniforms[ 'envMap' ].value = this.cubeLods[ i ].texture;
PMREMGenerator.prototype = {
}
constructor: PMREMGenerator,
renderer.setRenderTarget( currentRenderTarget );
renderer.toneMapping = toneMapping;
renderer.toneMappingExposure = toneMappingExposure;
renderer.gammaInput = gammaInput;
renderer.gammaOutput = gammaOutput;
/*
* Prashant Sharma / spidersharma03: More thought and work is needed here.
* Right now it's a kind of a hack to use the previously convolved map to convolve the current one.
* I tried to use the original map to convolve all the lods, but for many textures(specially the high frequency)
* even a high number of samples(1024) dosen't lead to satisfactory results.
* By using the previous convolved maps, a lower number of samples are generally sufficient(right now 32, which
* gives okay results unless we see the reflection very carefully, or zoom in too much), however the math
* goes wrong as the distribution function tries to sample a larger area than what it should be. So I simply scaled
* the roughness by 0.9(totally empirical) to try to visually match the original result.
* The condition "if(i <5)" is also an attemt to make the result match the original result.
* This method requires the most amount of thinking I guess. Here is a paper which we could try to implement in future::
* http://http.developer.nvidia.com/GPUGems3/gpugems3_ch20.html
*/
update: function ( renderer ) {
},
// Texture should only be flipped for CubeTexture, not for
// a Texture created via THREE.WebGLRenderTargetCube.
var tFlip = ( this.sourceTexture.isCubeTexture ) ? - 1 : 1;
renderToCubeMapTarget: function ( renderer, renderTarget ) {
shader.defines[ 'SAMPLES_PER_LEVEL' ] = this.samplesPerLevel;
shader.uniforms[ 'faceIndex' ].value = 0;
shader.uniforms[ 'envMap' ].value = this.sourceTexture;
shader.envMap = this.sourceTexture;
shader.needsUpdate = true;
for ( var i = 0; i < 6; i ++ ) {
var gammaInput = renderer.gammaInput;
var gammaOutput = renderer.gammaOutput;
var toneMapping = renderer.toneMapping;
var toneMappingExposure = renderer.toneMappingExposure;
var currentRenderTarget = renderer.getRenderTarget();
this.renderToCubeMapTargetFace( renderer, renderTarget, i );
renderer.toneMapping = THREE.LinearToneMapping;
renderer.toneMappingExposure = 1.0;
renderer.gammaInput = false;
renderer.gammaOutput = false;
}
for ( var i = 0; i < this.numLods; i ++ ) {
var r = i / ( this.numLods - 1 );
shader.uniforms[ 'roughness' ].value = r * 0.9; // see comment above, pragmatic choice
// Only apply the tFlip for the first LOD
shader.uniforms[ 'tFlip' ].value = ( i == 0 ) ? tFlip : 1;
var size = this.cubeLods[ i ].width;
shader.uniforms[ 'mapSize' ].value = size;
this.renderToCubeMapTarget( renderer, this.cubeLods[ i ] );
if ( i < 5 ) shader.uniforms[ 'envMap' ].value = this.cubeLods[ i ].texture;
}
renderer.setRenderTarget( currentRenderTarget );
renderer.toneMapping = toneMapping;
renderer.toneMappingExposure = toneMappingExposure;
renderer.gammaInput = gammaInput;
renderer.gammaOutput = gammaOutput;
},
renderToCubeMapTarget: function ( renderer, renderTarget ) {
for ( var i = 0; i < 6; i ++ ) {
this.renderToCubeMapTargetFace( renderer, renderTarget, i );
}
},
},
renderToCubeMapTargetFace: function ( renderer, renderTarget, faceIndex ) {
renderToCubeMapTargetFace: function ( renderer, renderTarget, faceIndex ) {
renderTarget.activeCubeFace = faceIndex;
this.shader.uniforms[ 'faceIndex' ].value = faceIndex;
renderer.render( this.scene, this.camera, renderTarget, true );
renderTarget.activeCubeFace = faceIndex;
shader.uniforms[ 'faceIndex' ].value = faceIndex;
renderer.render( scene, camera, renderTarget, true );
},
},
getShader: function () {
dispose: function () {
for ( var i = 0, l = this.cubeLods.length; i < l; i ++ ) {
this.cubeLods[ i ].dispose();
}
},
};
function getShader() {
var shaderMaterial = new THREE.ShaderMaterial( {
......@@ -158,111 +171,111 @@ THREE.PMREMGenerator.prototype = {
},
vertexShader:
"varying vec2 vUv;\n\
void main() {\n\
vUv = uv;\n\
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n\
}",
"varying vec2 vUv;\n\
void main() {\n\
vUv = uv;\n\
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n\
}",
fragmentShader:
"#include <common>\n\
varying vec2 vUv;\n\
uniform int faceIndex;\n\
uniform float roughness;\n\
uniform samplerCube envMap;\n\
uniform float mapSize;\n\
uniform vec3 testColor;\n\
uniform float tFlip;\n\
\n\
float GGXRoughnessToBlinnExponent( const in float ggxRoughness ) {\n\
float a = ggxRoughness + 0.0001;\n\
a *= a;\n\
return ( 2.0 / a - 2.0 );\n\
}\n\
vec3 ImportanceSamplePhong(vec2 uv, mat3 vecSpace, float specPow) {\n\
float phi = uv.y * 2.0 * PI;\n\
float cosTheta = pow(1.0 - uv.x, 1.0 / (specPow + 1.0));\n\
float sinTheta = sqrt(1.0 - cosTheta * cosTheta);\n\
vec3 sampleDir = vec3(cos(phi) * sinTheta, sin(phi) * sinTheta, cosTheta);\n\
return vecSpace * sampleDir;\n\
}\n\
vec3 ImportanceSampleGGX( vec2 uv, mat3 vecSpace, float Roughness )\n\
{\n\
float a = Roughness * Roughness;\n\
float Phi = 2.0 * PI * uv.x;\n\
float CosTheta = sqrt( (1.0 - uv.y) / ( 1.0 + (a*a - 1.0) * uv.y ) );\n\
float SinTheta = sqrt( 1.0 - CosTheta * CosTheta );\n\
return vecSpace * vec3(SinTheta * cos( Phi ), SinTheta * sin( Phi ), CosTheta);\n\
}\n\
mat3 matrixFromVector(vec3 n) {\n\
float a = 1.0 / (1.0 + n.z);\n\
float b = -n.x * n.y * a;\n\
vec3 b1 = vec3(1.0 - n.x * n.x * a, b, -n.x);\n\
vec3 b2 = vec3(b, 1.0 - n.y * n.y * a, -n.y);\n\
return mat3(b1, b2, n);\n\
}\n\
\n\
vec4 testColorMap(float Roughness) {\n\
vec4 color;\n\
if(faceIndex == 0)\n\
color = vec4(1.0,0.0,0.0,1.0);\n\
else if(faceIndex == 1)\n\
color = vec4(0.0,1.0,0.0,1.0);\n\
else if(faceIndex == 2)\n\
color = vec4(0.0,0.0,1.0,1.0);\n\
else if(faceIndex == 3)\n\
color = vec4(1.0,1.0,0.0,1.0);\n\
else if(faceIndex == 4)\n\
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\
vec3 sampleDirection;\n\
vec2 uv = vUv*2.0 - 1.0;\n\
float offset = -1.0/mapSize;\n\
const float a = -1.0;\n\
const float b = 1.0;\n\
float c = -1.0 + offset;\n\
float d = 1.0 - offset;\n\
float bminusa = b - a;\n\
uv.x = (uv.x - a)/bminusa * d - (uv.x - b)/bminusa * c;\n\
uv.y = (uv.y - a)/bminusa * d - (uv.y - b)/bminusa * c;\n\
if (faceIndex==0) {\n\
sampleDirection = vec3(1.0, -uv.y, -uv.x);\n\
} else if (faceIndex==1) {\n\
sampleDirection = vec3(-1.0, -uv.y, uv.x);\n\
} else if (faceIndex==2) {\n\
sampleDirection = vec3(uv.x, 1.0, uv.y);\n\
} else if (faceIndex==3) {\n\
sampleDirection = vec3(uv.x, -1.0, -uv.y);\n\
} else if (faceIndex==4) {\n\
sampleDirection = vec3(uv.x, -uv.y, 1.0);\n\
} else {\n\
sampleDirection = vec3(-uv.x, -uv.y, -1.0);\n\
}\n\
vec3 correctedDirection = vec3( tFlip * sampleDirection.x, sampleDirection.yz );\n\
mat3 vecSpace = matrixFromVector( normalize( correctedDirection ) );\n\
vec3 rgbColor = vec3(0.0);\n\
const int NumSamples = SAMPLES_PER_LEVEL;\n\
vec3 vect;\n\
float weight = 0.0;\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\
vect = ImportanceSampleGGX(vec2(float(i) / float(NumSamples), r), vecSpace, roughness);\n\
float dotProd = dot(vect, normalize(sampleDirection));\n\
weight += dotProd;\n\
vec3 color = envMapTexelToLinear(textureCube(envMap, vect)).rgb;\n\
rgbColor.rgb += color;\n\
}\n\
rgbColor /= float(NumSamples);\n\
//rgbColor = testColorMap( roughness ).rgb;\n\
gl_FragColor = linearToOutputTexel( vec4( rgbColor, 1.0 ) );\n\
}",
"#include <common>\n\
varying vec2 vUv;\n\
uniform int faceIndex;\n\
uniform float roughness;\n\
uniform samplerCube envMap;\n\
uniform float mapSize;\n\
uniform vec3 testColor;\n\
uniform float tFlip;\n\
\n\
float GGXRoughnessToBlinnExponent( const in float ggxRoughness ) {\n\
float a = ggxRoughness + 0.0001;\n\
a *= a;\n\
return ( 2.0 / a - 2.0 );\n\
}\n\
vec3 ImportanceSamplePhong(vec2 uv, mat3 vecSpace, float specPow) {\n\
float phi = uv.y * 2.0 * PI;\n\
float cosTheta = pow(1.0 - uv.x, 1.0 / (specPow + 1.0));\n\
float sinTheta = sqrt(1.0 - cosTheta * cosTheta);\n\
vec3 sampleDir = vec3(cos(phi) * sinTheta, sin(phi) * sinTheta, cosTheta);\n\
return vecSpace * sampleDir;\n\
}\n\
vec3 ImportanceSampleGGX( vec2 uv, mat3 vecSpace, float Roughness )\n\
{\n\
float a = Roughness * Roughness;\n\
float Phi = 2.0 * PI * uv.x;\n\
float CosTheta = sqrt( (1.0 - uv.y) / ( 1.0 + (a*a - 1.0) * uv.y ) );\n\
float SinTheta = sqrt( 1.0 - CosTheta * CosTheta );\n\
return vecSpace * vec3(SinTheta * cos( Phi ), SinTheta * sin( Phi ), CosTheta);\n\
}\n\
mat3 matrixFromVector(vec3 n) {\n\
float a = 1.0 / (1.0 + n.z);\n\
float b = -n.x * n.y * a;\n\
vec3 b1 = vec3(1.0 - n.x * n.x * a, b, -n.x);\n\
vec3 b2 = vec3(b, 1.0 - n.y * n.y * a, -n.y);\n\
return mat3(b1, b2, n);\n\
}\n\
\n\
vec4 testColorMap(float Roughness) {\n\
vec4 color;\n\
if(faceIndex == 0)\n\
color = vec4(1.0,0.0,0.0,1.0);\n\
else if(faceIndex == 1)\n\
color = vec4(0.0,1.0,0.0,1.0);\n\
else if(faceIndex == 2)\n\
color = vec4(0.0,0.0,1.0,1.0);\n\
else if(faceIndex == 3)\n\
color = vec4(1.0,1.0,0.0,1.0);\n\
else if(faceIndex == 4)\n\
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\
vec3 sampleDirection;\n\
vec2 uv = vUv*2.0 - 1.0;\n\
float offset = -1.0/mapSize;\n\
const float a = -1.0;\n\
const float b = 1.0;\n\
float c = -1.0 + offset;\n\
float d = 1.0 - offset;\n\
float bminusa = b - a;\n\
uv.x = (uv.x - a)/bminusa * d - (uv.x - b)/bminusa * c;\n\
uv.y = (uv.y - a)/bminusa * d - (uv.y - b)/bminusa * c;\n\
if (faceIndex==0) {\n\
sampleDirection = vec3(1.0, -uv.y, -uv.x);\n\
} else if (faceIndex==1) {\n\
sampleDirection = vec3(-1.0, -uv.y, uv.x);\n\
} else if (faceIndex==2) {\n\
sampleDirection = vec3(uv.x, 1.0, uv.y);\n\
} else if (faceIndex==3) {\n\
sampleDirection = vec3(uv.x, -1.0, -uv.y);\n\
} else if (faceIndex==4) {\n\
sampleDirection = vec3(uv.x, -uv.y, 1.0);\n\
} else {\n\
sampleDirection = vec3(-uv.x, -uv.y, -1.0);\n\
}\n\
vec3 correctedDirection = vec3( tFlip * sampleDirection.x, sampleDirection.yz );\n\
mat3 vecSpace = matrixFromVector( normalize( correctedDirection ) );\n\
vec3 rgbColor = vec3(0.0);\n\
const int NumSamples = SAMPLES_PER_LEVEL;\n\
vec3 vect;\n\
float weight = 0.0;\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\
vect = ImportanceSampleGGX(vec2(float(i) / float(NumSamples), r), vecSpace, roughness);\n\
float dotProd = dot(vect, normalize(sampleDirection));\n\
weight += dotProd;\n\
vec3 color = envMapTexelToLinear(textureCube(envMap, vect)).rgb;\n\
rgbColor.rgb += color;\n\
}\n\
rgbColor /= float(NumSamples);\n\
//rgbColor = testColorMap( roughness ).rgb;\n\
gl_FragColor = linearToOutputTexel( vec4( rgbColor, 1.0 ) );\n\
}",
blending: THREE.NoBlending
......@@ -272,19 +285,8 @@ THREE.PMREMGenerator.prototype = {
return shaderMaterial;
},
dispose: function () {
for ( var i = 0, l = this.cubeLods.length; i < l; i ++ ) {
this.cubeLods[ i ].dispose();
}
this.planeMesh.geometry.dispose();
this.planeMesh.material.dispose();
}
};
return PMREMGenerator;
} )();
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或