Using EXRLoader for HDR Textures in Three.js

In Three.js, rendering realistic lighting and environments often requires High Dynamic Range (HDR) imagery. This article explains the role of the EXRLoader utility, how it processes OpenEXR (.exr) files to preserve rich color and exposure data, and how to implement it to elevate the visual fidelity of your 3D scenes.

What is EXRLoader?

The EXRLoader is a specialized file loader in the Three.js library used to import OpenEXR image files. OpenEXR is a professional-grade, high dynamic range raster file format developed by Industrial Light & Magic. Unlike standard 8-bit image formats like PNG or JPEG, which cap color values between 0 and 255, EXR files store pixel data as 16-bit or 32-bit floating-point numbers. This allows the format to capture an immense range of brightness levels, representing both extreme highlights (like the sun) and deep shadows in a single file without losing detail.

Primary Uses of EXRLoader in Three.js

1. Image-Based Lighting (IBL)

The most common use case for EXRLoader is setting up Image-Based Lighting. By loading an HDR environment map, Three.js can use the pixel data of the EXR image as a light source. This allows 3D models with Physically Based Rendering (PBR) materials to reflect the environment realistically and receive ambient lighting that matches the colors and intensities of the background image.

2. Realistic Reflections

Standard low-dynamic-range images fail to create convincing reflections on metallic or glossy surfaces because they lack the necessary brightness peaks. An EXR texture contains the actual intensity values of light sources, enabling Three.js to render bright, sharp, and physically accurate reflections on materials.

3. Tone Mapping and Exposure Control

Because EXRLoader preserves the full spectrum of light intensity, developers can adjust the exposure of a scene in real-time. By utilizing Three.js tone mapping algorithms, high dynamic range values are mapped down to the standard range of a user’s monitor, preventing overexposure while preserving detail in both dark and light areas.

How EXRLoader Works

When EXRLoader loads an OpenEXR file, it decodes the compressed floating-point data and generates a DataTexture (or Data3DTexture).

To use it effectively, the loaded texture is typically passed through a PMREMGenerator (Prefiltered Mipmapped Radiance Environment Map). This pre-processes the HDR image to create mipmaps optimized for glossy reflections, reducing rendering overhead and eliminating visual noise.

import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader.js';

const loader = new EXRLoader();
loader.load('environment.exr', function (texture) {
    texture.mapping = THREE.EquirectangularReflectionMapping;
    
    // Assign to scene background and environment
    scene.background = texture;
    scene.environment = texture;
});

By utilizing EXRLoader, Three.js applications achieve a level of photorealism that is impossible to replicate with standard LDR image formats, making it a fundamental tool for high-end web-based 3D graphics.