PMREMCubeUVPacker.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  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( cubeTextureLods, numLods ) {
  16. this.cubeLods = cubeTextureLods;
  17. this.numLods = numLods;
  18. var size = cubeTextureLods[ 0 ].width * 4;
  19. var sourceTexture = cubeTextureLods[ 0 ].texture;
  20. var params = {
  21. format: sourceTexture.format,
  22. magFilter: sourceTexture.magFilter,
  23. minFilter: sourceTexture.minFilter,
  24. type: sourceTexture.type,
  25. generateMipmaps: sourceTexture.generateMipmaps,
  26. anisotropy: sourceTexture.anisotropy,
  27. encoding: sourceTexture.encoding
  28. };
  29. if( sourceTexture.encoding === THREE.RGBM16Encoding ) {
  30. params.magFilter = THREE.LinearFilter;
  31. params.minFilter = THREE.LinearFilter;
  32. }
  33. this.CubeUVRenderTarget = new THREE.WebGLRenderTarget( size, size, params );
  34. this.CubeUVRenderTarget.texture.name = "PMREMCubeUVPacker.cubeUv";
  35. this.CubeUVRenderTarget.texture.mapping = THREE.CubeUVReflectionMapping;
  36. this.camera = new THREE.OrthographicCamera( - size * 0.5, size * 0.5, - size * 0.5, size * 0.5, 0.0, 1000 );
  37. this.scene = new THREE.Scene();
  38. this.scene.add( this.camera );
  39. this.objects = [];
  40. var xOffset = 0;
  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 yOffset = 0;
  49. var textureResolution = size;
  50. size = cubeTextureLods[ 0 ].width;
  51. var offset2 = 0;
  52. var c = 4.0;
  53. this.numLods = Math.log( cubeTextureLods[ 0 ].width ) / Math.log( 2 ) - 2; // IE11 doesn't support Math.log2
  54. for ( var i = 0; i < this.numLods; i ++ ) {
  55. var offset1 = ( textureResolution - textureResolution / c ) * 0.5;
  56. if ( size > 16 )
  57. c *= 2;
  58. var nMips = size > 16 ? 6 : 1;
  59. var mipOffsetX = 0;
  60. var mipOffsetY = 0;
  61. var mipSize = size;
  62. for ( var j = 0; j < nMips; j ++ ) {
  63. // Mip Maps
  64. for ( var k = 0; k < 6; k ++ ) {
  65. // 6 Cube Faces
  66. var material = this.getShader();
  67. material.uniforms[ 'envMap' ].value = this.cubeLods[ i ].texture;
  68. material.envMap = this.cubeLods[ i ].texture;
  69. material.uniforms[ 'faceIndex' ].value = k;
  70. material.uniforms[ 'mapSize' ].value = mipSize;
  71. var color = material.uniforms[ 'testColor' ].value;
  72. //color.copy(testColor[j]);
  73. var planeMesh = new THREE.Mesh(
  74. new THREE.PlaneGeometry( mipSize, mipSize, 0 ),
  75. material );
  76. planeMesh.position.x = faceOffsets[ k ].x * mipSize - offset1 + mipOffsetX;
  77. planeMesh.position.y = faceOffsets[ k ].y * mipSize - offset1 + offset2 + mipOffsetY;
  78. planeMesh.material.side = THREE.DoubleSide;
  79. this.scene.add( planeMesh );
  80. this.objects.push( planeMesh );
  81. }
  82. mipOffsetY += 1.75 * mipSize;
  83. mipOffsetX += 1.25 * mipSize;
  84. mipSize /= 2;
  85. }
  86. offset2 += 2 * size;
  87. if ( size > 16 )
  88. size /= 2;
  89. }
  90. };
  91. THREE.PMREMCubeUVPacker.prototype = {
  92. constructor : THREE.PMREMCubeUVPacker,
  93. update: function( renderer ) {
  94. var gammaInput = renderer.gammaInput;
  95. var gammaOutput = renderer.gammaOutput;
  96. var toneMapping = renderer.toneMapping;
  97. var toneMappingExposure = renderer.toneMappingExposure;
  98. renderer.gammaInput = false;
  99. renderer.gammaOutput = false;
  100. renderer.toneMapping = THREE.LinearToneMapping;
  101. renderer.toneMappingExposure = 1.0;
  102. renderer.render( this.scene, this.camera, this.CubeUVRenderTarget, false );
  103. renderer.toneMapping = toneMapping;
  104. renderer.toneMappingExposure = toneMappingExposure;
  105. renderer.gammaInput = gammaInput;
  106. renderer.gammaOutput = gammaOutput;
  107. },
  108. getShader: function() {
  109. var shaderMaterial = new THREE.ShaderMaterial( {
  110. uniforms: {
  111. "faceIndex": { value: 0 },
  112. "mapSize": { value: 0 },
  113. "envMap": { value: null },
  114. "testColor": { value: new THREE.Vector3( 1, 1, 1 ) }
  115. },
  116. vertexShader:
  117. "precision highp float;\
  118. varying vec2 vUv;\
  119. void main() {\
  120. vUv = uv;\
  121. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\
  122. }",
  123. fragmentShader:
  124. "precision highp float;\
  125. varying vec2 vUv;\
  126. uniform samplerCube envMap;\
  127. uniform float mapSize;\
  128. uniform vec3 testColor;\
  129. uniform int faceIndex;\
  130. \
  131. void main() {\
  132. vec3 sampleDirection;\
  133. vec2 uv = vUv;\
  134. uv = uv * 2.0 - 1.0;\
  135. uv.y *= -1.0;\
  136. if(faceIndex == 0) {\
  137. sampleDirection = normalize(vec3(1.0, uv.y, -uv.x));\
  138. } else if(faceIndex == 1) {\
  139. sampleDirection = normalize(vec3(uv.x, 1.0, uv.y));\
  140. } else if(faceIndex == 2) {\
  141. sampleDirection = normalize(vec3(uv.x, uv.y, 1.0));\
  142. } else if(faceIndex == 3) {\
  143. sampleDirection = normalize(vec3(-1.0, uv.y, uv.x));\
  144. } else if(faceIndex == 4) {\
  145. sampleDirection = normalize(vec3(uv.x, -1.0, -uv.y));\
  146. } else {\
  147. sampleDirection = normalize(vec3(-uv.x, uv.y, -1.0));\
  148. }\
  149. vec4 color = envMapTexelToLinear( textureCube( envMap, sampleDirection ) );\
  150. gl_FragColor = linearToOutputTexel( color );\
  151. }",
  152. blending: THREE.CustomBlending,
  153. premultipliedAlpha: false,
  154. blendSrc: THREE.OneFactor,
  155. blendDst: THREE.ZeroFactor,
  156. blendSrcAlpha: THREE.OneFactor,
  157. blendDstAlpha: THREE.ZeroFactor,
  158. blendEquation: THREE.AddEquation
  159. } );
  160. return shaderMaterial;
  161. }
  162. };