【Unity补完计划】Unity线性空间(Linear)下Alpha的混合问题

前言

之前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混合公式:
    color=(A.rgb*A.a)+(B.rgb*(1-A.a))

  • Linear空间下的Alpha混合公式:
    color=((A.rgb^{2.2}*A.a)+(B.rgb^{2.2}*(1-A.a)))^{1/2.2}

Linear工作流下,Unity会对素材进行Gamma校正后(如果素材勾选sRGB选项,则会对素材进行预处理),再进行混合计算,最后对结果进行Gamma还原。
有办法在混合公式上修改吗?Shader里能对混合算法进行的操作十分有限,只凭借Blend和BlendOp两个混合命令似乎无法达到修正的效果。

最后项目里采取的做法是——项目里所有UI素材取消勾选sRGB选项,以线性的颜色进行输入,此时Alpha混合公式就变成了:

color=((A.rgb*A.a)+(B.rgb*(1-A.a)))^{1/2.2}

然后只要在最后输出的颜色上进行一次pow(2.2)的处理(在UI相机上添加后处理实现),颜色就和Gamma空间下的完全一样了。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,830评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,992评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,875评论 0 331
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,837评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,734评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,091评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,550评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,217评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,368评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,298评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,350评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,027评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,623评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,706评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,940评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,349评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,936评论 2 341