[Unity] ShaderGraph实现Sprite图片描边/发光效果

8月前作者：超龄魔法少女分类：Toy博客阅读(33) 违法举报

这篇具有很好参考价值的文章主要介绍了[Unity] ShaderGraph实现Sprite图片描边/发光效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

使用版本为：2022.3.10f1

[Unity] ShaderGraph实现Sprite图片描边/发光效果,unity [原始图] [运行前] [运行后]

更详细的实现逻辑及步骤参考CodeMonkey的视频：

https://youtu.be/FvQFhkS90nI?si=zy6XRlqGnzIdQkqD

OS：猴子老师，我永远的神！！！

目录

一、准备工作

二、偏移效果与颜色叠加

三、单侧描边与原理

四、另一侧与Sub管理

五、最终效果

六、文件下载

下面进入正题

一、准备工作

新建Sprite Lit Shader Graph，并给Fragment加一个Built-In。

[Unity] ShaderGraph实现Sprite图片描边/发光效果,unity

[Unity] ShaderGraph实现Sprite图片描边/发光效果,unity

二、偏移效果与颜色叠加

这个效果的核心实现原理，是利用贴图的偏移进行叠加。如下图所示，改变Tiling And Offset中的Offset X Y值，可以看到单侧已经出现了描边效果。

为了节省空间看着干净，没用的窗口视图都折叠了。中文那个灰框是Group Selection，框选要成组的节点，右键就能看到，框内右键Cut就是解组删除。

[Unity] ShaderGraph实现Sprite图片描边/发光效果,unity

Subtract的AB接口千万别连反了，这个是叠加顺序，错了后续颜色就会显示不出！！！（后文出现Subtract的地方会做提示，图懒得改了）

[Unity] ShaderGraph实现Sprite图片描边/发光效果,unity

不过现在整张图都是黑的，需要叠加原始图，让他显露出来。如下图红框所示，Add一下就行。[Subtract AB点反了]

[Unity] ShaderGraph实现Sprite图片描边/发光效果,unity

我们项目用的是URP渲染，所以Color选的HDR模式。运行时，Volume自动会后处理发光效果，内置渲染是不会发光的。

[Unity] ShaderGraph实现Sprite图片描边/发光效果,unity

三、单侧描边与原理

定义一个Float参数Outline Offect来管理图片偏差值（边缘厚度），连接上文提到Tiling And Offset中的Offset X Y值。（参数连接R因为这代表了X，同样G=Y，B=Z，A=Alpha，不了解的可看[Unity] ShaderGraph实现一个类似浸没、覆盖的变色效果_shader graph 攻击变色-CSDN博客）

[Unity] ShaderGraph实现Sprite图片描边/发光效果,unity

调试过程中会发现，Float参数的值为小数点后两位，阅读调试都很不方便，精度太高内存也占的多。所以加一个Multiply乘以0.1，用来省略一个小数点。（参数本来就大的话，这个不加也无所谓）

[Unity] ShaderGraph实现Sprite图片描边/发光效果,unity

同理，复制另一边效果。注意连线要改为G，也就是Y。

[Unity] ShaderGraph实现Sprite图片描边/发光效果,unity

Add两个描边效果，连接上文提到的Subtract。[Subtract AB点反了]

[Unity] ShaderGraph实现Sprite图片描边/发光效果,unity

修改Outline Offect值，可以看到现在两张偏移效果错位的厉害。

[Unity] ShaderGraph实现Sprite图片描边/发光效果,unity

加个Clamp就行，PS：虽然翻译叫夹紧、钳住，但感觉可以理解为范围限制，或者固定。[Subtract AB点反了]

[Unity] ShaderGraph实现Sprite图片描边/发光效果,unity

注意Clamp还要连一下Alpha，这样才可以把黑底去掉。

[Unity] ShaderGraph实现Sprite图片描边/发光效果,unity

四、另一侧与Sub管理

同理复制另一边效果，加个Negate就行。完成之后再各自新建Add节点加起来。

[Unity] ShaderGraph实现Sprite图片描边/发光效果,unity

PS：CodeMonkey老师Add这部分是这样连的 [Unity] ShaderGraph实现Sprite图片描边/发光效果,unity ，实测下来没发现有啥区别，具体可看原版视频。

连线过程中发现一直在重复新增Tiling和Sample节点，但里面的储存内容其实是一样的。不如建一个Sub Graph统一管理，如下图所示。（不了解的可看[Unity] ShaderGraph实现一块破洞的裂纹玻璃-CSDN博客这篇的文末）。

[Unity] ShaderGraph实现Sprite图片描边/发光效果,unity

五、最终效果

一通操作下，就完成最终效果啦。

[Unity] ShaderGraph实现Sprite图片描边/发光效果,unity

[Unity] ShaderGraph实现Sprite图片描边/发光效果,unity

六、文件下载

UnityShaderGraph实现Sprite图片描边/发光效果资源-CSDN文库文章来源地址https://www.toymoban.com/news/detail-807344.html

到了这里，关于[Unity] ShaderGraph实现Sprite图片描边/发光效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

Unity之ShaderGraph如何实现靠近显示溶解效果

今天我们来实现一个我再B站看到的一个使用LeapMotion实现的用手部触摸就可以显示的溶解效果。效果如下图所示： Position：提供对网格顶点或片段的Position 的访问，具体取决于节点所属图形部分的有效着色器阶段。使用Space下拉参数选择输出值的坐标空间。 Remap：基于输入

2024年02月04日
浏览(41)
使用Unity里的ShaderGraph实现物体边框呼吸灯效果

提前声明一下，以下效果需要在hdrp项目中进行。首先创建好我们的正方体：用来接下来的边框显示。这里需要创建两个材质球，一个用于显示方块的材质，另一个用于边框的显示。（Material用于方块材质，OutlineMat用于边框线）为了更好地突出边框的视觉效果我这里给它加

2024年04月22日
浏览(35)
【实现100个unity特效】shader实现3D物品闪光和描边效果

线状映射图片配置，按该shader新增材质 Outline Width控制描边 Line Speed控制闪光速度当然，还可以修改对应的颜色效果演示赠人玫瑰，手有余香！如果文章内容对你有所帮助，请不要吝啬你的点赞评论和关注，以便我第一时间收到反馈，你的每一次支持都是我不断创作的最

2024年01月25日
浏览(39)
unity shaderGraph实例-扫描效果

区域1 用场景深度减去顶点的View空间的视野深度（Z值），这里Z值需要乘-1是因为从相机看到的物体顶点的视野深度为-1，而场景深度是正值，所以需要乘-1让两者都为正。这一步的意义是，用场景中的深度减去sphere的视野深度，当sphere与场景的物体接近时，这个差将会非常接

2024年02月03日
浏览(27)
Unity中使用Post Processing 开自发光效果

正常设置步骤 1、项目中导入Post Processing插件 2、在Camera上添加 Post-process Layer 组件，选择Trigger为当前相机，Layer选择PostProcessing(请提前创建该层) 3、设置Post Processing 参数，新建空物体PostSetting，选择Layer为PostProcessing。添加Post-process Volume组件，勾选Is Global，添加Bloom效果，打开

2024年02月15日
浏览(30)
【Unity ShaderGraph】| 快速制作一个抖动效果

前言本文将使用ShaderGraph制作一个抖动效果，可以直接拿到项目中使用。对ShaderGraph还不了解的小伙伴可以参考这篇文章：【Unity ShaderGraph】| Shader Graph入门介绍 | 简介 | 配置环境 | 窗口介绍 | 简单案例下面就开始看一下具体的制作流程，然后自己动手制作一个吧！资源下载

2024年02月03日
浏览(35)
【Unity ShaderGraph】| 制作一个高级流体水球效果

前言本文将使用ShaderGraph制作一个高级流体水球，可以直接拿到项目中使用。对ShaderGraph还不了解的小伙伴可以参考这篇文章：【Unity ShaderGraph】| Shader Graph入门介绍 | 简介 | 配置环境 | 窗口介绍 | 简单案例下面就开始看一下具体的制作流程，然后自己动手制作一个吧！资

2024年02月08日
浏览(36)
【Unity ShaderGraph】| 快速制作一个卡通阴影色块效果

前言本文将使用ShaderGraph制作一个卡通阴影色块的效果，可以直接拿到项目中使用。对ShaderGraph还不了解的小伙伴可以参考这篇文章：【Unity ShaderGraph】| Shader Graph入门介绍 | 简介 | 配置环境 | 窗口介绍 | 简单案例下面就开始看一下具体的制作流程，然后自己动手制作一个吧

2024年02月06日
浏览(34)
【Unity ShaderGraph使用雪碧图制作导航光效效果】

效果： ShaderGraph的制作： shader中uv数和雪碧图的uv数对上就能出效果。直接上代码：代码绑定：下面是雪碧图：

2024年02月15日
浏览(32)
【Unity的HDRP渲染管线下实现好用的GUI模糊和外描边流光效果_Blur_OutLine_案例分享(内附源码)】

2023年10月31日
浏览(44)