前言
之前UI那里碰到一个问题,就是他们发现UGUI里拼好的界面和PS里的效果图不一致,主要是半透明混合的区域会显得透明度偏低。不过幸好UI以前也碰到过类似的问题,告知我是色彩空间的问题(项目使用的是Linear线性空间),所以这两天花了些时间往这个方向研究了下。
先说一下情况:Unity在线性空间下,如果贴图勾选sRGB,那么Unity可以把贴图的RGB通道正确的还原到Gamma空间,但是对于带Alpha半透明的贴图,似乎不会进行处理,在混合颜色时就会出现错误。
问题验证
首先我用代码生成了两张256宽度的贴图:
- 第一张称它为AlphaRamp。颜色全部为纯黑色(0,0,0),其Alpha从左到右为255~0。
- 第二张称它为GreyscaleRamp。颜色从左到右为(0,0,0)到(255,255,255),没有Alpha(或者说Alpha 都为1)。
理论上,这两张图在白底背景上以常规形式混合,其显示效果应该是相同的。
然后搭建一个UICanvas,背景铺上纯白底,在其之上叠加上面的贴图,切换项目颜色空间(Linear和Gamma),调整贴图的sRGB选项查看效果。(sRGB选项在Gamma空间中是无效的)
AlphaRamp | GreyscaleRamp | |
---|---|---|
项目使用Gamma空间 | 效果正确 | 效果正确 |
Linear空间+勾选sRGB | 效果错误 | 效果正确 |
Linear空间+不勾选sRGB | 效果错误 | 效果错误 |
效果正确表示屏幕上输出的颜色正确还原到了Gamma空间中的效果(也是Photoshop中的效果),如下图:

效果错误则表示输出的色阶为线性,视觉上亮色区域过多,如下图:

此外,这个混合问题不仅存在于UGUI里,任何涉及Alpha混合的地方都会有。我测试了两个面片使用透明材质,使用最常规的混合模式(Blend SrcAlpha OneMinusSrcAlpha)进行混合测试,结果也和上面的表格相同。
所以可以肯定的就是:Unity线性空间下的sRGB选项不会对Alpha进行处理!
原因&解决
一开始为了解决这个问题,试过手动对素材的Alpha进行预处理的做法(既然Unity不处理那我们自己处理!),发现怎么算都得不到正确的结果——实际上怎么处理都不可能对的,因为后来发现问题出在混合公式上。
-
Gamma空间下的Alpha混合公式:
-
Linear空间下的Alpha混合公式:
Linear工作流下,Unity会对素材进行Gamma校正后(如果素材勾选sRGB选项,则会对素材进行预处理),再进行混合计算,最后对结果进行Gamma还原。
有办法在混合公式上修改吗?Shader里能对混合算法进行的操作十分有限,只凭借Blend和BlendOp两个混合命令似乎无法达到修正的效果。
最后项目里采取的做法是——项目里所有UI素材取消勾选sRGB选项,以线性的颜色进行输入,此时Alpha混合公式就变成了:
然后只要在最后输出的颜色上进行一次pow(2.2)的处理(在UI相机上添加后处理实现),颜色就和Gamma空间下的完全一样了。
网友评论