ShaderGraph 案例集：2D/基础/箭头移动像素化（200517）

最新推荐文章于 2024-07-24 13:37:49 发布
最新推荐文章于 2024-07-24 13:37:49 发布
阅读量891 收藏 6
点赞数 2
分类专栏： Unity shader
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kill566666/article/details/106172227
版权
该教程详细介绍了如何使用ShaderGraph实现2D箭头的动态移动、像素化效果以及栅格化叠加颜色。通过Tiling And Offset节点结合Time控制UV变化实现动态箭头，利用像素化原理通过Round节点创建像素艺术效果，同时讲解了栅格化叠加颜色的实现方法，结合Fraction函数形成独特的视觉效果。
摘要由CSDN通过智能技术生成

像素化箭头移动

1.箭头移动

在这里插入图片描述原理讲解
Tilling And Offset 节点其实就是UV节点,只是提供了Tilling和Offset 两种变化属性
最后就是简单的通过Time设置 Tilling ,从而驱动UV产生动态变化

2.像素化

在这里插入图片描述

原理讲解

节点的步骤是:

  1. Tilling and Offset节点其实就是相当于UV
  2. UV乘上pixels(像素化程度)相当于UV放大
  3. 再加上了0.5,这里的0.5相当于Y轴的偏移,不影响像素化
  4. 上面的结果又通过Round节点,四舍五入
  5. 最后的再除以pixels,还原UV

我们都知道

  • A*B=C
  • B/C = A
    就是说一个数乘一个倍数再除一个相同的倍数,最后是结果还是这个数.那么这里的UV乘一个pixels后再除一个pixels,最后会有像素化的效果呢?秘密就藏在Round节点上

我们需要将UV的值理解成连续的0到1 - [0,1],而不是一个个0.1,0.2,03这样离散的数组成的.
所以UV乘一个pixels再通过Round节点,经过四舍五入后,连续的数就有一部分丢失了,被取整了.
最后还原UV后,UV的本来连续的数才变成了一个个像素块,从而得到像素化效果

3.栅格化叠加颜色

最低0.47元/天 解锁文章
kill566666
关注
专栏目录
ShaderGraph 案例集：2D/基础/叶子浮动（201128）
kill566666的博客
11-28 855
ShaderGraph 案例集：2D/基础/叶子浮动 效果 效果描述： 树叶，草丛等叶片的随机浮动 效果分析 图片的像素点坐标在X方向左右随机摆动，且摆动幅度沿Y轴由下至上逐渐增强 思路分析 效果分解 step 1： 移动像素点的X轴坐标 节点讲解 position 节点通过 split节点 分解出 X轴 给X轴加上一个值，这里先加上0.5， 把得到的X轴和原本的其他轴在通过Combine 节点组合起来，赋值给主节点 Combine 节点 也可以替换成 Vector3 节点，但是Combine语意
09.Unity ShaderGraph实例（LWRP+UnitMaster节点制作自发光效果的精灵）
Unity3d 攻城师一枚
11-28 2481
Node：Time Node：Multiply Node：Sine Node：Remap Node：Lerp Node：OneMinus Node：Branch ShardGraph：基于时间的周期处理 ShardGraph：另一种过滤精灵Alpha方法 原始图和效果展示 Node：Time 功能定义 在Shader中提供访问时间单位的参数 端口介绍 代码生成 float Time_...
Shader学习第十二篇：ShaderGraph实现序列帧动画
u014196765的博客
12-02 1382
上篇我们介绍了ShaderLab编程实现序列帧动画，这里我们介绍一下如何使用可视化界面ShaderGraph来实现。在使用ShaderGraph的过程中，我们可以了解ShaderGranph的一些操作，由于上篇文章已经分享了原理方面的知识，这里不再赘述。我们便开始ShaderGraph来实现序列帧动画。
【实现100个unity特效之8】使用ShaderGraph实现2d贴图中指定部分局部发光效果
最新发布
向宇
07-24 2198
我们的主纹理中有部分是透明的，而我们的这个黑白纹理中都是不透明的，虽然我们黑色的部分它的RGB都是O，但它的A是1，当我们直接使用这个（黑白纹理的）RGBA和主纹理（的RGBA)进行相加时，它的A会把主纹理的A给覆盖了，这样就会导致主纹理中的透明度都设为1了，透明部分都被覆盖了。(阈值)：控制哪些亮度的像素会受到泛光效果的影响。当我们使用add的时候，Unity会自动进行转换，比如我们R是0，Unity会自动把它转换成RGBA都是0的值，而我们R是1的时候，Unity就会自动转换成RGBA都是1的值。
ShaderGraph案例工程
07-23
这个项目是一个使用Unity 2018.1的SG特性创建的不同自定义着色器库。所有的着色器都兼容轻量级脚本渲染管道。
Shader Graph学习各种特效案例（持续更新）
o_ojjj的博客
08-09 6787
ShaserGraph 特效案例学习
Unity2018 ShaderGraph 程序化纹理示例
04-12
一个学习Shader的案例集，无论是ShaderGraph、ShaderForge还是Amplify Shader Editor，思路都是相通的。
ValueError: I/O operation on closed file 解决办法
热门推荐
一个超会写Bug的程序猿的博客
02-27 7万+
报错：ValueError: I/O operation on closed file ValueError: I/O operation on closed file。是指处理了已经被关闭的数据。一般是语句没有对齐。当python的处理代码不对齐的时候会出现这种情况。 使用with方法打开了文件，生成的文件操作实例在with语句之外是无效的，因为with语句之外文件已经关闭了。 报错部分代码： class Maoyan(object): ... def run(self):
女性朋友约我看水，我反手用可视化搞出水面倒影(Shader Graph)
空名先生
06-03 1万+
????即将学会 Shader Graph可视化Shader编辑工具创作一个水面倒影效果，不需要写代码就能实现效果。
Shader Graph制作2D Sprite描边
姬垚的博客
03-28 5325
1、制作原理 主要是参考GUI的Text的描边原理。实际上就是复制四个纹理在上下左右方向各平移N个像素 2、制作流程 因为不需要光照效果，所以使用Unlit Master节点输出。整体结构如下： 设置了3个参数，分别控制图片纹理，描边颜色，描边宽度。我没有像GUI那样用X,Y控制描边，而是使用宽度统一调整，如果需要可自行添加。 图中左边部分主要控制纹理的UV坐标分别上下左右位...
Shader Graph的点子和思路
03-03
Tips: -- 在shader forge和amplyfy Shader节点图形化shader编程的诱惑下，unity官方终于在2018版本也推出了而自己shader节点可视化编程工具Shaderr Graph。本篇文章是对Shader Graph一些效果的尝试，建议学习shader的朋友也尝试下这些工具，对shader的理解会更加直观 -- 效果中自发光光晕是使用的PostProcess中bloom，须自行添加 -- 图看不清，右击在标签页中打开 -- 想要自发光更炫，Color属性节点开启HDR模式
ShaderGraph实战之全息效果Shader
06-25
全息效果是通过贴图的Offset随时间滚动产生，ShaderGraph实战之全息效果
Unity Shader实现2D水流效果
12-20
水流的模拟主要运用了顶点变换和纹理动画的结合； 顶点变换中，利用正弦函数模拟河流的大致形态，例如波长，振幅等。 纹理动画中，将纹理坐标朝某一方向持续滚动以形成流动的效果。 脚本如下： Shader "MyUnlit/ScrollWater" { Properties { _MainTex ("Texture", 2D) = "white" {} _Color("Color Tint",color)=(1,1,1,1) //控制水流波动的幅度，也就是三角函数中的振幅（值域范围） _Magnitude("Distortion Magnitude",float)=0.3 /
ShaderGraph节点详解完整版20191221.pdf
01-29
https://blog.csdn.net/nicepainkiller/article/details/104108444 ShaderGraph节点详解完整版 ShaderGraph节点详解完整版 https://blog.csdn.net/nicepainkiller/article/details/104108444
Unity ShaderGraphs(二) 一些操作UV节点的举例
oscarwsd的博客
07-25 2002
效果：PingPong 较上一篇中的移动贴图，这里做了一些简单的拓展，主要使用Sine节点（正弦函数），实现贴图来回移动，像乒乓球一样。节点如下： 其中： Property:Speed 控制移动速度 Property:Distance 单次移动的最大距离 Sine节点：这里是输入Time的累积量，输出是[-1,1] Remap节点：重新映射到某个范围，这里是从[-1,1]映射到[0,distance] Tiling And Offset节点：这里主要是使用Offset偏移值，传入Remap之后的结果，则
【Shader】实验03——后处理实现像素化风格
糕二不二的博客
01-15 2958
像素化风格是一种特殊的风格化美术效果，表现为像素点大且明显，边缘锐利，通常色彩明丽，给人以活泼复古的感觉。 通过后处理把uv坐标放大数倍后取整，再缩小为原来的大小，就将多个坐标映射到同一采样点，导致像素点增大，实现像素化风格效果。 Shader Shader "MyShaderTest/3_PixelStyle" { Properties { _MainTex ("Base (RGB)...
移动平台上Shader Graph 和AmpliyShader
01-24 591
ampliyShader在移动平台和unity 2020上不太稳定。但是可实现的效果比shader Graph多很多。 但是，ampily的性能消耗其实很大。 如果需要出好的效果，是需要很多变量和加减乘除的。 这样与我们在移动平台能够进行运算并且减少消耗的目标相反。 移动平台上还是建议用Shader Graph.这样可以减少硬件性能和消耗 shader Graph很多节点都很朴素。尽量多在贴图模型和UV上减少shader graph的本来负担。 ampilyshader的效果很好，并且他
Shader Graph 龙卷风
我知道你很急,但是路要一步步走
09-27 461
效果预览: ffmpeg mp4转gif命令: ffmpeg -i F:\OBS_Videos\Unity_VFX_Videos\Tornado.mp4 -s 600*400 -r 15 F:\OBS_Videos\Unity_VFX_Videos\Tornado.gif 做3个不同颜色的叠加,调节参数即可,下图为蓝色的 程式:
Unity数据可视化：2D/3D图形图表库
这个资源为Unity开发者提供了一套强大且灵活的数据可视化工具，无论是在游戏、教育、数据分析还是其他领域，都能帮助开发者创建引人入胜且信息丰富的2D/3D可视化体验。配合提供的链接...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值