【unity URP shader】极光渲染[代码解析]

IT圈老男孩1 · 发表于 2023-2-20 16:57

【参考】
【简介】
本人主要是参考这一篇文章进行展开，但是在其中的极光渲染中，文章主要搬运的是这里的代码，主要进行一些性能优化得到的效果。
接着根据这一篇文章，我们主要提取出条状极光出来，我把它改成几乎所有极光都可以单独使用条状极光便可以呈现出效果，不必要再多写一个背景极光。
首先先来看看效果：
【原理解析】
条状的极光原理比较简单，主要通过噪音图进行逐层运算得到的结果：
首先在代码中，我们会看到这些代码：

三角噪音

它具体是什么意思呢，我在GLSL上面找到这个噪音的生成图像：

2D三角噪音图

紧接着是噪音图生成的函数，我们可以看到这里

噪音图

如果我们知道ShaderGraph的简单噪音源码的话，我们可以将其和这里进行对应起来：

对应的函数

这样子，我们便知道这里的函数的用法，接着，我又将其在GLSL Sandbox上面进行实现，可以看到这个图：

效果图

最后，我们来看一下最后生成极光的函数：

GLSL翻译版本

首先是of

定义图

这里的效果即生成噪音图，但是随着i的增加而增加强度，主要是进行多个噪音图的叠加。
接着是pt

定义图

这里主要是圈定极光的过渡区域，在GLSL测试的结果我们可以看到相对应的圈定区域：

圈定极光生成区域

接着通过这一步，进行噪音图抠图，主要是模拟极光的条纹噪音：

代码

接着通过这两步，我们把原本的UV图修改了样式，主要是为了迎合噪音图的生成：

p为噪音图生成的UV

原的UV图

新的UV图

通过新的UV，我们可以把噪音进行扭曲化，得到我们想要的扭曲波动的效果。
如何实现呢？

代码图

我们可以对比一下：

正常的UV效果图

扭曲UV的效果图

【是不是有极光的感觉了！】
最后，我们自定义一个颜色变化函数，原函数是写死的颜色变化过程，我把它开放出来，主要是在频率为奇数的时候，正色为主，频率为偶数的时候，反色为主：

颜色

（没有叠加极光）测试图

叠加极光

我们是将极光进行50次的运算，以指数的方式进行二次函数形式的叠加循环

最后的颜色平均代码

循环此步的结果：

循环30次的结果

但是，我们自然发现，我们的下面极光是多余的，我们需要将其剔除掉：

剔除结果

剔除效果

【极光出来啦！】
【个性化】
我们可以更改颜色变化的频率以及颜色变化的rgb，来对极光进行个性化的调整：

频率与RGB的通道开放

		自动登录	找回密码
密码			立即注册

【unity URP shader】极光渲染[代码解析]

本帖子中包含更多资源