Integration of 3D Models on the Web p.03

Texture Optimization

In modern 3D graphics, texture management plays a major effect on the performance. High-quality textures make scenes look realistic, but they can easily overload memory and slow rendering. To handle this challenge efficiently, new texture formats and optimization techniques like KTX2, Basis Universal, channel packing, atlasing, and mipmapping are increasingly used across both games and web experiences.

The KTX2 Format

Modern 3D workflows require efficient, cross-platform texture formats. That’s where KTX2 (Khronos Texture 2.0) comes in. Designed for modern graphics APIs like Vulkan, OpenGL, and WebGPU, the KTX2 format has become a standard for next-generation texture pipelines.

One of its standout features is Basis Universal supercompression, a technology developed by Google and Binomial. It stores textures in highly compressed intermediate formats (ETC1S and UASTC), which can be converted directly to GPU-native formats at runtime. This approach eliminates the need to maintain separate texture sets for different platforms, saving both time and storage space.

Another key feature of the KTX2 Format, is the Data Format Descriptor (DFD) system. It provides detailed metadata about compression parameters. This metadata allows textures to automatically be detected ensuring smooth integration with modern graphics pipelines. KTX2 also supports a wide range of advanced texture types such as arrays, cubemaps and 3D textures. This makes the format highly flexible for complex rendering workflows.

Basis Universal

Basis was developed by Google and Binomial in 2019 and aims to make texture data more efficient across different platforms. The basis format is typically 6-8 times smaller than jpeg, with less strain on the GPU and also smaller filesize. This makes it ideal for gaming, AR/VR, and of course, web based 3D. The main selling point of Basis Universal though, is its cross-platform efficiency as it supports fast decoding across devices which drastically reduces bandwidth and memory requirements.

Texture Optimization Techniques

Efficient texture management goes beyond compression. There are many tricks, artists use to optimize their textures for the web/in general. These techniques help balance quality and performance.

Channel Packing

Channel packing combines different texture maps into the different RGB channels of a single image. So a single image file could hold multiple texture maps such as, for example; roughness maps, metallic maps, etc. This alleviates the stress on bandwidth by quite a bit, as the technique saves up to four times the texture space and is also simple to set up. This method is most frequently used in game development, where VRAM is often an issue.

Atlasing

A texture atlas combines many smaller textures into one large image. This reduces the number of draw calls and texture switches during rendering, significantly boosting performance. Texture atlases are often used in game engines to improve frame rates, reduce memory overhead, and speed up loading times resulting in smoother gameplay and a more responsive experience.

Mipmapping

Mipmapping creates a chain of lower‑resolution versions of a texture that are automatically selected by the GPU based on the viewer’s distance. This basically works very similar to the LODs that I talked about in the “how can 3D designers optimize models”. Whenever a 3D object moves away from the camera, the system switches to a smaller mipmap level to reduce aliasing and improve performance. While mipmapped textures require about 33% more memory, they reduce bandwidth usage and improve cache efficiency, making them vital for real‑time rendering. Besides performance gains, mipmapping also enhances visual quality by preventing flickering and shimmering on distant surfaces.

SOURCES

1: https://pixijs.com/8.x/guides/components/assets/compressed-textures
2: https://dev.to/himj266/delving-into-the-world-of-3d-web-from-webgl-to-threejs-and-react-three-fiber-23kh
3: https://opensource.googleblog.com/2021/02/basis-universal-textures.html
4: https://blenderartists.org/t/guide-texture-optimisation-channel-packing/1227744
5: https://garagefarm.net/blog/texture-atlas-optimizing-textures-in-3d-renderinghttps://developer.android.com/games/optimize/textures

Leave a Reply

Your email address will not be published. Required fields are marked *