【Unity3D Shader】学习笔记-位移动画

简介: Unity3D Shader学习笔记系列,由于是个人理解后写的,因此可能会出现描述错误,理解不到位的地方。另外没有完全从基础的知识开始,对于刚开始学习的同学还需要看更基础的知识进行补充。一、顶点动画 将顶点的坐标与三角函数进行算术运算,就可以得到一个在原始位置“左右上下”来回的动画效果。还可以通过定义一个_Direction方向向量来进行来回摆动方向。

【Unity3D Shader】学习笔记-位移动画


前言


   Unity3D Shader学习笔记系列,由于是个人理解后写的,因此可能会出现描述错误,理解不到位的地方。另外没有完全从基础的知识开始,对于刚开始学习的同学还需要看更基础的知识进行补充。另本文图片源自网络,如有疑问请联系删除。


一、顶点动画


  将顶点的坐标与三角函数进行算术运算,就可以得到一个在原始位置“左右上下”来回的动画效果。还可以通过定义一个_Direction方向向量来进行来回摆动方向。


v2f vert (appdata v)
{
    v2f o;
    // 进行顶点位移操作
    float4 pos = v.vertex;
    pos.x += sin(_Time.y);
    //pos.xyz += (1 + sin(_Time.y) * cos(_Time.x * 0.75)) * _Direction.xyz;
    o.vertex = UnityObjectToClipPos(pos);
    UNITY_TRANSFER_FOG(o,o.vertex);
    return o;
}


    例如:树草的随风摆动动画,通过左右摆动实现随风飘荡的效果,需要注意的特点是小草的摆动是越离根摆幅越小通过y标达到这一点)。

                                                                                                                                 

                               微信图片_20220424145942.gif      


v2f vert (appdata v)
{
    v2f o;
    float4 pos = v.vertex;
    // 0.1 控制摆动幅度
    // saturate(pos.y) 越离根越近越不摆动
    pos.x += sin(_Time.y) * 0.1 * saturate(pos.y);
    o.vertex = UnityObjectToClipPos(pos);
    o.uv = TRANSFORM_TEX(v.uv, _MainTex);
    UNITY_TRANSFER_FOG(o,o.vertex);
    return o;
}


二、UV动画


   原理与顶点动画类似,对uvxy分量进行加减乘除的操作来达到产生纹理动画效果,下面代码通过UV实现草的摆动效果。


fixed4 frag (v2f i) : SV_Target
{
    float2 uv = i.uv;
    // uv默认没有负数,没有使用saturate
    uv.x += sin(_Time.y) * 0.1 * uv.y;
    fixed4 col = tex2D(_MainTex, uv);
    UNITY_APPLY_FOG(i.fogCoord, col);
    return col;
}


   另一个例子:绕中心旋转。主要是先将uv的中心从左下角移动到正中心,然后使用公式进行旋转uv后移动回左下角进行纹理采样。


微信图片_20220424145948.gif


fixed4 frag (v2f i) : SV_Target
{
    float2 uv = i.uv - 0.5; //移动中心到贴图的中间
    float t = _Time.y;
    // 旋转
    half ux = uv.x * cos(t) - uv.y * sin(t);
    half uy = uv.x * sin(t) + uv.y * cos(t);
    uv.x = ux;
    uv.y = uy;  
    // 重新移回去。-左下角。
    fixed4 col = tex2D(_MainTex, uv + 0.5);
    UNITY_APPLY_FOG(i.fogCoord, col);
    return col;
}


   还有很多不同的效果会在接下来的文章中陆续分享,有兴趣的同学可以关注一波哟!

相关文章
|
4月前
|
图形学 C#
超实用!深度解析Unity引擎,手把手教你从零开始构建精美的2D平面冒险游戏,涵盖资源导入、角色控制与动画、碰撞检测等核心技巧,打造沉浸式游戏体验完全指南
【8月更文挑战第31天】本文是 Unity 2D 游戏开发的全面指南,手把手教你从零开始构建精美的平面冒险游戏。首先,通过 Unity Hub 创建 2D 项目并导入游戏资源。接着,编写 `PlayerController` 脚本来实现角色移动,并添加动画以增强视觉效果。最后,通过 Collider 2D 组件实现碰撞检测等游戏机制。每一步均展示 Unity 在 2D 游戏开发中的强大功能。
224 6
|
3月前
|
前端开发 图形学 开发者
【独家揭秘】那些让你的游戏瞬间鲜活起来的Unity UI动画技巧:从零开始打造动态按钮,提升玩家交互体验的绝招大公开!
【9月更文挑战第1天】在游戏开发领域,Unity 是最受欢迎的游戏引擎之一,其强大的跨平台发布能力和丰富的功能集让开发者能够迅速打造出高质量的游戏。优秀的 UI 设计对于游戏至关重要,尤其是在手游市场,出色的 UI 能给玩家留下深刻的第一印象。Unity 的 UGUI 系统提供了一整套解决方案,包括 Canvas、Image 和 Button 等组件,支持添加各种动画效果。
170 3
|
4月前
|
图形学 数据可视化 开发者
超实用Unity Shader Graph教程:从零开始打造令人惊叹的游戏视觉特效,让你的作品瞬间高大上,附带示例代码与详细步骤解析!
【8月更文挑战第31天】Unity Shader Graph 是 Unity 引擎中的强大工具,通过可视化编程帮助开发者轻松创建复杂且炫酷的视觉效果。本文将指导你使用 Shader Graph 实现三种效果:彩虹色渐变着色器、动态光效和水波纹效果。首先确保安装最新版 Unity 并启用 Shader Graph。创建新材质和着色器图谱后,利用节点库中的预定义节点,在编辑区连接节点定义着色器行为。
310 0
|
4月前
|
缓存 图形学
Unity3D学习笔记12——渲染纹理
Unity3D学习笔记12——渲染纹理
42 2
|
4月前
|
API C# 图形学
Unity3D学习笔记9——加载纹理
Unity3D学习笔记9——加载纹理
49 2
|
4月前
|
API 图形学 异构计算
Unity3D学习笔记7——GPU实例化(2)
Unity3D学习笔记7——GPU实例化(2)
32 2
|
4月前
|
存储 缓存 图形学
Unity3D学习笔记11——后处理
Unity3D学习笔记11——后处理
64 1
|
4月前
|
开发者 图形学 C#
深度解密:Unity游戏开发中的动画艺术——Mecanim状态机如何让游戏角色栩栩如生:从基础设置到高级状态切换的全面指南,助你打造流畅自然的游戏动画体验
【8月更文挑战第31天】Unity动画系统是游戏开发的关键部分,尤其适用于复杂角色动画。本文通过具体案例讲解Mecanim动画状态机的使用方法及原理。我们创建一个游戏角色并设计行走、奔跑和攻击动画,详细介绍动画状态机设置及脚本控制。首先导入动画资源并添加Animator组件,然后创建Animator Controller并设置状态间的转换条件。通过编写C#脚本(如PlayerMovement)控制动画状态切换,实现基于玩家输入的动画过渡。此方法不仅适用于游戏角色,还可用于任何需动态动画响应的对象,增强游戏的真实感与互动性。
116 0
|
4月前
|
开发者 图形学 前端开发
绝招放送:彻底解锁Unity UI系统奥秘,五大步骤教你如何缔造令人惊叹的沉浸式游戏体验,从Canvas到动画,一步一个脚印走向大师级UI设计
【8月更文挑战第31天】随着游戏开发技术的进步,UI成为提升游戏体验的关键。本文探讨如何利用Unity的UI系统创建美观且功能丰富的界面,包括Canvas、UI元素及Event System的使用,并通过具体示例代码展示按钮点击事件及淡入淡出动画的实现过程,助力开发者打造沉浸式的游戏体验。
116 0
|
4月前
|
图形学
Unity动画☀️Unity动画系统Bug集合
Unity动画☀️Unity动画系统Bug集合