diff --git a/PMREMCubeUVPacker.js b/PMREMCubeUVPacker.js new file mode 100644 index 00000000..50f9cb40 --- /dev/null +++ b/PMREMCubeUVPacker.js @@ -0,0 +1,196 @@ +/** + * @author Prashant Sharma / spidersharma03 + * @author Ben Houston / bhouston, https://clara.io + * + * This class takes the cube lods(corresponding to different roughness values), and creates a single cubeUV + * Texture. The format for a given roughness set of faces is simply:: + * +X+Y+Z + * -X-Y-Z + * For every roughness a mip map chain is also saved, which is essential to remove the texture artifacts due to + * minification. + * Right now for every face a PlaneMesh is drawn, which leads to a lot of geometry draw calls, but can be replaced + * later by drawing a single buffer and by sending the appropriate faceIndex via vertex attributes. + * The arrangement of the faces is fixed, as assuming this arrangement, the sampling function has been written. + */ + + +THREE.PMREMCubeUVPacker = function( cubeTextureLods, numLods ) { + + this.cubeLods = cubeTextureLods; + this.numLods = numLods; + 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 + }; + + if ( params.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 ); + + this.scene = new THREE.Scene(); + this.scene.add( this.camera ); + + this.objects = []; + + 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 = 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 planeMesh = new THREE.Mesh( + new THREE.PlaneGeometry( mipSize, mipSize, 0 ), + material ); + planeMesh.position.x = faceOffsets[ k ].x * mipSize - offset1 + mipOffsetX; + planeMesh.position.y = faceOffsets[ k ].y * mipSize - offset1 + offset2 + mipOffsetY; + planeMesh.material.side = THREE.DoubleSide; + this.scene.add( planeMesh ); + this.objects.push( planeMesh ); + + } + mipOffsetY += 1.75 * mipSize; + mipOffsetX += 1.25 * mipSize; + mipSize /= 2; + + } + offset2 += 2 * size; + if ( size > 16 ) size /= 2; + + } + +}; + +THREE.PMREMCubeUVPacker.prototype = { + + constructor: THREE.PMREMCubeUVPacker, + + update: function ( renderer ) { + + 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( this.scene, this.camera, this.CubeUVRenderTarget, false ); + + renderer.setRenderTarget( currentRenderTarget ); + renderer.toneMapping = toneMapping; + renderer.toneMappingExposure = toneMappingExposure; + renderer.gammaInput = gammaInput; + renderer.gammaOutput = gammaOutput; + + }, + + getShader: function () { + + var shaderMaterial = new THREE.ShaderMaterial( { + + uniforms: { + "faceIndex": { value: 0 }, + "mapSize": { value: 0 }, + "envMap": { value: null }, + "testColor": { value: new THREE.Vector3( 1, 1, 1 ) } + }, + + vertexShader: + "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 );\ + }", + + blending: THREE.CustomBlending, + premultipliedAlpha: false, + blendSrc: THREE.OneFactor, + blendDst: THREE.ZeroFactor, + blendSrcAlpha: THREE.OneFactor, + blendDstAlpha: THREE.ZeroFactor, + blendEquation: THREE.AddEquation + + } ); + + return shaderMaterial; + + } + +}; \ No newline at end of file diff --git a/PMREMGenerator.js b/PMREMGenerator.js new file mode 100644 index 00000000..78674031 --- /dev/null +++ b/PMREMGenerator.js @@ -0,0 +1,270 @@ +/** + * @author Prashant Sharma / spidersharma03 + * @author Ben Houston / bhouston, https://clara.io + * + * To avoid cube map seams, I create an extra pixel around each face. This way when the cube map is + * sampled by an application later(with a little care by sampling the centre of the texel), the extra 1 border + * of pixels makes sure that there is no seams artifacts present. This works perfectly for cubeUV format as + * well where the 6 faces can be arranged in any manner whatsoever. + * Code in the beginning of fragment shader's main function does this job for a given resolution. + * Run Scene_PMREM_Test.html in the examples directory to see the sampling from the cube lods generated + * by this class. + */ + +THREE.PMREMGenerator = function( sourceTexture, samplesPerLevel, resolution ) { + + 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 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 = []; + + 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 + }; + + // 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 ++ ) { + + var renderTarget = new THREE.WebGLRenderTargetCube( size, size, params ); + renderTarget.texture.name = "PMREMGenerator.cube" + i; + this.cubeLods.push( renderTarget ); + size = Math.max( 16, size / 2 ); + + } + + 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(); + 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 ) { + 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; + + 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 + 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 ] ); + + if ( i < 5 ) this.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 ) { + + renderTarget.activeCubeFace = faceIndex; + this.shader.uniforms[ 'faceIndex' ].value = faceIndex; + renderer.render( this.scene, this.camera, renderTarget, true ); + + }, + + getShader: function() { + + return new THREE.ShaderMaterial( { + + defines: { + "SAMPLES_PER_LEVEL": 20, + }, + + uniforms: { + "faceIndex": { value: 0 }, + "roughness": { value: 0.5 }, + "mapSize": { value: 0.5 }, + "envMap": { value: null }, + "queryScale": { value: new THREE.Vector3( 1, 1, 1 ) }, + "testColor": { value: new THREE.Vector3( 1, 1, 1 ) }, + }, + + vertexShader: + "varying vec2 vUv;\n\ + void main() {\n\ + vUv = uv;\n\ + gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n\ + }", + + fragmentShader: + "#include \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 vec3 queryScale;\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\ + mat3 vecSpace = matrixFromVector(normalize(sampleDirection * queryScale));\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.CustomBlending, + blendSrc: THREE.OneFactor, + blendDst: THREE.ZeroFactor, + blendSrcAlpha: THREE.OneFactor, + blendDstAlpha: THREE.ZeroFactor, + blendEquation: THREE.AddEquation + } ); + + } + +}; \ No newline at end of file diff --git a/index.html b/index.html index b9dd4cc9..776d4d75 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ A-Frame Environment Component - + @@ -147,8 +147,7 @@

- - + diff --git a/index.js b/index.js index 0a08bb45..d7a4d0c0 100644 --- a/index.js +++ b/index.js @@ -4,6 +4,9 @@ if (typeof AFRAME === 'undefined') { throw new Error('Component attempted to register before AFRAME was available.'); } +const PMREMGenerator = require('./PMREMGenerator') +const PMREMCubeUVPacker = require('./PMREMCubeUVPacker') + /** * enviroGetSettings() - console function for printing out the current environment settings */ @@ -194,6 +197,14 @@ AFRAME.registerComponent('environment', { this.el.appendChild(this.ground); this.el.appendChild(this.dressing); this.el.appendChild(this.sky); + this.el.sceneEl.addEventListener('camera-set-active', () => { + this.generateEnvMap(); + this.applyEnvMap(); + }) + + this.el.sceneEl.addEventListener('model-loaded', () => { + this.applyEnvMap(); + }) }, // returns a fog color from a specific sky type and sun height @@ -975,6 +986,40 @@ AFRAME.registerComponent('environment', { } numStars = Math.floor(Math.min(2000, Math.max(0, numStars))); this.stars.getObject3D('mesh').geometry.setDrawRange(0, numStars); + }, + + generateEnvMap: function() { + const renderer = this.el.sceneEl.renderer; + if (!renderer) { + return; + } + const camera = new THREE.CubeCamera(1, 100000, 512) + const envmapScene = new THREE.Scene() + envmapScene.add(this.el.object3D) + camera.update(renderer, envmapScene) + const generator = new THREE.PMREMGenerator( camera.renderTarget.texture) + generator.update(renderer) + + const packer = new THREE.PMREMCubeUVPacker(generator.cubeLods) + packer.update(renderer) + this.envMap = packer.CubeUVRenderTarget.texture + this.el.sceneEl.add(this.el) + }, + + applyEnvMap: function() { + if (!this.envMap) { + return; + } + const scene = this.el.sceneEl.object3D + scene.remove(this.el.object3D) + scene.traverse(o => { + if (o.material) { + o.material.envMap = this.envMap + o.material.needsUpdate = true + console.log(o) + } + }) + scene.add(this.el.object3D) } });