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

news2024/9/21 20:31:36

最终效果

寒冰法师

请添加图片描述

火焰法师

请添加图片描述

文章目录

  • 最终效果
    • 寒冰法师
    • 火焰法师
  • 素材
  • 一、功能分析
    • 实现方法
    • 基本思路
    • 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是生活！如果你遇到任何问题，也欢迎你评论私信找我， 虽然有些问题我也不一定会，但是我会查阅各方资料，争取给出最好的建议，希望可以帮助更多想学编程的人，共勉~
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1947166.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

干货 | 记一次src通杀漏洞挖掘

干货 | 记一次src通杀漏洞挖掘

0x1 前言 这里我是有目的地去对某机构或者某学校进行渗透测试漏洞挖掘的，之前在网上看到很多文章说可以直接去edusrc官网的漏洞排行榜上去找，可以去看一些开发商排行榜以及某些高校大学的排行榜，里面有很多的该公司或者该学校的漏洞提交情况…
阅读更多...
PACS医学影像临床信息系统，C#影像归档和通信系统源码，PACS源码，支持图像的获取、传输、浏览、打印、测量、重建、对比、存储、处理，电子胶片影像管理等

PACS医学影像临床信息系统，C#影像归档和通信系统源码，PACS源码，支持图像的获取、传输、浏览、打印、测量、重建、对比、存储、处理，电子胶片影像管理等

医学影像临床信息系统具有图像采集、显示、存储、传输和管理等功能，支持DICOM影像设备和非DICOM影像设备，可以识别CT、MR、CR/DR、X光、DSA、B超、NM、SC等设备的图像类型，可对数字影像进行无损压缩和有损压缩处理。C/S体系结构的多媒体数据库…
阅读更多...
mysql面试（四）

mysql面试（四）

前言 本章节有些长，主要的篇幅是介绍缓存页的算法，如何快速的定位哪些是没有用过的，哪些是用过的，哪些是要淘汰掉的。 建议可以阅读一下这里面LRU算法相关的内容，和很多组件里面基本原理都是想通的，比如re…
阅读更多...
Mac m1安装 MongoDB 7.0.12

Mac m1安装 MongoDB 7.0.12

一、下载MongoDB MongoDB 社区版官网下载 二、安装配置MongoDB 1.解压下载的压缩包文件，文件夹重命名为mongodb; 2.将重命名为mongodb的文件夹，放在/usr/local 目录下 3.在/usr/local/mongodb 目录下，新建data 和 log这两个文件夹&#…
阅读更多...
【word转pdf】【最新版本jar】Java使用aspose-words实现word文档转pdf

【word转pdf】【最新版本jar】Java使用aspose-words实现word文档转pdf

【aspose-words-22.12-jdk17.jar】word文档转pdf 前置工作1、下载依赖2、安装依赖到本地仓库 项目1、配置pom.xml2、配置许可码文件（不配置会有水印）3、工具类4、效果 踩坑1、pdf乱码2、word中带有图片转换 前置工作 1、下载依赖 通过百度网盘分享的文…
阅读更多...
css实现线条中间高亮，左右两边模糊（linear-gradient的运用）

css实现线条中间高亮，左右两边模糊（linear-gradient的运用）

效果&#xff1a; <div class"line"></div> .line {height: 1px;background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #a9c2ff 50%, rgba(255, 255, 255, 0) 100%);border-radius: 4px 4px 4px 4px; } CSS实现边框底部渐变色的方法:(最简单…
阅读更多...
Python基础-语句结构、数据输入

Python基础-语句结构、数据输入

1、分行与缩进 分行&#xff1a; python每一句语句有长度限制&#xff0c;因此不应过长&#xff0c;如果语句过长可以使用\续航符或者加上()控制换行。 []&#xff0c;{}, ()可以直接跨越多行&#xff0c;在列表、字典、元组中需要换行的时候可以不用添加续行符号。 缩进&…
阅读更多...
【Java题解】以二进制加法的方式来计算两个内容为二进制数字的字符串相加的结果

【Java题解】以二进制加法的方式来计算两个内容为二进制数字的字符串相加的结果

&#x1f389;欢迎大家收看&#xff0c;请多多支持&#x1f339; &#x1f970;关注小哇&#xff0c;和我一起成长&#x1f680;个人主页&#x1f680; &#x1f451;目录 分析&#xff1a;&#x1f680; 数字层面分析⭐ 字符串层面分析⭐ 代码及运行结果分析:&#x1f6…
阅读更多...
如何在 Windows 11 中录制屏幕

如何在 Windows 11 中录制屏幕

录制屏幕是Windows 11上一项非常有用的功能。在专业方面&#xff0c;它允许您捕获屏幕以突出显示问题或向同事展示新的工作流程。您还可以录制演示文稿&#xff0c;并在整个公司内共享。对于游戏&#xff0c;它可以让您录制动作片段&#xff0c;然后可以与朋友分享或在线发布。…
阅读更多...
Vue---vue3+vite项目内使用devtools，快速开发！

Vue---vue3+vite项目内使用devtools，快速开发！

背景 我们在前期开发时&#xff0c;一般使用chrome或者edge浏览器&#xff0c;会使用vue-devtools或react-devtools&#xff08;此插件个人未使用&#xff0c;可百度下是否可内嵌入项目&#xff01;&#xff09;来审查vue项目&#xff1b;这个需要安转浏览器插件才可支持&…
阅读更多...
Python脚本通过Kvaser和ECU进行CAN通信

Python脚本通过Kvaser和ECU进行CAN通信

1 安装软件 Kvaser官网： https://kvaser.com/download/ 下载下面三个软件包： 下载完如下图： 双击安装这三个软件。 2 查看设备信息 将 Kvaser 工具连接电脑和 ECU，工具包含两个物理通道， CAN I 和 CAN II，我的是用 CAN I 和 ECU 连接的。 然后打开下面的软件， …
阅读更多...
2024-06学习笔记

2024-06学习笔记

1.事务与数据库链接的占用 如果用Transactional注解&#xff0c;那在第一次与数据库交互的时候&#xff0c;就会打开数据库链接&#xff0c;再整个方法执行完&#xff0c;才会关闭数据库链接。 即使后边用的事务传播是required_new,那之前的事务也是被挂起&#xff0c;不会被…
阅读更多...
前端面试宝典【Javascript篇】【3】

前端面试宝典【Javascript篇】【3】

欢迎来到《前端面试宝典》&#xff0c;这里是你通往互联网大厂的专属通道&#xff0c;专为渴望在前端领域大放异彩的你量身定制。通过本专栏的学习&#xff0c;无论是一线大厂还是初创企业的面试&#xff0c;都能自信满满地展现你的实力。 核心特色&#xff1a; 独家实战案例…
阅读更多...
大语言模型-GPT2-Generative Pre-Training2

大语言模型-GPT2-Generative Pre-Training2

一、背景信息&#xff1a; GPT2是2019年由OpenAI 提出的预训练语言模型。 GPT2提出语言模型式无监督的多任务学习 。旨在通过无监督学习也能达到和finetune一样的效果&#xff0c;并且拥有更强的泛化能能力。 即提出利用语言模型做下游任务时&#xff0c;不需要下游任务的任何…
阅读更多...
Ubuntu 22.04如何设置中文输入法

Ubuntu 22.04如何设置中文输入法

前言 近期整理了一下之前在ubuntu 22.04 中如何设置中文输入法的过程&#xff0c;对于本人比较适应读中文写中文来说&#xff0c;这是我安装后的第一步。 一、流程 1.1 安装中文语言包&#xff08;如果还未安装&#xff09; 首先是安装中文语言包&#xff0c;直接在终端输入…
阅读更多...
Elasticsearch集群配置-节点职责划分 Hot Warm 架构实践

Elasticsearch集群配置-节点职责划分 Hot Warm 架构实践

前言 本文主要讲了ES在节点部署时可以考虑的节点职责划分&#xff0c;如果不考虑节点部署&#xff0c;那么所有节点都会身兼数职&#xff08;master-eligible &#xff0c;data&#xff0c;coordinate等&#xff09;&#xff0c;这对后期的维护拓展并不利&#xff0c;所以本文…
阅读更多...
SSRF中伪协议学习

SSRF中伪协议学习

SSRF常用的伪协议 file:// 从文件系统中获取文件内容,如file:///etc/passwd dict:// 字典服务协议,访问字典资源,如 dict:///ip:6739/info: ftp:// 可用于网络端口扫描 sftp:// SSH文件传输协议或安全文件传输协议 ldap://轻量级目录访问协议 tftp:// 简单文件传输协议 gopher…
阅读更多...
算法——滑动窗口（day8)

算法——滑动窗口（day8)

30.串联所有单词的子串 30. 串联所有单词的子串 - 力扣&#xff08;LeetCode&#xff09; 必看&#xff01;&#xff01;&#xff01;本题是我们上次写的438.异位词的进阶版&#xff0c;可参考本篇文章&#xff1a;算法——滑动窗口&#xff08;day7&#xff09;-CSDN博客来…
阅读更多...
c++笔记2

c++笔记2

目录 2.2 栈底&#xff08;bottom&#xff09; } 大数乘大数 节点&#xff1a;包含一个数据元素及若干指向子树分支的信息 。 节点的度&#xff1a;一个节点拥有子树的数目称为节点的度 。 叶子节点&#xff1a;也称为终端节点&#xff0c;没有子树的节点或者度为零的节点…
阅读更多...
vue3+openLayers触摸事件显示弹窗

vue3+openLayers触摸事件显示弹窗

<template><!--地图--><div class"distributeMap" id"distributeMap"></div><!--弹窗--><section ref"popup" id"popupDiv" class"popup">{{ state.popupParams.name }}</section&g…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023