Unity Shader实现PPT 30多种切换效果

Jack Yan

已于 2024-01-05 18:28:43 修改

阅读量3.7k

点赞数 5

分类专栏： UnityShader、TA 文章标签： unity 游戏引擎

于 2021-06-18 18:05:22 首次发布

本文链接：https://blog.csdn.net/yhx956058885/article/details/118031134

版权

本文详细介绍了如何使用Unity Shader实现30多种PPT切换效果，包括淡入淡出、推入、擦除、分割等。通过GLSL和Unity代码，展示了各种效果的实现思路和关键技巧，如混合函数、顶点偏移、线性插值等。并提供了Unity工程供下载参考。

摘要由CSDN通过智能技术生成

原文

原文是用 GLSL 写的

PPT 切换 - 纯 Shader 实现（上）

PPT 切换 - 纯 Shader 实现（下）

PPT_transtions_with_shader(原文glsl)

效果

https://vdn1.vzuu.com/SD/564fe67c-cdfa-11eb-8209-e6ec042396c2.mp4?disable_local_cache=1&auth_key=1624003925-0-0-17c736f21d1b9e53df3c326a5ef64293&f=mp4&bu=pico&expiration=1624003925&v=hw

一、淡入淡出 Fade

直接调用GLSL的mix函数即可

二、推入 Push

现象：一张图片从右往左把另一张图片推出屏幕
要点：
1、判断texCoord与u_ratio的大小，选择在左右两边显示哪张图
2、同时对两张图的texCoord做一定偏移

三、擦除 Wipe

现象：从右往左将上面一张图片擦除
思路：
主要还是依赖于mix函数进行混合，只不过在边缘处实现渐变，渐变的实现可简单用线性插值实现，从右往左的擦除就好比将一条斜线从右往左移动，随后clamp就成为了透明度alpha

四、分割 Split

现象：从中间往两边“擦除”
思路：类似于“把擦除等效为从右往左移动”，分割的实现可抽象为下图：

五、显示 Reveal

现象：先是从右往左，图片微微放大的同时屏幕变白，随后从左往右，另一张图片浮现，且微微缩小
要点：
1、图片淡出淡入的效果与前面的擦除类似，只不过混合对象变成了白图
2、图片缩放的实现，实现缩放时，要选择缩放中心，变换顺序为：先移动到缩放中心，执行缩放后，再从缩放中心移动回去

六、切入 Cut

现象：瞬间切换，很简单的效果

七、随机线条 RandomBars

现象：前一张图片消失于很多随机线条中，后一张图片浮现，就好比在多个随机位置处执行“分割”
思路：使用for循环对多个随机位置的“分割”透明度进行叠加，取多个函数的最小值：

八、形状 Shape

现象：由一个形状往四周扩散，下一张图片浮现
思路：仍然从“形状移动”的思路出发，考虑不同形状的透明度函数，只不过此时的函数变成二元函数了：

九、覆盖 Cover与揭开 Uncover

现象：一张图片从一个方向滑走，或者另一张图片滑入
要点：效果与“Push推入”很类似，只不过其中一张图片不进行顶点偏移而已

十、闪光 Flash

现象：类似于闪光灯闪的一下，就切换为另一张图片
要点：先将第一张图片的RGB迅速升高，成为全白图，然后全白状态下切换为第二张图，降低RGB值，使之正常

十一、溶解 Dissolve

现象：一张图溶解为许多小碎片，然后另一张图浮现
要点：
1、将屏幕划分为多个小块，比如要划分为7*5个小块，就将xy乘以vec2(7,5)，然后取floor后除以vec2(7,5)既可
2、然后每个小块设置不同的随机值，之前介绍了一维的伪随机数生成，这里可以使用二维的伪随机数生成，每个小块设置不同的随机值后，将其与u_ratio比较，决定其溶解与否

十二、翻转 Flip

现象：图片原地翻转，背面为另一张图片
要点；
1、实现绕y轴的3D旋转和透视投影，用剪切（shear）替代投影实现
2、一个小细节，在翻转的时候，图片往z方向有偏移量

十三、棋盘 CheckBoard

现象：生成许多小方块，各自翻页，背面为下一张图片
要点：
1、将屏