Color Space Correction

A composable component that sets the renderer's outputColorSpace to LinearSRGBColorSpace and disables tone mapping.

Color Space Correction¹²¹

Color Space Correction

A composable component that sets the renderer's outputColorSpace to LinearSRGBColorSpace and disables tone mapping.

What is it?

Admittedly this is a workaround for a bug in Three.js, but it can be useful to see how different Canvas parameters are set in React Three Fiber (R3F).

Currently (as of Three.js 0.177.0), using flat and linear together will result in an error with the renderer. Using either of them on their own is fine, however.

What this does, is set the renderer's outputColorSpace to LinearSRGBColorSpace and disables tone mapping applied automatically by the renderer. This matches the output that you'll get by default using the WebGLRenderer in Three.js.

Note that if you're using vanilla Three.js, you won't need this component - this is mainly for use in React Three Fiber (R3F) projects.

How to use it

Just drop it in to your R3F project - it does need to be a child of the Canvas component to work with the correct context.

Using the ColorSpaceCorrection component

import { Canvas } from '@react-three/fiber'
import { ColorSpaceCorrection } from '@/components/canvas/webgpu_scene'
 
export const Scene = () => {
  return (
    <Canvas>
      <ColorSpaceCorrection />
    </Canvas>
  )
}