renderOutput
As the final step in the fragment shader, it's responsible for converting the internally calculated HDR linear colors into the final LDR colors that can be correctly displayed on a monitor, by applying tone mapping and color space correction. It's the critical bridge between rendering calculations and the final visual presentation.
Core Advantages
Its core value is its seamless integration with the Three.js renderer. It automatically applies the global `toneMapping` and `outputColorSpace` settings, ensuring that custom TSL materials remain visually consistent with other standard materials in the scene, thus unifying the entire project's color pipeline and greatly simplifying the development process.
Common Uses
Playing the "final output" role in a PBR workflow to process the final lighting results.
Acting as a "color pipeline compliance officer" in stylized rendering to ensure non-realistic colors integrate correctly into the scene's environment.
Serving as a "diagnostic tool" to inspect raw HDR values by temporarily disabling tone mapping, useful for debugging lighting and bloom effects.
How to adjust
Primarily adjusted by changing the `renderer.toneMapping` property in JavaScript. For instance, switching from the default `NoToneMapping` to `ACESFilmicToneMapping` dramatically enhances the cinematic quality and realism by preventing blown-out highlights. Likewise, ensuring the `renderer.outputColorSpace` is set correctly (usually to `SRGBColorSpace`) is crucial to avoid a dark, color-distorted image.
Code Examples
1 // Pass the final calculated color to renderOutput for final processing
2 // It automatically applies the global tone mapping and color space configurations set on the renderer
3 const finalScreenColor = renderOutput( myFinalLinearColor );