Tone mapping change toneMapping type


I using tone mapping in react-three-fiber, I wonder if is possible to access the tonemapping trypes:

Linear: THREE.LinearToneMapping,
Reinhard: THREE.ReinhardToneMapping,
Cineon: THREE.CineonToneMapping,
ACESFilmic: THREE.ACESFilmicToneMapping,


At the moment, R3F’s Canvas component doesn’t expose these options. You’ll have to access THREE.WebGLRenderer directly and set them. Perhaps there’s a more elegant way, but one option would be:

function ToneMapping() {
  const { gl, scene } = useThree(({ gl, scene }) => ({ gl, scene }));
  useEffect(() => {
    gl.toneMapping = THREE.ACESFilmicToneMapping;
    gl.toneMappingExposure = 1.5;
    scene.traverse((object) => {
      if (object.material) {
        object.material.needsUpdate = true;
  }, [gl, scene]);
  return <></>;

export default function App() {
  return (
    <div className="App">
        <ToneMapping />o
          <sphereBufferGeometry />
          <meshPhongMaterial />
        <ambientLight args={[0xff0000]} intensity={0.1} />
        <directionalLight position={[0, 0, 5]} intensity={0.5} />

@drcmda FWIW I suggested the following property names to the Threlte team, both for supporting other tone mapping methods, and to support wide-gamut display output in the future. Possibly worth considering in a future major release of R3F:

  colorSpace={"srgb" | THREE.SRGBColorSpace | ...}

gl is defined like this

type GLProps =
  | Renderer
  | ((canvas: Canvas) => Renderer)
  | Partial<Properties<THREE.WebGLRenderer> | THREE.WebGLRendererParameters>
  | undefined

that means it can accept everything the running instance will take, not just ctor args. this runs before render, so no needsUpdate … needed. :slight_smile:

<Canvas gl={{ 
  outputEncoding: THREE.sRGBEncoding,
  toneMapping: THREE.ACESFilmicToneMapping

also possible

<Canvas onCreated={(state) => { = THREE.sRGBEncoding, = THREE.ACESFilmicToneMapping

we could add better shortcuts in v9 though. “shadows” already uses strings to set the shadow map quickly, why not do it for encoding and tonemapping.

1 Like