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.
import { Canvas } from '@react-three/fiber'
import { ColorSpaceCorrection } from '@/components/canvas/webgpu_scene'
export const Scene = () => {
return (
<Canvas>
<ColorSpaceCorrection />
</Canvas>
)
}Implementation Reference
Sets the renderer's outputColorSpace to LinearSRGBColorSpace and disables tone mapping. Ensures correct color output for WebGPU rendering.
