# Tone mapping and Postprocessing

**URL:** <https://discourse.threejs.org/t/tone-mapping-and-postprocessing/9868>\
**Category:** Questions\
**Tags:** post-processing\
**Created:** [September 25, 2019, 2:51pm UTC](https://discourse.threejs.org/t/tone-mapping-and-postprocessing/9868 "2019-09-25T14:51:39Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fedor\_van\_Eldijk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fedor_van_eldijk/32/6960_2.png) [@Fedor\_van\_Eldijk](https://discourse.threejs.org/u/Fedor_van_Eldijk)\
**Post date:** [September 25, 2019, 2:51pm UTC](https://discourse.threejs.org/t/tone-mapping-and-postprocessing/9868/1 "2019-09-25T14:51:39Z")

</div>

Has anyone any experience with using the inline Tone mapping feature of the WebGL renderer in combination with a postprocessing stack?

Does it work? Do I need to considder settings?

Or is there a toneMapping postprocessor and where can I find an example of it being used?

Does anyone have a good manual on using the postprocessor composer?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 25, 2019, 4:32pm UTC](https://discourse.threejs.org/t/tone-mapping-and-postprocessing/9868/2 "2019-09-25T16:32:48Z")

</div>

> [@Fedor\_van\_Eldijk](#):
>
> Or is there a toneMapping postprocessor and where can I find an example of it being used?

Tone mapping is usually one of the last operations during rendering. When you use post-processing, you have to perform tone mapping with post-processing, too. Check out the following example to see this approach in action:

[https://threejs.org/examples/webgl\_shaders\_tonemapping](https://threejs.org/examples/webgl_shaders_tonemapping)

---

<div class="post-metadata">

**Author:** ![Fedor\_van\_Eldijk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fedor_van_eldijk/32/6960_2.png) [@Fedor\_van\_Eldijk](https://discourse.threejs.org/u/Fedor_van_Eldijk)\
**Post date:** [September 25, 2019, 7:11pm UTC](https://discourse.threejs.org/t/tone-mapping-and-postprocessing/9868/3 "2019-09-25T19:11:20Z")

</div>

Thanks, I think I am allmost there… however I can not get the BloomPass right, yet. It turns my screen blue and vague.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/1/190e936f5b1e31da38f55db4d58cd3da3e608fd0.jpeg)

And here is without the Bloom Pass:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/a/acf60d8ee7c0836b69ee3e280f868802d6acd8db.jpeg)

I found BloomPass has four arguments, strength, kernel size, sigma and resolution, but I have not found the settings that make the scene less blurry and a bit more towards the original colors.

---

<div class="post-metadata">

**Author:** ![new](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/new/32/25580_2.png) [@new](https://discourse.threejs.org/u/new)\
**Post date:** [January 23, 2024, 3:50am UTC](https://discourse.threejs.org/t/tone-mapping-and-postprocessing/9868/4 "2024-01-23T03:50:23Z")

</div>

Hi @Mugen87,

It seems the example you were referring is not available. Could you please point me to the place where I can learn how to properly apply the tone mapping with EffectComposer?

Thanks!

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [January 23, 2024, 4:25am UTC](https://discourse.threejs.org/t/tone-mapping-and-postprocessing/9868/5 "2024-01-23T04:25:01Z")

</div>

[Updated link](https://threejs.org/examples/?q=tone#webgl_tonemapping) to the same example ([source code](https://github.com/mrdoob/three.js/blob/02d4c5aa091ea8b6137db5bf1ad38819308246e3/examples/webgl_tonemapping.html).)

---

<div class="post-metadata">

**Author:** ![new](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/new/32/25580_2.png) [@new](https://discourse.threejs.org/u/new)\
**Post date:** [January 23, 2024, 4:37am UTC](https://discourse.threejs.org/t/tone-mapping-and-postprocessing/9868/6 "2024-01-23T04:37:49Z")

</div>

This example doesn’t include any post-processing. Does it mean that the logic is the same? Thanks!

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [January 23, 2024, 4:43am UTC](https://discourse.threejs.org/t/tone-mapping-and-postprocessing/9868/7 "2024-01-23T04:43:10Z")

</div>

Yep, you can apply tonemapping either [directly](https://threejs.org/docs/index.html?q=rendere#api/en/renderers/WebGLRenderer.toneMapping) or via [some postprocessing](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ToneMappingEffect.js~ToneMappingEffect.html) (if you’re not using any other postprocessing effects, applying it directly is just simpler.)

---

<div class="post-metadata">

**Author:** ![new](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/new/32/25580_2.png) [@new](https://discourse.threejs.org/u/new)\
**Post date:** [January 23, 2024, 4:49am UTC](https://discourse.threejs.org/t/tone-mapping-and-postprocessing/9868/8 "2024-01-23T04:49:23Z")

</div>

Hmmm… It seems I am doing something wrong since it has no effect on the rendering results in my case. It looks like something overrides it. Thank you, I will keep digging.

By the way, I am not using `pmndrs`, I use EffectComposer instead with other effects. I believe the way to do it should be the same, right?

PS: Maybe you can suggest where I can find some examples of how to tune color management to be as close as possible to Blender? Thanks!

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 23, 2024, 9:26am UTC](https://discourse.threejs.org/t/tone-mapping-and-postprocessing/9868/9 "2024-01-23T09:26:08Z")

</div>

The previous example `webgl_shaders_tonemapping` has been removed.

Since last summer, parts of the post processing classes have been refreshed. The idea is to use `OutputPass` and the end of your pass chain. It does color space conversion and tone mapping based on your renderer settings. Check out the setup in [webgl\_postprocessing\_unreal\_bloom](https://threejs.org/examples/webgl_postprocessing_unreal_bloom) for a code example.

---

<div class="post-metadata">

**Author:** ![new](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/new/32/25580_2.png) [@new](https://discourse.threejs.org/u/new)\
**Post date:** [January 23, 2024, 3:15pm UTC](https://discourse.threejs.org/t/tone-mapping-and-postprocessing/9868/10 "2024-01-23T15:15:16Z")

</div>

@Mugen87 Thanks a lot for the example and explanation!  
It seems I am doing the same stuff, but for some reason `toneMappingExposure` doesn’t have any effect in my case. The only thing that has effect similar to the exposure is when I change `envMapIntensity` for the gltf materials.

Here is how I create the renderer:

```javascript
  const renderer = new WebGLRenderer({
    canvas,
    antialias: false,
    alpha: true,
  });

  renderer.outputColorSpace = SRGBColorSpace;
  renderer.toneMapping = ACESFilmicToneMapping;
  renderer.toneMappingExposure = 1;
  renderer.setClearColor(0x000000, 0);

  // Setting max to 2 due to performance considerations.
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  renderer.setSize(canvas.offsetWidth, canvas.offsetHeight, true);

```

I do have OutputPass in the very end of my post-processing pipeline, also I am using MultisapleRenderingTarget.

Could you please suggest if there is something I should pay attention at?  
Thanks!

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 23, 2024, 4:10pm UTC](https://discourse.threejs.org/t/tone-mapping-and-postprocessing/9868/11 "2024-01-23T16:10:25Z")

</div>

> [@new](#):
>
> Could you please suggest if there is something I should pay attention at?

Probably best to demonstrate the issue with a live example (or by modifying the bloom demo). `toneMappingExposure` is definitely honored by `OutputPass`.

---

<div class="post-metadata">

**Author:** ![new](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/new/32/25580_2.png) [@new](https://discourse.threejs.org/u/new)\
**Post date:** [January 25, 2024, 3:38am UTC](https://discourse.threejs.org/t/tone-mapping-and-postprocessing/9868/12 "2024-01-25T03:38:42Z")

</div>

Apparently, I was simply overriding the exposure value later in the code… Code refactored, everything works as expected. Thank you!