Textures.js 7.4 KB

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