技术分享 :《Trifox》中的遮挡处理和溶解着色器(下)

昨天我们为大家带来《Unity技术分享 |《Trifox》中的遮挡处理和溶解着色器(上)》,今天将会为大家分享《Trifox》中遮挡处理和溶解着色器技术的下篇,将继续分享如何改善溶解质量,以及如何利用这个简单的技术在《Trifox》中创建各种各样有趣的视觉效果,比如动态镜头遮挡物处理以及一些很酷的游戏机制。

上篇回顾

在上篇文章中,提出了一个有待解决的特殊问题:如何在游戏过程中处理遮挡住镜头视野的物体?我们提出了适用于该游戏的解决方案,考察了一些常用的着色器技术,比如:世界空间贴图和基于纹理的溶解着色器。效果如下:

我们发现了一些基于纹理的着色器技术的瑕疵:

  • 溶解效果在过渡边缘会显得很混乱。

  • 在近距离观察物体的时候会看到很大的像素块。

  • 无法让噪音纹理在很大的表面角度差和交错的物体之间保持很好的连贯性。

本篇内容

由于基于纹理的溶解着色器存在一些瑕疵,让我们不得不考虑完全摈弃纹理,而程序3D噪声方法会是一个比较好的选择。换句话说,我们可以使用数学过程由程序来生成3D噪音,以世界空间坐标为主要的输入参数,使用一个由包含0到1之间变化值的渐变体组成的3D纹理。

上图的溶解百分比设为50%左右,以便更好的展示3D噪音体

下面一起来看看使用纹理和使用程序生成3D噪声这两种方案的对比。


基于纹理的溶解着色器的效果
基于程序3D噪声的溶解着色器效果

很神奇吧,全程序化技术与纹理技术相比的平滑度差别有多么大,再加上一个自发光边缘,就会看到有趣的魔幻破碎效果。

这是因为使用程序生成的3D噪音可以任意缩放而不损失质量。并且由于不需要UV坐标,无论物体之间方向如何,溶解过程同样也会无缝衔接。不过,这个问题解决之后,还需要思考一下:如何使用这个技术动态地处理镜头遮挡问题?

引入屏幕空间坐标系 - 动态处理镜头遮挡问题

上篇文章在谈到如何处理遮挡问题时,我们提到过玩家应当能够感受到被隐藏的障碍物的存在。如果可能的话,在不影响视野的前提下,我们仍然希望能够看见隐藏物体的一部分。为了实现这一点,我们在着色器中引入了屏幕空间坐标系。用这种方法,可以在屏幕空间中根据将要渲染的表面离屏幕中心的距离来决定是否移除它。

通常屏幕空间坐标系是用来做后期特效的,但在这里用于影响物体的基本着色。添加下面的着色器输入结构体来访问屏幕空间位置:float4 screenPos;这样就能够像访问世界坐标一样,访问屏幕坐标。

用这样的方法,我们计算出一个简单的屏幕空间辐射渐变,并应用到场景中的物体上。值得注意的一点是,这并不是覆盖效果,而是屏幕坐标直接影响了渲染的几何体的色彩值。如下图,最终画面结果感觉就像用一个聚光灯照射在屏幕中心一样。

一个完全未改变的辐射渐变
经过了压缩调整的辐射渐变

经过压缩调整的辐射渐变可以符合屏幕的形状,并给出最终需要的遮罩。这个生成的遮罩能够帮我们判断出哪些部分需要溶解。但仍有一个重要的问题需要解决:如果就这样使用该遮罩,可能会为整个场景从相机位置开始打一个无限远的洞,如果玩家站在了一个可被溶解的遮挡物前,会怎样呢?我们希望确保那些物体保持完全可见,或至少把溶解效果控制在最小范围。

这个问题可以通过将玩家和相机的距离纳入计算,并分析渲染物体的深度值,被很好地解决掉。加入噪音遮罩后,最终得到如下结果:


这里玩家距离被设为固定的20米,以便展示效果更好

最终用于《Trifox》的效果添加了额外的步骤以获取更多的处理选项,比如通过顶点绘制来降低溶解密度,屏幕空间下降的控制,以及各种噪音微调选项。下图展示了完整的遮挡处理系统的效果:


可以在拱门的下半部分看到基于深度的噪音衰减效果和顶点绘制控制。

在Unity 5.6 Beta版中,Vulkan使图形显示性能更上一层楼,在最终发布的正式版中,Vulkan将支持Android,Windows,Linux,以及Tizen平台。

最后一步 - 功能检查与验证

在宣布遮挡处理系统完工前,让我们一起回顾最初的需求,并探讨这个方案是否符合。

  • 障碍物:应当以一个平滑而自然的方式移出视野,在任意角度都有效,即使已经被隐藏,玩家应当依然能够感觉到它的存在。

  • 关卡设计师:需要能够控制哪些东西可以被隐藏,以此加强环境的深度感。

  • 系统:无论角色和镜头之间的距离如何变化都能工作。

  • 设置工作:尽可能简化。

恭喜,任务完成!现在拥有了一个能够正常运转的系统,能够实现我们想要的效果,并且风格与游戏相匹配。

总结

回顾整篇文章,以上是攻克《Trifox》中的障碍物处理问题的过程。从定义问题开始,我们考察了可能的解决方案,然后一步一步实现了最终游戏里的效果。

我们最终使用的是一个可以实现很多视觉效果的技术,《Trifox》中的大量游戏细节都使用该技术,包括让被打败的敌人和被破坏的物体消失,以及改变环境的外观或让整个世界淡入或淡出等等。下面提供了两个原型示例,展示这个技术的不同应用:

比利时工作室Exiin也在游戏《Ary And The Secret Of Seasons》中运用了同样的技术,如下图所见,用来将季节球淡出。

希望您喜欢这两篇关于《Trifox》中的障碍物处理和溶解着色器技术的文章。

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

推荐阅读更多精彩内容