举报

  • 垃圾广告信息
  • 涉黄涉暴等违法信息
  • 侮辱、恶意及辱骂行为
  • 侵权
  • 其他

赛博朋克2077的神奇扫描推进效果

原创文章 / CG专题

2020-12-29
0 0 0

一款游戏大作的游戏效果——神奇的扫描推进效果


《赛博朋克2077》这款游戏,它的大起大落,牵动着许多玩家的内心。从十年前对它的宣传如神作一般,到如今只能通过退款来平息玩家们的愤怒,它究竟经历了什么?


围绕《赛博朋克2077》的宣传,其实已经持续了近十年。


在2012年,波兰开发商CD Projekt Red首次对外公布《赛博朋克2077》,这时候,呈现在人们面前的是一款引人入胜、高自由度的大作,为玩家展示了一个富于沉浸感、栩栩如生的科幻世界。


从那时起,CDPR陆续推出了不少让人印象深刻的预告片。这些预告片里,基努·里维斯、加拿大女歌手Grimes和美国说唱歌手ASAP Rocky等明星先后亮相,而《赛博朋克2077》也被看作是本年度最受期待的游戏作品。



《赛博朋克2077》是一款反乌托邦题材的游戏,将背景设定在了近未来。在一个危机四伏、间谍活动无处不在的世界里,数字世界的游民穿梭其中(里维斯扮演的角色会作为向导出现),并使用高科技武器来改装、强化自己。CDPR向玩家(尤其是那些使用索尼和微软次世代主机的玩家)承诺,《赛博朋克2077》将会带来跨时代的游戏体验,游戏有丰富的自定义选项用来定制角色,并且有广阔的世界可供探索。


在游戏12月正式发售前,预购玩家数量就超过了800万。


2018年7月,随着玩家对游戏的期待越来越高,一位用户在《赛博朋克2077》的官方Twitter账号下问:“游戏里有梗(meme)吗?”《赛博朋克2077》官推回复说:“整款游戏就是个梗。


那条推文似乎预测了未来——《赛博朋克2077》成了梗,但这个梗并不是以开发者期待的方式出现的。


《赛博朋克2077》12月10日发布以来,许多玩家将游戏中遇到的bug、漏洞做成了视频素材,这些视频得到了病毒式的传播,其中相当一部分都很搞笑:比如你可能会看到大楼的地板上长出了小小的树,坦克从天而降,或是游戏角色在骑摩托车时突然站了起来,而且裤子还不见了......

这些视频都指向了同一件事:游戏没法玩。游戏过程中充斥着各种报错,大量角色因为AI异常做出了难以解释的举动。更重要的是,游戏与本该支持的上一代游戏主机很难兼容,玩家们被激怒了。


大量主机玩家要求退款,索尼客服代表几乎全都被退款处理占用了,就连合作网站也一度崩溃。作为回应,索尼和微软都发布公告,称会为购买《赛博朋克2077》数字版的玩家提供全额退款。索尼甚至将游戏从PlayStation商店下架。


在游戏行业历史上,《赛博朋克2077》的发售算得上是最严重的灾难性事件之一。CDPR是一家明星工作室,在圣诞假期前推出了一款备受期待的游戏,结果翻车了。这也说明,游戏开发商斥资几亿美元、投入多年时间开发3A游戏时,可能会遇到的困难。


但在一些内部人士看来,考虑到CDPR做游戏的历史,以及《赛博朋克2077》开发期间出现的危险信号,他们几个月前就预料到了现在的局面:这款游戏可能无法满足(发售前)如此之高的期待。


以上出现的bug情况,小编玩游戏的时候也有体会到;但是我们也不能完全否定这款游戏是差评的,小编在游戏的体验中,发现有一点确实做的十分的不错,拿出来给各位读者们感受和分享一下~





小编觉得《赛博朋克2077》在游玩时还是有许多效果是做得很棒的,特别是按tab 扫描 时,推动鼠标滚轮会有马赛克过渡效果,好像图片传输速度很慢,被一层层加载出来一样。话不多说先看游戏内效果:



效果拆解


接下来小编带大家进行效果拆解。在做任何效果之前都需要进行拆解,这样才能明确方向。我决定从颜色、元素和动画三个方向进行拆解,这样做就更有条理,确保不会漏掉细节。大家对照脑图和上面的动图一起食用,应该可以get到我总结的这些部分。



下面我们根据总结的要点展开讲解。(要跟紧小编的步伐噢~)


效果制作


在正式讲解之前我想让大家看看我最后实现的效果



1.像素化处理

整个效果中最重要的也是最明显的部分,就是不同大小的像素过渡。在这里,我选择使用最大64x64的像素作为首次像素化的尺寸,然后不断细分像素大小,由 64x6 4变成 32x32 ,再到16x16,以此类推下去,最终显示出原始图片。(效果上有点像四叉树)



由于像素化制作很简单,直接上节点图(这里将功能写成material function)



UnitResolution:像素化一个区域的分辨率

这套节点主要思路就是将屏幕像素划分给定像素化大小的区域,然后添加半个像素的宽度来修复floor的偏移(像素化的画面就会和原始图像对齐)


于是我们就能得到如下所示的画面:


单元格分辨率:64x64


单元格分辨率:32x32


单元格分辨率:16x16


通过修改像素大小可以得到不同分辨率的结果,这也是画面像素细分后的层级效果。由于像素大小是不断二分的,所以上一层级的像素内刚好能装下4个下一层级的像素块,以此类推最后一层就为原图。



2.像素化动画

接下来我们要将不同分辨率的图像混合起来,实现从中心到外围的像素大小渐变。画面中心为小像素块,画面外围为大像素块,如下图所示:



但是单纯这样一张图显然是不够的,我们需要让他动起来。制作动画的大致思路就是先制作n层不同细分的像素化效果,然后对每个层级制作动画偏移并混合。这样不同层级出现会有先后顺序,就能实现从中心扩散,且不断细分的动画效果。

我们首先着手中心向外扩散的效果,使用spheremask最适合不过了,但在spheremask之前我们需要对像素化的uv做一些细节操作。


首先是对uv做屏幕的长宽比修正,因为我们希望不管屏幕比例为多少,最后的扩散区域都是圆形。修复原理主要是对uv做了屏幕比例的反向修正,节点图如下:


左端输入像素化uv,右端输出修正长宽比的uv


未修正长宽比


修正长宽比


然后我们将制作好的uv应用spheremask,并添加两个float输入:Process和ProcessBias,分别控制整体效果 进度 和 进度偏移


随后我们在外层按照不同分辨率排布n个刚刚写好的像素化功能,再将每层的ProcessBias调整下,混合输出的mask,通过调整process即可得到如下动图效果



混合节点图


不同层级混合mask可视化

最终屏幕结果(将function中的像素化uv采样了屏幕纹理)


可以看到现在已经有多层不同分辨率的层级混合了,但混合的边缘太过于规整,于是我们需要用一张noise贴图进行扰乱,这张noise我选择使用bluenoise,因为得到的效果较为均匀。

这张noise其实也不是单纯的一通道灰度noise,我使用了两个通道,这两个通道中储存了不同的blue noise,然后我用这张noise的红绿通道,对像素化后uv的x和y轴做了随机效果(如果只使用一张噪波对两个轴向做noise的效果很容易得到具有方向性偏移的结果)。




双通道BlueNoise



可以看到蓝色框内的是Noise节点部分。这里需要注意的是,Noise 需要做一下范围映射再和 UV 混合,映射操作将 Noise 本身 0-1 的区间变成 -1 - 1 的区间。目的是为了在轴的正反都有随机位移,使结果更加随机,而不会出现方向性



随机过后不同像素大小层级mask



随机过后屏幕最终结果


接下来我们只需要控制 Process 数值即可实现从中心扩散的动画效果了。


但 Process 取值的区间是 0-1 吗?


很显然不是的。这里有个细节需要说明,由于每个层级都做了Process Bias的进度偏移,所以我们的 Process 进度数值需要满足最大偏移层的进度完成(最大偏移层就是拥有最大 Process Bias 值的像素化层),具体计算需要将 process 的 0-1 区间变成 “0” 到 “1+最大Bias” 区间,计算过程如下图所示:



做到这里我们可以得到如下的动画效果:


3.扫描描边加亮


如果仔细观察原图可以发现,在物体边缘和画面高亮部分会有一层描边,如下图所示:



这里我选择采用 画面高亮区域 混合 深度描边 实现这个效果。深度描边我只采用屏幕 V 轴方向偏移,偏移大小为 0.5 个当前层级像素宽度,这样做的好处是描边会出现不连续的断开,效果呈现较为随机。


画面高亮区域


 在节点中有个进度权重输入是之前没有提及的,在这里解释一下:因为描边亮度在整个进度范围内肯定不是统一的,在原图中观察得出进度开始时最亮,进度最后会慢慢变暗。所以我在这里用每层不同单元格大小计算分配了权重,节点如下图所示:



可以看到当单元格为最大值64时,权重为1,单元格为32时权重为1/2,单元格16时权重为1/4。以此类推,最后一层的单元格权重为1/64。这样就能完美控制每个层级的描边亮度权重,非常好用。

细心的朋友可能会发现在节点中,进度权重后面Pow了一个0.25。这是为了让整个权重变化幅度放缓,在实际使用中可以将 0.25 变成参数供调整。


注:从左到右依此为4个层级的描边,可以看到亮度是逐级递减的


这样通过控制亮度变化,整个动画层次感会大大提高。


深度描边区域:

BaseWeight:上面介绍的随进度变化的权重,但这里我在后面添加了一个 cosine ,让整个权重发生了变化,因为 深度描边是开始和结束时很暗,中间层级很亮



SlightlyScale:非常细节的像素动态追赶调整,后续会详细分析

SkyMask:距离Mask,在一定距离之后描边就不显示了

BiasedUV:计算描边使用的偏移后的UV

DepthEdge:描边计算部分

深度描边我采用了最常规的制作方法,拿到场景深度只计算屏幕v方向偏移描边。

这里需要提及的是,我在深度描边中加入了暗角权重,也就是屏幕中心的深度描边会亮些,周围的会变暗,节点写在DepthEdge下面,可以看到我做了一个乘1.414的操作,这是为了让计算暗角的四周最大值为1,方便后续的1减操作。

而1.414这个值也不是Magic Number,是1除根号0.5的结果,至于为什么要这样算就留给大家自己思考了,其实就是最简单的三角函数计算。


最后结果如下所示:


深度描边(开始和结束较暗,中间阶段变亮)


画面较亮区域描边(亮度不断变暗)


刚刚说到节点中有个叫SlightlyScale的东西,这个究竟是干什么用的呢?我们先来看两张对比动图:


上图是没有加SlightlyScale的效果,下图则添加了SlightlyScale


对比可以看到上图的像素点永远都在原图的高亮区域附近,而下图的像素点在不同进度下会有一个从左下到右上的位移效果。这就是SlightlyScale的作用。



SlightlyScale原理其实非常简单,就是将画面根据像素化进度往画面中间缩放,0.95为第一层级的缩放,1为最后一层级的缩放。lerp下方连入的部分为上面描边部分提及的BaseWeight。


4.细节部分

接下来就是细节部分了,主要设置了角色蓝图中的摄像机推镜动画,以及对上文制作的像素化后处理材质进行切换


最后在后处理材质中添加一张ui。其实这里做Widget会更好,因为懒所以没做(记得这里要对图像做长宽比的修复,最后的长宽比应该是屏幕长宽比和图片长宽比共同作用的结果)



5.总结

看到这里,是不是发现看似复杂的效果,实现起来却异常简单。


感兴趣的CG们,心动不如行动,快去实际操作一番吧!


这就是小编今天为大家带来的文章

就先分享到这里啦

还想看更多精彩作品

来CG99就可以啦

还有很多免费CG模型&资源


等你来下载哦!!



如果你也有很多模型资源

你也可以来上传模型

坐享80%超高收益

现在上传过审还能立得奖励金

传得越多赚得越多哟

他们都在悄悄赚钱啦

你也快来试试吧



  点赞 0
  收藏 0

标签:

CG
成功领取
当前积分: 积分抽奖
当前积分:   积分抽奖>
关注公众号,每日签到
首次关注回复:,完成账号绑定

*请留下对"CG99"的意见和建议

感谢您宝贵的建议,我们将不断优化产品,为您提供更好的服务!

下载模型

关注公众号 免费下载

验证码:

操作步骤:1、关注公众号 2、回复验证码,完成关注

余额不足

你的账户余额不足

去充值

绑定手机号

验证码错误!

绑定成功!

会员等级过低

抱歉,您当前会员等级过低,已达到当前等级下载上限!
可前往积分商城做任务,提高免费下载上限,也可升级VIP,畅享免
费下载+尊享下载折扣。