Textures.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  1. import DataMap from './DataMap.js';
  2. import { Vector3, DepthTexture, DepthStencilFormat, UnsignedInt248Type, LinearFilter, NearestFilter, EquirectangularReflectionMapping, EquirectangularRefractionMapping, CubeReflectionMapping, CubeRefractionMapping } from 'three';
  3. const _size = new Vector3();
  4. class Textures extends DataMap {
  5. constructor( backend, info ) {
  6. super();
  7. this.backend = backend;
  8. this.info = info;
  9. }
  10. updateRenderTarget( renderTarget ) {
  11. const renderTargetData = this.get( renderTarget );
  12. const sampleCount = renderTarget.samples === 0 ? 1 : renderTarget.samples;
  13. const texture = renderTarget.texture;
  14. const size = this.getSize( texture );
  15. let depthTexture = renderTarget.depthTexture || renderTargetData.depthTexture;
  16. if ( depthTexture === undefined ) {
  17. depthTexture = new DepthTexture();
  18. depthTexture.format = DepthStencilFormat;
  19. depthTexture.type = UnsignedInt248Type;
  20. depthTexture.image.width = size.width;
  21. depthTexture.image.height = size.height;
  22. }
  23. if ( renderTargetData.width !== size.width || size.height !== renderTargetData.height ) {
  24. texture.needsUpdate = true;
  25. depthTexture.needsUpdate = true;
  26. depthTexture.image.width = size.width;
  27. depthTexture.image.height = size.height;
  28. }
  29. renderTargetData.width = size.width;
  30. renderTargetData.height = size.height;
  31. renderTargetData.texture = texture;
  32. renderTargetData.depthTexture = depthTexture;
  33. if ( renderTargetData.sampleCount !== sampleCount ) {
  34. texture.needsUpdate = true;
  35. depthTexture.needsUpdate = true;
  36. renderTargetData.sampleCount = sampleCount;
  37. }
  38. const options = { sampleCount };
  39. this.updateTexture( texture, options );
  40. this.updateTexture( depthTexture, options );
  41. // dispose handler
  42. if ( renderTargetData.initialized !== true ) {
  43. renderTargetData.initialized = true;
  44. // dispose
  45. const onDispose = () => {
  46. renderTarget.removeEventListener( 'dispose', onDispose );
  47. this._destroyTexture( texture );
  48. this._destroyTexture( depthTexture );
  49. };
  50. renderTarget.addEventListener( 'dispose', onDispose );
  51. }
  52. }
  53. updateTexture( texture, options = {} ) {
  54. const textureData = this.get( texture );
  55. if ( textureData.initialized === true && textureData.version === texture.version ) return;
  56. const isRenderTarget = texture.isRenderTargetTexture || texture.isDepthTexture || texture.isFramebufferTexture;
  57. const backend = this.backend;
  58. if ( isRenderTarget && textureData.initialized === true ) {
  59. // it's an update
  60. backend.destroySampler( texture );
  61. backend.destroyTexture( texture );
  62. }
  63. //
  64. const { width, height, depth } = this.getSize( texture );
  65. options.width = width;
  66. options.height = height;
  67. options.depth = depth;
  68. options.needsMipmaps = this.needsMipmaps( texture );
  69. options.levels = this.getMipLevels( texture, width, height, options.needsMipmaps );
  70. //
  71. if ( isRenderTarget ) {
  72. backend.createSampler( texture );
  73. backend.createTexture( texture, options );
  74. } else {
  75. const needsCreate = textureData.initialized !== true;
  76. if ( needsCreate ) backend.createSampler( texture );
  77. if ( texture.version > 0 ) {
  78. const image = texture.image;
  79. if ( image === undefined ) {
  80. console.warn( 'THREE.Renderer: Texture marked for update but image is undefined.' );
  81. } else if ( image.complete === false ) {
  82. console.warn( 'THREE.Renderer: Texture marked for update but image is incomplete.' );
  83. } else {
  84. if ( texture.images ) {
  85. const images = [];
  86. for ( const image of texture.images ) {
  87. images.push( this._getUploadImage( image ) );
  88. }
  89. options.images = images;
  90. } else {
  91. options.image = this._getUploadImage( image );
  92. }
  93. if ( textureData.isDefaultTexture === undefined || textureData.isDefaultTexture === true ) {
  94. backend.createTexture( texture, options );
  95. textureData.isDefaultTexture = false;
  96. }
  97. backend.updateTexture( texture, options );
  98. if ( options.needsMipmaps ) backend.generateMipmaps( texture );
  99. }
  100. } else {
  101. // async update
  102. backend.createDefaultTexture( texture );
  103. textureData.isDefaultTexture = true;
  104. }
  105. }
  106. // dispose handler
  107. if ( textureData.initialized !== true ) {
  108. textureData.initialized = true;
  109. //
  110. this.info.memory.textures ++;
  111. // dispose
  112. const onDispose = () => {
  113. texture.removeEventListener( 'dispose', onDispose );
  114. this._destroyTexture( texture );
  115. this.info.memory.textures --;
  116. };
  117. texture.addEventListener( 'dispose', onDispose );
  118. }
  119. //
  120. textureData.version = texture.version;
  121. }
  122. getSize( texture, target = _size ) {
  123. let image = texture.images ? texture.images[ 0 ] : texture.image;
  124. if ( image ) {
  125. if ( image.image !== undefined ) image = image.image;
  126. target.width = image.width;
  127. target.height = image.height;
  128. target.depth = texture.isCubeTexture ? 6 : ( image.depth || 1 );
  129. } else {
  130. target.width = target.height = target.depth = 1;
  131. }
  132. return target;
  133. }
  134. getMipLevels( texture, width, height, needsMipmaps ) {
  135. let mipLevelCount;
  136. if ( texture.isCompressedTexture ) {
  137. mipLevelCount = texture.mipmaps.length;
  138. } else if ( needsMipmaps ) {
  139. mipLevelCount = Math.floor( Math.log2( Math.max( width, height ) ) ) + 1;
  140. } else {
  141. mipLevelCount = 1; // a texture without mipmaps has a base mip (mipLevel 0)
  142. }
  143. return mipLevelCount;
  144. }
  145. needsMipmaps( texture ) {
  146. if ( this.isEnvironmentTexture( texture ) ) return true;
  147. return ( texture.isCompressedTexture !== true ) /*&& ( texture.generateMipmaps === true )*/ && ( texture.minFilter !== NearestFilter ) && ( texture.minFilter !== LinearFilter );
  148. }
  149. isEnvironmentTexture( texture ) {
  150. const mapping = texture.mapping;
  151. return ( mapping === EquirectangularReflectionMapping || mapping === EquirectangularRefractionMapping ) || ( mapping === CubeReflectionMapping || mapping === CubeRefractionMapping );
  152. }
  153. _getUploadImage( image ) {
  154. if ( this._isHTMLImage( image ) ) {
  155. return this._imageToCanvas( image );
  156. }
  157. return image;
  158. }
  159. _imageToCanvas( image ) {
  160. const { width, height } = image;
  161. // eslint-disable-next-line compat/compat
  162. const canvas = new OffscreenCanvas( width, height );
  163. const context = canvas.getContext( '2d' );
  164. context.drawImage( image, 0, 0, width, height );
  165. return canvas;
  166. }
  167. _isHTMLImage( image ) {
  168. return ( typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement ) || ( typeof HTMLCanvasElement !== 'undefined' && image instanceof HTMLCanvasElement );
  169. }
  170. _destroyTexture( texture ) {
  171. this.backend.destroySampler( texture );
  172. this.backend.destroyTexture( texture );
  173. this.delete( texture );
  174. }
  175. }
  176. export default Textures;