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

【实现100个unity特效之8】使用ShaderGraph实现2d贴图中指定部分局部发光效果

news 2025/7/7 16:19:01

最终效果

寒冰法师

请添加图片描述

火焰法师

请添加图片描述

文章目录

最终效果
- 寒冰法师
- 火焰法师
素材
一、功能分析
- 实现方法
- 基本思路
- Unity的Bloom后处理
- 为什么关键部位白色？
- 最终结果
二、新建URP项目
三、合并图片
四、使用PS制作黑白图片
- 方法一手动涂鸦
- 方法二魔棒工具
- - 1. 拖入图片进PS，选择魔棒工具，容差设置为0，取消勾选连续，点选想要发光的区域
  - 2. 如果对一些选择不满意，可以点击添加到选区，就可以连续点选不满意的区域，如果不小心点错了，可以按Ctrl+z撤回
  - 3. 全部选中后，点击新建图层
  - 4. 将原来图层隐藏
  - 5. 点击填充
  - 6. 内容选白色，点击确认
  - 7. 点击新建选区，把原来的选择去掉
  - 8. 选择填充工具，颜色选黑色，容差设为0
  - 9. 导出
- 最终效果
五、将黑白图片制作成主图片的次级纹理
六、素材默认不支持光照，修改材质
七、接下来在场景中添加bloom进行后处理
八、添加全局2D光源
九、新建受到光源影响的Sprite Lit ShaderGraph
十、配置Sprite Lit ShaderGraph节点
- Sample Texture 2D节点
- add节点
- Multiply节点相乘
- One Minus节点取反
- 颜色误差问题
- 修复
- Split节点分裂
十一、多个次级纹理
最终效果
- shaderGraph最终连线图
- 寒冰法师
- 火焰法师
参考
源码
完结

素材

https://assetstore.unity.com/packages/2d/characters/gothicvania-church-pack-147117
在这里插入图片描述

一、功能分析

实现方法

将序列图中要发光的部位单独提取出来，进行处理完后在覆盖回原来的图片
具体的做法就是制作一张黑白的次级图片，白色的部分是对应主图片中要发光的部位，黑色部分就是背景
在这里插入图片描述

基本思路

1.让贴图中让想要发出光亮的部分使用一种更明亮的颜色
2.使用Bloom进行处理
在这里插入图片描述

Unity的Bloom后处理

是一种常用的后处理效果，可以让高亮区域的颜色逐渐扩散到周围并使得这些光源散发出更强烈的亮度，并产生柔和的光晕效果，增加视觉上的对比度和明亮感

为什么关键部位白色？

白色的RGB都是1,1乘任何数，都会变成那个数
黑色的RGB都是0,0乘任何数，都是0

在这里插入图片描述

最终结果

当我们处理完黑白次级图片后，就可以直接将其与主图片进行相加
在这里插入图片描述

二、新建URP项目

如果你的项目默认不是URP项目，可以选择升级到URP，参考：【unity小技巧】为啥我们的模型材质显示粉色？unity普通项目升级URP项目

在这里插入图片描述

三、合并图片

这个主角素材图片默认是分开的，我们先将图片合并，方便后续抠图

在线工具：http://sjli.github.io/spritemaker_extjs/example.html

合并后的图片
在这里插入图片描述

四、使用PS制作黑白图片

方法一手动涂鸦

可能精准但是耗时的方法，推荐用第二种

在这里插入图片描述

方法二魔棒工具

方便快捷的点选方法

1. 拖入图片进PS，选择魔棒工具，容差设置为0，取消勾选连续，点选想要发光的区域

在这里插入图片描述

2. 如果对一些选择不满意，可以点击添加到选区，就可以连续点选不满意的区域，如果不小心点错了，可以按Ctrl+z撤回

在这里插入图片描述
最终效果

3. 全部选中后，点击新建图层

在这里插入图片描述

4. 将原来图层隐藏

在这里插入图片描述

5. 点击填充

在这里插入图片描述

6. 内容选白色，点击确认

在这里插入图片描述
此时我们选中的部位就被白色填充了

7. 点击新建选区，把原来的选择去掉

在这里插入图片描述

8. 选择填充工具，颜色选黑色，容差设为0

在这里插入图片描述

9. 导出

在这里插入图片描述

最终效果

如果你比较懒，可以选择直接使用我准备好的黑图
请添加图片描述

五、将黑白图片制作成主图片的次级纹理

配置
在这里插入图片描述
制作成主图片的次级纹理，命名为_GlowTextures

六、素材默认不支持光照，修改材质

人物和场景都用这个Sprite-lit-default材质，这个材质可让我们的纹理接受光源影响

在这里插入图片描述

七、接下来在场景中添加bloom进行后处理

让相机支持后处理
在这里插入图片描述

新建Global Volume全局后处理
在这里插入图片描述

添加bloom泛光效果
在这里插入图片描述
Threshold(阈值)：控制哪些亮度的像素会受到泛光效果的影响。高于阈值的像素才会产生泛光效果，低于阈值的像素将不受影响。调整阈值可以控制泛光的出现频率。一般在0-1之间。简单说就是这个值越小,就会有更多物体会亮起来,值越大亮起来的物体就越少。一般默认填0.9就可以了
Intensity(强度)：控制泛光的亮度增强程度。增加该值会使泛光更明显，减小该值会减弱泛光效果。这个值可以控制光的亮度，值越大越亮。

八、添加全局2D光源

在这里插入图片描述

调低它的强度，因为我们不想让这些地面什么的亮起来
调低强度可以让这些物体，在Boom的阈值下面，可以让它们不亮起来，这里设为0.7了
在这里插入图片描述

九、新建受到光源影响的Sprite Lit ShaderGraph

在这里插入图片描述

按这个ShaderGraph新增材质挂载主角身上，可以看到主角变成了一坨，那是因为我们ShaderGraph还没有配置材质没有MainTex纹理属性。
在这里插入图片描述

十、配置Sprite Lit ShaderGraph节点

Sample Texture 2D节点

接收一个Texture2d类型的输入，输出这个Texture2d的RGBA
在这里插入图片描述

保存可以看到人物纹理已经渲染了
在这里插入图片描述
有同学就会有疑问了，我明明还没有配置主绝纹理，为啥主角就正常了。其实Unity它会自动根据这个reference上的值，从我们的精灵中尝试找到对应的纹理，而我们的主纹理里名称就是这个MainTex，就会自动找到主纹理，但是为了方便测试看到效果，这里我们还是手动配置一下主纹理
在这里插入图片描述
添加次级纹理，注意名称要对应，这样unity就会自动去查找到对应次级纹理，记得名称不需要下划线

为了方便演示，我们还是一样手动赋值一个纹理
在这里插入图片描述

add节点

add节点可以将两个纹理进行相加

我们的主纹理中有部分是透明的，而我们的这个黑白纹理中都是不透明的，虽然我们黑色的部分它的RGB都是O，但它的A是1，当我们直接使用这个（黑白纹理的）RGBA和主纹理（的RGBA)进行相加时，它的A会把主纹理的A给覆盖了，这样就会导致主纹理中的透明度都设为1了，透明部分都被覆盖了
在这里插入图片描述
我们只想取这个次级纹理的RGB，有一个简单的方法，就是直接使用其中任何一个通道，这里我们直接使用R通道。
当我们使用add的时候，Unity会自动进行转换，比如我们R是0，Unity会自动把它转换成RGBA都是0的值，而我们R是1的时候，Unity就会自动转换成RGBA都是1的值
在这里插入图片描述

保存，人物项链和攻击波已经亮起来了
在这里插入图片描述
这是因为白色是个很明亮的颜色，它已经达到了bloom能够处理的阈值，所以它就被bloom进行后处理了，赋予了光源

Multiply节点相乘

接下来我们添加一个color，使其可以修改我们的光源颜色，将黑白纹理和一个颜色进行相乘，达到修改白色部分的效果，颜色相乘，在Unity中叫做Multiply
在这里插入图片描述

可以修改颜色模式为HDR，这样就可以修改亮度
在这里插入图片描述
保存，效果

可以通过修改材质配置，修改颜色和亮度
在这里插入图片描述

效果
在这里插入图片描述

One Minus节点取反

颜色误差问题

细心的同学可能会发现，我设置的颜色和显示的颜色总是有点误差，显示的颜色总是偏浅。
在这里插入图片描述

因为修改颜色的原理大致就是修改要发光部位的底色，而最后加法的最终结果会受到底色的影响所以是有误差的
在这里插入图片描述

修复

不过这个问题其实可以通过将次级纹理（如果有多个次级纹理就使用Add节点把他们加起来之后）使用One Minus节点得到反相图，然后和主纹理通过Multiply节点相乘代替主纹理就可以避免掉这个问题了。
在这里插入图片描述
效果

Split节点分裂

如果不想Alpha连线太长
在这里插入图片描述

可以在最后添加Split节点，把图片重新拆分RGBA，再连接
在这里插入图片描述

十一、多个次级纹理

如果有其他次级纹理，比如剑光和盾防纹理也是类似配置
在这里插入图片描述

然后使用Add把他们相加，最后应用到主纹理上
在这里插入图片描述

最终效果

shaderGraph最终连线图

在这里插入图片描述

寒冰法师

在这里插入图片描述

请添加图片描述

火焰法师

在这里插入图片描述

请添加图片描述

参考

www.youtube.com/watch?v=WiDVoj5VQ4c
https://www.youtube.com/watch?v=Tm0rRX8GnFk
https://www.bilibili.com/video/BV17x4y1d7om/

源码

整理好了我再放上来

完结

赠人玫瑰，手有余香！如果文章内容对你有所帮助，请不要吝啬你的点赞评论和关注，以便我第一时间收到反馈，你的每一次支持都是我不断创作的最大动力。当然如果你发现了文章中存在错误或者有更好的解决方法，也欢迎评论私信告诉我哦！

好了，我是向宇，https://xiangyu.blog.csdn.net

一位在小公司默默奋斗的开发者，出于兴趣爱好，最近开始自学unity，闲暇之余，边学习边记录分享，站在巨人的肩膀上，通过学习前辈们的经验总是会给我很多帮助和启发！php是工作，unity是生活！如果你遇到任何问题，也欢迎你评论私信找我，虽然有些问题我也不一定会，但是我会查阅各方资料，争取给出最好的建议，希望可以帮助更多想学编程的人，共勉~
在这里插入图片描述

最终效果

寒冰法师

火焰法师

文章目录

素材

一、功能分析

实现方法

基本思路

Unity的Bloom后处理

为什么关键部位白色？

最终结果

二、 新建URP项目

三、合并图片

四、使用PS制作黑白图片

方法一 手动涂鸦

方法二 魔棒工具

1. 拖入图片进PS，选择魔棒工具，容差设置为0，取消勾选连续，点选想要发光的区域

2. 如果对一些选择不满意，可以点击添加到选区，就可以连续点选不满意的区域，如果不小心点错了，可以按Ctrl+z撤回

3. 全部选中后，点击新建图层

4. 将原来图层隐藏

5. 点击填充

6. 内容选白色，点击确认

7. 点击新建选区，把原来的选择去掉

8. 选择填充工具，颜色选黑色，容差设为0

9. 导出

最终效果

五、将黑白图片制作成主图片的次级纹理

六、素材默认不支持光照，修改材质

七、接下来在场景中添加bloom进行后处理

八、添加全局2D光源

九、新建受到光源影响的Sprite Lit ShaderGraph

十、配置Sprite Lit ShaderGraph节点

Sample Texture 2D节点

add节点

Multiply节点相乘

One Minus节点取反

颜色误差问题

修复

Split节点 分裂

十一、多个次级纹理

最终效果

shaderGraph最终连线图

寒冰法师

火焰法师

参考

源码

完结

相关文章：

二、新建URP项目

方法一手动涂鸦

方法二魔棒工具

Split节点分裂