FastHDR

Most 3D scenes are lit by an HDRI – this is called image-based lighting. We found a way to make HDRI loading in three.js and Needle really nice.

HDR environments in the FastHDR format load 10x faster than EXR and 5x faster than UltraHDR. They also use 95% less GPU memory, and don't cause stuttering during loading.

On this page, you find free-to-use environments in this format. You can use them in Needle Engine, or any three.js-based app.

"KTX2-supercompressed Prefiltered Mipmapped Radiance Environment Maps in UASTC HDR 4x4 format" just doesn't roll off the tongue, but if you want to learn more, stay tuned for our technical deep-dive.

FastHDR vs. EXR and UltraHDR

speed

10x faster time-to-image FastHDR files load and display 10x faster than EXR and 4x faster than UltraHDR. This includes the time to download files, process them into textures and upload them to the GPU.

FastHDR

189 ms

UltraHDR

528 ms

EXR

1420 ms

star

Production Ready Full support in three.js, Needle Engine, and React Three Fiber. All platforms and browsers are supported. You don't need any extra libraries – all FastHDR dependencies already ship with three.js.

upload

1000x faster on the main thread. Zero frame drops. FastHDR loads in a web worker, keeping computations off the main thread. This ensures butter smooth loading and a consistent frame rate.

0.1 ms

43.8 ms

103.8 ms

0.2 ms

133.2 ms

339.6 ms

0.4 ms

507.3 ms

1250.8 ms

memory

95% less VRAM usage. FastHDR uses 95% less GPU memory than EXR and UltraHDR. This means faster GPU uploads, and more room for other data – or higher-quality environments.

0.8 MB

16 MB

3 MB

64 MB

12 MB

256 MB

trending_up

Higher-resolution images at higher performance. The time and bandwidth you save with FastHDR can be reinvested into higher-resolution environments. 4K FastHDR is as fast as 1K EXR. And suddenly, 8k environments become viable for the web.

15 ms

54 ms

119 ms

38 ms

137 ms

347 ms

134 ms

511 ms

1261 ms

download

75% smaller filesize than EXR. Across the board, we see at least a 75% reduction in file size for FastHDR compared to regular EXR or HDR files.

0.5 MB

0.2 MB

1.5 MB

1.9 MB

0.7 MB

5.6 MB

7.3 MB

2.6 MB

21.2 MB

Process your own HDRIs into FastHDR

FastHDR is strictly better than EXR/HDR and in most cases also better than the UltraHDR (gainmap) format. It loads much faster than both. GPU memory is 90% lower. File sizes are 90% smaller than EXR and comparable with UltraHDR.

We're working on a way for you to process your own HDRIs into the FastHDR format. We'll let you know once custom HDRI → FastHDR processing is available!

Join thousands of developers on Needle Cloud
and get notified of new features and tools.

Technical Info

GPU-Native Compression

KTX2 uses hardware-accelerated compression formats that stream directly to VRAM. Other files need to be expanded into giant bitmaps on the CPU. So even with UltraHDR files being smaller on disk, they load much slower and need more memory.

Small Files

EXR and HDR files are large. A 2k file clocks in at about 5 MB, while a 4k file is around 20–25 MB. FastHDR files, on the other hand, are usually 75% smaller – 2 MB for 2k, 7 MB for 4k resolution.

Universal Compatibility

FastHDR files are KTX2 files in the UASTC HDR 4x4 format. It's a supercompression format specified by the Khronos Group. Files can be transcoded to a GPU-friendly format on every platform.

Better Performance

FastHDR loads without any frame drops. Your page will feel more responsive, with faster load times and smoother transitions.

View Environments

How to use FastHDR environments

FastHDR environments are preprocessed PMREM files, supercompressed in the GPU-friendly KTX2 format. They make startup of your app faster, by a lot. Select your tool below to learn more.

code Three.js

Needle Engine

React Three Fiber

Environment maps in three.js are loaded using EXRLoader or HDRLoader, and then processed with PMREMGenerator for physically plausible reflections and background blur. When using FastHDR files, you can skip the PMREM generation step – directly load the files using KTX2Loader, and assign them to the scene's environment and background.

Three.js: KTX2Loader

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

// Initialize KTX2 loader. The transcoder path can come from three.js or Needle.
const ktx2Loader = new KTX2Loader();
ktx2Loader.setTranscoderPath('https://cdn.needle.tools/static/three/0.179.1/basis2/');
ktx2Loader.detectSupport(renderer);

// Load an HDRI image in FastHDR format
ktx2Loader.load('https://cdn.needle.tools/static/hdris/ballroom_2k.pmrem.ktx2', (texture) => {
    // Make sure to assign the correct mapping
    texture.mapping = THREE.CubeUVReflectionMapping;
    scene.environment = texture;
    scene.background = texture;
});

Live Example on Stackblitz