Unity Shader Graph 制作Grid网格效果

简介: Unity Shader Graph 制作Grid网格效果

 效果图:

image.gif编辑

用到的关键节点:Rectangle矩形节点、Fraction

关于Rectangle矩形节点的官方文档介绍:

image.gif编辑

       大概含义指根据输入的UV生成一个矩形形状,大小由输入的宽度和高度指定,生成的形状可以通过连接一个Tiling And Offset节点进行偏移和平铺。实现重复矩形的效果需要通过Fraction节点连接输入。

       关于Fraction节点的官方文档介绍如下,其含义很简单,就是返回输入值的小数部分。

image.gif编辑

实现:

首先创建一个PBR Graph,在Blackboard黑板中创建要用到的相关属性:

       Width(Vector1 类型):用于控制Rectangle节点宽度,即网格分割线的宽度

       Height(Vector1 类型): 用于控制Rectangle节点高度,即网格分割线的高度

       Tiling(Vector2 类型):用于控制Tiling And Offset节点的平铺属性,即网格的规模

       Main Color、Second Color(HDR类型 Color):用于发光效果,实现两种颜色间的插值变换

image.gif编辑

创建Rectangle节点,输入Width、Height属性:

image.gif编辑

创建Fraction节点,输出至Rectangle节点UV:

image.gif编辑

创建Tiling And Offset节点,输出至Fraction节点,并输入Tiling属性值:

image.gif编辑

       通过One Minus节点调整Rectangle节点的输出值,再输出至PBR Master主节点中的Albede和Emission:

image.gif编辑

创建一个Cube立方体将材质球给其赋值,在Inspector检视面板调整属性查看效果:

image.gif编辑

       创建Lerp节点,通过Sine Time时间节点实现Main Color和Second Color两种颜色间的变换,正弦函数取值范围为[-1, 1],因此通过Remap节点将取值范围映射到[0, 1]:

image.gif编辑

       最后通过Multiply节点与之前的值相乘后再进行输出,最终完整节点:

image.gif编辑

目录
相关文章
|
3月前
|
图形学 数据可视化 开发者
超实用Unity Shader Graph教程:从零开始打造令人惊叹的游戏视觉特效,让你的作品瞬间高大上,附带示例代码与详细步骤解析!
【8月更文挑战第31天】Unity Shader Graph 是 Unity 引擎中的强大工具,通过可视化编程帮助开发者轻松创建复杂且炫酷的视觉效果。本文将指导你使用 Shader Graph 实现三种效果:彩虹色渐变着色器、动态光效和水波纹效果。首先确保安装最新版 Unity 并启用 Shader Graph。创建新材质和着色器图谱后,利用节点库中的预定义节点,在编辑区连接节点定义着色器行为。
208 0
|
3月前
|
C# 图形学 C语言
Unity3D学习笔记3——Unity Shader的初步使用
Unity3D学习笔记3——Unity Shader的初步使用
44 0
|
3月前
|
数据可视化 图形学
小功能⭐️Unity2018 Shader Graph——全息影像、物体消融
小功能⭐️Unity2018 Shader Graph——全息影像、物体消融
|
5月前
|
图形学
【unity实战】Unity中基于瓦片的网格库存系统——类似《逃离塔科夫》的库存系统(下)
【unity实战】Unity中基于瓦片的网格库存系统——类似《逃离塔科夫》的库存系统
75 0
|
5月前
|
图形学 容器
【unity实战】Unity中基于瓦片的网格库存系统——类似《逃离塔科夫》的库存系统(上)
【unity实战】Unity中基于瓦片的网格库存系统——类似《逃离塔科夫》的库存系统
71 0
|
5月前
|
图形学
【实现100个unity特效】shader实现3D物品闪光和描边效果
【实现100个unity特效】shader实现3D物品闪光和描边效果
74 0
|
5月前
|
存储 图形学
【推荐100个unity插件之13】推荐一款开源的Unity网格破碎插件,实现在Unity中展示可破坏的墙壁的——unity-fracture
【推荐100个unity插件之13】推荐一款开源的Unity网格破碎插件,实现在Unity中展示可破坏的墙壁的——unity-fracture
82 0
|
5月前
|
开发工具 图形学
【推荐100个unity插件之11】Shader实现UGUI的特效——UIEffect为 Unity UI 提供视觉效果组件
【推荐100个unity插件之11】Shader实现UGUI的特效——UIEffect为 Unity UI 提供视觉效果组件
263 0
|
5月前
|
图形学
【实现100个unity特效之2】使用shader和shader Graph实现2d图片描边效果(附源码)
【实现100个unity特效之2】使用shader和shader Graph实现2d图片描边效果(附源码)
202 0
|
5月前
|
图形学 开发者
【实现100个unity特效之1】使用Shader Graph实现动物森友会的世界弯曲效果(带源码)
【实现100个unity特效之1】使用Shader Graph实现动物森友会的世界弯曲效果(带源码)
98 0