RoughnessMipmapper.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. ( function () {
  2. /**
  3. * This class generates custom mipmaps for a roughness map by encoding the lost variation in the
  4. * normal map mip levels as increased roughness in the corresponding roughness mip levels. This
  5. * helps with rendering accuracy for MeshStandardMaterial, and also helps with anti-aliasing when
  6. * using PMREM. If the normal map is larger than the roughness map, the roughness map will be
  7. * enlarged to match the dimensions of the normal map.
  8. */
  9. const _mipmapMaterial = _getMipmapMaterial();
  10. const _mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), _mipmapMaterial );
  11. const _flatCamera = new THREE.OrthographicCamera( 0, 1, 0, 1, 0, 1 );
  12. let _tempTarget = null;
  13. let _renderer = null;
  14. class RoughnessMipmapper {
  15. constructor( renderer ) {
  16. _renderer = renderer;
  17. _renderer.compile( _mesh, _flatCamera );
  18. }
  19. generateMipmaps( material ) {
  20. if ( 'roughnessMap' in material === false ) return;
  21. const {
  22. roughnessMap,
  23. normalMap
  24. } = material;
  25. if ( roughnessMap === null || normalMap === null || ! roughnessMap.generateMipmaps || material.userData.roughnessUpdated ) return;
  26. material.userData.roughnessUpdated = true;
  27. let width = Math.max( roughnessMap.image.width, normalMap.image.width );
  28. let height = Math.max( roughnessMap.image.height, normalMap.image.height );
  29. if ( ! THREE.MathUtils.isPowerOfTwo( width ) || ! THREE.MathUtils.isPowerOfTwo( height ) ) return;
  30. const oldTarget = _renderer.getRenderTarget();
  31. const autoClear = _renderer.autoClear;
  32. _renderer.autoClear = false;
  33. if ( _tempTarget === null || _tempTarget.width !== width || _tempTarget.height !== height ) {
  34. if ( _tempTarget !== null ) _tempTarget.dispose();
  35. _tempTarget = new THREE.WebGLRenderTarget( width, height, {
  36. depthBuffer: false
  37. } );
  38. _tempTarget.scissorTest = true;
  39. }
  40. if ( width !== roughnessMap.image.width || height !== roughnessMap.image.height ) {
  41. const params = {
  42. wrapS: roughnessMap.wrapS,
  43. wrapT: roughnessMap.wrapT,
  44. magFilter: roughnessMap.magFilter,
  45. minFilter: roughnessMap.minFilter,
  46. depthBuffer: false
  47. };
  48. const newRoughnessTarget = new THREE.WebGLRenderTarget( width, height, params );
  49. newRoughnessTarget.texture.generateMipmaps = true; // Setting the render target causes the memory to be allocated.
  50. _renderer.setRenderTarget( newRoughnessTarget );
  51. material.roughnessMap = newRoughnessTarget.texture;
  52. if ( material.metalnessMap == roughnessMap ) material.metalnessMap = material.roughnessMap;
  53. if ( material.aoMap == roughnessMap ) material.aoMap = material.roughnessMap; // Copy UV transform parameters
  54. material.roughnessMap.offset.copy( roughnessMap.offset );
  55. material.roughnessMap.repeat.copy( roughnessMap.repeat );
  56. material.roughnessMap.center.copy( roughnessMap.center );
  57. material.roughnessMap.rotation = roughnessMap.rotation;
  58. material.roughnessMap.image = roughnessMap.image;
  59. material.roughnessMap.matrixAutoUpdate = roughnessMap.matrixAutoUpdate;
  60. material.roughnessMap.matrix.copy( roughnessMap.matrix );
  61. }
  62. _mipmapMaterial.uniforms.roughnessMap.value = roughnessMap;
  63. _mipmapMaterial.uniforms.normalMap.value = normalMap;
  64. const position = new THREE.Vector2( 0, 0 );
  65. const texelSize = _mipmapMaterial.uniforms.texelSize.value;
  66. for ( let mip = 0; width >= 1 && height >= 1; ++ mip, width /= 2, height /= 2 ) {
  67. // Rendering to a mip level is not allowed in webGL1. Instead we must set
  68. // up a secondary texture to write the result to, then copy it back to the
  69. // proper mipmap level.
  70. texelSize.set( 1.0 / width, 1.0 / height );
  71. if ( mip == 0 ) texelSize.set( 0.0, 0.0 );
  72. _tempTarget.viewport.set( position.x, position.y, width, height );
  73. _tempTarget.scissor.set( position.x, position.y, width, height );
  74. _renderer.setRenderTarget( _tempTarget );
  75. _renderer.render( _mesh, _flatCamera );
  76. _renderer.copyFramebufferToTexture( position, material.roughnessMap, mip );
  77. _mipmapMaterial.uniforms.roughnessMap.value = material.roughnessMap;
  78. }
  79. if ( roughnessMap !== material.roughnessMap ) roughnessMap.dispose();
  80. _renderer.setRenderTarget( oldTarget );
  81. _renderer.autoClear = autoClear;
  82. }
  83. dispose() {
  84. _mipmapMaterial.dispose();
  85. _mesh.geometry.dispose();
  86. if ( _tempTarget != null ) _tempTarget.dispose();
  87. }
  88. }
  89. function _getMipmapMaterial() {
  90. const shaderMaterial = new THREE.RawShaderMaterial( {
  91. uniforms: {
  92. roughnessMap: {
  93. value: null
  94. },
  95. normalMap: {
  96. value: null
  97. },
  98. texelSize: {
  99. value: new THREE.Vector2( 1, 1 )
  100. }
  101. },
  102. vertexShader:
  103. /* glsl */
  104. `
  105. precision mediump float;
  106. precision mediump int;
  107. attribute vec3 position;
  108. attribute vec2 uv;
  109. varying vec2 vUv;
  110. void main() {
  111. vUv = uv;
  112. gl_Position = vec4( position, 1.0 );
  113. }
  114. `,
  115. fragmentShader:
  116. /* glsl */
  117. `
  118. precision mediump float;
  119. precision mediump int;
  120. varying vec2 vUv;
  121. uniform sampler2D roughnessMap;
  122. uniform sampler2D normalMap;
  123. uniform vec2 texelSize;
  124. #define ENVMAP_TYPE_CUBE_UV
  125. vec4 envMapTexelToLinear( vec4 a ) { return a; }
  126. #include <cube_uv_reflection_fragment>
  127. float roughnessToVariance( float roughness ) {
  128. float variance = 0.0;
  129. if ( roughness >= r1 ) {
  130. variance = ( r0 - roughness ) * ( v1 - v0 ) / ( r0 - r1 ) + v0;
  131. } else if ( roughness >= r4 ) {
  132. variance = ( r1 - roughness ) * ( v4 - v1 ) / ( r1 - r4 ) + v1;
  133. } else if ( roughness >= r5 ) {
  134. variance = ( r4 - roughness ) * ( v5 - v4 ) / ( r4 - r5 ) + v4;
  135. } else {
  136. float roughness2 = roughness * roughness;
  137. variance = 1.79 * roughness2 * roughness2;
  138. }
  139. return variance;
  140. }
  141. float varianceToRoughness( float variance ) {
  142. float roughness = 0.0;
  143. if ( variance >= v1 ) {
  144. roughness = ( v0 - variance ) * ( r1 - r0 ) / ( v0 - v1 ) + r0;
  145. } else if ( variance >= v4 ) {
  146. roughness = ( v1 - variance ) * ( r4 - r1 ) / ( v1 - v4 ) + r1;
  147. } else if ( variance >= v5 ) {
  148. roughness = ( v4 - variance ) * ( r5 - r4 ) / ( v4 - v5 ) + r4;
  149. } else {
  150. roughness = pow( 0.559 * variance, 0.25 ); // 0.559 = 1.0 / 1.79
  151. }
  152. return roughness;
  153. }
  154. void main() {
  155. gl_FragColor = texture2D( roughnessMap, vUv, - 1.0 );
  156. if ( texelSize.x == 0.0 ) return;
  157. float roughness = gl_FragColor.g;
  158. float variance = roughnessToVariance( roughness );
  159. vec3 avgNormal;
  160. for ( float x = - 1.0; x < 2.0; x += 2.0 ) {
  161. for ( float y = - 1.0; y < 2.0; y += 2.0 ) {
  162. vec2 uv = vUv + vec2( x, y ) * 0.25 * texelSize;
  163. avgNormal += normalize( texture2D( normalMap, uv, - 1.0 ).xyz - 0.5 );
  164. }
  165. }
  166. variance += 1.0 - 0.25 * length( avgNormal );
  167. gl_FragColor.g = varianceToRoughness( variance );
  168. }
  169. `,
  170. blending: THREE.NoBlending,
  171. depthTest: false,
  172. depthWrite: false
  173. } );
  174. shaderMaterial.type = 'RoughnessMipmapper';
  175. return shaderMaterial;
  176. }
  177. THREE.RoughnessMipmapper = RoughnessMipmapper;
  178. } )();