Unity Shader Graph 3D 实例 - 一个简单的红外线扫描全身效果


目录

[创建一个Shader Graph文件](#创建一个Shader Graph文件)

[构造Shader Graph节点](#构造Shader Graph节点)

基础渲染贴图节点

拆分Z轴坐标节点

增加基于时间的循环

制作扫描的条形效果

增加条形效果的颜色

叠加条形效果到原模型上

最终展示效果


前言

在Unity Shader Graph中,实现红外线扫描效果可以为游戏增添独特的视觉效果,模拟类似红外探测器扫描物体的效果。通过结合物体坐标和Shader Graph的强大功能,我们可以创建一个动态的扫描条,从模型的某一位置扫描至另一位置,模拟红外线的扫描过程。本篇博客将介绍如何利用Shader Graph实现这一效果,教你如何通过节点系统控制扫描线的移动及其与物体位置的关系,帮助你打造炫酷的红外扫描效果。


创建一个Shader Graph文件

在Project视图里点击鼠标右键,选择Shader Graph/URP/Lit Shader Graph,创建第一个Shader Graph文件,命名为Scan。

创建两个对应的材质球命名为M_Scan和M_ScanEye,使用Scan的Shader Graph文件。


构造Shader Graph节点

基础渲染贴图节点

声明一个Texture2D的贴图变量命名为MainTex,将其数据进行采样(Sample Texture 2D)处理转化为在Shader Graph中可以操作的数据。

拆分Z轴坐标节点

扫描效果我们希望是从前往后的,所以它的坐标轴会用到的是Z轴,因此我们可以用Position节点进行拆分,获取它的Z值(对应B的值),当然还是基于游戏物体的空间坐标系。

增加基于时间的循环

创建一个Time时间节点,并将其乘以一个Float类型的变量命名为ScanSpeed,用来控制扫描的速度。然后在其乘法的结果进行一个Fraction处理,获得小数点后的值,即该结果会一直循环从0到1,这样我们就能看到扫描一直进行的效果。

将Fraction之后的数据结果用Remap节点重新对应下,即将输入的值按照输入的最小最大值对应映射到输出的最大最小值,原因还是因为坐标轴存在正负,这样才能从前往后的去做扫描效果。

将Remap之后的值加到Z轴的值上,这样Z的值就会随着时间开始从模型最前到最后往复循环。

制作扫描的条形效果

当有了基于模型Z轴从前往后往复循环的数据之后,我们只需要将输出的值做一个Step节点的筛选(类似漏斗效果,当In输入的值比Edge小则为1显示为白色,大于Edge则为黑色),分别连接两个,一个的In值保持为0,另一个In值用一个Float型的变量命名为ScanWidth控制条形的宽度。那么增加了宽度的就会获得更多的白色部分,多的白色部分即为条形的宽度,减去另一个Step节点的值就可以获得一个宽度为ScanWidth的条形效果。

增加条形效果的颜色

将获得的条形效果数据与一个Color型变量命名为ScanColor相乘,即可获得带颜色的条形效果,将颜色设置为HDR。

叠加条形效果到原模型上

最后使用Add节点,将条形效果叠加到原始的贴图采样数据上,就可以获得条形扫描效果了。

然后在材质球上调整一下参数,如下。


最终展示效果

多角度展示红外线扫描效果。
45度角
侧面

正面

相关推荐
RReality5 小时前
【Unity Shader URP】全息扫描线(Hologram Scanline)源码+脚本控制
ui·unity·游戏引擎·图形渲染
CG_MAGIC5 小时前
Blender幕后花絮:幕后大门
3d·blender·贴图·效果图·渲云渲染
GIS数据转换器6 小时前
车辆监控管理系统
人工智能·3d·无人机·知识图谱·旅游
小白狮ww6 小时前
3 秒出全纹理!TRELLIS.2 实现单图生成高分辨率 3D 资产
图像处理·人工智能·3d·语言模型·微软·开源·3d内容生成
云飞云共享云桌面6 小时前
研发部门使用SolidWorks和ug,cad,设计共享云桌面应该怎么选?
运维·服务器·网络·人工智能·3d
渔民小镇7 小时前
一次编写到处对接 —— 为 Godot/Unity/React 生成统一交互接口
java·分布式·游戏·unity·godot
似水流年wxk7 小时前
Cocos3.8版本 实现跟随3d物体的条带拖尾
3d
云飞云共享云桌面7 小时前
8-10位研发3D(sw、ug、creo)画图如何共享一台工作站?
运维·服务器·网络·数据库·3d·电脑
twe77582588 小时前
“交织现实与虚拟:CCP-RIE在AR/VR工业动画中的创新展现“
科技·3d·制造·动画
陶甜也8 小时前
3D智慧城市:blender建模、骨骼、动画、VUE、threeJs引入渲染,飞行视角,涟漪、人物行走
前端·3d·vue·blender·threejs·模型