什么时候需要使用 renderer.outputEncoding = THREE.sRGBEncoding

Question

我是 Three.js 的新手。我一直在通过尝试制作简单的场景并了解官方示例的工作原理来学习 Three.js。

最近我一直在查看https://trijs.org/examples/?q=trans#webgl_materials_physical_transmission，我无法理解代码需要renderer.outputEncoding = THREE.sRGBEncoding在这里使用的确切原因是什么。在更简单的场景中，例如将 JPG 作为立方体上的纹理加载，JPG 图像看起来就很好，无需在渲染器上设置 outputEncoding。

我尝试在谷歌上搜索类似的主题，例如伽玛校正，以及人们说大多数在线图像都是在 sRGB 色彩空间中进行伽玛编码的东西。但我自己无法连接所有的点......如果有人能向我清楚地解释这一点，我将不胜感激。

Answer 1

如果您不触摸renderer.outputEncoding，则意味着您的应用程序中不使用色彩空间工作流程。引擎假设所有输入颜色值都位于线性空间中。并且每个片段的最终颜色值不会转换到输出颜色空间。

由于不同的原因，这种工作流程存在问题。原因之一是您的 JPG 纹理很可能是 sRGB 编码的，以及许多其他纹理。为了在片段着色器中计算正确的颜色，重要的是所有输入颜色值都转换为相同的颜色空间（即线性颜色空间）。如果您不关心色彩空间，很快就会得到错误的输出颜色。

对于简单的应用程序来说，这个细节通常并不重要，因为最终的图像“看起来不错”。但是，根据您在应用程序中执行的操作（例如导入 glTF 资源时），正确的色彩空间工作流程是必需的。

通过设置，renderer.outputEncoding = THREE.sRGBEncoding您可以告诉渲染器将片段着色器中的最终颜色值从线性转换为 sRGB 颜色空间。因此，您还必须告诉渲染器纹理何时保存 sRGB 编码数据。您可以通过分配纹理的属性来完成此THREE.sRGBEncoding操作encoding。THREE.GLTFLoader对所有颜色纹理自动执行此操作。但手动加载纹理时，您必须自己完成此操作。