unity Shader Graph实现2D图片扭曲波纹效果

2024-05-12 16:30:22

先看效果，制作版本：unity2019.4.2

制作2D图片效果，不需要用到光照信息，所以创建ShaderGraph时选用Unlit Graph。
图片一般都会有透明通道，记得修改Unlit Master的Surface为Transparent。

要实现此效果主要思路

扭曲效果基本是通过UV的偏移达到效果的，偏移要随机化才能达到扭曲，可使用噪声Noise来实现随机化。

要能有动起来的效果，要用到Time，随时间进行变化。

参数定义

效果有用到图片，扭曲有速度控制和偏移的量值，故定义3个变量。一个Texture2D和2个Vector1。

UGUI中的Image中已经有贴图，所以想要我们的Shader能依赖到Image的贴图，需要定义的Texture2D的Reference名称为_MainTex，默认图片Shader为此名称。

显示图片

红色圈中部分是顶点颜色，在UGUI中的Image里的color对应此处。最终颜色是颜色的混合，采用乘法得到。（颜色值数值范围为0-1，混合不是用加法）

随机偏移

随机使用节点SimpleNoise（Scale越大，随机粒度越精细），通过当前UV采集到偏移量，传入到offset中，即可。注：Graph中提供了Tiling And Offset进行处理，不需要自己再进行拼接。

现在会发现波动的时候往一个方向偏移，不是原始位置为中心偏移，这是因为图片颜色值为0-1，数值总是为正的，需要将偏移值转为正负变化的。

转换【0，1】区间到【-1，1】区间，只需要使用公式2x-1，即可达到目的

时间变化与最终效果

现在偏移不会随时间变化，加上时间值和速度控制，这样最终效果就完成了。

展望

本效果基本能满足一些特效上的要求，但也有一些可以改进的。
1、UV的移动方向是固定的，不能变化
2、波动偏移时两轴数值是一样的，可以做一些变化
3、可以只偏移某一部分区域，达到更炫的效果

unity Shader Graph实现2D图片扭曲波纹效果相关推荐

Unity Shader - 入门级 - 火烧 2D 旗帜的溶解效果
文章目录需求思路效果 Ramp 纹理 Shader 集成到 UGUI Shader 中 Project 美术提的需求比较简单,但是之前没整过,当作记录一丢丢效果集中需求从图片的下方往上燃 ...
Unity Shader Graph 制作Rim Light边缘光效果
效果图: 模型为Asset Store资源商店中免费资源Robot Kyle机器人实现原理: 通过法线方向和视线方向的夹角来判断点是否处于边缘,从而给其增加边缘光,视线方向和法线方向垂直时,则该点在 ...
Unity中用shader graph制作一个简单的传送门效果
Unity中用shader graph制作一个简单的传送门效果一.配置渲染管线 1.通过菜单"Asset" --> "Create" --> &q ...
Unity 2D图片的3D效果（1）——阴影
项目为方便编辑地图,使用的是Unity自带的Tilemap功能.因为使用的是俯视视角,拼好第一个地图后发现2D图片展现的效果太平了,地面和障碍物很难分辨.所以才有了"把2d图片展现出3d效果 ...
Unity Shader Graph 使用安装步骤缺失材质球，以及场景原本物体材质球丢失问题解决
Unity Shader Graph 使用安装步骤,以及原本物体材质球丢失问题我是用的版本是2019.3.9版本的,仅供参考. 第1步:Window-PackageManager-点击All Pac ...
Unity Shader - 实现类似镜面反射、水面扰动效果
前几天,家里出了一些问题,搞得心情很不好,面试我也取消了. 唉,反正那个伤心啊,不过,昨天处理好了. 所以说啊,家和万事兴. 加油加油!!! 所以心情好了,我又写博客了. 另外说一下:图形我今年201 ...
Unity Shader - GrabPass 实现武器热扭曲拖尾效果
文章目录先来看看效果实现思路 Unity带的TrailRender组件编写脚本实现 CSharp Shader 参数注意性能还可以优化总结 Project 以前龙之谷喜欢选战士,帅气. 战 ...
Unity Shader Graph（二）Dissolve Effect
此篇文章记录Dissolve Effect(溶解特效)的制作过程软件环境 Unity 2018.1.2f1 Packages: Lightweight Render Pipeline 1.1.11 ...
Unity Shader Graph实现模型任意方向剖切（学习笔记/五毛钱特效）
使用Shader Graph:Unlit Master 使用Position获取物体Object的空间坐标信息. 使用Split拆分物体的空间坐标信息,比如拆分为x.y.z. 使用Split拆分后的x ...

最新文章

热门文章