Real-Time GPU Texture Compression in Three.js
2 days ago
- #WebGPU
- #texture-compression
- #three.js
- three.js r180 introduces support for ExternalTexture objects in the WebGPU backend, enabling direct use of Spark-encoded textures.
- Spark.js integration with three.js simplifies texture encoding and loading, especially with GLTF files, via a straightforward registration process.
- Performance improvements were achieved by enabling concurrent image decoding using 'async' attribute or createImageBitmap API, making Spark texture loader as fast or faster than the default loader.
- Three.js initially lacked support for two-channel normal maps, but a PR has been submitted to add this feature, improving efficiency and quality for compressed textures.
- Performance tests show Spark texture loader outperforms the default loader in some scenarios, with significant reductions in VRAM usage and loading times.
- Basis texture transcoding adds significant overhead compared to Spark, especially on mobile devices, where disk loading times for larger files are notably slower.
- Feedback and contributions from the community, including Don McCurdy, have been crucial in identifying and resolving issues in both Spark.js and three.js.