PMREMCubeUVPacker.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. /**
  2. * @author Prashant Sharma / spidersharma03
  3. * @author Ben Houston / bhouston, https://clara.io
  4. *
  5. * This class takes the cube lods(corresponding to different roughness values), and creates a single cubeUV
  6. * Texture. The format for a given roughness set of faces is simply::
  7. * +X+Y+Z
  8. * -X-Y-Z
  9. * For every roughness a mip map chain is also saved, which is essential to remove the texture artifacts due to
  10. * minification.
  11. * Right now for every face a PlaneMesh is drawn, which leads to a lot of geometry draw calls, but can be replaced
  12. * later by drawing a single buffer and by sending the appropriate faceIndex via vertex attributes.
  13. * The arrangement of the faces is fixed, as assuming this arrangement, the sampling function has been written.
  14. */
  15. THREE.PMREMCubeUVPacker = ( function () {
  16. var camera = new THREE.OrthographicCamera();
  17. var scene = new THREE.Scene();
  18. var shader = getShader();
  19. var PMREMCubeUVPacker = function ( cubeTextureLods ) {
  20. this.cubeLods = cubeTextureLods;
  21. var size = cubeTextureLods[ 0 ].width * 4;
  22. var sourceTexture = cubeTextureLods[ 0 ].texture;
  23. var params = {
  24. format: sourceTexture.format,
  25. magFilter: sourceTexture.magFilter,
  26. minFilter: sourceTexture.minFilter,
  27. type: sourceTexture.type,
  28. generateMipmaps: sourceTexture.generateMipmaps,
  29. anisotropy: sourceTexture.anisotropy,
  30. encoding: ( sourceTexture.encoding === THREE.RGBEEncoding ) ? THREE.RGBM16Encoding : sourceTexture.encoding
  31. };
  32. if ( params.encoding === THREE.RGBM16Encoding ) {
  33. params.magFilter = THREE.LinearFilter;
  34. params.minFilter = THREE.LinearFilter;
  35. }
  36. this.CubeUVRenderTarget = new THREE.WebGLRenderTarget( size, size, params );
  37. this.CubeUVRenderTarget.texture.name = "PMREMCubeUVPacker.cubeUv";
  38. this.CubeUVRenderTarget.texture.mapping = THREE.CubeUVReflectionMapping;
  39. this.objects = [];
  40. var geometry = new THREE.PlaneBufferGeometry( 1, 1 );
  41. var faceOffsets = [];
  42. faceOffsets.push( new THREE.Vector2( 0, 0 ) );
  43. faceOffsets.push( new THREE.Vector2( 1, 0 ) );
  44. faceOffsets.push( new THREE.Vector2( 2, 0 ) );
  45. faceOffsets.push( new THREE.Vector2( 0, 1 ) );
  46. faceOffsets.push( new THREE.Vector2( 1, 1 ) );
  47. faceOffsets.push( new THREE.Vector2( 2, 1 ) );
  48. var textureResolution = size;
  49. size = cubeTextureLods[ 0 ].width;
  50. var offset2 = 0;
  51. var c = 4.0;
  52. this.numLods = Math.log( cubeTextureLods[ 0 ].width ) / Math.log( 2 ) - 2; // IE11 doesn't support Math.log2
  53. for ( var i = 0; i < this.numLods; i ++ ) {
  54. var offset1 = ( textureResolution - textureResolution / c ) * 0.5;
  55. if ( size > 16 ) c *= 2;
  56. var nMips = size > 16 ? 6 : 1;
  57. var mipOffsetX = 0;
  58. var mipOffsetY = 0;
  59. var mipSize = size;
  60. for ( var j = 0; j < nMips; j ++ ) {
  61. // Mip Maps
  62. for ( var k = 0; k < 6; k ++ ) {
  63. // 6 Cube Faces
  64. var material = shader.clone();
  65. material.uniforms[ 'envMap' ].value = this.cubeLods[ i ].texture;
  66. material.envMap = this.cubeLods[ i ].texture;
  67. material.uniforms[ 'faceIndex' ].value = k;
  68. material.uniforms[ 'mapSize' ].value = mipSize;
  69. var planeMesh = new THREE.Mesh( geometry, material );
  70. planeMesh.position.x = faceOffsets[ k ].x * mipSize - offset1 + mipOffsetX;
  71. planeMesh.position.y = faceOffsets[ k ].y * mipSize - offset1 + offset2 + mipOffsetY;
  72. planeMesh.material.side = THREE.BackSide;
  73. planeMesh.scale.setScalar( mipSize );
  74. this.objects.push( planeMesh );
  75. }
  76. mipOffsetY += 1.75 * mipSize;
  77. mipOffsetX += 1.25 * mipSize;
  78. mipSize /= 2;
  79. }
  80. offset2 += 2 * size;
  81. if ( size > 16 ) size /= 2;
  82. }
  83. };
  84. PMREMCubeUVPacker.prototype = {
  85. constructor: PMREMCubeUVPacker,
  86. update: function ( renderer ) {
  87. var size = this.cubeLods[ 0 ].width * 4;
  88. // top and bottom are swapped for some reason?
  89. camera.left = - size * 0.5;
  90. camera.right = size * 0.5;
  91. camera.top = - size * 0.5;
  92. camera.bottom = size * 0.5;
  93. camera.near = 0;
  94. camera.far = 1;
  95. camera.updateProjectionMatrix();
  96. for ( var i = 0; i < this.objects.length; i ++ ) {
  97. scene.add( this.objects[ i ] );
  98. }
  99. var gammaInput = renderer.gammaInput;
  100. var gammaOutput = renderer.gammaOutput;
  101. var toneMapping = renderer.toneMapping;
  102. var toneMappingExposure = renderer.toneMappingExposure;
  103. var currentRenderTarget = renderer.getRenderTarget();
  104. renderer.gammaInput = false;
  105. renderer.gammaOutput = false;
  106. renderer.toneMapping = THREE.LinearToneMapping;
  107. renderer.toneMappingExposure = 1.0;
  108. renderer.render( scene, camera, this.CubeUVRenderTarget, false );
  109. renderer.setRenderTarget( currentRenderTarget );
  110. renderer.toneMapping = toneMapping;
  111. renderer.toneMappingExposure = toneMappingExposure;
  112. renderer.gammaInput = gammaInput;
  113. renderer.gammaOutput = gammaOutput;
  114. for ( var i = 0; i < this.objects.length; i ++ ) {
  115. scene.remove( this.objects[ i ] );
  116. }
  117. },
  118. dispose: function () {
  119. for ( var i = 0, l = this.objects.length; i < l; i ++ ) {
  120. this.objects[ i ].material.dispose();
  121. }
  122. this.objects[ 0 ].geometry.dispose();
  123. }
  124. };
  125. function getShader() {
  126. var shaderMaterial = new THREE.ShaderMaterial( {
  127. uniforms: {
  128. "faceIndex": { value: 0 },
  129. "mapSize": { value: 0 },
  130. "envMap": { value: null },
  131. "testColor": { value: new THREE.Vector3( 1, 1, 1 ) }
  132. },
  133. vertexShader:
  134. "precision highp float;\
  135. varying vec2 vUv;\
  136. void main() {\
  137. vUv = uv;\
  138. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\
  139. }",
  140. fragmentShader:
  141. "precision highp float;\
  142. varying vec2 vUv;\
  143. uniform samplerCube envMap;\
  144. uniform float mapSize;\
  145. uniform vec3 testColor;\
  146. uniform int faceIndex;\
  147. \
  148. void main() {\
  149. vec3 sampleDirection;\
  150. vec2 uv = vUv;\
  151. uv = uv * 2.0 - 1.0;\
  152. uv.y *= -1.0;\
  153. if(faceIndex == 0) {\
  154. sampleDirection = normalize(vec3(1.0, uv.y, -uv.x));\
  155. } else if(faceIndex == 1) {\
  156. sampleDirection = normalize(vec3(uv.x, 1.0, uv.y));\
  157. } else if(faceIndex == 2) {\
  158. sampleDirection = normalize(vec3(uv.x, uv.y, 1.0));\
  159. } else if(faceIndex == 3) {\
  160. sampleDirection = normalize(vec3(-1.0, uv.y, uv.x));\
  161. } else if(faceIndex == 4) {\
  162. sampleDirection = normalize(vec3(uv.x, -1.0, -uv.y));\
  163. } else {\
  164. sampleDirection = normalize(vec3(-uv.x, uv.y, -1.0));\
  165. }\
  166. vec4 color = envMapTexelToLinear( textureCube( envMap, sampleDirection ) );\
  167. gl_FragColor = linearToOutputTexel( color );\
  168. }",
  169. blending: THREE.NoBlending
  170. } );
  171. shaderMaterial.type = 'PMREMCubeUVPacker';
  172. return shaderMaterial;
  173. }
  174. return PMREMCubeUVPacker;
  175. } )();