WebGPUTextures.js 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995
  1. import { GPUTextureFormat, GPUAddressMode, GPUFilterMode, GPUTextureDimension } from './constants.js';
  2. import { VideoTexture, CubeTexture, Texture, NearestFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter, LinearFilter, RepeatWrapping, MirroredRepeatWrapping, RGB_ETC2_Format, RGBA_ETC2_EAC_Format,
  3. RGBAFormat, RedFormat, RGFormat, RGBA_S3TC_DXT1_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT5_Format, UnsignedByteType, FloatType, HalfFloatType, SRGBColorSpace, DepthFormat, DepthTexture,
  4. RGBA_ASTC_4x4_Format, RGBA_ASTC_5x4_Format, RGBA_ASTC_5x5_Format, RGBA_ASTC_6x5_Format, RGBA_ASTC_6x6_Format, RGBA_ASTC_8x5_Format, RGBA_ASTC_8x6_Format, RGBA_ASTC_8x8_Format, RGBA_ASTC_10x5_Format,
  5. RGBA_ASTC_10x6_Format, RGBA_ASTC_10x8_Format, RGBA_ASTC_10x10_Format, RGBA_ASTC_12x10_Format, RGBA_ASTC_12x12_Format
  6. } from 'three';
  7. import WebGPUTextureUtils from './WebGPUTextureUtils.js';
  8. class WebGPUTextures {
  9. constructor( device, properties, info ) {
  10. this.device = device;
  11. this.properties = properties;
  12. this.info = info;
  13. this.defaultTexture = null;
  14. this.depthDefaultTexture = null;
  15. this.defaultVideoTexture = null;
  16. this.defaultCubeTexture = null;
  17. this.defaultSampler = null;
  18. this.samplerCache = new Map();
  19. this.utils = null;
  20. }
  21. getDefaultSampler() {
  22. if ( this.defaultSampler === null ) {
  23. this.defaultSampler = this.device.createSampler( {} );
  24. }
  25. return this.defaultSampler;
  26. }
  27. getDepthDefaultTexture() {
  28. if ( this.depthDefaultTexture === null ) {
  29. const depthTexture = new DepthTexture();
  30. depthTexture.minFilter = NearestFilter;
  31. depthTexture.magFilter = NearestFilter;
  32. depthTexture.image.width = 1;
  33. depthTexture.image.height = 1;
  34. this._uploadTexture( depthTexture );
  35. this.depthDefaultTexture = this.getTextureGPU( depthTexture );
  36. }
  37. return this.depthDefaultTexture;
  38. }
  39. getDefaultTexture() {
  40. if ( this.defaultTexture === null ) {
  41. const texture = new Texture();
  42. texture.minFilter = NearestFilter;
  43. texture.magFilter = NearestFilter;
  44. this._uploadTexture( texture );
  45. this.defaultTexture = this.getTextureGPU( texture );
  46. }
  47. return this.defaultTexture;
  48. }
  49. getVideoDefaultTexture() {
  50. if ( this.defaultVideoTexture === null ) {
  51. const video = document.getElementById( 'video' );
  52. const texture = new VideoTexture( video );
  53. texture.minFilter = NearestFilter;
  54. texture.magFilter = NearestFilter;
  55. this._uploadVideoTexture( texture );
  56. this.defaultVideoTexture = this.getTextureGPU( texture );
  57. }
  58. return this.defaultVideoTexture;
  59. }
  60. getDefaultCubeTexture() {
  61. if ( this.defaultCubeTexture === null ) {
  62. const texture = new CubeTexture();
  63. texture.minFilter = NearestFilter;
  64. texture.magFilter = NearestFilter;
  65. this._uploadTexture( texture );
  66. this.defaultCubeTexture = this.getTextureGPU( texture );
  67. }
  68. return this.defaultCubeTexture;
  69. }
  70. getTextureGPU( texture ) {
  71. const textureProperties = this.properties.get( texture );
  72. return textureProperties.textureGPU;
  73. }
  74. getSampler( texture ) {
  75. const textureProperties = this.properties.get( texture );
  76. return textureProperties.samplerGPU;
  77. }
  78. updateTexture( texture ) {
  79. let needsUpdate = false;
  80. const textureProperties = this.properties.get( texture );
  81. if ( texture.version > 0 && textureProperties.version !== texture.version ) {
  82. const image = texture.image;
  83. if ( image === undefined ) {
  84. console.warn( 'THREE.WebGPURenderer: Texture marked for update but image is undefined.' );
  85. } else if ( image.complete === false ) {
  86. console.warn( 'THREE.WebGPURenderer: Texture marked for update but image is incomplete.' );
  87. } else {
  88. // texture init
  89. if ( textureProperties.initialized === undefined ) {
  90. textureProperties.initialized = true;
  91. const disposeCallback = onTextureDispose.bind( this );
  92. textureProperties.disposeCallback = disposeCallback;
  93. texture.addEventListener( 'dispose', disposeCallback );
  94. this.info.memory.textures ++;
  95. }
  96. //
  97. if ( texture.isVideoTexture ) {
  98. needsUpdate = this._uploadVideoTexture( texture );
  99. } else {
  100. needsUpdate = this._uploadTexture( texture );
  101. }
  102. }
  103. }
  104. // if the texture is used for RTT, it's necessary to init it once so the binding
  105. // group's resource definition points to the respective GPUTexture
  106. if ( textureProperties.initializedRTT === false ) {
  107. textureProperties.initializedRTT = true;
  108. needsUpdate = true;
  109. }
  110. return needsUpdate;
  111. }
  112. updateSampler( texture ) {
  113. const array = [];
  114. array.push( texture.wrapS );
  115. array.push( texture.wrapT );
  116. array.push( texture.wrapR );
  117. array.push( texture.magFilter );
  118. array.push( texture.minFilter );
  119. array.push( texture.anisotropy );
  120. const key = array.join();
  121. let samplerGPU = this.samplerCache.get( key );
  122. if ( samplerGPU === undefined ) {
  123. samplerGPU = this.device.createSampler( {
  124. addressModeU: this._convertAddressMode( texture.wrapS ),
  125. addressModeV: this._convertAddressMode( texture.wrapT ),
  126. addressModeW: this._convertAddressMode( texture.wrapR ),
  127. magFilter: this._convertFilterMode( texture.magFilter ),
  128. minFilter: this._convertFilterMode( texture.minFilter ),
  129. mipmapFilter: this._convertFilterMode( texture.minFilter ),
  130. maxAnisotropy: texture.anisotropy
  131. } );
  132. this.samplerCache.set( key, samplerGPU );
  133. }
  134. const textureProperties = this.properties.get( texture );
  135. textureProperties.samplerGPU = samplerGPU;
  136. }
  137. initRenderTarget( renderTarget ) {
  138. const properties = this.properties;
  139. const renderTargetProperties = properties.get( renderTarget );
  140. if ( renderTargetProperties.initialized === undefined ) {
  141. const device = this.device;
  142. const width = renderTarget.width;
  143. const height = renderTarget.height;
  144. const colorTextureFormat = this._getFormat( renderTarget.texture );
  145. const label = renderTarget.texture.name ? '_' + renderTarget.texture.name : '';
  146. const colorTextureGPU = device.createTexture( {
  147. label: 'renderTarget' + label,
  148. size: {
  149. width: width,
  150. height: height,
  151. depthOrArrayLayers: 1
  152. },
  153. format: colorTextureFormat,
  154. usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
  155. } );
  156. this.info.memory.textures ++;
  157. renderTargetProperties.colorTextureGPU = colorTextureGPU;
  158. renderTargetProperties.colorTextureFormat = colorTextureFormat;
  159. // When the ".texture" or ".depthTexture" property of a render target is used as a map,
  160. // the renderer has to find the respective GPUTexture objects to setup the bind groups.
  161. // Since it's not possible to see just from a texture object whether it belongs to a render
  162. // target or not, we need the initializedRTT flag.
  163. const textureProperties = properties.get( renderTarget.texture );
  164. textureProperties.textureGPU = colorTextureGPU;
  165. textureProperties.initializedRTT = false;
  166. if ( renderTarget.depthBuffer === true ) {
  167. const depthTextureFormat = renderTarget.depthTexture !== null ? this._getFormat( renderTarget.depthTexture ) : GPUTextureFormat.Depth24PlusStencil8;
  168. const depthTextureGPU = device.createTexture( {
  169. label: 'renderTarget' + label + '_depthBuffer',
  170. size: {
  171. width: width,
  172. height: height,
  173. depthOrArrayLayers: 1
  174. },
  175. format: depthTextureFormat,
  176. usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
  177. } );
  178. this.info.memory.textures ++;
  179. renderTargetProperties.depthTextureGPU = depthTextureGPU;
  180. renderTargetProperties.depthTextureFormat = depthTextureFormat;
  181. if ( renderTarget.depthTexture !== null ) {
  182. const depthTextureProperties = properties.get( renderTarget.depthTexture );
  183. depthTextureProperties.textureGPU = depthTextureGPU;
  184. depthTextureProperties.initializedRTT = false;
  185. }
  186. }
  187. //
  188. const disposeCallback = onRenderTargetDispose.bind( this );
  189. renderTargetProperties.disposeCallback = disposeCallback;
  190. renderTarget.addEventListener( 'dispose', disposeCallback );
  191. //
  192. renderTargetProperties.initialized = true;
  193. }
  194. }
  195. dispose() {
  196. this.samplerCache.clear();
  197. }
  198. _convertAddressMode( value ) {
  199. let addressMode = GPUAddressMode.ClampToEdge;
  200. if ( value === RepeatWrapping ) {
  201. addressMode = GPUAddressMode.Repeat;
  202. } else if ( value === MirroredRepeatWrapping ) {
  203. addressMode = GPUAddressMode.MirrorRepeat;
  204. }
  205. return addressMode;
  206. }
  207. _convertFilterMode( value ) {
  208. let filterMode = GPUFilterMode.Linear;
  209. if ( value === NearestFilter || value === NearestMipmapNearestFilter || value === NearestMipmapLinearFilter ) {
  210. filterMode = GPUFilterMode.Nearest;
  211. }
  212. return filterMode;
  213. }
  214. _uploadVideoTexture( texture ) {
  215. const device = this.device;
  216. const textureProperties = this.properties.get( texture );
  217. const textureGPU = device.importExternalTexture( {
  218. source: texture.source.data
  219. } );
  220. textureProperties.textureGPU = textureGPU;
  221. //textureProperties.version = texture.version; // @TODO: Force update for now, study a better solution soon using native VideoTexture.update() to fix warns
  222. return true;
  223. }
  224. _uploadTexture( texture ) {
  225. let needsUpdate = false;
  226. const device = this.device;
  227. const image = texture.image;
  228. const textureProperties = this.properties.get( texture );
  229. const { width, height, depth } = this._getSize( texture );
  230. const needsMipmaps = this._needsMipmaps( texture );
  231. const dimension = this._getDimension( texture );
  232. const mipLevelCount = this._getMipLevelCount( texture, width, height, needsMipmaps );
  233. const format = this._getFormat( texture );
  234. let usage = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST;
  235. if ( needsMipmaps ) {
  236. // current mipmap generation requires RENDER_ATTACHMENT
  237. usage |= GPUTextureUsage.RENDER_ATTACHMENT;
  238. }
  239. const textureGPUDescriptor = {
  240. label: texture.name,
  241. size: {
  242. width: width,
  243. height: height,
  244. depthOrArrayLayers: depth,
  245. },
  246. mipLevelCount: mipLevelCount,
  247. sampleCount: 1,
  248. dimension: dimension,
  249. format: format,
  250. usage: usage
  251. };
  252. // texture creation
  253. let textureGPU = textureProperties.textureGPU;
  254. if ( textureGPU === undefined ) {
  255. textureGPU = device.createTexture( textureGPUDescriptor );
  256. needsUpdate = true;
  257. }
  258. // transfer texture data
  259. if ( texture.isDataTexture || texture.isDataArrayTexture || texture.isData3DTexture ) {
  260. this._copyBufferToTexture( image, textureGPU, textureGPUDescriptor, needsMipmaps );
  261. } else if ( texture.isCompressedTexture ) {
  262. this._copyCompressedBufferToTexture( texture.mipmaps, textureGPU, textureGPUDescriptor );
  263. } else if ( texture.isCubeTexture ) {
  264. if ( image.length === 6 ) {
  265. this._copyCubeMapToTexture( image, texture, textureGPU, textureGPUDescriptor, needsMipmaps );
  266. }
  267. } else if ( texture.isDepthTexture !== true && image !== null ) {
  268. this._copyImageToTexture( image, texture, textureGPU, textureGPUDescriptor, needsMipmaps );
  269. }
  270. //
  271. textureProperties.textureGPU = textureGPU;
  272. textureProperties.version = texture.version;
  273. return needsUpdate;
  274. }
  275. _copyBufferToTexture( image, textureGPU, textureGPUDescriptor, needsMipmaps, originDepth = 0 ) {
  276. // @TODO: Consider to use GPUCommandEncoder.copyBufferToTexture()
  277. // @TODO: Consider to support valid buffer layouts with other formats like RGB
  278. const data = image.data;
  279. const bytesPerTexel = this._getBytesPerTexel( textureGPUDescriptor.format );
  280. const bytesPerRow = image.width * bytesPerTexel;
  281. this.device.queue.writeTexture(
  282. {
  283. texture: textureGPU,
  284. mipLevel: 0,
  285. origin: { x: 0, y: 0, z: originDepth }
  286. },
  287. data,
  288. {
  289. offset: 0,
  290. bytesPerRow
  291. },
  292. {
  293. width: image.width,
  294. height: image.height,
  295. depthOrArrayLayers: ( image.depth !== undefined ) ? image.depth : 1
  296. } );
  297. if ( needsMipmaps === true ) this._generateMipmaps( textureGPU, textureGPUDescriptor, originDepth );
  298. }
  299. _copyCubeMapToTexture( images, texture, textureGPU, textureGPUDescriptor, needsMipmaps ) {
  300. for ( let i = 0; i < 6; i ++ ) {
  301. const image = images[ i ];
  302. if ( image.isDataTexture ) {
  303. this._copyBufferToTexture( image.image, textureGPU, textureGPUDescriptor, needsMipmaps, i );
  304. } else {
  305. this._copyImageToTexture( image, texture, textureGPU, textureGPUDescriptor, needsMipmaps, i );
  306. }
  307. }
  308. }
  309. _copyExternalImageToTexture( image, textureGPU, textureGPUDescriptor, needsMipmaps, originDepth = 0 ) {
  310. this.device.queue.copyExternalImageToTexture(
  311. {
  312. source: image
  313. }, {
  314. texture: textureGPU,
  315. mipLevel: 0,
  316. origin: { x: 0, y: 0, z: originDepth }
  317. }, {
  318. width: image.width,
  319. height: image.height,
  320. depthOrArrayLayers: 1
  321. }
  322. );
  323. if ( needsMipmaps ) this._generateMipmaps( textureGPU, textureGPUDescriptor, originDepth );
  324. }
  325. _copyCompressedBufferToTexture( mipmaps, textureGPU, textureGPUDescriptor ) {
  326. // @TODO: Consider to use GPUCommandEncoder.copyBufferToTexture()
  327. const blockData = this._getBlockData( textureGPUDescriptor.format );
  328. for ( let i = 0; i < mipmaps.length; i ++ ) {
  329. const mipmap = mipmaps[ i ];
  330. const width = mipmap.width;
  331. const height = mipmap.height;
  332. const bytesPerRow = Math.ceil( width / blockData.width ) * blockData.byteLength;
  333. this.device.queue.writeTexture(
  334. {
  335. texture: textureGPU,
  336. mipLevel: i
  337. },
  338. mipmap.data,
  339. {
  340. offset: 0,
  341. bytesPerRow
  342. },
  343. {
  344. width: Math.ceil( width / blockData.width ) * blockData.width,
  345. height: Math.ceil( height / blockData.width ) * blockData.width,
  346. depthOrArrayLayers: 1
  347. } );
  348. }
  349. }
  350. _generateMipmaps( textureGPU, textureGPUDescriptor, baseArrayLayer ) {
  351. if ( this.utils === null ) {
  352. this.utils = new WebGPUTextureUtils( this.device ); // only create this helper if necessary
  353. }
  354. this.utils.generateMipmaps( textureGPU, textureGPUDescriptor, baseArrayLayer );
  355. }
  356. _getBlockData( format ) {
  357. // this method is only relevant for compressed texture formats
  358. if ( format === GPUTextureFormat.BC1RGBAUnorm || format === GPUTextureFormat.BC1RGBAUnormSRGB ) return { byteLength: 8, width: 4, height: 4 }; // DXT1
  359. if ( format === GPUTextureFormat.BC2RGBAUnorm || format === GPUTextureFormat.BC2RGBAUnormSRGB ) return { byteLength: 16, width: 4, height: 4 }; // DXT3
  360. if ( format === GPUTextureFormat.BC3RGBAUnorm || format === GPUTextureFormat.BC3RGBAUnormSRGB ) return { byteLength: 16, width: 4, height: 4 }; // DXT5
  361. if ( format === GPUTextureFormat.BC4RUnorm || format === GPUTextureFormat.BC4RSNorm ) return { byteLength: 8, width: 4, height: 4 }; // RGTC1
  362. if ( format === GPUTextureFormat.BC5RGUnorm || format === GPUTextureFormat.BC5RGSnorm ) return { byteLength: 16, width: 4, height: 4 }; // RGTC2
  363. if ( format === GPUTextureFormat.BC6HRGBUFloat || format === GPUTextureFormat.BC6HRGBFloat ) return { byteLength: 16, width: 4, height: 4 }; // BPTC (float)
  364. if ( format === GPUTextureFormat.BC7RGBAUnorm || format === GPUTextureFormat.BC7RGBAUnormSRGB ) return { byteLength: 16, width: 4, height: 4 }; // BPTC (unorm)
  365. if ( format === GPUTextureFormat.ETC2RGB8Unorm || format === GPUTextureFormat.ETC2RGB8UnormSRGB ) return { byteLength: 8, width: 4, height: 4 };
  366. if ( format === GPUTextureFormat.ETC2RGB8A1Unorm || format === GPUTextureFormat.ETC2RGB8A1UnormSRGB ) return { byteLength: 8, width: 4, height: 4 };
  367. if ( format === GPUTextureFormat.ETC2RGBA8Unorm || format === GPUTextureFormat.ETC2RGBA8UnormSRGB ) return { byteLength: 16, width: 4, height: 4 };
  368. if ( format === GPUTextureFormat.EACR11Unorm ) return { byteLength: 8, width: 4, height: 4 };
  369. if ( format === GPUTextureFormat.EACR11Snorm ) return { byteLength: 8, width: 4, height: 4 };
  370. if ( format === GPUTextureFormat.EACRG11Unorm ) return { byteLength: 16, width: 4, height: 4 };
  371. if ( format === GPUTextureFormat.EACRG11Snorm ) return { byteLength: 16, width: 4, height: 4 };
  372. if ( format === GPUTextureFormat.ASTC4x4Unorm || format === GPUTextureFormat.ASTC4x4UnormSRGB ) return { byteLength: 16, width: 4, height: 4 };
  373. if ( format === GPUTextureFormat.ASTC5x4Unorm || format === GPUTextureFormat.ASTC5x4UnormSRGB ) return { byteLength: 16, width: 5, height: 4 };
  374. if ( format === GPUTextureFormat.ASTC5x5Unorm || format === GPUTextureFormat.ASTC5x5UnormSRGB ) return { byteLength: 16, width: 5, height: 5 };
  375. if ( format === GPUTextureFormat.ASTC6x5Unorm || format === GPUTextureFormat.ASTC6x5UnormSRGB ) return { byteLength: 16, width: 6, height: 5 };
  376. if ( format === GPUTextureFormat.ASTC6x6Unorm || format === GPUTextureFormat.ASTC6x6UnormSRGB ) return { byteLength: 16, width: 6, height: 6 };
  377. if ( format === GPUTextureFormat.ASTC8x5Unorm || format === GPUTextureFormat.ASTC8x5UnormSRGB ) return { byteLength: 16, width: 8, height: 5 };
  378. if ( format === GPUTextureFormat.ASTC8x6Unorm || format === GPUTextureFormat.ASTC8x6UnormSRGB ) return { byteLength: 16, width: 8, height: 6 };
  379. if ( format === GPUTextureFormat.ASTC8x8Unorm || format === GPUTextureFormat.ASTC8x8UnormSRGB ) return { byteLength: 16, width: 8, height: 8 };
  380. if ( format === GPUTextureFormat.ASTC10x5Unorm || format === GPUTextureFormat.ASTC10x5UnormSRGB ) return { byteLength: 16, width: 10, height: 5 };
  381. if ( format === GPUTextureFormat.ASTC10x6Unorm || format === GPUTextureFormat.ASTC10x6UnormSRGB ) return { byteLength: 16, width: 10, height: 6 };
  382. if ( format === GPUTextureFormat.ASTC10x8Unorm || format === GPUTextureFormat.ASTC10x8UnormSRGB ) return { byteLength: 16, width: 10, height: 8 };
  383. if ( format === GPUTextureFormat.ASTC10x10Unorm || format === GPUTextureFormat.ASTC10x10UnormSRGB ) return { byteLength: 16, width: 10, height: 10 };
  384. if ( format === GPUTextureFormat.ASTC12x10Unorm || format === GPUTextureFormat.ASTC12x10UnormSRGB ) return { byteLength: 16, width: 12, height: 10 };
  385. if ( format === GPUTextureFormat.ASTC12x12Unorm || format === GPUTextureFormat.ASTC12x12UnormSRGB ) return { byteLength: 16, width: 12, height: 12 };
  386. }
  387. _getBytesPerTexel( format ) {
  388. if ( format === GPUTextureFormat.R8Unorm ) return 1;
  389. if ( format === GPUTextureFormat.R16Float ) return 2;
  390. if ( format === GPUTextureFormat.RG8Unorm ) return 2;
  391. if ( format === GPUTextureFormat.RG16Float ) return 4;
  392. if ( format === GPUTextureFormat.R32Float ) return 4;
  393. if ( format === GPUTextureFormat.RGBA8Unorm || format === GPUTextureFormat.RGBA8UnormSRGB ) return 4;
  394. if ( format === GPUTextureFormat.RG32Float ) return 8;
  395. if ( format === GPUTextureFormat.RGBA16Float ) return 8;
  396. if ( format === GPUTextureFormat.RGBA32Float ) return 16;
  397. }
  398. _getDimension( texture ) {
  399. let dimension;
  400. if ( texture.isData3DTexture ) {
  401. dimension = GPUTextureDimension.ThreeD;
  402. } else {
  403. dimension = GPUTextureDimension.TwoD;
  404. }
  405. return dimension;
  406. }
  407. _getFormat( texture ) {
  408. const format = texture.format;
  409. const type = texture.type;
  410. const colorSpace = texture.colorSpace;
  411. let formatGPU;
  412. if ( texture.isCompressedTexture === true ) {
  413. switch ( format ) {
  414. case RGBA_S3TC_DXT1_Format:
  415. formatGPU = ( colorSpace === SRGBColorSpace ) ? GPUTextureFormat.BC1RGBAUnormSRGB : GPUTextureFormat.BC1RGBAUnorm;
  416. break;
  417. case RGBA_S3TC_DXT3_Format:
  418. formatGPU = ( colorSpace === SRGBColorSpace ) ? GPUTextureFormat.BC2RGBAUnormSRGB : GPUTextureFormat.BC2RGBAUnorm;
  419. break;
  420. case RGBA_S3TC_DXT5_Format:
  421. formatGPU = ( colorSpace === SRGBColorSpace ) ? GPUTextureFormat.BC3RGBAUnormSRGB : GPUTextureFormat.BC3RGBAUnorm;
  422. break;
  423. case RGB_ETC2_Format:
  424. formatGPU = ( colorSpace === SRGBColorSpace ) ? GPUTextureFormat.ETC2RGB8UnormSRGB : GPUTextureFormat.ETC2RGB8Unorm;
  425. break;
  426. case RGBA_ETC2_EAC_Format:
  427. formatGPU = ( colorSpace === SRGBColorSpace ) ? GPUTextureFormat.ETC2RGBA8UnormSRGB : GPUTextureFormat.ETC2RGBA8Unorm;
  428. break;
  429. case RGBA_ASTC_4x4_Format:
  430. formatGPU = ( colorSpace === SRGBColorSpace ) ? GPUTextureFormat.ASTC4x4UnormSRGB : GPUTextureFormat.ASTC4x4Unorm;
  431. break;
  432. case RGBA_ASTC_5x4_Format:
  433. formatGPU = ( colorSpace === SRGBColorSpace ) ? GPUTextureFormat.ASTC5x4UnormSRGB : GPUTextureFormat.ASTC5x4Unorm;
  434. break;
  435. case RGBA_ASTC_5x5_Format:
  436. formatGPU = ( colorSpace === SRGBColorSpace ) ? GPUTextureFormat.ASTC5x5UnormSRGB : GPUTextureFormat.ASTC5x5Unorm;
  437. break;
  438. case RGBA_ASTC_6x5_Format:
  439. formatGPU = ( colorSpace === SRGBColorSpace ) ? GPUTextureFormat.ASTC6x5UnormSRGB : GPUTextureFormat.ASTC6x5Unorm;
  440. break;
  441. case RGBA_ASTC_6x6_Format:
  442. formatGPU = ( colorSpace === SRGBColorSpace ) ? GPUTextureFormat.ASTC6x6UnormSRGB : GPUTextureFormat.ASTC6x6Unorm;
  443. break;
  444. case RGBA_ASTC_8x5_Format:
  445. formatGPU = ( colorSpace === SRGBColorSpace ) ? GPUTextureFormat.ASTC8x5UnormSRGB : GPUTextureFormat.ASTC8x5Unorm;
  446. break;
  447. case RGBA_ASTC_8x6_Format:
  448. formatGPU = ( colorSpace === SRGBColorSpace ) ? GPUTextureFormat.ASTC8x6UnormSRGB : GPUTextureFormat.ASTC8x6Unorm;
  449. break;
  450. case RGBA_ASTC_8x8_Format:
  451. formatGPU = ( colorSpace === SRGBColorSpace ) ? GPUTextureFormat.ASTC8x8UnormSRGB : GPUTextureFormat.ASTC8x8Unorm;
  452. break;
  453. case RGBA_ASTC_10x5_Format:
  454. formatGPU = ( colorSpace === SRGBColorSpace ) ? GPUTextureFormat.ASTC10x5UnormSRGB : GPUTextureFormat.ASTC10x5Unorm;
  455. break;
  456. case RGBA_ASTC_10x6_Format:
  457. formatGPU = ( colorSpace === SRGBColorSpace ) ? GPUTextureFormat.ASTC10x6UnormSRGB : GPUTextureFormat.ASTC10x6Unorm;
  458. break;
  459. case RGBA_ASTC_10x8_Format:
  460. formatGPU = ( colorSpace === SRGBColorSpace ) ? GPUTextureFormat.ASTC10x8UnormSRGB : GPUTextureFormat.ASTC10x8Unorm;
  461. break;
  462. case RGBA_ASTC_10x10_Format:
  463. formatGPU = ( colorSpace === SRGBColorSpace ) ? GPUTextureFormat.ASTC10x10UnormSRGB : GPUTextureFormat.ASTC10x10Unorm;
  464. break;
  465. case RGBA_ASTC_12x10_Format:
  466. formatGPU = ( colorSpace === SRGBColorSpace ) ? GPUTextureFormat.ASTC12x10UnormSRGB : GPUTextureFormat.ASTC12x10Unorm;
  467. break;
  468. case RGBA_ASTC_12x12_Format:
  469. formatGPU = ( colorSpace === SRGBColorSpace ) ? GPUTextureFormat.ASTC12x12UnormSRGB : GPUTextureFormat.ASTC12x12Unorm;
  470. break;
  471. default:
  472. console.error( 'WebGPURenderer: Unsupported texture format.', format );
  473. }
  474. } else {
  475. switch ( format ) {
  476. case RGBAFormat:
  477. switch ( type ) {
  478. case UnsignedByteType:
  479. formatGPU = ( colorSpace === SRGBColorSpace ) ? GPUTextureFormat.RGBA8UnormSRGB : GPUTextureFormat.RGBA8Unorm;
  480. break;
  481. case HalfFloatType:
  482. formatGPU = GPUTextureFormat.RGBA16Float;
  483. break;
  484. case FloatType:
  485. formatGPU = GPUTextureFormat.RGBA32Float;
  486. break;
  487. default:
  488. console.error( 'WebGPURenderer: Unsupported texture type with RGBAFormat.', type );
  489. }
  490. break;
  491. case RedFormat:
  492. switch ( type ) {
  493. case UnsignedByteType:
  494. formatGPU = GPUTextureFormat.R8Unorm;
  495. break;
  496. case HalfFloatType:
  497. formatGPU = GPUTextureFormat.R16Float;
  498. break;
  499. case FloatType:
  500. formatGPU = GPUTextureFormat.R32Float;
  501. break;
  502. default:
  503. console.error( 'WebGPURenderer: Unsupported texture type with RedFormat.', type );
  504. }
  505. break;
  506. case RGFormat:
  507. switch ( type ) {
  508. case UnsignedByteType:
  509. formatGPU = GPUTextureFormat.RG8Unorm;
  510. break;
  511. case HalfFloatType:
  512. formatGPU = GPUTextureFormat.RG16Float;
  513. break;
  514. case FloatType:
  515. formatGPU = GPUTextureFormat.RG32Float;
  516. break;
  517. default:
  518. console.error( 'WebGPURenderer: Unsupported texture type with RGFormat.', type );
  519. }
  520. break;
  521. case DepthFormat:
  522. formatGPU = GPUTextureFormat.Depth32Float;
  523. break;
  524. default:
  525. console.error( 'WebGPURenderer: Unsupported texture format.', format );
  526. }
  527. }
  528. return formatGPU;
  529. }
  530. _isHTMLImage( image ) {
  531. return ( typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement ) || ( typeof HTMLCanvasElement !== 'undefined' && image instanceof HTMLCanvasElement );
  532. }
  533. _copyImageToTexture( image, texture, textureGPU, textureGPUDescriptor, needsMipmaps, originDepth ) {
  534. if ( this._isHTMLImage( image ) ) {
  535. this._getImageBitmapFromHTML( image, texture ).then( imageBitmap => {
  536. this._copyExternalImageToTexture( imageBitmap, textureGPU, textureGPUDescriptor, needsMipmaps, originDepth );
  537. } );
  538. } else {
  539. // assume ImageBitmap
  540. this._copyExternalImageToTexture( image, textureGPU, textureGPUDescriptor, needsMipmaps, originDepth );
  541. }
  542. }
  543. _getImageBitmapFromHTML( image, texture ) {
  544. const width = image.width;
  545. const height = image.height;
  546. const options = {};
  547. options.imageOrientation = ( texture.flipY === true ) ? 'flipY' : 'none';
  548. options.premultiplyAlpha = ( texture.premultiplyAlpha === true ) ? 'premultiply' : 'default';
  549. return createImageBitmap( image, 0, 0, width, height, options );
  550. }
  551. _getImageBitmap( image, texture ) {
  552. const width = image.width;
  553. const height = image.height;
  554. if ( ( typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement ) ||
  555. ( typeof HTMLCanvasElement !== 'undefined' && image instanceof HTMLCanvasElement ) ) {
  556. const options = {};
  557. options.imageOrientation = ( texture.flipY === true ) ? 'flipY' : 'none';
  558. options.premultiplyAlpha = ( texture.premultiplyAlpha === true ) ? 'premultiply' : 'default';
  559. return createImageBitmap( image, 0, 0, width, height, options );
  560. } else {
  561. // assume ImageBitmap
  562. return Promise.resolve( image );
  563. }
  564. }
  565. _getMipLevelCount( texture, width, height, needsMipmaps ) {
  566. let mipLevelCount;
  567. if ( texture.isCompressedTexture ) {
  568. mipLevelCount = texture.mipmaps.length;
  569. } else if ( needsMipmaps ) {
  570. mipLevelCount = Math.floor( Math.log2( Math.max( width, height ) ) ) + 1;
  571. } else {
  572. mipLevelCount = 1; // a texture without mipmaps has a base mip (mipLevel 0)
  573. }
  574. return mipLevelCount;
  575. }
  576. _getSize( texture ) {
  577. const image = texture.image;
  578. let width, height, depth;
  579. if ( texture.isCubeTexture ) {
  580. const faceImage = image.length > 0 ? image[ 0 ].image || image[ 0 ] : null;
  581. width = faceImage ? faceImage.width : 1;
  582. height = faceImage ? faceImage.height : 1;
  583. depth = 6; // one image for each side of the cube map
  584. } else if ( image !== null ) {
  585. width = image.width;
  586. height = image.height;
  587. depth = ( image.depth !== undefined ) ? image.depth : 1;
  588. } else {
  589. width = height = depth = 1;
  590. }
  591. return { width, height, depth };
  592. }
  593. _needsMipmaps( texture ) {
  594. return ( texture.isCompressedTexture !== true ) && ( texture.generateMipmaps === true ) && ( texture.minFilter !== NearestFilter ) && ( texture.minFilter !== LinearFilter );
  595. }
  596. }
  597. function onRenderTargetDispose( event ) {
  598. const renderTarget = event.target;
  599. const properties = this.properties;
  600. const renderTargetProperties = properties.get( renderTarget );
  601. renderTarget.removeEventListener( 'dispose', renderTargetProperties.disposeCallback );
  602. renderTargetProperties.colorTextureGPU.destroy();
  603. properties.remove( renderTarget.texture );
  604. this.info.memory.textures --;
  605. if ( renderTarget.depthBuffer === true ) {
  606. renderTargetProperties.depthTextureGPU.destroy();
  607. this.info.memory.textures --;
  608. if ( renderTarget.depthTexture !== null ) {
  609. properties.remove( renderTarget.depthTexture );
  610. }
  611. }
  612. properties.remove( renderTarget );
  613. }
  614. function onTextureDispose( event ) {
  615. const texture = event.target;
  616. const textureProperties = this.properties.get( texture );
  617. textureProperties.textureGPU.destroy();
  618. texture.removeEventListener( 'dispose', textureProperties.disposeCallback );
  619. this.properties.remove( texture );
  620. this.info.memory.textures --;
  621. }
  622. export default WebGPUTextures;