KTX2Loader.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591
  1. /**
  2. * Loader for KTX 2.0 GPU Texture containers.
  3. *
  4. * KTX 2.0 is a container format for various GPU texture formats. The loader
  5. * supports Basis Universal GPU textures, which can be quickly transcoded to
  6. * a wide variety of GPU texture compression formats. While KTX 2.0 also allows
  7. * other hardware-specific formats, this loader does not yet parse them.
  8. *
  9. * References:
  10. * - KTX: http://github.khronos.org/KTX-Specification/
  11. * - DFD: https://www.khronos.org/registry/DataFormat/specs/1.3/dataformat.1.3.html#basicdescriptor
  12. */
  13. import {
  14. CompressedTexture,
  15. FileLoader,
  16. LinearEncoding,
  17. LinearFilter,
  18. LinearMipmapLinearFilter,
  19. Loader,
  20. RGBAFormat,
  21. RGBA_ASTC_4x4_Format,
  22. RGBA_BPTC_Format,
  23. RGBA_ETC2_EAC_Format,
  24. RGBA_PVRTC_4BPPV1_Format,
  25. RGBA_S3TC_DXT5_Format,
  26. RGB_ETC1_Format,
  27. RGB_ETC2_Format,
  28. RGB_PVRTC_4BPPV1_Format,
  29. RGB_S3TC_DXT1_Format,
  30. sRGBEncoding,
  31. UnsignedByteType
  32. } from '../../../build/three.module.js';
  33. import { WorkerPool } from '../utils/WorkerPool.js';
  34. const KTX2TransferSRGB = 2;
  35. const KTX2_ALPHA_PREMULTIPLIED = 1;
  36. const _taskCache = new WeakMap();
  37. let _activeLoaders = 0;
  38. class KTX2Loader extends Loader {
  39. constructor( manager ) {
  40. super( manager );
  41. this.transcoderPath = '';
  42. this.transcoderBinary = null;
  43. this.transcoderPending = null;
  44. this.workerPool = new WorkerPool();
  45. this.workerSourceURL = '';
  46. this.workerConfig = null;
  47. if ( typeof MSC_TRANSCODER !== 'undefined' ) {
  48. console.warn(
  49. 'THREE.KTX2Loader: Please update to latest "basis_transcoder".'
  50. + ' "msc_basis_transcoder" is no longer supported in three.js r125+.'
  51. );
  52. }
  53. }
  54. setTranscoderPath( path ) {
  55. this.transcoderPath = path;
  56. return this;
  57. }
  58. setWorkerLimit( num ) {
  59. this.workerPool.setWorkerLimit( num );
  60. return this;
  61. }
  62. detectSupport( renderer ) {
  63. this.workerConfig = {
  64. astcSupported: renderer.extensions.has( 'WEBGL_compressed_texture_astc' ),
  65. etc1Supported: renderer.extensions.has( 'WEBGL_compressed_texture_etc1' ),
  66. etc2Supported: renderer.extensions.has( 'WEBGL_compressed_texture_etc' ),
  67. dxtSupported: renderer.extensions.has( 'WEBGL_compressed_texture_s3tc' ),
  68. bptcSupported: renderer.extensions.has( 'EXT_texture_compression_bptc' ),
  69. pvrtcSupported: renderer.extensions.has( 'WEBGL_compressed_texture_pvrtc' )
  70. || renderer.extensions.has( 'WEBKIT_WEBGL_compressed_texture_pvrtc' )
  71. };
  72. return this;
  73. }
  74. dispose() {
  75. this.workerPool.dispose();
  76. if ( this.workerSourceURL ) URL.revokeObjectURL( this.workerSourceURL );
  77. return this;
  78. }
  79. init() {
  80. if ( ! this.transcoderPending ) {
  81. // Load transcoder wrapper.
  82. const jsLoader = new FileLoader( this.manager );
  83. jsLoader.setPath( this.transcoderPath );
  84. jsLoader.setWithCredentials( this.withCredentials );
  85. const jsContent = jsLoader.loadAsync( 'basis_transcoder.js' );
  86. // Load transcoder WASM binary.
  87. const binaryLoader = new FileLoader( this.manager );
  88. binaryLoader.setPath( this.transcoderPath );
  89. binaryLoader.setResponseType( 'arraybuffer' );
  90. binaryLoader.setWithCredentials( this.withCredentials );
  91. const binaryContent = binaryLoader.loadAsync( 'basis_transcoder.wasm' );
  92. this.transcoderPending = Promise.all( [ jsContent, binaryContent ] )
  93. .then( ( [ jsContent, binaryContent ] ) => {
  94. const fn = KTX2Loader.BasisWorker.toString();
  95. const body = [
  96. '/* constants */',
  97. 'let _EngineFormat = ' + JSON.stringify( KTX2Loader.EngineFormat ),
  98. 'let _TranscoderFormat = ' + JSON.stringify( KTX2Loader.TranscoderFormat ),
  99. 'let _BasisFormat = ' + JSON.stringify( KTX2Loader.BasisFormat ),
  100. '/* basis_transcoder.js */',
  101. jsContent,
  102. '/* worker */',
  103. fn.substring( fn.indexOf( '{' ) + 1, fn.lastIndexOf( '}' ) )
  104. ].join( '\n' );
  105. this.workerSourceURL = URL.createObjectURL( new Blob( [ body ] ) );
  106. this.transcoderBinary = binaryContent;
  107. this.workerPool.setWorkerCreator( () => {
  108. const worker = new Worker( this.workerSourceURL );
  109. const transcoderBinary = this.transcoderBinary.slice( 0 );
  110. worker.postMessage( { type: 'init', config: this.workerConfig, transcoderBinary }, [ transcoderBinary ] );
  111. return worker;
  112. } );
  113. } );
  114. if ( _activeLoaders > 0 ) {
  115. // Each instance loads a transcoder and allocates workers, increasing network and memory cost.
  116. console.warn(
  117. 'THREE.KTX2Loader: Multiple active KTX2 loaders may cause performance issues.'
  118. + ' Use a single KTX2Loader instance, or call .dispose() on old instances.'
  119. );
  120. }
  121. _activeLoaders++;
  122. }
  123. return this.transcoderPending;
  124. }
  125. load( url, onLoad, onProgress, onError ) {
  126. if ( this.workerConfig === null ) {
  127. throw new Error( 'THREE.KTX2Loader: Missing initialization with `.detectSupport( renderer )`.' );
  128. }
  129. const loader = new FileLoader( this.manager );
  130. loader.setResponseType( 'arraybuffer' );
  131. loader.setWithCredentials( this.withCredentials );
  132. const texture = new CompressedTexture();
  133. loader.load( url, ( buffer ) => {
  134. // Check for an existing task using this buffer. A transferred buffer cannot be transferred
  135. // again from this thread.
  136. if ( _taskCache.has( buffer ) ) {
  137. const cachedTask = _taskCache.get( buffer );
  138. return cachedTask.promise.then( onLoad ).catch( onError );
  139. }
  140. this._createTexture( [ buffer ] )
  141. .then( function ( _texture ) {
  142. texture.copy( _texture );
  143. texture.needsUpdate = true;
  144. if ( onLoad ) onLoad( texture );
  145. } )
  146. .catch( onError );
  147. }, onProgress, onError );
  148. return texture;
  149. }
  150. _createTextureFrom( transcodeResult ) {
  151. const { mipmaps, width, height, format, type, error, dfdTransferFn, dfdFlags } = transcodeResult;
  152. if ( type === 'error' ) return Promise.reject( error );
  153. const texture = new CompressedTexture( mipmaps, width, height, format, UnsignedByteType );
  154. texture.minFilter = mipmaps.length === 1 ? LinearFilter : LinearMipmapLinearFilter;
  155. texture.magFilter = LinearFilter;
  156. texture.generateMipmaps = false;
  157. texture.needsUpdate = true;
  158. texture.encoding = dfdTransferFn === KTX2TransferSRGB ? sRGBEncoding : LinearEncoding;
  159. texture.premultiplyAlpha = !! ( dfdFlags & KTX2_ALPHA_PREMULTIPLIED );
  160. return texture;
  161. }
  162. /**
  163. * @param {ArrayBuffer[]} buffers
  164. * @param {object?} config
  165. * @return {Promise<CompressedTexture>}
  166. */
  167. _createTexture( buffers, config = {} ) {
  168. const taskConfig = config;
  169. const texturePending = this.init().then( () => {
  170. return this.workerPool.postMessage( { type: 'transcode', buffers, taskConfig: taskConfig }, buffers );
  171. } ).then( ( e ) => this._createTextureFrom( e.data ) );
  172. // Cache the task result.
  173. _taskCache.set( buffers[ 0 ], { promise: texturePending } );
  174. return texturePending;
  175. }
  176. dispose() {
  177. URL.revokeObjectURL( this.workerSourceURL );
  178. this.workerPool.dispose();
  179. _activeLoaders--;
  180. return this;
  181. }
  182. }
  183. /* CONSTANTS */
  184. KTX2Loader.BasisFormat = {
  185. ETC1S: 0,
  186. UASTC_4x4: 1,
  187. };
  188. KTX2Loader.TranscoderFormat = {
  189. ETC1: 0,
  190. ETC2: 1,
  191. BC1: 2,
  192. BC3: 3,
  193. BC4: 4,
  194. BC5: 5,
  195. BC7_M6_OPAQUE_ONLY: 6,
  196. BC7_M5: 7,
  197. PVRTC1_4_RGB: 8,
  198. PVRTC1_4_RGBA: 9,
  199. ASTC_4x4: 10,
  200. ATC_RGB: 11,
  201. ATC_RGBA_INTERPOLATED_ALPHA: 12,
  202. RGBA32: 13,
  203. RGB565: 14,
  204. BGR565: 15,
  205. RGBA4444: 16,
  206. };
  207. KTX2Loader.EngineFormat = {
  208. RGBAFormat: RGBAFormat,
  209. RGBA_ASTC_4x4_Format: RGBA_ASTC_4x4_Format,
  210. RGBA_BPTC_Format: RGBA_BPTC_Format,
  211. RGBA_ETC2_EAC_Format: RGBA_ETC2_EAC_Format,
  212. RGBA_PVRTC_4BPPV1_Format: RGBA_PVRTC_4BPPV1_Format,
  213. RGBA_S3TC_DXT5_Format: RGBA_S3TC_DXT5_Format,
  214. RGB_ETC1_Format: RGB_ETC1_Format,
  215. RGB_ETC2_Format: RGB_ETC2_Format,
  216. RGB_PVRTC_4BPPV1_Format: RGB_PVRTC_4BPPV1_Format,
  217. RGB_S3TC_DXT1_Format: RGB_S3TC_DXT1_Format,
  218. };
  219. /* WEB WORKER */
  220. KTX2Loader.BasisWorker = function () {
  221. let config;
  222. let transcoderPending;
  223. let BasisModule;
  224. const EngineFormat = _EngineFormat; // eslint-disable-line no-undef
  225. const TranscoderFormat = _TranscoderFormat; // eslint-disable-line no-undef
  226. const BasisFormat = _BasisFormat; // eslint-disable-line no-undef
  227. self.addEventListener( 'message', function ( e ) {
  228. const message = e.data;
  229. switch ( message.type ) {
  230. case 'init':
  231. config = message.config;
  232. init( message.transcoderBinary );
  233. break;
  234. case 'transcode':
  235. transcoderPending.then( () => {
  236. try {
  237. const { width, height, hasAlpha, mipmaps, format, dfdTransferFn, dfdFlags } = transcode( message.buffers[ 0 ] );
  238. const buffers = [];
  239. for ( let i = 0; i < mipmaps.length; ++ i ) {
  240. buffers.push( mipmaps[ i ].data.buffer );
  241. }
  242. self.postMessage( { type: 'transcode', id: message.id, width, height, hasAlpha, mipmaps, format, dfdTransferFn, dfdFlags }, buffers );
  243. } catch ( error ) {
  244. console.error( error );
  245. self.postMessage( { type: 'error', id: message.id, error: error.message } );
  246. }
  247. } );
  248. break;
  249. }
  250. } );
  251. function init( wasmBinary ) {
  252. transcoderPending = new Promise( ( resolve ) => {
  253. BasisModule = { wasmBinary, onRuntimeInitialized: resolve };
  254. BASIS( BasisModule ); // eslint-disable-line no-undef
  255. } ).then( () => {
  256. BasisModule.initializeBasis();
  257. if ( BasisModule.KTX2File === undefined ) {
  258. console.warn( 'THREE.KTX2Loader: Please update Basis Universal transcoder.' );
  259. }
  260. } );
  261. }
  262. function transcode( buffer ) {
  263. const ktx2File = new BasisModule.KTX2File( new Uint8Array( buffer ) );
  264. function cleanup() {
  265. ktx2File.close();
  266. ktx2File.delete();
  267. }
  268. if ( ! ktx2File.isValid() ) {
  269. cleanup();
  270. throw new Error( 'THREE.KTX2Loader: Invalid or unsupported .ktx2 file' );
  271. }
  272. const basisFormat = ktx2File.isUASTC() ? BasisFormat.UASTC_4x4 : BasisFormat.ETC1S;
  273. const width = ktx2File.getWidth();
  274. const height = ktx2File.getHeight();
  275. const levels = ktx2File.getLevels();
  276. const hasAlpha = ktx2File.getHasAlpha();
  277. const dfdTransferFn = ktx2File.getDFDTransferFunc();
  278. const dfdFlags = ktx2File.getDFDFlags();
  279. const { transcoderFormat, engineFormat } = getTranscoderFormat( basisFormat, width, height, hasAlpha );
  280. if ( ! width || ! height || ! levels ) {
  281. cleanup();
  282. throw new Error( 'THREE.KTX2Loader: Invalid texture' );
  283. }
  284. if ( ! ktx2File.startTranscoding() ) {
  285. cleanup();
  286. throw new Error( 'THREE.KTX2Loader: .startTranscoding failed' );
  287. }
  288. const mipmaps = [];
  289. for ( let mip = 0; mip < levels; mip ++ ) {
  290. const levelInfo = ktx2File.getImageLevelInfo( mip, 0, 0 );
  291. const mipWidth = levelInfo.origWidth;
  292. const mipHeight = levelInfo.origHeight;
  293. const dst = new Uint8Array( ktx2File.getImageTranscodedSizeInBytes( mip, 0, 0, transcoderFormat ) );
  294. const status = ktx2File.transcodeImage(
  295. dst,
  296. mip,
  297. 0,
  298. 0,
  299. transcoderFormat,
  300. 0,
  301. - 1,
  302. - 1,
  303. );
  304. if ( ! status ) {
  305. cleanup();
  306. throw new Error( 'THREE.KTX2Loader: .transcodeImage failed.' );
  307. }
  308. mipmaps.push( { data: dst, width: mipWidth, height: mipHeight } );
  309. }
  310. cleanup();
  311. return { width, height, hasAlpha, mipmaps, format: engineFormat, dfdTransferFn, dfdFlags };
  312. }
  313. //
  314. // Optimal choice of a transcoder target format depends on the Basis format (ETC1S or UASTC),
  315. // device capabilities, and texture dimensions. The list below ranks the formats separately
  316. // for ETC1S and UASTC.
  317. //
  318. // In some cases, transcoding UASTC to RGBA32 might be preferred for higher quality (at
  319. // significant memory cost) compared to ETC1/2, BC1/3, and PVRTC. The transcoder currently
  320. // chooses RGBA32 only as a last resort and does not expose that option to the caller.
  321. const FORMAT_OPTIONS = [
  322. {
  323. if: 'astcSupported',
  324. basisFormat: [ BasisFormat.UASTC_4x4 ],
  325. transcoderFormat: [ TranscoderFormat.ASTC_4x4, TranscoderFormat.ASTC_4x4 ],
  326. engineFormat: [ EngineFormat.RGBA_ASTC_4x4_Format, EngineFormat.RGBA_ASTC_4x4_Format ],
  327. priorityETC1S: Infinity,
  328. priorityUASTC: 1,
  329. needsPowerOfTwo: false,
  330. },
  331. {
  332. if: 'bptcSupported',
  333. basisFormat: [ BasisFormat.ETC1S, BasisFormat.UASTC_4x4 ],
  334. transcoderFormat: [ TranscoderFormat.BC7_M5, TranscoderFormat.BC7_M5 ],
  335. engineFormat: [ EngineFormat.RGBA_BPTC_Format, EngineFormat.RGBA_BPTC_Format ],
  336. priorityETC1S: 3,
  337. priorityUASTC: 2,
  338. needsPowerOfTwo: false,
  339. },
  340. {
  341. if: 'dxtSupported',
  342. basisFormat: [ BasisFormat.ETC1S, BasisFormat.UASTC_4x4 ],
  343. transcoderFormat: [ TranscoderFormat.BC1, TranscoderFormat.BC3 ],
  344. engineFormat: [ EngineFormat.RGB_S3TC_DXT1_Format, EngineFormat.RGBA_S3TC_DXT5_Format ],
  345. priorityETC1S: 4,
  346. priorityUASTC: 5,
  347. needsPowerOfTwo: false,
  348. },
  349. {
  350. if: 'etc2Supported',
  351. basisFormat: [ BasisFormat.ETC1S, BasisFormat.UASTC_4x4 ],
  352. transcoderFormat: [ TranscoderFormat.ETC1, TranscoderFormat.ETC2 ],
  353. engineFormat: [ EngineFormat.RGB_ETC2_Format, EngineFormat.RGBA_ETC2_EAC_Format ],
  354. priorityETC1S: 1,
  355. priorityUASTC: 3,
  356. needsPowerOfTwo: false,
  357. },
  358. {
  359. if: 'etc1Supported',
  360. basisFormat: [ BasisFormat.ETC1S, BasisFormat.UASTC_4x4 ],
  361. transcoderFormat: [ TranscoderFormat.ETC1, TranscoderFormat.ETC1 ],
  362. engineFormat: [ EngineFormat.RGB_ETC1_Format, EngineFormat.RGB_ETC1_Format ],
  363. priorityETC1S: 2,
  364. priorityUASTC: 4,
  365. needsPowerOfTwo: false,
  366. },
  367. {
  368. if: 'pvrtcSupported',
  369. basisFormat: [ BasisFormat.ETC1S, BasisFormat.UASTC_4x4 ],
  370. transcoderFormat: [ TranscoderFormat.PVRTC1_4_RGB, TranscoderFormat.PVRTC1_4_RGBA ],
  371. engineFormat: [ EngineFormat.RGB_PVRTC_4BPPV1_Format, EngineFormat.RGBA_PVRTC_4BPPV1_Format ],
  372. priorityETC1S: 5,
  373. priorityUASTC: 6,
  374. needsPowerOfTwo: true,
  375. },
  376. ];
  377. const ETC1S_OPTIONS = FORMAT_OPTIONS.sort( function ( a, b ) {
  378. return a.priorityETC1S - b.priorityETC1S;
  379. } );
  380. const UASTC_OPTIONS = FORMAT_OPTIONS.sort( function ( a, b ) {
  381. return a.priorityUASTC - b.priorityUASTC;
  382. } );
  383. function getTranscoderFormat( basisFormat, width, height, hasAlpha ) {
  384. let transcoderFormat;
  385. let engineFormat;
  386. const options = basisFormat === BasisFormat.ETC1S ? ETC1S_OPTIONS : UASTC_OPTIONS;
  387. for ( let i = 0; i < options.length; i ++ ) {
  388. const opt = options[ i ];
  389. if ( ! config[ opt.if ] ) continue;
  390. if ( ! opt.basisFormat.includes( basisFormat ) ) continue;
  391. if ( opt.needsPowerOfTwo && ! ( isPowerOfTwo( width ) && isPowerOfTwo( height ) ) ) continue;
  392. transcoderFormat = opt.transcoderFormat[ hasAlpha ? 1 : 0 ];
  393. engineFormat = opt.engineFormat[ hasAlpha ? 1 : 0 ];
  394. return { transcoderFormat, engineFormat };
  395. }
  396. console.warn( 'THREE.KTX2Loader: No suitable compressed texture format found. Decoding to RGBA32.' );
  397. transcoderFormat = TranscoderFormat.RGBA32;
  398. engineFormat = EngineFormat.RGBAFormat;
  399. return { transcoderFormat, engineFormat };
  400. }
  401. function isPowerOfTwo( value ) {
  402. if ( value <= 2 ) return true;
  403. return ( value & ( value - 1 ) ) === 0 && value !== 0;
  404. }
  405. };
  406. export { KTX2Loader };