# Understanding the HDR option for DefaultRenderingPipeline

**URL:** <https://forum.babylonjs.com/t/understanding-the-hdr-option-for-defaultrenderingpipeline/7325>\
**Category:** Questions\
**Tags:** documentation\
**Created:** [December 2, 2019, 10:03am UTC](https://forum.babylonjs.com/t/understanding-the-hdr-option-for-defaultrenderingpipeline/7325 "2019-12-02T10:03:11Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vinc3r](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vinc3r/32/25340_2.png) [@Vinc3r](https://forum.babylonjs.com/u/Vinc3r)\
**Post date:** [December 2, 2019, 10:03am UTC](https://forum.babylonjs.com/t/understanding-the-hdr-option-for-defaultrenderingpipeline/7325/1 "2019-12-02T10:03:11Z")

</div>

In the DefaultRenderingPipeline [constructor](https://doc.babylonjs.com/api/classes/babylon.defaultrenderingpipeline#constructor) we have an optionnal hdr property, which is `true` by default. I often turn it to `false`, to get my raw RGB value for my background, example:

![hdr](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/3/3eea391c68ccc91ebc31eff7196929e0cc8e70f7.gif)

As you can see, nothing change on my 3D materials (playground available: [hdr on](https://www.babylonjs-playground.com/#ECI2Q0#16), [hdr off](https://www.babylonjs-playground.com/#ECI2Q0#17), line 28, results are the same when in standard materials [[on](https://www.babylonjs-playground.com/#4AJ16M#190) - [off](https://www.babylonjs-playground.com/#4AJ16M#191)]).

And for now, all we have in the documentation about this property is `Do you want HDR textures?` and `If high dynamic range textures should be used (default: true)` from the API, and I think this should be clarified (I will make the PR ;)) : on which kind of textures/properties this HDR value is applied exactly?

My guesses:

- backgroundMaterials
- scene environmentTexture when in PBR? (but it seems not, because why my materials rendering doesn’t change?)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [December 2, 2019, 12:08pm UTC](https://forum.babylonjs.com/t/understanding-the-hdr-option-for-defaultrenderingpipeline/7325/2 "2019-12-02T12:08:00Z")

</div>

After looking at the sources, what does `hdr = true`:

- First note that `hdr` is set back to `false` if your GPU does not support one of the half float or float texture type (meaning `hdr` remains `true` only if the GPU supports at least half float or float textures)
- [EDIT] Forgot to say that if `hdr` remains `true`, texture types used by the post process effects are half float textures if supported, else float textures
- The image processing post process is done after bloom and before sharpen and is not applied on a per mesh basis as it is by default

That’s the only things I noticed…

---

<div class="post-metadata">

**Author:** ![Vinc3r](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vinc3r/32/25340_2.png) [@Vinc3r](https://forum.babylonjs.com/u/Vinc3r)\
**Post date:** [December 2, 2019, 12:59pm UTC](https://forum.babylonjs.com/t/understanding-the-hdr-option-for-defaultrenderingpipeline/7325/3 "2019-12-02T12:59:13Z")

</div>

Nice spots, it’s already useful information to add to the doc.  
So in short, this hdr value only apply on the post-process texture used by the pipeline that’s it?

('will also wait for Deltakosh, sebavan or trevor feedbacks, who are the [code contributors](https://github.com/BabylonJS/Babylon.js/blob/master/src/PostProcesses/RenderPipeline/Pipelines/defaultRenderingPipeline.ts))

---

<div class="post-metadata">

**Author:** ![Vinc3r](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vinc3r/32/25340_2.png) [@Vinc3r](https://forum.babylonjs.com/u/Vinc3r)\
**Post date:** [December 2, 2019, 1:35pm UTC](https://forum.babylonjs.com/t/understanding-the-hdr-option-for-defaultrenderingpipeline/7325/4 "2019-12-02T13:35:27Z")

</div>

I just had another issue (imageProcessing not applied on background layer, and so the vignette [[hdr on](https://www.babylonjs-playground.com/#08A2BS#14) - [hdr off](https://www.babylonjs-playground.com/#08A2BS#13)]), and these points have also to be saved into the doc’ IMO:

> [@Why "imageProcessingEnabled" only change the background color?](https://forum.babylonjs.com/t/why-imageprocessingenabled-only-change-the-background-color/3677/2):
>
> Hey, from checking the code it looks like HDR makes a difference because when HDR is not enabled the image processing is done in a post process after everything is rendered costing another render pass. When HDR is enabled, image processing is performed during rendering of materials (to avoid the final renderpass) and typically an HDR background material will be used for the skybox making everything work however when you don’t have a skybox the clear color will be applied directly which is drawn …

> [@Why "imageProcessingEnabled" only change the background color?](https://forum.babylonjs.com/t/why-imageprocessingenabled-only-change-the-background-color/3677/3):
>
> The main reason being hdr should almost be only a cheap fallback for low end devices. By default it should be turned on as long as possible.

---

<div class="post-metadata">

**Author:** ![Vinc3r](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vinc3r/32/25340_2.png) [@Vinc3r](https://forum.babylonjs.com/u/Vinc3r)\
**Post date:** [December 2, 2019, 1:40pm UTC](https://forum.babylonjs.com/t/understanding-the-hdr-option-for-defaultrenderingpipeline/7325/5 "2019-12-02T13:40:05Z")

</div>

And by the way ^^

> [@Why "imageProcessingEnabled" only change the background color?](https://forum.babylonjs.com/t/why-imageprocessingenabled-only-change-the-background-color/3677/5):
>
> Yes turning it off should not have impact on anything else than the Clear color. That said if you rely on other effects like bloom it would impact as well cause bloom needs to have an hdr input to work accurately. Basically the values over 1 would ge the one spreading around and without hdr you can not reach those kind of values.

---

<div class="post-metadata">

**Author:** ![Vinc3r](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vinc3r/32/25340_2.png) [@Vinc3r](https://forum.babylonjs.com/u/Vinc3r)\
**Post date:** [December 2, 2019, 2:41pm UTC](https://forum.babylonjs.com/t/understanding-the-hdr-option-for-defaultrenderingpipeline/7325/6 "2019-12-02T14:41:24Z")

</div>

OK so after some tries I haven’t find a way to use a BABYLON.Layer as background without having it “gammaized” (or linearized?) :’( (cf [https://www.babylonjs-playground.com/#ECI2Q0#16](https://www.babylonjs-playground.com/#ECI2Q0#16)).

And it seems that doing the trick by settings scene.clearColor transparent, and simply using CSS to set a background works well… but not on iOS (scene clear… isn’t cleared on our devices)

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [December 2, 2019, 3:57pm UTC](https://forum.babylonjs.com/t/understanding-the-hdr-option-for-defaultrenderingpipeline/7325/7 "2019-12-02T15:57:27Z")

</div>

The Layer uses this shader:

> <https://github.com/BabylonJS/Babylon.js/blob/master/src/Shaders/layer.fragment.fx>

It is fast but does not take in account Gamma or linear  
The idea could be to simply add":

```auto
#ifdef LINEAR
		color = toGammaSpace(color);
	#endif

```

And jsut set the LINEAR define from the texture linear info

---

<div class="post-metadata">

**Author:** ![Vinc3r](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vinc3r/32/25340_2.png) [@Vinc3r](https://forum.babylonjs.com/u/Vinc3r)\
**Post date:** [December 2, 2019, 4:19pm UTC](https://forum.babylonjs.com/t/understanding-the-hdr-option-for-defaultrenderingpipeline/7325/8 "2019-12-02T16:19:00Z")

</div>

That’s could be great!

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [December 2, 2019, 4:23pm UTC](https://forum.babylonjs.com/t/understanding-the-hdr-option-for-defaultrenderingpipeline/7325/9 "2019-12-02T16:23:41Z")

</div>

fancy doing a PR? Or maybe @Evgeni_Popov?

---

<div class="post-metadata">

**Author:** ![Vinc3r](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vinc3r/32/25340_2.png) [@Vinc3r](https://forum.babylonjs.com/u/Vinc3r)\
**Post date:** [December 2, 2019, 4:24pm UTC](https://forum.babylonjs.com/t/understanding-the-hdr-option-for-defaultrenderingpipeline/7325/10 "2019-12-02T16:24:48Z")

</div>

I will do the PR about the documentation for HDR property, but I’m scared about the shader 😃

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [December 2, 2019, 4:27pm UTC](https://forum.babylonjs.com/t/understanding-the-hdr-option-for-defaultrenderingpipeline/7325/11 "2019-12-02T16:27:22Z")

</div>

It is a good exercise 🙂

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [December 2, 2019, 5:31pm UTC](https://forum.babylonjs.com/t/understanding-the-hdr-option-for-defaultrenderingpipeline/7325/12 "2019-12-02T17:31:02Z")

</div>

> [@Vinc3r](#):
>
> Hey, from checking the code it looks like HDR makes a difference because when HDR is not enabled the image processing is done in a post process after everything is rendered costing another render pass. When HDR is enabled, image processing is performed during rendering of materials (to avoid the final renderpass) and typically an HDR background material will be used for the skybox making everything work however when you don’t have a skybox the clear color will be applied directly which is drawn …

For me it’s the other way around, when HDR is enabled image processing is performed in a post process in another render pass, whereas if it is disabled it is performed during rendering of meshes

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [December 2, 2019, 5:34pm UTC](https://forum.babylonjs.com/t/understanding-the-hdr-option-for-defaultrenderingpipeline/7325/13 "2019-12-02T17:34:00Z")

</div>

> [@Deltakosh](#):
>
> It is a good exercise 🙂

Then I will let @Vinc3r do it, as I have already worked on shader related code ;).

Also, I’m working on something else that I would like to finish before the holidays, so trying to stay focus!

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [December 2, 2019, 5:35pm UTC](https://forum.babylonjs.com/t/understanding-the-hdr-option-for-defaultrenderingpipeline/7325/14 "2019-12-02T17:35:03Z")

</div>

I can do it @Vinc3r so do not feel any pressure;)

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [December 2, 2019, 5:36pm UTC](https://forum.babylonjs.com/t/understanding-the-hdr-option-for-defaultrenderingpipeline/7325/15 "2019-12-02T17:36:11Z")

</div>

Well actually I will do it and show you so next time you will be able to do it 😉

---

<div class="post-metadata">

**Author:** ![Vinc3r](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vinc3r/32/25340_2.png) [@Vinc3r](https://forum.babylonjs.com/u/Vinc3r)\
**Post date:** [December 2, 2019, 6:26pm UTC](https://forum.babylonjs.com/t/understanding-the-hdr-option-for-defaultrenderingpipeline/7325/16 "2019-12-02T18:26:13Z")

</div>

Ahah ok.  
It’s just that for the documentation, I’m now used to grunt build & serve, so I’m able to know if I broked something, but I never tried to check if my Babylon fork is broke after a change (all I have done in /src/ is just for API comments for now, so that’s safe).

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [December 2, 2019, 6:31pm UTC](https://forum.babylonjs.com/t/understanding-the-hdr-option-for-defaultrenderingpipeline/7325/17 "2019-12-02T18:31:35Z")

</div>

ok will be in next nightly (you will have to flag the texture used with the layer with `texture.gammaSpace = false`

---

<div class="post-metadata">

**Author:** ![Vinc3r](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vinc3r/32/25340_2.png) [@Vinc3r](https://forum.babylonjs.com/u/Vinc3r)\
**Post date:** [December 3, 2019, 2:04pm UTC](https://forum.babylonjs.com/t/understanding-the-hdr-option-for-defaultrenderingpipeline/7325/18 "2019-12-03T14:04:25Z")

</div>

So here my modifications:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/8/8d043372bc8311dd0ffa4e46f322cbf85ec0ecce.png)

([current version](https://doc.babylonjs.com/how_to/using_default_rendering_pipeline#introduction))

have I missing something or misunderstanding a point?

(edit: notice I wrote `to use HDR texture?` instead of `to use HDR textures?`, is it wrong?)

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [December 3, 2019, 3:39pm UTC](https://forum.babylonjs.com/t/understanding-the-hdr-option-for-defaultrenderingpipeline/7325/19 "2019-12-03T15:39:10Z")

</div>

Seems perfect to me!

---

<div class="post-metadata">

**Author:** ![Vinc3r](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vinc3r/32/25340_2.png) [@Vinc3r](https://forum.babylonjs.com/u/Vinc3r)\
**Post date:** [December 3, 2019, 3:55pm UTC](https://forum.babylonjs.com/t/understanding-the-hdr-option-for-defaultrenderingpipeline/7325/20 "2019-12-03T15:55:10Z")

</div>

So, PR on its way! 🙂