Shader Graph: 能量护盾

实现思路

本篇文章参考学习了b站up主的视频:小沈的奇妙冒险

通过shader graph 实现能量护盾效果,其实现思路为:通过shader graph 中的 patter 在护盾mesh 上均匀铺上圆点,然后通过 simple noise 为圆点图案添加渐变效果,然后通过 gradient noise 为护盾添加流动光效果,以及通过 uv 的极坐标实现中间透明、四周不透明的效果,最后通过一张加工过的 uv 贴图实现护盾边缘发光效果。

效果预览

Shader Graph 详细实现

平铺圆点

首先要引入一个 Unity URP 内置文件夹:Window -> Package Manager

在 Assets -> Samples -> Shader Graph -> (版本号) -> Dots 中是一个产生圆点的 Shader Graph 子图,将其拖入或直接空格键输入Dots 获取。

然后与 Simple Noise 制作出带有圆点与渐变的效果:

流动效果

随后将 Flow 与 Dot Patter 输出结果相加。

Inner Mask

极坐标获取内部图案的遮罩,使中间到四周逐渐显现。

Border Mask

这是根据 Shield Mesh 的 uv 对最边缘的地方描边,获取一个在边缘 uv 处是 1 的遮罩。

整合

最后在场景中右键 -> Volume -> Global Volume 然后勾选:Bloom 中的 Threshold、Intensity、Scatter、Tint

然后设置选项的数值获取合适的 Bloom。

相关推荐
山河木马1 天前
GPU自动处理专题4-填充覆盖区域(光栅化)
javascript·webgl·计算机图形学
山河木马4 天前
GPU自动处理专题2-NDC是什么(透视除法)
javascript·webgl·计算机图形学
山河木马5 天前
GPU自动处理专题1-裁剪到底在裁什么(裁剪)
前端·webgl·计算机图形学
vivo互联网技术5 天前
SIGGRAPH 2026 | VeraRetouch:多任务推理式照片修图框架
图像识别·计算机图形学
山河木马6 天前
渲染管线-计算得到gl_FragColor(片元着色器)之后续GPU流程
前端·webgl·计算机图形学
Cd510 天前
《C++从零打造渲染器》学习笔记 第0讲:图形学导论
计算机图形学
山河木马13 天前
矩阵专题3-怎么创建投影矩阵(uProjectionMatrix)
javascript·webgl·计算机图形学
山河木马14 天前
矩阵专题2-怎么创建视图矩阵(uViewMatrix)
javascript·webgl·计算机图形学
山河木马19 天前
矩阵专题1-怎么创建模型矩阵(uModelMatrix)
javascript·webgl·计算机图形学
山河木马20 天前
矩阵专题0-webGL中的矩阵
javascript·webgl·计算机图形学