Strange behaviour with BrightnessContrastShader and ACESFilmicToneMapping

Questions
,
1

Hello ThreeJS community!

I use EffectComposer to get an adjustment pass for my final rendering : brightness and contrast.
I do this with examples/jsm/shaders/BrightnessContrastShader

When I use the ACESFilmicToneMapping tonemapping, with brightness < 0 or contrast > 0, it very strangely changes the colourimetry of the image (the hue, it seems).

It looks like a bug in the shaders, because I’ve already done this on older versions of Three (v0.134) and it worked fine.

For testing : https://codepen.io/Vincent_mgd/pen/OJYpNRd

I’d love to hear your opinion!
Thank you.

(I use ThreeJS v0.164.1)

Vincent

2

In three.js r153, the default render targets used in post-processing were changed from THREE.UnsignedByteType to THREE.HalfFloatType. This is in general better for rendering quality, enabling greater dynamic range in lighting and effects, because otherwise lighting data is prematurely clamped to an arbitrary [0,1] range.

However, the color grading effects predate all of that, and will need some considerable updates to support grading on open domain lighting data (before tone mapping) as opposed to a formed image (after tone mapping).

Two workarounds you may consider in the meantime. Either is fine, but choose only one.

  1. Move the BrightnessContrastShader after OutputPass. Brightness and contrast sliders will have a somewhat different response than before, but will not break the colourimetry.
  2. Use a render target that clamps [0,1], as in older versions of three.js. Example:
const renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, {
  type: THREE.UnsignedByteType,
  colorSpace: THREE.LinearSRGBColorSpace,
});
  
const composer = new EffectComposer(renderer, renderTarget);

What you’re doing now is not incorrect. There are good advantages to color grading on [0,∞] stimulus before tone mapping, and we’d like to support that, but the current color grading effects are not yet up to the task.

4 Likes
3

Thank you very much for your reply and your detailed explanations :slight_smile:
I’ve modified my codepen to include a few comments, just in case anyone wants to do some research on the subject.

1 Like