Tone mapping and Postprocessing

Questions
1

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?

2

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

3

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

image
image.jpg1013×855 212 KB

And here is without the Bloom Pass:

image
image.jpg1002×850 359 KB

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.

4

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!

5

Updated link to the same example (source code.)

6

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

7

Yep, you can apply tonemapping either directly or via some postprocessing (if you’re not using any other postprocessing effects, applying it directly is just simpler.)

8

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!

9

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 for a code example.

10

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

  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!

11

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

1 Like
12

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

1 Like