【Unity URP特效】使用VFX Graph制作冰冻肥皂泡——肥皂 ...

闲鱼技术01 · 发表于 2022-5-28 16:33

第一篇文章我们讨论了肥皂泡彩虹色（iridescence）现象的原理：

第二篇文章来实现肥皂泡效果：

实现效果

参考图

第三篇文章会实现完整的效果：

为了压缩图片加快了速度

本工程使用Unity 2021.2.13f1，URP12.1.4。
工程地址：https://github.com/MidoriMeng/Frozen-Bubble
因为有工程，所以之后的讲解都会挑重点讲
1. graph settings

Shader graph节点图如下：

首先请看右侧的graph settings。

我们创建的是lit版本，它包含pbr光照，比unlit更方便出效果。
Allow material override要记得勾选，这个在材质面板上会看到效果，我们待会看（如果没有这个功能，更新一下unity版本噢）。
使用specular工作流，而不是常用的metallic。这是因为iridescence是一种高光效果，所以要把高光通道暴露出来供我们编辑。
Surface type选择transparent。

2. 连连看

连连看部分核心在于下图所示的自定义函数，其余部分都是一些输入数据的计算。我把代码写在了hlsl文本里。

下图是zucconi6算法，用于生成彩虹色渐变

还记得这张彩虹吗~想了解背后原理的请回顾上一章。输入值w的范围是400到700

上图用到的bump3y在这里

Shader graph有写法上的要求，我们需要把它转化成这种格式。“_float”是指graph settings里选了float精度

接下来是核心的iridescence函数啦。我们先回顾一下上一章总结出的公式：

其中波长w是计算结果，用于输入到彩虹函数计算颜色；n2是肥皂水的折射率，取1.33到1.5都可以；d是肥皂泡的厚度，它和波长的单位都是纳米，根据查阅资料，取值范围是10~1500纳米；cos theta R是N dot V。

上图中，“value”表示公式左侧的值。计算出“wavelength”后，输入彩虹函数得到结果。“power”和“phase_shift”都是出于艺术效果的考虑添加的参数，控制波长变化的快慢以及平移。我调了调发现不好控制，最终弃用了，代码还保留在这里供大家参考。（吐槽一下自己的命名，写着急了就乱写hhh）
还有一个问题，这代码里为什么还有循环呢？我们还要回顾上一篇的这段话：

也就是说，想要算出更准确的效果，需要多次循环。我使用的是正负四的范围。最终记得saturate防止超过1。
将输出结果连到specular上之后，diffuse怎么办呢？根据pbr理论，水属于电介质，而电介质的漫反射都在4%左右，所以我们给它一个很暗的灰色：

我们连进去的颜色是sRGB空间的，所以数值会比较大，有五六十

3. 材质以及场景布置

图中为啥有两个材质呢？为了克服下图所示的半透明物体经典渲染问题，需要渲染两次，先渲背面再渲正面。

透明渲染问题

透明渲染问题

我们在graph settings里勾选了allow override，此时材质就会有surface options供我们选择。给两个材质的render face分别设置为back和front：

如下图所示，在参数设置上我最终根据实际使用的手感只保留了thickness。

不能调整彩虹的gradient，物理方法就是这么不好调哈哈哈哈。如果碰上较真的美术，那就emmm魔改之！通过对公式的观察，我们发现这本质就是个菲涅尔效果，即，将N dot V映射为颜色。对此大家可以自行发挥，但是记住目前shader graph还不支持暴露gradient作为参数。

做出左边这种效果还以为做错了，因为照片全都是右下那种完美的对称，直到我找到了右边这张照片……

调整一下角度，咱也是对称的！

最终泡泡上有三个高光点，两个是因为reflection probe用的素材图上带太阳（找了参考图那样的雪地，但是没找到无太阳的），一个是方向光的高光。记得给泡泡一个高清的反射照亮它的美，我给背景和probe的分辨率分别是64和1024。
总结

本文实现了肥皂泡shader，解决了透明渲染问题，并且对参数设计甚至模型的魔改进行了讨论，最终提供demo。第三篇文章将提供冰冻泡泡效果的冰晶部分的讲解。

*本文于5月20日（好惨啊没过节）首发于“Unity官方开发者社区”公众号，更多unity知识欢迎关注：
今日豆知识-URP VFX graph冰冻泡泡效果附工程

全部文章：
三鳥：【Unity URP特效】使用VFX Graph制作冰冻肥皂泡——iridescence原理篇（1/3）
三鳥：【Unity URP特效】使用VFX Graph制作冰冻肥皂泡——肥皂泡实现篇（2/3）
三鳥：【Unity URP特效】使用VFX Graph制作冰冻肥皂泡——冰晶实现篇（3/3）

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

【Unity URP特效】使用VFX Graph制作冰冻肥皂泡——肥皂 ...

本帖子中包含更多资源