three.js+WebGL踩坑经验合集(7):来聊聊three.js在gamma/linear色彩空间处理方面的一个坑

前面聊了很多跟线，跟geometry等图形相关的东西，今天咱们换个脑子，讲下颜色相关的内容。

笔者刚入职现在这家公司的时候，在3D引擎方面还是个小萌新，但由于此前对渲染管线的工作流程有一定了解，所以开发同事们遇到了引擎问题也都找我帮忙排查，本篇所要跟大家探讨的色彩空间就是其中的一个案例。

我们所开发的项目，有相当一部分功能是在3D场景下对物体进行选择、移动、缩放或者旋转等操作。因此在交互设计上会给物体添加选中框、箭头、缩放器等纯色的3D控件对象。

开发同事们在这些控件方面遇到的其中一个“老大难”问题莫过于色差了。明明每次都按着设计稿上面的色值给到材质，出来的结果却总跟设计稿不符，通常都是偏亮一些。

在笔者入职之前，他们最常用的解决方案是，把颜色值适当调暗，用截图软件把最终的rgb捕获最终显示到屏幕中的颜色，通过反复尝试得到勉强凑合的结果。

笔者以小萌新的身份入职后，运用着自己学得不太系统的渲染管线知识，以及一股调试的蛮力，排除灯光，去掉漫反射材质，再配合各种单例测试，经过一番摸爬滚打，最终定位到的，是CTO提交的一行代码：

THREE.WebGLRenderer.outputEncoding = THREE.sRGBEncoding

笔者赶紧找CTO问个究竟，CTO告诉我，那是处理模型色差用的，是gamma和线性（linear）色彩空间的问题，场景上的模型要使用gamma色彩空间才能跟3DsMax保持一致，这是网上给的解决方案。

然后笔者在那时候才首次了解到了色彩空间这玩意儿，three.js默认使用的是线性空间，出来的颜色跟最终显示出来的结果一致。然后笔者就纳闷了，为什么要为了模型而改掉这个全局设置，但是笔者又苦于基础知识薄弱，无法继续CTO在同一层面上进行交流，就直接问他UI色差的解决方案。

所幸他的确给了个行之有效的方法，遇到UI的话，把被转成gamma空间的颜色转成linear传进去就行了。

var 期望颜色 = new THREE.Color(0.6, 0.5, 0.3);

material.color = 期望颜色.convertSRGBToLinear();