当前位置: 首页 > news >正文

URP - 序列图动画的实现

效果:

【太妃糖耶】更新了一条视频,快来围观!

序列图动画的实现

首先先了解下序列图样式的纹理图片

如上图一可在Shader中使用该图片制作燃烧的火的动画,但是如何实现呢?接下来一起来看一下吧

序列图动画的实现原理大概是顺序采样序列图纹理中的每一个小格子块,从最上方的左边开始一直到最右边然后再继续下一行的采样,从而形成动画效果

所以序列图动画的实现分为两个步骤:

1.首先采样最上方左侧小格子中的纹理

2.完成UV的走格,通过变化的UV来采样对应的格子块从而形成动画效果


第一步:采样最上方左侧小格子中的纹理

o.uv = float2(v.uv.x/_Column,v.uv.y/_Row+1/_Row*(_Row-1));

其中_Row代表行数,_Column代表列数 (两者必须为float类型)

上面的代码相当于   v.uv.x=v.uv.x/_Column;       v.uv.y=v.uv.y/_Row+1/_Row*(_Row-1);

 v.uv.x=v.uv.x/_Column; 用原UV中U方向的值除以列数,得到新的U方向上的值(如果列数为3,U方向上的值则为(0,0.333))

v.uv.y=v.uv.y/_Row+1/_Row*(_Row-1); 用原UV中V方向的值除以行数,表示一个小格子中U方向的值。再加上1/_Row*(_Row-1)代表将U方向的值移动到原UV中V方向的最上侧。

第二步:完成UV走格,通过变化的UV来采样对应的格子块从而形成动画效果

首先我们可以用o.uv.x+=_Time.y;来看一下效果(可见不是我们想要的走格的效果)

  • U方向的走格: 

o.uv.x += frac(floor(_Time.y*_Column*_Speed)/_Column);

floor(_Time.y*_Column)/_Column : 实现一秒之内完成一行的走格

  • V方向的走格: 

 o.uv.y - = frac(floor(_Time.y*_Speed)/_Row);

floor(_Time.y)/_Row : 每秒向下偏移一格(用减法实现向下偏移)

 frac取小数的作用是优化纹理采样,使得采样纹理的UV在0-1的范围内


 实现透贴效果

Tags{"Queue"="Transparent"}

当序列图为透贴格式时,使用 Blend SrcAlpha OneMinusSrcAlpha 来实现背景透明

还可以在片元着色器中使用 c.rgb *= c.a; , 透明区域的a通道中的值为0,所以此时透明背景就变为黑色,所以要配合 Blend One One 来使用

若序列图的背景是黑色时,可以使用 Blend One One 

综上所述,可以使用 c.rgb *= c.a 和 Blend One One 共同实现透贴图片和黑底图片的半透明效果

Shader"unity/UV"
{Properties{[NoScaleOffset]_MainTex("MainTex",2D)="white"{}_Row("Row",float)=1_Column("Column",float)=1_Speed("Speed",float)=3[Enum(Billaboard,1,VerticalBillaboard,0)]_BillaboardType("BillaboardType",int)=1}SubShader{Tags{"RenderPipeline"="UniversalPipeline""Queue"="Transparent"}//常用于透贴// Blend SrcAlpha OneMinusSrcAlpha//用于黑底图片Blend One OnePass{HLSLPROGRAM#include "Packages/com.unity.render-pipelines.core/ShaderLibrary/Common.hlsl"#include "Packages/com.unity.render-pipelines.core/ShaderLibrary/Color.hlsl"#include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Input.hlsl"#pragma vertex vert#pragma fragment fragTEXTURE2D(_MainTex);float4 _MainTex_ST;#define sampler_MainTex samplerState_Linear_RepeatSAMPLER(sampler_MainTex);CBUFFER_START(UnityPerMaterial)float _Row,_Column,_Speed;int _BillaboardType;CBUFFER_ENDstruct Attributes{float4 positionOS : POSITION;float2 uv : TEXCOORD;};struct Varyings{float4 positionCS : SV_POSITION;float2 uv : TEXCOORD;};Varyings vert(Attributes v){Varyings o = (Varyings)0;o.positionCS = TransformObjectToHClip(v.positionOS);o.uv = TRANSFORM_TEX(v.uv,_MainTex);//序列图动画的起始位置o.uv = float2(v.uv.x/_Column,v.uv.y/_Row+1/_Row*(_Row-1));//frac取小数的作用是优化纹理采样,使得采样纹理的UV在0-1的范围内//U方向上的走格 floor(_Time.y*_Column)/_Column代表一秒钟走完一行中的所以列的格子o.uv.x+=frac(floor(_Time.y*_Column*_Speed)/_Column);//V方向上的走格 floor(_Time.y)/_Row 代表每一秒走一行o.uv.y-=frac(floor(_Time.y*_Speed)/_Row);return o;}float4 frag(Varyings i):SV_Target{float4 c;float4 mainTex = SAMPLE_TEXTURE2D(_MainTex,sampler_MainTex,i.uv);c=mainTex;//用于透贴图片消除Alpah为0的区域 Alpha=1为不透明,Alpha=0为透明c.rgb*=c.a;return c;}ENDHLSL}}}

相关文章:

  • 算法导论第6章思考题
  • Django 自定义celery-beat调度器,查询自定义表的Cron表达式进行任务调度
  • Transformer架构指南:从原理到实战资源全更新
  • AI中常用概念的理解
  • 格雷希尔用于工业气体充装站的CZ系列气罐充装转换连接器,其日常维护有哪些
  • 【学习笔记】Shell编程--Bash变量
  • 开源版禅道本地安装卸载备份迁移小白教程
  • “100% 成功的 PyTorch CUDA GPU 支持” 安装攻略
  • 一个完整的神经网络训练流程详解(附 PyTorch 示例)
  • pytorch的cuda版本依据nvcc --version与nvidia-smi
  • 6.1/Q1,浙江医院用NHANES:膳食中摄入黄酮类化合物有助于延缓生物衰老过程
  • 深⼊理解指针(7)
  • 第九节:文件操作
  • Pytorch深度学习框架60天进阶学习计划 - 第55天: 3D视觉基础(二)
  • 精华贴分享|【零敲碎打12】类筹码数据构建-散户行为倾向
  • flutter 专题 五十六 Google 2020开发者大会Flutter专题
  • javaScript——DOM(四)
  • DataWorks Copilot 集成 Qwen3-235B-A22B混合推理模型,AI 效能再升级!
  • TCP和UDP的数据传输+区别
  • Linux 部署以paddle Serving 的方式部署 PaddleOCR CPU版本
  • 王毅谈金砖国家反恐和网络安全合作
  • 湖北鄂州通报4所小学学生呕吐腹泻:供餐企业负责人被采取强制措施
  • 抗美援朝老战士宁昭逝世,享年93岁
  • 马上评|什么才是地方文旅宣传的正确姿势
  • 百年传承,再启新程,参天中国迎来2.0时代
  • 总书记考察的上海“模速空间”,要打造什么样的“全球最大”?