KTX2Loader.js 31 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148
  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 };
粤ICP备19079148号