# \#hdr

**URL:** https://discourse.threejs.org/tag/hdr/43.md

[Latest](https://discourse.threejs.org/latest.md) · [Categories](https://discourse.threejs.org/categories.md) · [Tags](https://discourse.threejs.org/tags.md)

---

## [Understanding wide gamut, hdr, what is currently achievable in threejs and how to achieve it](https://discourse.threejs.org/t/understanding-wide-gamut-hdr-what-is-currently-achievable-in-threejs-and-how-to-achieve-it/95073)

<div class="topic-metadata">

**Author:** [@gtnbssn](https://discourse.threejs.org/u/gtnbssn)\
**Replies:** 5\
**Last updated:** [October 9, 2026, 9:15am UTC](https://discourse.threejs.org/t/understanding-wide-gamut-hdr-what-is-currently-achievable-in-threejs-and-how-to-achieve-it/95073 "2026-10-09T09:15:07Z")

</div>

I have been looking at these two examples: https://github.com/mrdoob/three.js/blob/dev/examples/webgl\_test\_wide\_gamut.html https://github.com/mrdoob/three.js/blob/dev/examples/webgpu\_hdr.html I see that my screen is c…

---

## [Bringing HDR from WebGPU onto the screen](https://discourse.threejs.org/t/bringing-hdr-from-webgpu-onto-the-screen/88772)

<div class="topic-metadata">

**Author:** [@Usnul](https://discourse.threejs.org/u/Usnul)\
**Replies:** 1\
**Last updated:** [December 22, 2025, 7:59pm UTC](https://discourse.threejs.org/t/bringing-hdr-from-webgpu-onto-the-screen/88772 "2025-12-22T19:59:02Z")

</div>

A about a year ago now, my main monitor died, when I got a replacement, I went with an HDR panel that supports 1000 nits peak brightness. Since then I’ve been running the panel in SDR mode and coding happily, but a whil…

---

## ["PNG has been updated for the first time in 22 years — new spec supports HDR"](https://discourse.threejs.org/t/png-has-been-updated-for-the-first-time-in-22-years-new-spec-supports-hdr/84621)

<div class="topic-metadata">

**Author:** [@GUESTJS](https://discourse.threejs.org/u/GUESTJS)\
**Replies:** 4\
**Last updated:** [June 28, 2025, 2:11pm UTC](https://discourse.threejs.org/t/png-has-been-updated-for-the-first-time-in-22-years-new-spec-supports-hdr/84621 "2025-06-28T14:11:03Z")

</div>

Have you seen this news? Does it means we can use png files for hdr lighting soon? Or there are any hidden restrictions for a complete replacement of .hdr?

---

## [Trouble Rendering HDR Background in Three.js project](https://discourse.threejs.org/t/trouble-rendering-hdr-background-in-three-js-project/84627)

<div class="topic-metadata">

**Author:** [@shadow91102](https://discourse.threejs.org/u/shadow91102)\
**Replies:** 3\
**Last updated:** [June 28, 2025, 2:19am UTC](https://discourse.threejs.org/t/trouble-rendering-hdr-background-in-three-js-project/84627 "2025-06-28T02:19:58Z")

</div>

Hello! I’m working on a project where I’m trying to switch up the background from a 3D model to an image in HDR format. I’m not quite getting the results I’d hoped for. It’s dark and unrealistic. I’d really appreciate…

---

## [True HDR color support](https://discourse.threejs.org/t/true-hdr-color-support/78370)

<div class="topic-metadata">

**Author:** [@aaaidan](https://discourse.threejs.org/u/aaaidan)\
**Replies:** 6\
**Last updated:** [March 6, 2025, 2:48am UTC](https://discourse.threejs.org/t/true-hdr-color-support/78370 "2025-03-06T02:48:34Z")

</div>

Chrome has implemented the “WebGPU Extended Range Brightness” proposal for some time now, and it’s also supported by the Safari Technology Preview. I am wondering if there is any interest in exploring support for this te…

---

## [Lighting advice](https://discourse.threejs.org/t/lighting-advice/36629)

<div class="topic-metadata">

**Author:** [@bmb](https://discourse.threejs.org/u/bmb)\
**Replies:** 9\
**Last updated:** [February 17, 2025, 11:23am UTC](https://discourse.threejs.org/t/lighting-advice/36629 "2025-02-17T11:23:37Z")

</div>

Hi, looking for some lighting advice… If you are using a HDR for lighting, do you also typically use additional lights (ambient/ directional etc?) I assume if I want shadows, or a floor shadow , that can only be a…

---

## [HDR or EXR Exporting from multiple image formats](https://discourse.threejs.org/t/hdr-or-exr-exporting-from-multiple-image-formats/76470)

<div class="topic-metadata">

**Author:** [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)\
**Replies:** 11\
**Last updated:** [January 17, 2025, 4:05am UTC](https://discourse.threejs.org/t/hdr-or-exr-exporting-from-multiple-image-formats/76470 "2025-01-17T04:05:23Z")

</div>

For those who might be interested in exporting multiple image formats to either HDR or EXR, you could use my IMG2MESH viewer / converter: For HDR it is using a modified version of hdrpng.js library For EXR it is using …

---

## [Unable to load HDR from URL](https://discourse.threejs.org/t/unable-to-load-hdr-from-url/55902)

<div class="topic-metadata">

**Author:** [@Hammer\_Chu](https://discourse.threejs.org/u/Hammer_Chu)\
**Replies:** 3\
**Last updated:** [January 13, 2025, 5:04am UTC](https://discourse.threejs.org/t/unable-to-load-hdr-from-url/55902 "2025-01-13T05:04:48Z")

</div>

HI, I have been using threejs with angular and I am having a few .hdr files that I would like to load into RGBEloader, funny thing is that if I put the HDR files in the assets folder everything work fine but if I use an …

---

## [Achieve realistic lighting and Materials in 3D Scene](https://discourse.threejs.org/t/achieve-realistic-lighting-and-materials-in-3d-scene/76333)

<div class="topic-metadata">

**Author:** [@Halikarnassos](https://discourse.threejs.org/u/Halikarnassos)\
**Replies:** 0\
**Last updated:** [January 10, 2025, 11:36pm UTC](https://discourse.threejs.org/t/achieve-realistic-lighting-and-materials-in-3d-scene/76333 "2025-01-10T23:36:47Z")

</div>

Hello everyone, what do I need to understand and be able to do in order to achieve lighting, textures, and materials like in the second image? Apart from envMapping, toneMapping, PBR, and HDR? When I add a texture to m…

---

## [AVIF images as equirectangular background](https://discourse.threejs.org/t/avif-images-as-equirectangular-background/74351)

<div class="topic-metadata">

**Author:** [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)\
**Replies:** 0\
**Last updated:** [November 24, 2024, 6:20am UTC](https://discourse.threejs.org/t/avif-images-as-equirectangular-background/74351 "2024-11-24T06:20:29Z")

</div>

For those who might be interested then definitely try using AVIF files as equirectangular background. It is rather small file size and the effect appears to be rather good. Some HD image files might look as good as orig…

---

## [How to edit HUE for scene.environment texture?](https://discourse.threejs.org/t/how-to-edit-hue-for-scene-environment-texture/72209)

<div class="topic-metadata">

**Author:** [@Stanislav-Sobolev](https://discourse.threejs.org/u/Stanislav-Sobolev)\
**Replies:** 2\
**Last updated:** [October 1, 2024, 2:00pm UTC](https://discourse.threejs.org/t/how-to-edit-hue-for-scene-environment-texture/72209 "2024-10-01T14:00:35Z")

</div>

Hi, Is it possible to control hue and saturation for hdr environment texture for webGL(srgb)? I would like to create different mood light for my scene using one hdr just changing hue/saturation

---

## [HDRI spherical map to cubemap converter](https://discourse.threejs.org/t/hdri-spherical-map-to-cubemap-converter/3555)

<div class="topic-metadata">

**Author:** [@MateuszWis](https://discourse.threejs.org/u/MateuszWis)\
**Replies:** 48\
**Last updated:** [September 15, 2024, 1:34am UTC](https://discourse.threejs.org/t/hdri-spherical-map-to-cubemap-converter/3555 "2024-09-15T01:34:12Z")

</div>

You can upload a spherical map (.hdr, .png, .jpg) and convert it to cubemap. I’ve made it possible to create 3 cubemap layouts : cross inline separate The ressolution option is meant for a single piece so if You set …

---

## [Model with HDR texture](https://discourse.threejs.org/t/model-with-hdr-texture/70386)

<div class="topic-metadata">

**Author:** [@cmahnke](https://discourse.threejs.org/u/cmahnke)\
**Replies:** 10\
**Last updated:** [September 8, 2024, 4:45am UTC](https://discourse.threejs.org/t/model-with-hdr-texture/70386 "2024-09-08T04:45:34Z")

</div>

Hi all, Im interested to use web technologies to promote cultural heritage artifacts. This example tries to illustrate the effect that Uranium glass has when exposed to ultraviolet light. It uses a UltraHDR texture wit…

---

## [Npm run build gives parse error for every .hdr and .exr file](https://discourse.threejs.org/t/npm-run-build-gives-parse-error-for-every-hdr-and-exr-file/68945)

<div class="topic-metadata">

**Author:** [@Cube\_3js](https://discourse.threejs.org/u/Cube_3js)\
**Replies:** 7\
**Last updated:** [August 6, 2024, 4:10pm UTC](https://discourse.threejs.org/t/npm-run-build-gives-parse-error-for-every-hdr-and-exr-file/68945 "2024-08-06T16:10:04Z")

</div>

Hello! I am getting an error from my .hdr files every time I enter the command npm run build: \[vite:build-import-analysis\] Parse error @:53:87 file: /public/presets\_library/background\_presets/netball\_court\_2k.hdr:53:8…

---

## [Unable to Load HDRI image as environment](https://discourse.threejs.org/t/unable-to-load-hdri-image-as-environment/67116)

<div class="topic-metadata">

**Author:** [@aseyedia](https://discourse.threejs.org/u/aseyedia)\
**Replies:** 4\
**Last updated:** [June 22, 2024, 7:28pm UTC](https://discourse.threejs.org/t/unable-to-load-hdri-image-as-environment/67116 "2024-06-22T19:28:56Z")

</div>

Hello everyone, I’m new to Three and am currently working on a project where I want to use an HDRI file for environment mapping for lighting and reflections purposes. I’ve been trying to load HDRI files using HDRCubeTex…

---

## [Can HDR be compressed?](https://discourse.threejs.org/t/can-hdr-be-compressed/62964)

<div class="topic-metadata">

**Author:** [@nieyuan1980](https://discourse.threejs.org/u/nieyuan1980)\
**Replies:** 23\
**Last updated:** [May 1, 2024, 7:44pm UTC](https://discourse.threejs.org/t/can-hdr-be-compressed/62964 "2024-05-01T19:44:41Z")

</div>

Hello everyone, I have a question to ask everyone. I used an HDR to apply to the background of the scene and model. It can render objects very beautifully. const rgbeLoader = new RGBELoader(); rgbeLo…

---

## [Reduce the size of .HDR files](https://discourse.threejs.org/t/reduce-the-size-of-hdr-files/60755)

<div class="topic-metadata">

**Author:** [@xMosh](https://discourse.threejs.org/u/xMosh)\
**Replies:** 2\
**Last updated:** [January 26, 2024, 1:50pm UTC](https://discourse.threejs.org/t/reduce-the-size-of-hdr-files/60755 "2024-01-26T13:50:20Z")

</div>

Hi folks, kinda new here Soo…i’ve been playing around with three.js path tracer renderer and image based lighting. Currently the .HDR files i’m lighting my scenes with are over 5mb big for a 2048px x 1024px environmen…

---

## [UltraHDR & Three](https://discourse.threejs.org/t/ultrahdr-three/60548)

<div class="topic-metadata">

**Author:** [@user123](https://discourse.threejs.org/u/user123)\
**Replies:** 1\
**Last updated:** [January 21, 2024, 11:58am UTC](https://discourse.threejs.org/t/ultrahdr-three/60548 "2024-01-21T11:58:02Z")

</div>

I just saw that model viewer now uses ultraHDR. I had never heard of it, but its sounds pretty fantastic. Does anyone have experience with it? Pros/Cons? I currently use RGBELoader and PMREMGenerator. Is this somethin…

---

## [Scene enviroment set hdr file use TextureLoader](https://discourse.threejs.org/t/scene-enviroment-set-hdr-file-use-textureloader/58117)

<div class="topic-metadata">

**Author:** [@jonghyeok](https://discourse.threejs.org/u/jonghyeok)\
**Replies:** 2\
**Last updated:** [November 27, 2023, 7:34am UTC](https://discourse.threejs.org/t/scene-enviroment-set-hdr-file-use-textureloader/58117 "2023-11-27T07:34:50Z")

</div>

i want set scene enviroment use hdr file but hdr file load only RGBELoader if i use RGBELoader data type is Uint16Array but i want change data type is img cause i want use url data so i try hdr file load use TextureLoa…

---

## [Why does iOS often report an error when loading HDR?](https://discourse.threejs.org/t/why-does-ios-often-report-an-error-when-loading-hdr/54116)

<div class="topic-metadata">

**Author:** [@superTigery](https://discourse.threejs.org/u/superTigery)\
**Replies:** 10\
**Last updated:** [September 7, 2023, 5:02am UTC](https://discourse.threejs.org/t/why-does-ios-often-report-an-error-when-loading-hdr/54116 "2023-09-07T05:02:39Z")

</div>

Why does ios often report an error when loading hdr? It doesn’t always come up, but it’s a really hard problem to solve。 And my code:

---

## [HDR 3D Histogram / Inspector](https://discourse.threejs.org/t/hdr-3d-histogram-inspector/55238)

<div class="topic-metadata">

**Author:** [@abgrac](https://discourse.threejs.org/u/abgrac)\
**Replies:** 1\
**Last updated:** [August 24, 2023, 5:41pm UTC](https://discourse.threejs.org/t/hdr-3d-histogram-inspector/55238 "2023-08-24T17:41:01Z")

</div>

Hi all, It’s not unusual to receive converted, clamped, or even plain SDR files encoded as HDR from our clients. I’ve built a simple tool for people to inspect HDR files before sending them over to production, hopefully…

---

## [Environment HDR map dont load on some devices](https://discourse.threejs.org/t/environment-hdr-map-dont-load-on-some-devices/53698)

<div class="topic-metadata">

**Author:** [@Ashish\_Boora](https://discourse.threejs.org/u/Ashish_Boora)\
**Replies:** 1\
**Last updated:** [July 10, 2023, 6:08pm UTC](https://discourse.threejs.org/t/environment-hdr-map-dont-load-on-some-devices/53698 "2023-07-10T18:08:59Z")

</div>

I have this app in r3f, https://danitest3d.netlify.app/ The environment map is not loading on some devices and for some, it works perfectly fine. The devices are random not based on platform, few devices include Android…

---

## [Remove background hdr on AR](https://discourse.threejs.org/t/remove-background-hdr-on-ar/50093)

<div class="topic-metadata">

**Author:** [@T\_t\_Tit](https://discourse.threejs.org/u/T_t_Tit)\
**Replies:** 1\
**Last updated:** [April 8, 2023, 8:15am UTC](https://discourse.threejs.org/t/remove-background-hdr-on-ar/50093 "2023-04-08T08:15:25Z")

</div>

I load model.glb and hdr file to show on website. But when use AR to view on mobile, I want space real instead background hdr. How to remove background hdr when view on AR? renderer = new THREE.WebGLRenderer({ antiali…

---

## [Need help with scene.environment + physicallyCorrectLights. How to get texture lighting on meshes?](https://discourse.threejs.org/t/need-help-with-scene-environment-physicallycorrectlights-how-to-get-texture-lighting-on-meshes/49714)

<div class="topic-metadata">

**Author:** [@uvfauna](https://discourse.threejs.org/u/uvfauna)\
**Replies:** 1\
**Last updated:** [March 28, 2023, 4:58pm UTC](https://discourse.threejs.org/t/need-help-with-scene-environment-physicallycorrectlights-how-to-get-texture-lighting-on-meshes/49714 "2023-03-28T16:58:04Z")

</div>

Hi there! I need to recreate this blender scene in three-js but I’m having a difficult time. As you can see in Blender there is a hdr texture for the “world” selected and it influences the way the objects in the scene …

---

## [Tone-mapping options for .HDR image in r147?](https://discourse.threejs.org/t/tone-mapping-options-for-hdr-image-in-r147/45719)

<div class="topic-metadata">

**Author:** [@whycobb](https://discourse.threejs.org/u/whycobb)\
**Replies:** 1\
**Last updated:** [December 13, 2022, 4:12pm UTC](https://discourse.threejs.org/t/tone-mapping-options-for-hdr-image-in-r147/45719 "2022-12-13T16:12:49Z")

</div>

I create equirectangular .hdr images in Maya for use as environment maps in ThreeJS. These allow me to create complex lighting and match its appearance exactly in ThreeJS. I’m migrating from r129 to r147, and my textures…

---

## [Animated HDRI / env maps possible?](https://discourse.threejs.org/t/animated-hdri-env-maps-possible/40444)

<div class="topic-metadata">

**Author:** [@FackJox](https://discourse.threejs.org/u/FackJox)\
**Replies:** 4\
**Last updated:** [November 4, 2022, 9:47pm UTC](https://discourse.threejs.org/t/animated-hdri-env-maps-possible/40444 "2022-11-04T21:47:34Z")

</div>

Hello, I would like to make an animate HDRI / env map if possible? Something like a firework display or sunset of which the movement/animated can be seen in my scene’s reflections. I know this is possible in 3D modelli…

---

## [HDR file and webpack build](https://discourse.threejs.org/t/hdr-file-and-webpack-build/43963)

<div class="topic-metadata">

**Author:** [@Tian\_Breznik](https://discourse.threejs.org/u/Tian_Breznik)\
**Replies:** 6\
**Last updated:** [October 26, 2022, 1:40pm UTC](https://discourse.threejs.org/t/hdr-file-and-webpack-build/43963 "2022-10-26T13:40:06Z")

</div>

Hi! I am working on working a website, where the memories of my previous flat and flatmates can live on in the digital. This website includes a beautiful .hdr image of a landscape sitting in the “background”. I am usin…

---

## [Wrongfully flipped HDR Texture](https://discourse.threejs.org/t/wrongfully-flipped-hdr-texture/43316)

<div class="topic-metadata">

**Author:** [@Kemura](https://discourse.threejs.org/u/Kemura)\
**Replies:** 6\
**Last updated:** [October 7, 2022, 8:09am UTC](https://discourse.threejs.org/t/wrongfully-flipped-hdr-texture/43316 "2022-10-07T08:09:59Z")

</div>

I’m loading in a hrd texture into my project using a rgbeLoader but for some reason the textures reflection gets flipped. Notice how the sun is the background but still manages to reflect of the glass on the backside…

---

## [HDR Texture does not load in as a equirectangular map](https://discourse.threejs.org/t/hdr-texture-does-not-load-in-as-a-equirectangular-map/42563)

<div class="topic-metadata">

**Author:** [@Kemura](https://discourse.threejs.org/u/Kemura)\
**Replies:** 3\
**Last updated:** [September 15, 2022, 4:29pm UTC](https://discourse.threejs.org/t/hdr-texture-does-not-load-in-as-a-equirectangular-map/42563 "2022-09-15T16:29:53Z")

</div>

I’m following the markup code from webgl\_loader\_gltf.html in order to recreate the same map in my own project. The HDR image does not get split up into a cube as it should, rather it gets displayed as a texture that cove…

---

## [How to import hdr files in vite?](https://discourse.threejs.org/t/how-to-import-hdr-files-in-vite/40096)

<div class="topic-metadata">

**Author:** [@PrakharGupta36](https://discourse.threejs.org/u/PrakharGupta36)\
**Replies:** 2\
**Last updated:** [July 7, 2022, 8:25pm UTC](https://discourse.threejs.org/t/how-to-import-hdr-files-in-vite/40096 "2022-07-07T20:25:05Z")

</div>

Here is a snapshot of the code When I build using npm run dev it doesn’t create the hdr file because it’s not imported, does anyone know how I can change vite.config.js

[Next page](https://discourse.threejs.org/tag/hdr/43.md?match_all_tags=true&page=1&tags%5B%5D=hdr)