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.

Needle Engine 5 compresses EXR textures used in Needle Engine components to FastHDR out of the box – in Unity and Blender, in production builds, and even for uploaded GLB models with EXR skyboxes. You can also upload your own HDRI/EXR files to Needle Cloud to compress them to FastHDR. Learn more.

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, check out our technical deep-dive article.

Get Environments Read the article

Use FastHDR in your projects

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.

Needle Engine 5 automatically compresses EXR textures used in Needle Engine components to FastHDR. This works in both the Unity and Blender integrations. Production builds and uploaded GLB models with EXR skyboxes are also automatically compressed. You can also upload your own HDRI/EXR files to Needle Cloud to compress them to FastHDR. Read the docs.

You can also download the free environments on this page and use them in any three.js-based app.

How to use FastHDR

FastHDR environment textures are ready to be used in any three.js app today with just a few lines of code.

Click here to get copy-&-paste-ready code for your three.js, react-three-fiber or Needle Engine app.

Comparison: 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

17.3 MB

16 MB

3 MB

69.3 MB

64 MB

12 MB

277.3 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

Get started with FastHDR

Needle Engine 5 compresses EXR textures used in Needle Engine components to FastHDR automatically — in both Unity and Blender. Production builds and uploaded GLB models with EXR skyboxes are also compressed out of the box. You can also upload your own HDRI/EXR files to Needle Cloud to compress them to FastHDR. Read the docs.

Not using Needle Engine? You can download any of the environments above and use them in any three.js-based app with just a few lines of code.

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.

Get Environments Read the article

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

Save your rendering changes?

FastHDR

How to use FastHDR environments

Three.js: KTX2Loader

The toolset for three.js & the 3D web