我是 Three.js 的新手。我一直在通过尝试制作简单的场景并了解官方示例的工作原理来学习 Three.js。
最近我一直在看https://trijs.org/examples/?q=trans#webgl_materials_physical_transmission https://threejs.org/examples/?q=trans#webgl_materials_physical_transmission，我无法理解代码需要使用的确切原因是什么renderer.outputEncoding = THREE.sRGBEncoding这里。在更简单的场景中，例如将 JPG 作为纹理加载到立方体上，JPG 图像看起来就很好，无需在渲染器上设置 outputEncoding。
我尝试用谷歌搜索类似的主题，例如伽玛校正 https://www.cambridgeincolour.com/tutorials/gamma-correction.htm，以及诸如人们所说的大多数在线图像都是在 sRGB 色彩空间中进行伽玛编码的内容。但我自己无法连接所有的点......如果有人能向我清楚地解释这一点，我将不胜感激。
如果你不碰renderer.outputEncoding，这意味着您在应用程序中不使用色彩空间工作流程。引擎假设所有输入颜色值都位于线性空间中。并且每个片段的最终颜色值不会转换到输出颜色空间。
由于不同的原因，这种工作流程存在问题。原因之一是您的 JPG 纹理很可能是 sRGB 编码的，以及许多其他纹理。为了在片段着色器中计算正确的颜色，重要的是所有输入颜色值都转换为相同的颜色空间（即线性颜色空间）。如果您不关心色彩空间，很快就会得到错误的输出颜色。
对于简单的应用程序来说，这个细节通常并不重要，因为最终的图像“看起来不错”。但是，根据您在应用程序中执行的操作（例如导入 glTF 资源时），正确的色彩空间工作流程是必需的。
通过设置renderer.outputEncoding = THREE.sRGBEncoding您告诉渲染器将片段着色器中的最终颜色值从线性颜色空间转换为 sRGB 颜色空间。因此，您还必须告诉渲染器纹理何时保存 sRGB 编码数据。您可以通过分配来做到这一点THREE.sRGBEncoding to the encoding纹理的属性。THREE.GLTFLoader对所有颜色纹理自动执行此操作。但是当手动加载纹理时，你必须自己完成此操作。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
