three.js中何时需要设置renderer.outputEncoding = THREE.sRGBEncoding

核心背景：色彩空间与伽马校正 #

我们日常使用的消费级显示设备（显示器、手机屏）都是非线性输出的：输入的颜色数值和人眼最终感知到的亮度不是线性对应关系，输入值约2.2次幂的结果才是实际显示的亮度。
而JPG、PNG这类常用网络图片，存储时已经默认做了sRGB伽马编码（提前将原始线性亮度做1/2.2次幂校正），刚好可以抵消显示设备的非线性偏移，所以我们直接打开这类图片时颜色显示正常。

three.js 色彩工作流逻辑 #

three.js的光照、材质计算默认在线性色彩空间完成，只有线性空间下的计算结果才符合真实物理规律，这里涉及两个关键配置：

• 纹理编码配置：Texture.encoding，如果加载的是已经做了sRGB编码的普通图片纹理，需要设置为THREE.sRGBEncoding，three.js会自动将其转回线性空间参与后续计算
• 渲染器输出编码：renderer.outputEncoding，作用是将线性空间计算得到的最终渲染结果，做sRGB伽马编码后再输出到显示设备，抵消显示设备的非线性偏移，保证最终显示颜色正确。

为什么简单纹理场景不配置也看起来正常 #

你做的仅加载JPG纹理到立方体的简单场景，大概率没有添加复杂光照、也没有用到基于物理规则的材质，只是直接把纹理采样结果输出到屏幕：相当于你直接把已经做了sRGB编码的纹理数值给到显示设备，刚好适配显示设备的输出特性，所以看起来颜色没有明显偏差。
但只要场景加入了光照计算、PBR物理材质（比如你参考的透射示例中用到的MeshPhysicalMaterial），没有配置输出编码的话，线性空间的计算结果直接输出到非线性的显示设备，整体画面会偏暗、颜色失真，折射、高光、透明这类效果的偏差会尤其明显。

官方物理透射示例必须配置的原因 #

MeshPhysicalMaterial的透射、金属度、粗糙度、折射率等参数的计算逻辑，都是基于线性色彩空间的物理规则设计的，最终计算得到的渲染结果是线性空间的数值，不配置sRGBEncoding输出编码的话，结果没有做伽马校正，显示出来的玻璃材质会发灰、透光效果异常、高光和阴影的表现也会和官方示例存在明显差异。

内容的提问来源于stack exchange，提问作者Arky