设计：为什么模型的颜色跟我在建模工具看到的不一样？

开发：引擎的光照和建模工具不太一样，我调一下～

设计：还是不一样～

开发：我再调整一下～

...

还在苦恼的调光照吗，有木有想过，其实不一定是光照的原因，来看看这两张用了同一光照的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;