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

LiteralliJeff

首先看效果


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