KTX2Loader.js 29 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108
  1. import {
  2. CompressedTexture,
  3. CompressedArrayTexture,
  4. CompressedCubeTexture,
  5. Data3DTexture,
  6. DataTexture,
  7. FileLoader,
  8. FloatType,
  9. HalfFloatType,
  10. NoColorSpace,
  11. LinearFilter,
  12. LinearMipmapLinearFilter,
  13. LinearSRGBColorSpace,
  14. Loader,
  15. RedFormat,
  16. RGB_BPTC_UNSIGNED_Format,
  17. RGB_ETC1_Format,
  18. RGB_ETC2_Format,
  19. RGB_PVRTC_4BPPV1_Format,
  20. RGBA_ASTC_4x4_Format,
  21. RGBA_ASTC_6x6_Format,
  22. RGBA_BPTC_Format,
  23. RGBA_ETC2_EAC_Format,
  24. RGBA_PVRTC_4BPPV1_Format,
  25. RGBA_S3TC_DXT5_Format,
  26. RGBA_S3TC_DXT1_Format,
  27. RGBAFormat,
  28. RGFormat,
  29. SRGBColorSpace,
  30. UnsignedByteType,
  31. } from 'three';
  32. import { WorkerPool } from '../utils/WorkerPool.js';
  33. import {
  34. read,
  35. KHR_DF_FLAG_ALPHA_PREMULTIPLIED,
  36. KHR_DF_TRANSFER_SRGB,
  37. KHR_SUPERCOMPRESSION_NONE,
  38. KHR_SUPERCOMPRESSION_ZSTD,
  39. VK_FORMAT_UNDEFINED,
  40. VK_FORMAT_R16_SFLOAT,
  41. VK_FORMAT_R16G16_SFLOAT,
  42. VK_FORMAT_R16G16B16A16_SFLOAT,
  43. VK_FORMAT_R32_SFLOAT,
  44. VK_FORMAT_R32G32_SFLOAT,
  45. VK_FORMAT_R32G32B32A32_SFLOAT,
  46. VK_FORMAT_R8_SRGB,
  47. VK_FORMAT_R8_UNORM,
  48. VK_FORMAT_R8G8_SRGB,
  49. VK_FORMAT_R8G8_UNORM,
  50. VK_FORMAT_R8G8B8A8_SRGB,
  51. VK_FORMAT_R8G8B8A8_UNORM,
  52. VK_FORMAT_ASTC_4x4_SFLOAT_BLOCK_EXT,
  53. VK_FORMAT_ASTC_6x6_SRGB_BLOCK,
  54. VK_FORMAT_ASTC_6x6_UNORM_BLOCK,
  55. KHR_DF_PRIMARIES_UNSPECIFIED,
  56. KHR_DF_PRIMARIES_BT709,
  57. KHR_DF_PRIMARIES_DISPLAYP3
  58. } from '../libs/ktx-parse.module.js';
  59. import { ZSTDDecoder } from '../libs/zstddec.module.js';
  60. import { DisplayP3ColorSpace, LinearDisplayP3ColorSpace } from '../math/ColorSpaces.js';
  61. const _taskCache = new WeakMap();
  62. let _activeLoaders = 0;
  63. let _zstd;
  64. /**
  65. * A loader for KTX 2.0 GPU Texture containers.
  66. *
  67. * KTX 2.0 is a container format for various GPU texture formats. The loader supports Basis Universal GPU textures,
  68. * which can be quickly transcoded to a wide variety of GPU texture compression formats. While KTX 2.0 also allows
  69. * other hardware-specific formats, this loader does not yet parse them.
  70. *
  71. * This loader parses the KTX 2.0 container and transcodes to a supported GPU compressed texture format.
  72. * The required WASM transcoder and JS wrapper are available from the `examples/jsm/libs/basis` directory.
  73. *
  74. * This loader relies on Web Assembly which is not supported in older browsers.
  75. *
  76. * References:
  77. * - [KTX specification]{@link http://github.khronos.org/KTX-Specification/}
  78. * - [DFD]{@link https://www.khronos.org/registry/DataFormat/specs/1.3/dataformat.1.3.html#basicdescriptor}
  79. * - [BasisU HDR]{@link https://github.com/BinomialLLC/basis_universal/wiki/UASTC-HDR-Texture-Specification-v1.0}
  80. *
  81. * ```js
  82. * const loader = new KTX2Loader();
  83. * loader.setTranscoderPath( 'examples/jsm/libs/basis/' );
  84. * loader.detectSupport( renderer );
  85. * const texture = loader.loadAsync( 'diffuse.ktx2' );
  86. * ```
  87. *
  88. * @augments Loader
  89. * @three_import import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
  90. */
  91. class KTX2Loader extends Loader {
  92. /**
  93. * Constructs a new KTX2 loader.
  94. *
  95. * @param {LoadingManager} [manager] - The loading manager.
  96. */
  97. constructor( manager ) {
  98. super( manager );
  99. this.transcoderPath = '';
  100. this.transcoderBinary = null;
  101. this.transcoderPending = null;
  102. this.workerPool = new WorkerPool();
  103. this.workerSourceURL = '';
  104. this.workerConfig = null;
  105. if ( typeof MSC_TRANSCODER !== 'undefined' ) {
  106. console.warn(
  107. 'THREE.KTX2Loader: Please update to latest "basis_transcoder".'
  108. + ' "msc_basis_transcoder" is no longer supported in three.js r125+.'
  109. );
  110. }
  111. }
  112. /**
  113. * Sets the transcoder path.
  114. *
  115. * The WASM transcoder and JS wrapper are available from the `examples/jsm/libs/basis` directory.
  116. *
  117. * @param {string} path - The transcoder path to set.
  118. * @return {KTX2Loader} A reference to this loader.
  119. */
  120. setTranscoderPath( path ) {
  121. this.transcoderPath = path;
  122. return this;
  123. }
  124. /**
  125. * Sets the maximum number of Web Workers to be allocated by this instance.
  126. *
  127. * @param {number} workerLimit - The worker limit.
  128. * @return {KTX2Loader} A reference to this loader.
  129. */
  130. setWorkerLimit( workerLimit ) {
  131. this.workerPool.setWorkerLimit( workerLimit );
  132. return this;
  133. }
  134. /**
  135. * Async version of {@link KTX2Loader#detectSupport}.
  136. *
  137. * @async
  138. * @param {WebGPURenderer|WebGLRenderer} renderer - The renderer.
  139. * @return {Promise} A Promise that resolves when the support has been detected.
  140. */
  141. async detectSupportAsync( renderer ) {
  142. this.workerConfig = {
  143. astcSupported: await renderer.hasFeatureAsync( 'texture-compression-astc' ),
  144. astcHDRSupported: false, // https://github.com/gpuweb/gpuweb/issues/3856
  145. etc1Supported: await renderer.hasFeatureAsync( 'texture-compression-etc1' ),
  146. etc2Supported: await renderer.hasFeatureAsync( 'texture-compression-etc2' ),
  147. dxtSupported: await renderer.hasFeatureAsync( 'texture-compression-bc' ),
  148. bptcSupported: await renderer.hasFeatureAsync( 'texture-compression-bptc' ),
  149. pvrtcSupported: await renderer.hasFeatureAsync( 'texture-compression-pvrtc' )
  150. };
  151. return this;
  152. }
  153. /**
  154. * Detects hardware support for available compressed texture formats, to determine
  155. * the output format for the transcoder. Must be called before loading a texture.
  156. *
  157. * @param {WebGPURenderer|WebGLRenderer} renderer - The renderer.
  158. * @return {KTX2Loader} A reference to this loader.
  159. */
  160. detectSupport( renderer ) {
  161. if ( renderer.isWebGPURenderer === true ) {
  162. this.workerConfig = {
  163. astcSupported: renderer.hasFeature( 'texture-compression-astc' ),
  164. astcHDRSupported: false, // https://github.com/gpuweb/gpuweb/issues/3856
  165. etc1Supported: renderer.hasFeature( 'texture-compression-etc1' ),
  166. etc2Supported: renderer.hasFeature( 'texture-compression-etc2' ),
  167. dxtSupported: renderer.hasFeature( 'texture-compression-bc' ),
  168. bptcSupported: renderer.hasFeature( 'texture-compression-bptc' ),
  169. pvrtcSupported: renderer.hasFeature( 'texture-compression-pvrtc' )
  170. };
  171. } else {
  172. this.workerConfig = {
  173. astcSupported: renderer.extensions.has( 'WEBGL_compressed_texture_astc' ),
  174. astcHDRSupported: renderer.extensions.has( 'WEBGL_compressed_texture_astc' )
  175. && renderer.extensions.get( 'WEBGL_compressed_texture_astc' ).getSupportedProfiles().includes( 'hdr' ),
  176. etc1Supported: renderer.extensions.has( 'WEBGL_compressed_texture_etc1' ),
  177. etc2Supported: renderer.extensions.has( 'WEBGL_compressed_texture_etc' ),
  178. dxtSupported: renderer.extensions.has( 'WEBGL_compressed_texture_s3tc' ),
  179. bptcSupported: renderer.extensions.has( 'EXT_texture_compression_bptc' ),
  180. pvrtcSupported: renderer.extensions.has( 'WEBGL_compressed_texture_pvrtc' )
  181. || renderer.extensions.has( 'WEBKIT_WEBGL_compressed_texture_pvrtc' )
  182. };
  183. }
  184. return this;
  185. }
  186. // TODO: Make this method private
  187. init() {
  188. if ( ! this.transcoderPending ) {
  189. // Load transcoder wrapper.
  190. const jsLoader = new FileLoader( this.manager );
  191. jsLoader.setPath( this.transcoderPath );
  192. jsLoader.setWithCredentials( this.withCredentials );
  193. const jsContent = jsLoader.loadAsync( 'basis_transcoder.js' );
  194. // Load transcoder WASM binary.
  195. const binaryLoader = new FileLoader( this.manager );
  196. binaryLoader.setPath( this.transcoderPath );
  197. binaryLoader.setResponseType( 'arraybuffer' );
  198. binaryLoader.setWithCredentials( this.withCredentials );
  199. const binaryContent = binaryLoader.loadAsync( 'basis_transcoder.wasm' );
  200. this.transcoderPending = Promise.all( [ jsContent, binaryContent ] )
  201. .then( ( [ jsContent, binaryContent ] ) => {
  202. const fn = KTX2Loader.BasisWorker.toString();
  203. const body = [
  204. '/* constants */',
  205. 'let _EngineFormat = ' + JSON.stringify( KTX2Loader.EngineFormat ),
  206. 'let _EngineType = ' + JSON.stringify( KTX2Loader.EngineType ),
  207. 'let _TranscoderFormat = ' + JSON.stringify( KTX2Loader.TranscoderFormat ),
  208. 'let _BasisFormat = ' + JSON.stringify( KTX2Loader.BasisFormat ),
  209. '/* basis_transcoder.js */',
  210. jsContent,
  211. '/* worker */',
  212. fn.substring( fn.indexOf( '{' ) + 1, fn.lastIndexOf( '}' ) )
  213. ].join( '\n' );
  214. this.workerSourceURL = URL.createObjectURL( new Blob( [ body ] ) );
  215. this.transcoderBinary = binaryContent;
  216. this.workerPool.setWorkerCreator( () => {
  217. const worker = new Worker( this.workerSourceURL );
  218. const transcoderBinary = this.transcoderBinary.slice( 0 );
  219. worker.postMessage( { type: 'init', config: this.workerConfig, transcoderBinary }, [ transcoderBinary ] );
  220. return worker;
  221. } );
  222. } );
  223. if ( _activeLoaders > 0 ) {
  224. // Each instance loads a transcoder and allocates workers, increasing network and memory cost.
  225. console.warn(
  226. 'THREE.KTX2Loader: Multiple active KTX2 loaders may cause performance issues.'
  227. + ' Use a single KTX2Loader instance, or call .dispose() on old instances.'
  228. );
  229. }
  230. _activeLoaders ++;
  231. }
  232. return this.transcoderPending;
  233. }
  234. /**
  235. * Starts loading from the given URL and passes the loaded KTX2 texture
  236. * to the `onLoad()` callback.
  237. *
  238. * @param {string} url - The path/URL of the file to be loaded. This can also be a data URI.
  239. * @param {function(CompressedTexture)} onLoad - Executed when the loading process has been finished.
  240. * @param {onProgressCallback} onProgress - Executed while the loading is in progress.
  241. * @param {onErrorCallback} onError - Executed when errors occur.
  242. */
  243. load( url, onLoad, onProgress, onError ) {
  244. if ( this.workerConfig === null ) {
  245. throw new Error( 'THREE.KTX2Loader: Missing initialization with `.detectSupport( renderer )`.' );
  246. }
  247. const loader = new FileLoader( this.manager );
  248. loader.setResponseType( 'arraybuffer' );
  249. loader.setWithCredentials( this.withCredentials );
  250. loader.load( url, ( buffer ) => {
  251. this.parse( buffer, onLoad, onError );
  252. }, onProgress, onError );
  253. }
  254. /**
  255. * Parses the given KTX2 data.
  256. *
  257. * @param {ArrayBuffer} buffer - The raw KTX2 data as an array buffer.
  258. * @param {function(CompressedTexture)} onLoad - Executed when the loading/parsing process has been finished.
  259. * @param {onErrorCallback} onError - Executed when errors occur.
  260. * @returns {Promise} A Promise that resolves when the parsing has been finished.
  261. */
  262. parse( buffer, onLoad, onError ) {
  263. if ( this.workerConfig === null ) {
  264. throw new Error( 'THREE.KTX2Loader: Missing initialization with `.detectSupport( renderer )`.' );
  265. }
  266. // Check for an existing task using this buffer. A transferred buffer cannot be transferred
  267. // again from this thread.
  268. if ( _taskCache.has( buffer ) ) {
  269. const cachedTask = _taskCache.get( buffer );
  270. return cachedTask.promise.then( onLoad ).catch( onError );
  271. }
  272. this._createTexture( buffer )
  273. .then( ( texture ) => onLoad ? onLoad( texture ) : null )
  274. .catch( onError );
  275. }
  276. _createTextureFrom( transcodeResult, container ) {
  277. const { type: messageType, error, data: { faces, width, height, format, type, dfdFlags } } = transcodeResult;
  278. if ( messageType === 'error' ) return Promise.reject( error );
  279. let texture;
  280. if ( container.faceCount === 6 ) {
  281. texture = new CompressedCubeTexture( faces, format, type );
  282. } else {
  283. const mipmaps = faces[ 0 ].mipmaps;
  284. texture = container.layerCount > 1
  285. ? new CompressedArrayTexture( mipmaps, width, height, container.layerCount, format, type )
  286. : new CompressedTexture( mipmaps, width, height, format, type );
  287. }
  288. texture.minFilter = faces[ 0 ].mipmaps.length === 1 ? LinearFilter : LinearMipmapLinearFilter;
  289. texture.magFilter = LinearFilter;
  290. texture.generateMipmaps = false;
  291. texture.needsUpdate = true;
  292. texture.colorSpace = parseColorSpace( container );
  293. texture.premultiplyAlpha = !! ( dfdFlags & KHR_DF_FLAG_ALPHA_PREMULTIPLIED );
  294. return texture;
  295. }
  296. /**
  297. * @private
  298. * @param {ArrayBuffer} buffer
  299. * @param {?Object} config
  300. * @return {Promise<CompressedTexture|CompressedArrayTexture|DataTexture|Data3DTexture>}
  301. */
  302. async _createTexture( buffer, config = {} ) {
  303. const container = read( new Uint8Array( buffer ) );
  304. // Basis UASTC HDR is a subset of ASTC, which can be transcoded efficiently
  305. // to BC6H. To detect whether a KTX2 file uses Basis UASTC HDR, or default
  306. // ASTC, inspect the DFD color model.
  307. //
  308. // Source: https://github.com/BinomialLLC/basis_universal/issues/381
  309. const isBasisHDR = container.vkFormat === VK_FORMAT_ASTC_4x4_SFLOAT_BLOCK_EXT
  310. && container.dataFormatDescriptor[ 0 ].colorModel === 0xA7;
  311. // If the device supports ASTC, Basis UASTC HDR requires no transcoder.
  312. const needsTranscoder = container.vkFormat === VK_FORMAT_UNDEFINED
  313. || isBasisHDR && ! this.workerConfig.astcHDRSupported;
  314. if ( ! needsTranscoder ) {
  315. return createRawTexture( container );
  316. }
  317. //
  318. const taskConfig = config;
  319. const texturePending = this.init().then( () => {
  320. return this.workerPool.postMessage( { type: 'transcode', buffer, taskConfig: taskConfig }, [ buffer ] );
  321. } ).then( ( e ) => this._createTextureFrom( e.data, container ) );
  322. // Cache the task result.
  323. _taskCache.set( buffer, { promise: texturePending } );
  324. return texturePending;
  325. }
  326. /**
  327. * Frees internal resources. This method should be called
  328. * when the loader is no longer required.
  329. */
  330. dispose() {
  331. this.workerPool.dispose();
  332. if ( this.workerSourceURL ) URL.revokeObjectURL( this.workerSourceURL );
  333. _activeLoaders --;
  334. }
  335. }
  336. /* CONSTANTS */
  337. KTX2Loader.BasisFormat = {
  338. ETC1S: 0,
  339. UASTC: 1,
  340. UASTC_HDR: 2,
  341. };
  342. // Source: https://github.com/BinomialLLC/basis_universal/blob/master/webgl/texture_test/index.html
  343. KTX2Loader.TranscoderFormat = {
  344. ETC1: 0,
  345. ETC2: 1,
  346. BC1: 2,
  347. BC3: 3,
  348. BC4: 4,
  349. BC5: 5,
  350. BC7_M6_OPAQUE_ONLY: 6,
  351. BC7_M5: 7,
  352. PVRTC1_4_RGB: 8,
  353. PVRTC1_4_RGBA: 9,
  354. ASTC_4x4: 10,
  355. ATC_RGB: 11,
  356. ATC_RGBA_INTERPOLATED_ALPHA: 12,
  357. RGBA32: 13,
  358. RGB565: 14,
  359. BGR565: 15,
  360. RGBA4444: 16,
  361. BC6H: 22,
  362. RGB_HALF: 24,
  363. RGBA_HALF: 25,
  364. };
  365. KTX2Loader.EngineFormat = {
  366. RGBAFormat: RGBAFormat,
  367. RGBA_ASTC_4x4_Format: RGBA_ASTC_4x4_Format,
  368. RGB_BPTC_UNSIGNED_Format: RGB_BPTC_UNSIGNED_Format,
  369. RGBA_BPTC_Format: RGBA_BPTC_Format,
  370. RGBA_ETC2_EAC_Format: RGBA_ETC2_EAC_Format,
  371. RGBA_PVRTC_4BPPV1_Format: RGBA_PVRTC_4BPPV1_Format,
  372. RGBA_S3TC_DXT5_Format: RGBA_S3TC_DXT5_Format,
  373. RGB_ETC1_Format: RGB_ETC1_Format,
  374. RGB_ETC2_Format: RGB_ETC2_Format,
  375. RGB_PVRTC_4BPPV1_Format: RGB_PVRTC_4BPPV1_Format,
  376. RGBA_S3TC_DXT1_Format: RGBA_S3TC_DXT1_Format,
  377. };
  378. KTX2Loader.EngineType = {
  379. UnsignedByteType: UnsignedByteType,
  380. HalfFloatType: HalfFloatType,
  381. FloatType: FloatType,
  382. };
  383. /* WEB WORKER */
  384. KTX2Loader.BasisWorker = function () {
  385. let config;
  386. let transcoderPending;
  387. let BasisModule;
  388. const EngineFormat = _EngineFormat; // eslint-disable-line no-undef
  389. const EngineType = _EngineType; // eslint-disable-line no-undef
  390. const TranscoderFormat = _TranscoderFormat; // eslint-disable-line no-undef
  391. const BasisFormat = _BasisFormat; // eslint-disable-line no-undef
  392. self.addEventListener( 'message', function ( e ) {
  393. const message = e.data;
  394. switch ( message.type ) {
  395. case 'init':
  396. config = message.config;
  397. init( message.transcoderBinary );
  398. break;
  399. case 'transcode':
  400. transcoderPending.then( () => {
  401. try {
  402. const { faces, buffers, width, height, hasAlpha, format, type, dfdFlags } = transcode( message.buffer );
  403. self.postMessage( { type: 'transcode', id: message.id, data: { faces, width, height, hasAlpha, format, type, dfdFlags } }, buffers );
  404. } catch ( error ) {
  405. console.error( error );
  406. self.postMessage( { type: 'error', id: message.id, error: error.message } );
  407. }
  408. } );
  409. break;
  410. }
  411. } );
  412. function init( wasmBinary ) {
  413. transcoderPending = new Promise( ( resolve ) => {
  414. BasisModule = { wasmBinary, onRuntimeInitialized: resolve };
  415. BASIS( BasisModule ); // eslint-disable-line no-undef
  416. } ).then( () => {
  417. BasisModule.initializeBasis();
  418. if ( BasisModule.KTX2File === undefined ) {
  419. console.warn( 'THREE.KTX2Loader: Please update Basis Universal transcoder.' );
  420. }
  421. } );
  422. }
  423. function transcode( buffer ) {
  424. const ktx2File = new BasisModule.KTX2File( new Uint8Array( buffer ) );
  425. function cleanup() {
  426. ktx2File.close();
  427. ktx2File.delete();
  428. }
  429. if ( ! ktx2File.isValid() ) {
  430. cleanup();
  431. throw new Error( 'THREE.KTX2Loader: Invalid or unsupported .ktx2 file' );
  432. }
  433. let basisFormat;
  434. if ( ktx2File.isUASTC() ) {
  435. basisFormat = BasisFormat.UASTC;
  436. } else if ( ktx2File.isETC1S() ) {
  437. basisFormat = BasisFormat.ETC1S;
  438. } else if ( ktx2File.isHDR() ) {
  439. basisFormat = BasisFormat.UASTC_HDR;
  440. } else {
  441. throw new Error( 'THREE.KTX2Loader: Unknown Basis encoding' );
  442. }
  443. const width = ktx2File.getWidth();
  444. const height = ktx2File.getHeight();
  445. const layerCount = ktx2File.getLayers() || 1;
  446. const levelCount = ktx2File.getLevels();
  447. const faceCount = ktx2File.getFaces();
  448. const hasAlpha = ktx2File.getHasAlpha();
  449. const dfdFlags = ktx2File.getDFDFlags();
  450. const { transcoderFormat, engineFormat, engineType } = getTranscoderFormat( basisFormat, width, height, hasAlpha );
  451. if ( ! width || ! height || ! levelCount ) {
  452. cleanup();
  453. throw new Error( 'THREE.KTX2Loader: Invalid texture' );
  454. }
  455. if ( ! ktx2File.startTranscoding() ) {
  456. cleanup();
  457. throw new Error( 'THREE.KTX2Loader: .startTranscoding failed' );
  458. }
  459. const faces = [];
  460. const buffers = [];
  461. for ( let face = 0; face < faceCount; face ++ ) {
  462. const mipmaps = [];
  463. for ( let mip = 0; mip < levelCount; mip ++ ) {
  464. const layerMips = [];
  465. let mipWidth, mipHeight;
  466. for ( let layer = 0; layer < layerCount; layer ++ ) {
  467. const levelInfo = ktx2File.getImageLevelInfo( mip, layer, face );
  468. if ( face === 0 && mip === 0 && layer === 0 && ( levelInfo.origWidth % 4 !== 0 || levelInfo.origHeight % 4 !== 0 ) ) {
  469. console.warn( 'THREE.KTX2Loader: ETC1S and UASTC textures should use multiple-of-four dimensions.' );
  470. }
  471. if ( levelCount > 1 ) {
  472. mipWidth = levelInfo.origWidth;
  473. mipHeight = levelInfo.origHeight;
  474. } else {
  475. // Handles non-multiple-of-four dimensions in textures without mipmaps. Textures with
  476. // mipmaps must use multiple-of-four dimensions, for some texture formats and APIs.
  477. // See mrdoob/three.js#25908.
  478. mipWidth = levelInfo.width;
  479. mipHeight = levelInfo.height;
  480. }
  481. let dst = new Uint8Array( ktx2File.getImageTranscodedSizeInBytes( mip, layer, 0, transcoderFormat ) );
  482. const status = ktx2File.transcodeImage( dst, mip, layer, face, transcoderFormat, 0, - 1, - 1 );
  483. if ( engineType === EngineType.HalfFloatType ) {
  484. dst = new Uint16Array( dst.buffer, dst.byteOffset, dst.byteLength / Uint16Array.BYTES_PER_ELEMENT );
  485. }
  486. if ( ! status ) {
  487. cleanup();
  488. throw new Error( 'THREE.KTX2Loader: .transcodeImage failed.' );
  489. }
  490. layerMips.push( dst );
  491. }
  492. const mipData = concat( layerMips );
  493. mipmaps.push( { data: mipData, width: mipWidth, height: mipHeight } );
  494. buffers.push( mipData.buffer );
  495. }
  496. faces.push( { mipmaps, width, height, format: engineFormat, type: engineType } );
  497. }
  498. cleanup();
  499. return { faces, buffers, width, height, hasAlpha, dfdFlags, format: engineFormat, type: engineType };
  500. }
  501. //
  502. // Optimal choice of a transcoder target format depends on the Basis format (ETC1S, UASTC, or
  503. // UASTC HDR), device capabilities, and texture dimensions. The list below ranks the formats
  504. // separately for each format. Currently, priority is assigned based on:
  505. //
  506. // high quality > low quality > uncompressed
  507. //
  508. // Prioritization may be revisited, or exposed for configuration, in the future.
  509. //
  510. // Reference: https://github.com/KhronosGroup/3D-Formats-Guidelines/blob/main/KTXDeveloperGuide.md
  511. const FORMAT_OPTIONS = [
  512. {
  513. if: 'astcSupported',
  514. basisFormat: [ BasisFormat.UASTC ],
  515. transcoderFormat: [ TranscoderFormat.ASTC_4x4, TranscoderFormat.ASTC_4x4 ],
  516. engineFormat: [ EngineFormat.RGBA_ASTC_4x4_Format, EngineFormat.RGBA_ASTC_4x4_Format ],
  517. engineType: [ EngineType.UnsignedByteType ],
  518. priorityETC1S: Infinity,
  519. priorityUASTC: 1,
  520. needsPowerOfTwo: false,
  521. },
  522. {
  523. if: 'bptcSupported',
  524. basisFormat: [ BasisFormat.ETC1S, BasisFormat.UASTC ],
  525. transcoderFormat: [ TranscoderFormat.BC7_M5, TranscoderFormat.BC7_M5 ],
  526. engineFormat: [ EngineFormat.RGBA_BPTC_Format, EngineFormat.RGBA_BPTC_Format ],
  527. engineType: [ EngineType.UnsignedByteType ],
  528. priorityETC1S: 3,
  529. priorityUASTC: 2,
  530. needsPowerOfTwo: false,
  531. },
  532. {
  533. if: 'dxtSupported',
  534. basisFormat: [ BasisFormat.ETC1S, BasisFormat.UASTC ],
  535. transcoderFormat: [ TranscoderFormat.BC1, TranscoderFormat.BC3 ],
  536. engineFormat: [ EngineFormat.RGBA_S3TC_DXT1_Format, EngineFormat.RGBA_S3TC_DXT5_Format ],
  537. engineType: [ EngineType.UnsignedByteType ],
  538. priorityETC1S: 4,
  539. priorityUASTC: 5,
  540. needsPowerOfTwo: false,
  541. },
  542. {
  543. if: 'etc2Supported',
  544. basisFormat: [ BasisFormat.ETC1S, BasisFormat.UASTC ],
  545. transcoderFormat: [ TranscoderFormat.ETC1, TranscoderFormat.ETC2 ],
  546. engineFormat: [ EngineFormat.RGB_ETC2_Format, EngineFormat.RGBA_ETC2_EAC_Format ],
  547. engineType: [ EngineType.UnsignedByteType ],
  548. priorityETC1S: 1,
  549. priorityUASTC: 3,
  550. needsPowerOfTwo: false,
  551. },
  552. {
  553. if: 'etc1Supported',
  554. basisFormat: [ BasisFormat.ETC1S, BasisFormat.UASTC ],
  555. transcoderFormat: [ TranscoderFormat.ETC1 ],
  556. engineFormat: [ EngineFormat.RGB_ETC1_Format ],
  557. engineType: [ EngineType.UnsignedByteType ],
  558. priorityETC1S: 2,
  559. priorityUASTC: 4,
  560. needsPowerOfTwo: false,
  561. },
  562. {
  563. if: 'pvrtcSupported',
  564. basisFormat: [ BasisFormat.ETC1S, BasisFormat.UASTC ],
  565. transcoderFormat: [ TranscoderFormat.PVRTC1_4_RGB, TranscoderFormat.PVRTC1_4_RGBA ],
  566. engineFormat: [ EngineFormat.RGB_PVRTC_4BPPV1_Format, EngineFormat.RGBA_PVRTC_4BPPV1_Format ],
  567. engineType: [ EngineType.UnsignedByteType ],
  568. priorityETC1S: 5,
  569. priorityUASTC: 6,
  570. needsPowerOfTwo: true,
  571. },
  572. {
  573. if: 'bptcSupported',
  574. basisFormat: [ BasisFormat.UASTC_HDR ],
  575. transcoderFormat: [ TranscoderFormat.BC6H ],
  576. engineFormat: [ EngineFormat.RGB_BPTC_UNSIGNED_Format ],
  577. engineType: [ EngineType.HalfFloatType ],
  578. priorityHDR: 1,
  579. needsPowerOfTwo: false,
  580. },
  581. // Uncompressed fallbacks.
  582. {
  583. basisFormat: [ BasisFormat.ETC1S, BasisFormat.UASTC ],
  584. transcoderFormat: [ TranscoderFormat.RGBA32, TranscoderFormat.RGBA32 ],
  585. engineFormat: [ EngineFormat.RGBAFormat, EngineFormat.RGBAFormat ],
  586. engineType: [ EngineType.UnsignedByteType, EngineType.UnsignedByteType ],
  587. priorityETC1S: 100,
  588. priorityUASTC: 100,
  589. needsPowerOfTwo: false,
  590. },
  591. {
  592. basisFormat: [ BasisFormat.UASTC_HDR ],
  593. transcoderFormat: [ TranscoderFormat.RGBA_HALF ],
  594. engineFormat: [ EngineFormat.RGBAFormat ],
  595. engineType: [ EngineType.HalfFloatType ],
  596. priorityHDR: 100,
  597. needsPowerOfTwo: false,
  598. }
  599. ];
  600. const OPTIONS = {
  601. // TODO: For ETC1S we intentionally sort by _UASTC_ priority, preserving
  602. // a historical accident shown to avoid performance pitfalls for Linux with
  603. // Firefox & AMD GPU (RadeonSI). Further work needed.
  604. // See https://github.com/mrdoob/three.js/pull/29730.
  605. [ BasisFormat.ETC1S ]: FORMAT_OPTIONS
  606. .filter( ( opt ) => opt.basisFormat.includes( BasisFormat.ETC1S ) )
  607. .sort( ( a, b ) => a.priorityUASTC - b.priorityUASTC ),
  608. [ BasisFormat.UASTC ]: FORMAT_OPTIONS
  609. .filter( ( opt ) => opt.basisFormat.includes( BasisFormat.UASTC ) )
  610. .sort( ( a, b ) => a.priorityUASTC - b.priorityUASTC ),
  611. [ BasisFormat.UASTC_HDR ]: FORMAT_OPTIONS
  612. .filter( ( opt ) => opt.basisFormat.includes( BasisFormat.UASTC_HDR ) )
  613. .sort( ( a, b ) => a.priorityHDR - b.priorityHDR ),
  614. };
  615. function getTranscoderFormat( basisFormat, width, height, hasAlpha ) {
  616. const options = OPTIONS[ basisFormat ];
  617. for ( let i = 0; i < options.length; i ++ ) {
  618. const opt = options[ i ];
  619. if ( opt.if && ! config[ opt.if ] ) continue;
  620. if ( ! opt.basisFormat.includes( basisFormat ) ) continue;
  621. if ( hasAlpha && opt.transcoderFormat.length < 2 ) continue;
  622. if ( opt.needsPowerOfTwo && ! ( isPowerOfTwo( width ) && isPowerOfTwo( height ) ) ) continue;
  623. const transcoderFormat = opt.transcoderFormat[ hasAlpha ? 1 : 0 ];
  624. const engineFormat = opt.engineFormat[ hasAlpha ? 1 : 0 ];
  625. const engineType = opt.engineType[ 0 ];
  626. return { transcoderFormat, engineFormat, engineType };
  627. }
  628. throw new Error( 'THREE.KTX2Loader: Failed to identify transcoding target.' );
  629. }
  630. function isPowerOfTwo( value ) {
  631. if ( value <= 2 ) return true;
  632. return ( value & ( value - 1 ) ) === 0 && value !== 0;
  633. }
  634. /**
  635. * Concatenates N byte arrays.
  636. *
  637. * @param {Uint8Array[]} arrays
  638. * @return {Uint8Array}
  639. */
  640. function concat( arrays ) {
  641. if ( arrays.length === 1 ) return arrays[ 0 ];
  642. let totalByteLength = 0;
  643. for ( let i = 0; i < arrays.length; i ++ ) {
  644. const array = arrays[ i ];
  645. totalByteLength += array.byteLength;
  646. }
  647. const result = new Uint8Array( totalByteLength );
  648. let byteOffset = 0;
  649. for ( let i = 0; i < arrays.length; i ++ ) {
  650. const array = arrays[ i ];
  651. result.set( array, byteOffset );
  652. byteOffset += array.byteLength;
  653. }
  654. return result;
  655. }
  656. };
  657. // Parsing for non-Basis textures. These textures may have supercompression
  658. // like Zstd, but they do not require transcoding.
  659. const UNCOMPRESSED_FORMATS = new Set( [ RGBAFormat, RGFormat, RedFormat ] );
  660. const FORMAT_MAP = {
  661. [ VK_FORMAT_R32G32B32A32_SFLOAT ]: RGBAFormat,
  662. [ VK_FORMAT_R16G16B16A16_SFLOAT ]: RGBAFormat,
  663. [ VK_FORMAT_R8G8B8A8_UNORM ]: RGBAFormat,
  664. [ VK_FORMAT_R8G8B8A8_SRGB ]: RGBAFormat,
  665. [ VK_FORMAT_R32G32_SFLOAT ]: RGFormat,
  666. [ VK_FORMAT_R16G16_SFLOAT ]: RGFormat,
  667. [ VK_FORMAT_R8G8_UNORM ]: RGFormat,
  668. [ VK_FORMAT_R8G8_SRGB ]: RGFormat,
  669. [ VK_FORMAT_R32_SFLOAT ]: RedFormat,
  670. [ VK_FORMAT_R16_SFLOAT ]: RedFormat,
  671. [ VK_FORMAT_R8_SRGB ]: RedFormat,
  672. [ VK_FORMAT_R8_UNORM ]: RedFormat,
  673. [ VK_FORMAT_ASTC_4x4_SFLOAT_BLOCK_EXT ]: RGBA_ASTC_4x4_Format,
  674. [ VK_FORMAT_ASTC_6x6_SRGB_BLOCK ]: RGBA_ASTC_6x6_Format,
  675. [ VK_FORMAT_ASTC_6x6_UNORM_BLOCK ]: RGBA_ASTC_6x6_Format,
  676. };
  677. const TYPE_MAP = {
  678. [ VK_FORMAT_R32G32B32A32_SFLOAT ]: FloatType,
  679. [ VK_FORMAT_R16G16B16A16_SFLOAT ]: HalfFloatType,
  680. [ VK_FORMAT_R8G8B8A8_UNORM ]: UnsignedByteType,
  681. [ VK_FORMAT_R8G8B8A8_SRGB ]: UnsignedByteType,
  682. [ VK_FORMAT_R32G32_SFLOAT ]: FloatType,
  683. [ VK_FORMAT_R16G16_SFLOAT ]: HalfFloatType,
  684. [ VK_FORMAT_R8G8_UNORM ]: UnsignedByteType,
  685. [ VK_FORMAT_R8G8_SRGB ]: UnsignedByteType,
  686. [ VK_FORMAT_R32_SFLOAT ]: FloatType,
  687. [ VK_FORMAT_R16_SFLOAT ]: HalfFloatType,
  688. [ VK_FORMAT_R8_SRGB ]: UnsignedByteType,
  689. [ VK_FORMAT_R8_UNORM ]: UnsignedByteType,
  690. [ VK_FORMAT_ASTC_4x4_SFLOAT_BLOCK_EXT ]: HalfFloatType,
  691. [ VK_FORMAT_ASTC_6x6_SRGB_BLOCK ]: UnsignedByteType,
  692. [ VK_FORMAT_ASTC_6x6_UNORM_BLOCK ]: UnsignedByteType,
  693. };
  694. async function createRawTexture( container ) {
  695. const { vkFormat } = container;
  696. if ( FORMAT_MAP[ vkFormat ] === undefined ) {
  697. throw new Error( 'THREE.KTX2Loader: Unsupported vkFormat.' );
  698. }
  699. //
  700. let zstd;
  701. if ( container.supercompressionScheme === KHR_SUPERCOMPRESSION_ZSTD ) {
  702. if ( ! _zstd ) {
  703. _zstd = new Promise( async ( resolve ) => {
  704. const zstd = new ZSTDDecoder();
  705. await zstd.init();
  706. resolve( zstd );
  707. } );
  708. }
  709. zstd = await _zstd;
  710. }
  711. //
  712. const mipmaps = [];
  713. for ( let levelIndex = 0; levelIndex < container.levels.length; levelIndex ++ ) {
  714. const levelWidth = Math.max( 1, container.pixelWidth >> levelIndex );
  715. const levelHeight = Math.max( 1, container.pixelHeight >> levelIndex );
  716. const levelDepth = container.pixelDepth ? Math.max( 1, container.pixelDepth >> levelIndex ) : 0;
  717. const level = container.levels[ levelIndex ];
  718. let levelData;
  719. if ( container.supercompressionScheme === KHR_SUPERCOMPRESSION_NONE ) {
  720. levelData = level.levelData;
  721. } else if ( container.supercompressionScheme === KHR_SUPERCOMPRESSION_ZSTD ) {
  722. levelData = zstd.decode( level.levelData, level.uncompressedByteLength );
  723. } else {
  724. throw new Error( 'THREE.KTX2Loader: Unsupported supercompressionScheme.' );
  725. }
  726. let data;
  727. if ( TYPE_MAP[ vkFormat ] === FloatType ) {
  728. data = new Float32Array(
  729. levelData.buffer,
  730. levelData.byteOffset,
  731. levelData.byteLength / Float32Array.BYTES_PER_ELEMENT
  732. );
  733. } else if ( TYPE_MAP[ vkFormat ] === HalfFloatType ) {
  734. data = new Uint16Array(
  735. levelData.buffer,
  736. levelData.byteOffset,
  737. levelData.byteLength / Uint16Array.BYTES_PER_ELEMENT
  738. );
  739. } else {
  740. data = levelData;
  741. }
  742. mipmaps.push( {
  743. data: data,
  744. width: levelWidth,
  745. height: levelHeight,
  746. depth: levelDepth,
  747. } );
  748. }
  749. let texture;
  750. if ( UNCOMPRESSED_FORMATS.has( FORMAT_MAP[ vkFormat ] ) ) {
  751. texture = container.pixelDepth === 0
  752. ? new DataTexture( mipmaps[ 0 ].data, container.pixelWidth, container.pixelHeight )
  753. : new Data3DTexture( mipmaps[ 0 ].data, container.pixelWidth, container.pixelHeight, container.pixelDepth );
  754. } else {
  755. if ( container.pixelDepth > 0 ) throw new Error( 'THREE.KTX2Loader: Unsupported pixelDepth.' );
  756. texture = new CompressedTexture( mipmaps, container.pixelWidth, container.pixelHeight );
  757. texture.minFilter = mipmaps.length === 1 ? LinearFilter : LinearMipmapLinearFilter;
  758. texture.magFilter = LinearFilter;
  759. }
  760. texture.mipmaps = mipmaps;
  761. texture.type = TYPE_MAP[ vkFormat ];
  762. texture.format = FORMAT_MAP[ vkFormat ];
  763. texture.colorSpace = parseColorSpace( container );
  764. texture.needsUpdate = true;
  765. //
  766. return Promise.resolve( texture );
  767. }
  768. function parseColorSpace( container ) {
  769. const dfd = container.dataFormatDescriptor[ 0 ];
  770. if ( dfd.colorPrimaries === KHR_DF_PRIMARIES_BT709 ) {
  771. return dfd.transferFunction === KHR_DF_TRANSFER_SRGB ? SRGBColorSpace : LinearSRGBColorSpace;
  772. } else if ( dfd.colorPrimaries === KHR_DF_PRIMARIES_DISPLAYP3 ) {
  773. return dfd.transferFunction === KHR_DF_TRANSFER_SRGB ? DisplayP3ColorSpace : LinearDisplayP3ColorSpace;
  774. } else if ( dfd.colorPrimaries === KHR_DF_PRIMARIES_UNSPECIFIED ) {
  775. return NoColorSpace;
  776. } else {
  777. console.warn( `THREE.KTX2Loader: Unsupported color primaries, "${ dfd.colorPrimaries }"` );
  778. return NoColorSpace;
  779. }
  780. }
  781. export { KTX2Loader };