Unity Shader 实现破碎传送门效果教程

LiteralliJeff · 发表于 2022-3-9 20:26

首先看效果

Unity 实现破碎传送门效果
https://www.zhihu.com/video/1483923808453652480
根据 Cz_Wang的Unity Shader 破碎传送门外网教程在简介里_哔哩哔哩_bilibili
按照外网链接进行了些学习然后根据自己要求做了些变化、添加了些效果
外网参考贴：https://www.youtube.com/watch?v=w01aD4ztvAk
开始教程

根据我的需求我把模型定为16：9
并且没有使用抓屏作为碎片的图案，
也没用视察作为后面的图案，因为之后使用就直接接另一个真实场景没有这个需求。
模型准备

使用Blender可以快速生成所需纹理。

首先定义一个普通的平面比例为16：9

然后添加修改器中的粒子系统拖一拖时间条让粒子在平面上有一定数量
在Blender中打开插件中的Cell Fracture （细胞分裂）

F3打开搜索搜索Cell Fracture 然后不需要修改什么参数直接确定

在右侧选择所有分裂出来Cell 后修改变形中心到各自的原点

然后使用缩放工具把所有Cell 微微放大保证不空出来间隙有覆盖没有关系有间隙不行，之后导入模型到Unity。

Unity中编写Shader

导入Unity后把没有分裂的Plane微微后移这样不会出现GPU没法判断前后的情况

<hr/>后Plane的Shader
原作者使用时差采样贴图搞出一个虚拟空间来，我没有这个需求。所有直接使用一个简单Tex 作为材质

前Plane Cell的Shader
主要分几个部分

Mask
- 碎片控制Range
位移
- 碎片规律位移
- 碎片随机位移
- 碎片旋转效果
颜色
- 碎片自身颜色
- 碎片边缘颜色

碎片控制Range Mask

作为确认碎片是否参与动画的最重要Mask
大致计算方法就是因为每个碎片都是独立的物体都有独立的中心
使用物体中心和我们定义的效果中心的距离（定义为Center变量）
定义一个 Effect 作为控制距离的然后做一些缩放获得Mask。

因为模型并不是正方形，所以在XY方向做了一定缩放。

输出的Mask分为以一个 Big 一个普通的Mask
Big加了0.2  这样会相较于普通Mask提前做出反应用于让RIM光提前亮起来。

还没有发生位移就有颜色变化了  这样效果不会太突兀

碎片规律位移

实现原理非常简单，使用每个碎片的中心点减去Center 再乘以一个参数和控制效果的RangeMask 获得相对位移的距离。

不加随机位移单纯位移出来的效果，就是碎片向前移动（这里需要保证center 小于所有碎片的z轴这样才不会啊让碎片向后移动）

碎片规律的从中心阔开

碎片随机位移

实现思路，使用碎片中心点*100 作为Seed 三个随机数，并加上一个权重控制力度，与规律位移相加获得不是那么规律的位移。
注意这里XY的随机数的Range都是-1 到1区间  Z轴Range 是0到1区间因为这样才能保证碎片起码不向着模型后面移动。

碎片位移方向随机化

碎片旋转效果

依旧是使用碎片中心点作为Seed 生成随机数乘以权重和 RangeMask 作为旋转的角度
输入一个斜着的轴，让旋转不那么一下子被人看出来。作为旋转轴
输入顶点坐标

输出是顶点的绝对位置，需要把参数里的 VertexOut Put改为Absolute，
最后加上之间计算过的带有随机的位移输出 Move

顶点所有的位移效果

碎片颜色

碎片的基础颜色，在原教程中是采样抓屏，如果发生位移再对采样的UV做一些干扰。
但我这个只用了个最简单的Tex，并多出了个边缘光。

边缘光的方法
一开始如何计算边缘光也是个问题头疼了一会。
放到SP中也不能用常用Cuv 渲染Tex，
手画也太麻烦了这么多片，
使用顶点-碎片中心差的平方效果也不是很理想。
最后想到模型的边界正好就是UV的边界，因为模型并没有在建模阶段三角化，不是正规的三角形四边形。

所以！
最终的解决办法就是把模型的UV快照保存出来，然后放到PS中做选区，
转化为路径做画笔描边（超级容易崩溃路径太复杂了）
或者使用选取扩大缩小羽化等的操作慢慢绘制出来

用于标识边界的 Rim Tex

有了这个贴图做边界发光效果就简单多了
使用Pow 控制贴图对比度，反向做Mask
使用 Rim Col 、亮度、RangeMask 、Rim Mask做参数获得边缘光。
RangeMask 与0.3取了个Min
控制一下亮度别随着RangeMask的增长什么的边缘亮的过头，没法控制画面曝光。

以上几个部分组合，破碎效果就完成了，实现起来非常简单，效果看起来也不错。
参考：https://www.youtube.com/watch?v=w01aD4ztvAk

		自动登录	找回密码
密码			立即注册

Unity Shader 实现破碎传送门效果教程

本帖子中包含更多资源