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编辑

目录
相关文章
|
2天前
|
图形学
【unity实战】Unity中基于瓦片的网格库存系统——类似《逃离塔科夫》的库存系统(下)
【unity实战】Unity中基于瓦片的网格库存系统——类似《逃离塔科夫》的库存系统
7 0
|
2天前
|
图形学 容器
【unity实战】Unity中基于瓦片的网格库存系统——类似《逃离塔科夫》的库存系统(上)
【unity实战】Unity中基于瓦片的网格库存系统——类似《逃离塔科夫》的库存系统
5 0
|
2天前
|
图形学
【实现100个unity特效】shader实现3D物品闪光和描边效果
【实现100个unity特效】shader实现3D物品闪光和描边效果
7 0
|
2天前
|
存储 图形学
【推荐100个unity插件之13】推荐一款开源的Unity网格破碎插件,实现在Unity中展示可破坏的墙壁的——unity-fracture
【推荐100个unity插件之13】推荐一款开源的Unity网格破碎插件,实现在Unity中展示可破坏的墙壁的——unity-fracture
6 0
|
3天前
|
开发工具 图形学
【推荐100个unity插件之11】Shader实现UGUI的特效——UIEffect为 Unity UI 提供视觉效果组件
【推荐100个unity插件之11】Shader实现UGUI的特效——UIEffect为 Unity UI 提供视觉效果组件
5 0
|
3天前
|
图形学
【实现100个unity特效之2】使用shader和shader Graph实现2d图片描边效果(附源码)
【实现100个unity特效之2】使用shader和shader Graph实现2d图片描边效果(附源码)
4 0
|
3天前
|
图形学 开发者
【实现100个unity特效之1】使用Shader Graph实现动物森友会的世界弯曲效果(带源码)
【实现100个unity特效之1】使用Shader Graph实现动物森友会的世界弯曲效果(带源码)
6 0
|
2月前
|
图形学 异构计算
【Unity Shader 中Pass相关介绍_第四篇】
【Unity Shader 中Pass相关介绍_第四篇】
|
2月前
|
缓存 图形学 异构计算
【#Unity Shader#Amplify Shader Editor(ASE)_第二篇】
【#Unity Shader#Amplify Shader Editor(ASE)_第二篇】
|
2月前
|
图形学
【Unity Shader#自定义材质面板_第一篇】
【Unity Shader#自定义材质面板_第一篇】