KTX2Loader.js 31 KB

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