游戏开发线性空间下PS工作流程

前言

使用基于物理的渲染，为了保证光照计算的准确，需要使用线性空间；

使用线性空间会带来一个问题，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等组件设置的颜色才会准确；