Add support for KTX2 texture compression to gltf-model

[jameskane05]

Description:

This addresses #4919 by adding THREE.KTX2Loader to the A-Frame gltf-model system. It works just like the DracoLoader, in that you have to provide it with a link to a hosted transcoder library folder, which must contain two files: basis_transcoder.wasm and basis_transcoder.js, as documented in the gltf-model.md. These files are available from the three.js repository, under examples/js/libs/basis.

This also extends an example scene to include an asset with a compressed texture (made with gltf-transform etc1s grip.glb grip-compressed.glb command). This is a small asset from my upcoming game, which is linked to from Glitch.com hosting. Let me know if there is a preferred asset to use for this example or if it should be moved to within the project somehow instead of remotely hosted. Also let me know if there are other stylistic or convention things I missed. Otherwise looking forward to having access to this feature!

[vincentfretin]

I didn't see [basis] defined in the document, similar to [blender]. I guess you want to include something like
[basis]: https://github.com/mrdoob/three.js/tree/dev/examples/js/libs/basis

[jameskane05]

Good call, bad syntax. Corrected w/ link to that file folder.

[dmarcos]

Thanks! How common is KTX2 these days? My only concern is adding this as a hard dependency if it's not used much.

[jameskane05]

Yeah I noticed this comment above all the require(), I wonder how that could be achieved?

As for how common it is, the Mozilla Hubs team has implemented KTX2 and even ships the .wasm with their client (while this PR relies on optional remotely hosted .wasm and .js files). I know it's popular and relied-on by their team and community. As noted above, gltf-transform supports it, as well. I can also say my team uses KTX2 on most any diffuse texture or lightmap - the gains are really great, often 4-6x texture compression, and it stays (almost entirely) compressed when loaded in GPU memory, so if you're shipping high-def models to a WebXR headset it's pretty invaluable. I am sure adoption would grow if A-Frame supported it! Maybe Don could speak to its use at NYT? It looks like they already use it in some of their open source work: https://github.com/nytimes/aframe-loader-3dtiles-component

[donmccurdy]

I can't guess at number of models in the wild using KTX2, certainly models found in sources like Sketchfab won't include it. But KTX2 represents a 4-8x GPU memory savings compared to JPEG, PNG, or WebP — that's a big help in avoiding out-of-memory crashes on mobile devices. Size on disk/network is more variable, but often also improves. We do use KTX2 at the NYT, more for reasons of memory and GPU upload speed.

[dmarcos]

Wonder if there's a way we can come up with to lazy load the dependencies when KTX2 is used

[donmccurdy]

The larger WASM binary is already lazy-loaded, but the JS parts that are not so easy to fetch I expect.

[Exairnous]

I'm an artist in the Hubs community and I try to use KTX2 whenever I can. It's very helpful!

[paradowskicreative]

Yeah, since it's the developer's decision to include/exclude basisTranscoderUrl in their code at runtime, I'm not sure how we could determine at build time whether or not these loader scripts should be included w/ the A-Frame dist.

Anyway, A-Frame includes Draco in the same way, and to me KTX2 is just as useful, if not moreso b/c it optimizes memory use, not just network/disk use. Supporting the most popular geometry and texture compression libraries for gltf side by side makes a lot of sense, and it can't grow in popularity if major frameworks don't support it. If something better and more standardized comes along this can always be removed in its favor. The cost of a few dormant lines of JS when not in use seems pretty low. Just my two cents!

[dmarcos]

Thanks! Great work!

[vincentfretin]

This PR was working with super-three r141, but in the meantime aframe master switched to super-three r144 and the UMD build of examples/js/KTX2Loader.js was removed in r144, see mrdoob/three.js#24398 😭
I think we really need to switch to a maintained build tool that is supporting ESM.

[donmccurdy]

Also see mrdoob/three.js#24593 (comment) — more UMD+CJS files may be removed by the end of this year. I believe an ESM-based build process would be ideal looking forward.

[donmccurdy]

Great work here, thank you @jameskane05!

[vincentfretin]

I spent 9 hours today 😭 to switch aframe to webpack #5116 to fix master that is currently broken. Please merge it @dmarcos 🙏

[kylebakerio]

Thanks so much for doing that work veincent. We're all in debt to you!