ThreeJS BrightnessContrastShader + ACESFilmicToneMapping - strange behaviour ?

index.html

<div>
  <script type="importmap">
    {
      "imports": {
        "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
        "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
      }
    }
  </script>
  
  <div class="text">Try : 'ACESFilmicToneMapping' and change brightness/constrast for the magic !</div>
  
</div>

script.js

import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";
import { BrightnessContrastShader } from 'three/addons/shaders/BrightnessContrastShader.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

const renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

renderer.toneMapping = THREE.LinearToneMapping; 

//this.renderer.toneMappingExposure

let composer;

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(8, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set(0, 0, 100);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.update();

window.onresize = function () {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
};


init();
animate();

function init() {
  
  const wrapper = new THREE.Group();
  
  const geom = new THREE.PlaneGeometry(5, 5, 1, 1);
  
  const plane1 = new THREE.Mesh(geom, new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide }) );
  const plane2 = new THREE.Mesh(geom, new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.DoubleSide }) );
  const plane3 = new THREE.Mesh(geom, new THREE.MeshBasicMaterial({ color: 0x0000ff, side: THREE.DoubleSide }) );
  const plane4 = new THREE.Mesh(geom, new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide }) );
  const plane5 = new THREE.Mesh(geom, new THREE.MeshBasicMaterial({ color: 0x777777, side: THREE.DoubleSide }) );
  const plane6 = new THREE.Mesh(geom, new THREE.MeshBasicMaterial({ color: 0xffff00, side: THREE.DoubleSide }) );

  wrapper.add(plane1, plane2, plane3, plane4, plane5, plane6);

  plane1.position.x = -10;
  plane2.position.x = -5;
  plane3.position.x = 0;
  plane4.position.x = 5;
  plane5.position.x = 10;
  plane6.position.x = 15;

  wrapper.rotation.y = -Math.PI;

  scene.add(wrapper);

  composer = new EffectComposer(renderer);
  
  composer.addPass(new RenderPass(scene, camera));
  
  const brightnessContrastPass = new ShaderPass( BrightnessContrastShader );
  composer.addPass( brightnessContrastPass );
  
  //composer.addPass(new ShaderPass(CopyShader));
  
  const outputPass = new OutputPass();
  composer.addPass( outputPass );
  

  const gui = new GUI();

  const params = {  
    toneMapping: THREE.LinearToneMapping,
    brightness: 0,
    contrast: 0
  };
  
  const formats = {
    ACESFilmicToneMapping: THREE.ACESFilmicToneMapping,
    LinearToneMapping: THREE.LinearToneMapping,
    NoToneMapping: THREE.NoToneMapping, 
    ReinhardToneMappingl: THREE.ReinhardToneMapping
  }

  
  gui.add( params, 'toneMapping', formats ).onChange( function ( value ) {
    renderer.toneMapping = value;
  } );

  gui.add( params, 'brightness', - 1, 1 ).step( 0.01 ).onChange( function ( value ) {
    brightnessContrastPass.uniforms[ "brightness" ].value = value;
  } );
  gui.add( params, 'contrast', - 1, 1 ).step( 0.01 ).onChange( function ( value ) {
    brightnessContrastPass.uniforms[ "contrast" ].value = value;
  } );

}

function animate() {
  requestAnimationFrame(animate);
  controls.update();
  composer.render();
  // renderer.render(scene, camera);
}

style.css

body {
  margin: 0;
}

.text
{
  position: absolute;
  color: #FFF;   
  
  width: 100%;
  text-align: center;
}

threejs-brightnesscontrastshader-acesfilmictonemapping-strange-behaviour.markdown

ThreeJS BrightnessContrastShader + ACESFilmicToneMapping - strange behaviour ?

A Pen by Vincent guerin on CodePen.

License.