ThreeJS 不可忽略的事情 - Gamma色彩空间
原创设计:为什么模型的颜色跟我在建模工具看到的不一样?
开发:引擎的光照和建模工具不太一样,我调一下~
设计:还是不一样~
开发:我再调整一下~
...
还在苦恼的调光照吗,有木有想过,其实不一定是光照的原因,来看看这两张用了同一光照的threejs渲染对比图:

第二个效果和建模工具更加相似,主要区别是第一张图直接导入了模型和贴图,第二张图在导入贴图时做了色彩空间转换。
下面来看看这是怎么转换的吧~
色彩空间介绍

我们来看看上图这两个灰度条,第一个是线性的从黑到白,第二个是以人类感知为准的灰度条,当人类18%左右的亮度的光源时,就能感觉到这是50%的亮度了。这就是为什么要有不同的色彩空间。
先了解一下这几个术语:
1. linear颜色空间:物理上的线性颜色空间,当计算机需要对sRGB像素运行 图像处理 算法时,一般会采用线性颜色空间计算。
2. sRGB颜色空间: sRGB是当今一般电子设备及互联网图像上的标准颜色空间。较适应人眼的感光。sRGB的gamma与2.2的标准gamma非常相似,所以在从linear转换为sRGB时可通过转换为gamma2.2替代。
3. gamma转换:线性与非线性颜色空间的转换可通过gamma空间进行转换。

在着色器中色值的提取与色彩的计算操作一般都是在线性空间。在webgl中,贴图或者颜色以srgb传入时,必须转换为线性空间。计算完输出后再将线性空间转为srgb空间。

ThreeJS 色彩空间转换
故在ThreeJS中,当我们为材质单独设置贴图和颜色时,需要进行色彩空间转换。具体的转换threejs会在着色器中进行,我们只需要关注为贴图指定好色彩空间,或者直接调用转换函数。
具体步骤如下:
1. sRGB转Linear
A. 对于贴图:
threejs 需要在线性颜色空间(linear colorspace)里渲染模型的材质,而从一般软件中导出的模型中包含颜色信息的贴图一般都是sRGB颜色空间(sRGB colorspace),故需要先将sRGB转换为Linear。
然而 threejs 在导入材质时,会默认将贴图编码格式定义为Three.LinearEncoding,故需将带颜色信息的贴图(baseColorTexture, emissiveTexture, 和 specularGlossinessTexture)手动指定为Three.sRGBEncoding,threejs在渲染时判断贴图为sRGB后,会自动将贴图转换为Linear再进行渲染计算。
// 设置加载texture的encoding
const loadTex = (callback) => {
const textureLoader = new THREE.TextureLoader();
textureLoader.load( "./assets/texture/tv-processed0.png", function(texture){
texture.encoding = THREE.sRGBEncoding;