前言
使用基于物理的渲染,为了保证光照计算的准确,需要使用线性空间;
使用线性空间会带来一个问题,ui 在游戏引擎中的渲染结果与 PS 中的不一致:
PS(颜色空间默认是sRGB伽马空间):
(三个图层的分别对应RGB三种颜色,颜色值都为128,三个图层不透明度都为70%)
导出3张png图片,导出时勾选sRGB,图片位于伽马空间;
游戏引擎(unity线性空间为例):
导入3张png图片,勾选sRGB(采样纹理时自动将颜色值转化到线性空间);
很明显,效果不一致;
为何不一致?来看颜色混合过程:
PS:
(蓝色通道 b = 255 * ( (1 - 70%) + 0.5 * 70%) = 166)
Unity(为了演示精确结果,开启了HDR):
蓝色通道 b = 255 *((1 ^ 2.2) * (1 - 70%) + (0.5 ^ 2.2) * 70%)^ 0.4545
= 178
(^2.2表示将伽马值转换到线性空间,^0.4545将最终的线性值转换到伽马空间)
(之所以最终将线性值转换到伽马空间,因为显示器的输入需要在伽马空间下)
因此,游戏引擎使用线性空间时,渲染结果与伽马空间中的PS效果不一致;
解决方案:
1. 游戏引擎渲染ui时转化到伽马空间;
在使用线性空间渲染完场景后,将颜色缓冲区的值转化到伽马空间,这样渲染ui时,颜色值就位于伽马空间,混合时计算方式与ps那边相同;在渲染完ui后,再转化到线性空间。如果使用untiy urp渲染管线,通过自定义渲染pass可以容易做到;
此时ui贴图不要勾选sRGB,因为需要的是伽马空间的值,不需要转化为线性;
该种方式的缺陷是客户端有两套颜色空间,增加了制作复杂度;
笔者经历过使用这种方式的项目,觉得这种方式很不方便,尤其是在制作特效时;场景的特效需要在线性空间下制作,ui的特效则需要在伽马空间下制作;贴图如果是在场景里使用,则需要勾选sRGB,如果是在ui上使用,则不需要勾选sRGB;
2. PS使用线性空间:
在介绍PS使用线性空间前,先介绍网络上另一种工作流:PS使用伽马空间,通过设置用灰度系数1混合RGB来达到线性空间混合的结果;
用灰度系数1混合RGB:
(通过设置以灰度系数1混合,使PS中的结果与游戏引擎一致)
这种方式有局限性,如果PS使用了图层样式:
(纯黑色,填充50%,然后加上描边效果)
(PS中的结果)
(栅格化图层样式,或者导出png图片的结果)
可看到PS在以灰度系数1混合时,不能正确处理填充,所见与所得不一致;
合并带填充的图层时,合并前后的效果不一样:
(合并前)
(执行合并图层)
因此,以灰度系数1混合不是理想解决方案;
PS使用线性空间:
当PS使用线程空间时,就不会存在上述用灰度系数1混合RGB的问题;
PS设置线性空间:
设置好后,存储一下配置:
将原先伽马空间下的文档转化到线性空间:
设置->转换为配置文件
于是PS中的效果变为:
(与游戏引擎渲染一致,因为都在线性空间下)
虽然PS设置在线性空间,但美术从其他网站下载的图片素材基本都是位于伽马空间,并且为了高效保存数据,美术输出的图片也要勾选sRGB,保存在伽马空间中;
PS线性空间下导入伽马空间的图片时,PS不会自动帮我们进行伽马校正(Unity可以设置贴图sRGB,采样时自动伽马校正):
我们可以手动进行伽马校正:
选中导入图片所在的图层,执行:
我们可以写ps脚本,在导入伽马空间的图片时自动进行伽马校正:
(自动化脚本目前不提供,可参考ps脚本化编程文档)
PS在线性空间下,渐变出现条纹的问题:
将渐变图片放到游戏引擎里面,发现效果比PS中好,PS在线性空间下计算好像精度丢失严重;
可将图像转化为16位通道,这样在线性空间下计算精度更高:
最后,如果使用unity引擎,记得Canvas勾选:
这样TextMeshPro等组件设置的颜色才会准确;