KTX2Loader.js 29 KB

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