三.js Gamma 校正和自定义着色器

Question

我不太确定 THREE.js 如何在内部处理 Gamma 校正。
似乎要启用它，您唯一要做的就是在渲染器对象上设置以下标志:

Gamma 输入 = 真；
Gamma 输出 = 真；

但是，当您编写自己的自定义着色器并从纹理中获取颜色时，您是否仍然需要将颜色转换为线性空间或在将纹理上传到 GPU 之前进行 THREE.js 转换(当 gammaInput 设置为 true 时) ?

同样，在确定着色器中的最终颜色时，是否必须将其转换为 Gamma 空间，或者是否存在 THREE.js 自动应用的后期处理效果(当 gammaOutput 设置为 true 时)？

谢谢

Answer 1

Three.js 不会将你的纹理映射到另一个空间 在上传到 GPU 之前 .一切都使用块在着色器中就地完成。

将输入值转换为线性:

举个例子，看看 Three.js 如何处理 map属性(property)here .你基本上会看到这一行:

texelColor = mapTexelToLinear( texelColor );

和 mapTexelToLinear基本上是在 WebGLProgram.js file中创建的.

你明白了。

综上所述，基本上可以包含 this chunk在着色器的顶部:

#include <encodings_pars_fragment>

然后你需要根据你的纹理所在的空间解码你的纹素。 例如，如果你使用 sRGB 纹理:

vec4 color = sRGBToLinear(texel);

输出 Gamma 校正值:

您还需要包括 encodings_pars_fragment在着色器的顶部:

#include <encodings_pars_fragment>

然后，您需要包含自动修改碎片颜色的块。看看 this line .

通过包含块 encodings_fragment在您的自定义着色器结束时，它会根据您在 THREE.WebGLRenderer 上使用的参数自动映射您的片段。 .

要了解这项工作的原因，您可以查看 encodings chunk ，仅包含:

gl_FragColor = linearToOutputTexel( gl_FragColor );

然后你可以看看 WebGLProgram.js file了解如何 linearToOutputText功能有效。这与 texel 解码的工作方式基本相同。

希望这是有用的!