three.js/examples/jsm/pmrem/PMREMCubeUVPacker.js

/**
 * @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.
 */

import {
	BackSide,
	CubeUVReflectionMapping,
	LinearFilter,
	LinearToneMapping,
	Mesh,
	NoBlending,
	OrthographicCamera,
	PlaneBufferGeometry,
	RGBEEncoding,
	RGBM16Encoding,
	Scene,
	ShaderMaterial,
	Vector2,
	Vector3,
	WebGLRenderTarget
} from "../../../build/three.module.js";

var PMREMCubeUVPacker = ( function () {

	var camera = new OrthographicCamera();
	var scene = new Scene();
	var shader = getShader();

	var 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 === RGBEEncoding ) ? RGBM16Encoding : sourceTexture.encoding
		};

		if ( params.encoding === RGBM16Encoding ) {

			params.magFilter = LinearFilter;
			params.minFilter = LinearFilter;

		}

		this.CubeUVRenderTarget = new WebGLRenderTarget( size, size, params );
		this.CubeUVRenderTarget.texture.name = "PMREMCubeUVPacker.cubeUv";
		this.CubeUVRenderTarget.texture.mapping = CubeUVReflectionMapping;

		this.objects = [];

		var geometry = new PlaneBufferGeometry( 1, 1 );

		var faceOffsets = [];
		faceOffsets.push( new Vector2( 0, 0 ) );
		faceOffsets.push( new Vector2( 1, 0 ) );
		faceOffsets.push( new Vector2( 2, 0 ) );
		faceOffsets.push( new Vector2( 0, 1 ) );
		faceOffsets.push( new Vector2( 1, 1 ) );
		faceOffsets.push( new 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 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 = BackSide;
					planeMesh.scale.setScalar( mipSize );
					this.objects.push( planeMesh );

				}
				mipOffsetY += 1.75 * mipSize;
				mipOffsetX += 1.25 * mipSize;
				mipSize /= 2;

			}
			offset2 += 2 * size;
			if ( size > 16 ) size /= 2;

		}

	};

	PMREMCubeUVPacker.prototype = {

		constructor: PMREMCubeUVPacker,

		update: function ( renderer ) {

			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();

			for ( var i = 0; i < this.objects.length; i ++ ) {

				scene.add( this.objects[ i ] );

			}

			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 = LinearToneMapping;
			renderer.toneMappingExposure = 1.0;
			renderer.setRenderTarget( this.CubeUVRenderTarget );
			renderer.render( scene, camera );

			renderer.setRenderTarget( currentRenderTarget );
			renderer.toneMapping = toneMapping;
			renderer.toneMappingExposure = toneMappingExposure;
			renderer.gammaInput = gammaInput;
			renderer.gammaOutput = gammaOutput;

			for ( var i = 0; i < this.objects.length; i ++ ) {

				scene.remove( this.objects[ i ] );

			}

		},

		dispose: function () {

			for ( var i = 0, l = this.objects.length; i < l; i ++ ) {

				this.objects[ i ].material.dispose();

			}

			this.objects[ 0 ].geometry.dispose();

		}

	};

	function getShader() {

		var shaderMaterial = new ShaderMaterial( {

			uniforms: {
				"faceIndex": { value: 0 },
				"mapSize": { value: 0 },
				"envMap": { value: null },
				"testColor": { value: new 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: NoBlending

		} );

		shaderMaterial.type = 'PMREMCubeUVPacker';

		return shaderMaterial;

	}


	return PMREMCubeUVPacker;

} )();

export { PMREMCubeUVPacker };