javascript - How to avoid background image from turning from white to grey when using toneMapping in threejs?

Question

I am using the following code from a class to initialize the renderer:

// setup renderer
        this.renderer = new THREE.WebGLRenderer( { antialias: true });
        this.renderer.setClearColor (0xffffff, 1); // set background color
        this.renderer.outputEncoding = THREE.sRGBEncoding;
        this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
        this.renderer.toneMappingExposure = 1;
        this.renderer.physicallyCorrectLights = true;

The following code adds a white image as background to the scene:

var texture11 = new THREE.TextureLoader().load("https://www.publicdomainpictures.net/pictures/30000/velka/plain-white-background.jpg");
        
        this.scene.background = texture11 ;

When using toneMapping, the white image is being rendered as grey in the scene as scene below:

How to make it render as its original color?

question from:https://stackoverflow.com/questions/65840482/how-to-avoid-background-image-from-turning-from-white-to-grey-when-using-tonemap

Answer 1

Textured backgrounds respond to tone mapping by default and there is not way to prevent this from happening without monkey-patching the shader code.

Instead of using Scene.background, you can create you own custom skybox and disabled tone mapping. Check out this code:

let camera, scene, renderer;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.z = 1;

  scene = new THREE.Scene();

  const loader = new THREE.CubeTextureLoader();
  loader.setPath('https://threejs.org/examples/textures/cube/Bridge2/');

  const cubeMap = loader.load(['posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg']);
  cubeMap.encoding = THREE.sRGBEncoding;

  //scene.background = cubeMap;

  const skybox = new THREE.Mesh(
    new THREE.BoxBufferGeometry(10, 10, 10),
    new THREE.ShaderMaterial({
      uniforms: THREE.UniformsUtils.clone(THREE.ShaderLib.cube.uniforms),
      vertexShader: THREE.ShaderLib.cube.vertexShader,
      fragmentShader: THREE.ShaderLib.cube.fragmentShader,
      depthTest: false,
      depthWrite: false,
      side: THREE.BackSide,
      toneMapped: false
    })
  );

  skybox.material.uniforms.envMap.value = cubeMap;

  Object.defineProperty(skybox.material, 'envMap', {

    get: function() {

      return this.uniforms.envMap.value;

    }

  });

  scene.add(skybox);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.outputEncoding = THREE.sRGBEncoding;
  renderer.toneMapping = THREE.ACESFilmicToneMapping;
  renderer.toneMappingExposure = 2;
  document.body.appendChild(renderer.domElement);

}

function animate() {

  requestAnimationFrame(animate);
  renderer.render(scene, camera);

}

body {
      margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script>