element3ds.com
原创TA-Shader [Unity] 【TAshader工程】七色UI特效数学算法-环绕动画丰富案例-全算法
发布于
2024-5-5
115358
703
原创TA/Shader
Shader信息: 节点shader文件
Shader类型: 特效 UI/界面 
工程信息: 完整工程 
使用的版本管线: Unity2017.4 、Unity2021

您需要 登录 才可以下载或查看,没有账号?注册

x
2021-6-23更新Unity2021-URP版本,新的链接在付费框内,已经购买的用户可以免费获取!

七种颜色,七个范例,7个模块,七个兄die,七倍的快乐
构成我们这一期小学难度的TA学习资料,UI数学算法

有些同学可能比较怕数学,担心看不懂,别怕,兄die,这是只要九年义务教育及格就一定能看懂的程度!
尊敬的游客,如果您要查看本帖关注 或 回复可见内容请关注回复后刷新页面查看!



A2CC22.jpg

Snipaste_2022-06-23_20-34-49.jpg 场景文件在Scene目录下

关键特性和关键字【Shader数学算法】
  • shader数学算法,依靠数学公式对0-1内的数字在UV坐标空间一顿操作,然后输出到像素,显示在任意模型或面片上
  • 可以用在很多地方,常见为 UI高亮提示效果,当然作为场景中的霓虹灯,特殊特效也可以使用这些方法
  • 适合新人TA学习基础算法,也适合UI同学给自己的UI作品加分
  • 适合商业游戏项目直接使用,大家的需求往往都差不多,都是转啊转的没毛病
  • 这里还有很多不常见的新框体动画效果,可以配合奇特的贴图,出现奇特的效果

本帖内容
  • Unity2017.4 、Unity2021全工程
  • 1个scene案例 包括的各种效果prefab
  • UI界面部分只是背景图,不是图素
  • 7个 ASE源工程 shader  和 40多个材质案例
  • 视频中展示的材质库,组合不同图素更是可以快速千变万化
  • 在微元素内购买本贴可以用于所有商业的项目
  • 购买本贴,如遇问题和算法问题,可以在元素 TA群 318958005 找元素界王解答


对比传统
用shader数学算法制作的UI 小动画,比传统做法(模型UV  和 序列动画)效率效果都高N个数量级
纯数学算法拥有以下各种优势
1 显存内存容量:
  • 很多传统帧序列要做到较为流畅的边框动画,需要5X5的帧序列来做到25帧,至少需要1024~2048的贴图才能勉强高清
  • 数学算法不需要这么多画面单帧,只需要一个纹理样式基础 图,256就可以做的非常清晰。

2  流畅度

  • 序列动画 一般 4X4  5X5  很少有到6X6,也只有6X6能突破30帧的画面,但消耗不菲,且清晰度有限
  • 数学算法的shader ,帧率可以不锁,也可以完全匹配应用程序的 最大帧率,做到极为流畅,及时是120帧画面,每帧也流畅舒适

3 时间自由
  • 传统做法的时间是固定,或者时间需要用曲线重新去K序列,帧序列做法考虑流畅的话,基本上不能降低速度,只能快速播放,越快跳帧越少
  • 数序shader无惧时间缩放,再慢的速度 也可以完美适配帧率,不可能存在卡顿效果,比如3秒转一圈,这种细致的动画也毫无难度,设置一个参数即可

4  环宽设定

  • 无论是 UV动画还是帧序列 这一点都是做不到的,不能实时调节边框宽度,大R-小R就是环宽,一般流程要做死,很难适配到不同的宽度UI
  • 数学shader 就是一个参数的事情,所以即使其他条件不变,做出不同环宽也可以有很大的视觉样式差异

5 色彩与图素更换

  • UV模型是可以随时变化的,这与数学算法一致,但是帧序列动画这种,是不可能实时换图素的,颜色也要看原序列图的颜色是否适合换色
  • shader算法 可以做到快速的 换图素 和 颜色,图素一般使用 二方或者 4方,总归有连续性方便适配

6 无限圆滑

  • 模型做的环绕动画,如果是实时,总归是有模型段数和三角面的 ,在一定距离可能光滑,但放大后可能段数明显,且越光滑,需要的多边形越高,帧序列放大则画质低
  • shader算法 用到圆周率函数值 【派】计算, 所以就算是显微镜看 也不会出现模型的卡角。如丝顺滑,且没有多边形的显存,容量的消耗,大图多层叠加,优势越明显

7 特殊规则
  • 如箭头,环绕球变小等属于特定规则,需要特定的图素和数字配合
  • 拥有源文件掌握即可随意修改,创作趣味性 和 作品的专属效果
  • 如小球环绕,后面拖尾的小球数量可以控制
  • 一个二方连续做圆周运动需要重复几次等



这套ShaderUI实用案例可以学习到什么?
  • 这个工程可以帮助你学习哪些知识点?
  • 基础图像和坐标系知识
  • 扩展图像的思路,如果通过简单图像生成复杂的组合图像
  • 色域转化控制,比如吧(0~1)分成N个亮度梯度,再把这个梯度作为UV的U,结合另外的V结果
  • 抗锯齿设计,默认程序化图像有级强的锯齿,有很多小技巧来降低锯齿
  • 多pass混合,比如底下一个轨道,上面有一个环绕的动画去循环,但在1个面片上


性能和优化?
  • 算法的效率极高,都是一些插入 四则运算,对于GPU来说算这些东西,简直是毛毛雨
  • UV动画 和 帧序列也是需要UV计算和转换的,他们在shader的复杂度来说是差不多,可能节点多个20%
  • 节约了更多贴图 和模型 的计算,总体来说 ,应该是有更佳的效率


后续更新
  • 准备升级一些六边形的形状,这个也是常见
  • 升级 长宽比不同的矩形按钮,但转速稳定





Snipaste_2020-05-05_18-56-13.jpg
Snipaste_2020-05-05_18-57-48.jpg
Snipaste_2020-05-05_18-57-57.jpg
参与人数 16 元素币 +238 活跃度 +424 贡献值 +1
想要成大触,天天上元素

使用道具 举报 登录

回复 <
nldxhsw  发表于 2020-5-6 22:18:26  
677938#
绝对的好东西啊
回复 收起回复
使用道具
千水凝冰  发表于 2020-5-7 08:02:16  
678531#
看起来很不错啊
回复 收起回复
使用道具
シキ  发表于 2020-5-5 20:15:40  
2#
好东西啊,买了买了
回复 收起回复
使用道具
岚色花火  发表于 2020-5-5 21:02:04  
3#
葫芦娃葫芦娃本领ing大
回复 收起回复
使用道具
凌一一  发表于 2020-5-5 22:13:56  
4#
回复 收起回复
使用道具
超级飞侠  发表于 2020-5-6 09:30:10  
5#
这个感觉一般
回复 收起回复
使用道具
壮士~等等我~  发表于 2020-5-6 10:01:33  
6#
。。。。。。听配乐我裂开来了
回复 收起回复
使用道具
路飞  发表于 2020-5-6 10:22:28  
7#
好屌啊 感觉自己好穷啊
回复 收起回复
使用道具
天蝎  发表于 2020-5-6 10:31:25  
8#
啊····真香····希望界王多出一些这样的干货

评分

参与人数 1元素币 +1
元素界王神... + 1 计划中!

查看全部评分

回复 收起回复
使用道具
小朱的自留地  发表于 2020-5-6 10:35:56  
9#
看看
回复 收起回复
使用道具
JaricZou  发表于 2020-5-6 10:54:16  
10#
厉害
回复 收起回复
使用道具
几点_77  发表于 2020-5-6 10:56:10  
11#
厉害
回复 收起回复
使用道具
小小冒险家  发表于 2020-5-6 11:31:24  
12#
哇塞 看着好好啊
好方便的样子
回复 收起回复
使用道具
qq_旧巷_ffX  发表于 2020-5-6 11:36:55  
13#
看看感觉
回复 收起回复
使用道具
dalaovip  发表于 2020-5-6 11:40:31  
14#
我的文档无无无无
回复 收起回复
使用道具
元素动效狂  发表于 2020-5-6 11:45:36  
15#
买买买
回复 收起回复
使用道具
plume  发表于 2020-5-6 11:47:00  
16#
厉害
回复 收起回复
使用道具
volcanoFX  发表于 2020-5-6 11:49:32  
17#
感谢分享
回复 收起回复
使用道具
qq_spinoza_AYH  发表于 2020-5-6 12:25:52  
18#
回复 收起回复
使用道具
242  发表于 2020-5-6 12:40:45  
19#
6
回复 收起回复
使用道具
zy2346148  发表于 2020-5-6 12:47:44  
20#
求分享 谢谢楼主
回复 收起回复
使用道具

快来发表你宝贵的意见吧!

元素界王 实名

通过了实名认证的内容创造者

十六倍界王拳

  • 价格:188元素币

  • 主题
    44
    精华
    30
    超神
    0
    扩散
    0
    微金
    3000
    智慧
    291
    余额
    712
    在线时间
    14 小时

    天子剑 女皇之泪 战神 射日 暴风之眼 圣光之钻 五星珠 【绝】赤影战盔 【绝】魔焰斧 烈火长枪

    快速回复 返回顶部 返回列表