Three.js RGBELoader for HDR Environment Maps

In Three.js, achieving realistic lighting and reflections often requires the use of High Dynamic Range (HDR) images. This article explains the purpose of the RGBELoader, how it processes .hdr files to create immersive environment maps, and why it is essential for physically-based rendering (PBR) in web-based 3D graphics.

The primary purpose of the RGBELoader is to load and parse HDR texture files in the .hdr (Radiance RGBE) format. Unlike standard Low Dynamic Range (LDR) formats like PNG or JPEG, which cap color values between 0 and 1, HDR files store a much wider range of luminance values. The RGBE format achieves this by storing Red, Green, and Blue color channels alongside a shared Exponent channel. This data structure allows the engine to represent extreme brightness levels, such as the direct glare of the sun, alongside deep shadows without losing detail in either.

In Three.js, these loaded HDR images are primarily used as environment maps for Image-Based Lighting (IBL). When applied to a scene, the HDR map acts as a surrounding skybox that projects light onto 3D objects. This provides highly realistic, subtle ambient lighting and complex reflections that react dynamically to the metallic and roughness properties of PBR materials.

To utilize the loaded HDR texture effectively, Three.js developers typically pair the RGBELoader with the PMREMGenerator (Pre-filtered Mipmapped Radiance Environment Map). The PMREMGenerator pre-processes the HDR environment map, creating different levels of blurriness to match varying material roughness. This ensures that glossy materials show sharp reflections of the environment, while matte materials exhibit soft, diffused lighting, all derived from the same HDR source.

Ultimately, the RGBELoader is the gateway to photorealistic rendering in Three.js. By enabling the import of the rich lighting data contained within .hdr files, it allows developers to illuminate 3D scenes with real-world light distribution and reflections, elevating the overall visual fidelity of web-based 3D experiences.