glTF HDR Texture Compression for Web Delivery

This article explains how the glTF (GL Transmission Format) ecosystem optimizes high-dynamic-range (HDR) environment maps for web delivery. Delivering high-fidelity image-based lighting (IBL) over the internet requires balancing visual fidelity against bandwidth and GPU memory constraints. By utilizing data-packing algorithms like RGBM or RGB9_E5, spherical-to-planar projections, and universal GPU texture compression extensions like KHR_texture_basisu, glTF enables web runtimes to load rich HDR lighting data with minimal latency and high frame rates.

The Challenge of HDR on the Web

Standard .hdr (Radiance) and .exr files contain 16-bit or 32-bit floating-point data per channel. While ideal for desktop production, raw floating-point textures are impractical for web distribution. An uncompressed HDR cubemap can easily exceed 50 megabytes, consuming excessive network bandwidth, inflating download times, and exhausting VRAM on mobile devices. Standard web image compression formats like JPEG or WebP discard this high-dynamic range, clipping color values to an 8-bit [0, 1] range.

LDR Packing Techniques (RGBM, RGBD, and Shared Exponent)

To make HDR data compatible with standard compression pipelines, the continuous floating-point range is mathematically packed into 8-bit RGBA containers:

  • RGBM: Color data is stored in the RGB channels, while a scalar multiplier is stored in the Alpha channel. The final color is reconstructed on the GPU using the formula Color = RGB * Alpha * MaxRange.
  • RGBD: Similar to RGBM, but divides RGB values by a dynamic range scalar stored in the Alpha channel.
  • RGB9_E5 (Shared Exponent): Allocates 9 bits each for Red, Green, and Blue, with 5 bits dedicated to a shared exponent. This provides high precision without allocating dedicated floating-point channels.

By converting 32-bit floats into standard 8-bit RGBA channels, HDR environment maps can be processed by standard 2D compression algorithms without losing lighting intensity data.

Octahedral Mapping for Environment Projection

Traditional HDR environment textures rely on heavy cubemaps or equirectangular projections. Modern glTF pipelines often convert cubemaps into octahedral environment maps.

Octahedral mapping folds a spherical projection onto a single square 2D texture. This geometric flattening provides two advantages for web delivery: it eliminates the seam artifacts common in equirectangular poles, and it allows all six faces of an environment map to be stored in a single, continuous 2D image file compatible with 2D texture compressors.

GPU Compression via KHR_texture_basisu

The primary method for compressing textures in glTF is the KHR_texture_basisu extension, which uses the KTX 2.0 container and Basis Universal technology.

  1. UASTC Compression: Packed HDR textures (such as RGBM encoded in an octahedral layout) are compressed using Basis Universal’s UASTC (Universal ASTC) mode. UASTC preserves high-frequency details and smooth gradients critical for lighting data, avoiding the severe blocky artifacts caused by aggressive color quantization.
  2. Supercompression: The KTX 2.0 container applies secondary lossless compression (such as Zstandard) to the UASTC data, cutting the payload size over the network by up to 50–70% compared to standard PNG-packed textures.
  3. Runtime Transcoding: Once downloaded by the browser, a lightweight WebAssembly transcoder converts the KTX 2.0 payload directly into the target device's native GPU format (such as ASTC, BC7, or ETC2) without intermediate CPU decompression.

Pre-filtering and Irradiance Optimization

glTF workflows reduce bandwidth further by pre-computing image-based lighting data before export:

  • Diffuse Irradiance: Instead of sending high-resolution textures for ambient light, the diffuse lighting is typically extracted as nine Spherical Harmonic (SH) coefficients. This reduces the diffuse environment map from megabytes to a few dozen bytes of mathematical data.
  • Specular Radiance: Specular reflections are stored as split-sum radiance maps at progressively smaller mipmap levels, allowing rough surfaces to read blurred reflections from smaller texture dimensions, optimizing sample counts and caching performance during PBR (Physically Based Rendering) evaluation.