我了解的的焦散共有三种做法:
- 贴图动画
- 实时焦散:Normal 挤出网格【我感觉非常漂亮,可以低成本模拟rtx效果】
- 实时焦散:rtx,主动点亮场景
以UE4 为例。
一、贴图动画
UE4 有一个实例场景,展示粒子特效的,在山洞里,有焦散的效果,就是利用贴图动画实现的。
![24e02221b3c7ab74906c6877496871bd.png](https://img-blog.csdnimg.cn/img_convert/24e02221b3c7ab74906c6877496871bd.png)
把下面这张贴图做一个简单投影,就能出这种效果了。在UE4 中完成这种投影很简单,使用LightFunction即可
![e72d9e741f1d39c64c5a20694e40326d.png](https://img-blog.csdnimg.cn/img_convert/e72d9e741f1d39c64c5a20694e40326d.png)
其实这样的贴图,是可以通过一个专业的软件导出的,可以导出单帧,也可以导出一个序列动画。
![68d8fd60623f700268353038ed6f74c1.png](https://img-blog.csdnimg.cn/img_convert/68d8fd60623f700268353038ed6f74c1.png)
可以看到,这种方法确实非常简单,而且美术容易控制它的效果。只不过有个小缺点就是,无法交互。所以有了下面的两种做法。
2、法线挤出网格,模拟焦散。
我也是最近看到用这种方法做出的比较精致的效果,最初是在webgl 上看到的一个water 实例
![7cfbf8d2f8850df2d5f952ea14b74bb7.png](https://img-blog.csdnimg.cn/img_convert/7cfbf8d2f8850df2d5f952ea14b74bb7.png)
效果非常惊艳~
然后看到一个小伙伴用Unity 实现了一下,效果也非常好。
![84b4ad7f92966b703ac5836fecf2a41a.gif](https://img-blog.csdnimg.cn/img_convert/84b4ad7f92966b703ac5836fecf2a41a.gif)
这个是它的 github 源码
AsehesL/UnityWaveEquationgithub.com![71959f64c25041232a6e8941b467a0dd.png](https://img-blog.csdnimg.cn/img_convert/71959f64c25041232a6e8941b467a0dd.png)
其实这些是多个效果组合完成的,包括了水面渲染,焦散,水体渲染(体积光)。
于是我照着做了一下,只做了焦散部分。
![ac5aaa8043056b9cddfd0725ae7b783d.png](https://img-blog.csdnimg.cn/img_convert/ac5aaa8043056b9cddfd0725ae7b783d.png)
水面波纹很好实现这里不多说。
在做焦散的时候,它是先生成一个和水面同样大小的网格,但是网格非常密~ 顶点需要足够多,最终的效果才会非常平滑。
然后根据前期做水面波纹时候生成的水面法线,在vs 中对这个网格的顶点做变形。过程如下图:
原始网格
![8de2a03fe6ebdc39623b916a64329ca7.png](https://img-blog.csdnimg.cn/img_convert/8de2a03fe6ebdc39623b916a64329ca7.png)
网格变形;
![c416058ac0671d519891f4625c0f75fb.png](https://img-blog.csdnimg.cn/img_convert/c416058ac0671d519891f4625c0f75fb.png)
有了这个网格,就需要生成Caustic 贴图了,这一部分非常简单:
做一次从上到下的正交投影,计算水面每一个点三角形变形前后的面积,做除法,搞定
v2f
生成的Caustic贴图:
![e33071d740d9ab443efdf155456dd4a5.png](https://img-blog.csdnimg.cn/img_convert/e33071d740d9ab443efdf155456dd4a5.png)
有了这个Caustic 贴图,最后就只需对场景做一次投影,就可以啦~
最终效果:
![7be6ab11ae9f79cf288632b99ae8db19.png](https://img-blog.csdnimg.cn/img_convert/7be6ab11ae9f79cf288632b99ae8db19.png)
因为整个过程是和水面波纹效果一起在运行时计算的,但是它不需要ray tracing,对硬件要求不高,所以它的优势就体现出来了:
- 1、实时效果
- 2、消耗小
第一次看到这种方法出来的效果,确实很惊讶,在一些场景下,确实可以代替RayTracing 的焦散了。
但是它确实有它的缺点:
是在xz 平面做网格变形,最后也是生成一张Caustic 贴图,最后投影到场景。对于水平平面来说够用了,但是如果平面立起来,就得特殊处理了,再说简单点,它其实就是一种模拟,所谓的Trick~。
第三种方法RayTracing 焦散就完美的解决了所有问题啦~
三、RayTracing 焦散:
Rtx 焦散的详细流程,其实上一篇文章已经介绍过了。这里把我做的过程展示一下:
先拿简单的一张 法线贴图 做demo
第一步,根据法线,对场景发射线,直接点亮场景。
![d92e848f7f447b2af89a7ef5f61beded.png](https://img-blog.csdnimg.cn/img_convert/d92e848f7f447b2af89a7ef5f61beded.png)
这种方法不经过降噪,就是一堆点
![7046014654a4acc68dfef123b76832f3.png](https://img-blog.csdnimg.cn/img_convert/7046014654a4acc68dfef123b76832f3.png)
![833f9009f71c57465b5ef428f541efb2.png](https://img-blog.csdnimg.cn/img_convert/833f9009f71c57465b5ef428f541efb2.png)
接着在真实法线中做测试。我先是实现了一个水波纹,然后看到这些点动起来,还是非常震撼的~
![3d5aac493c643bd8374b5112d552f185.png](https://img-blog.csdnimg.cn/img_convert/3d5aac493c643bd8374b5112d552f185.png)
![aedccc7f5777beeca6dffa8f99503e8b.png](https://img-blog.csdnimg.cn/img_convert/aedccc7f5777beeca6dffa8f99503e8b.png)
![76295188ec9b27580c7e484369695293.png](https://img-blog.csdnimg.cn/img_convert/76295188ec9b27580c7e484369695293.png)
![91554ef750ff02a3e31bab3f85a62bfb.png](https://img-blog.csdnimg.cn/img_convert/91554ef750ff02a3e31bab3f85a62bfb.png)
![f89e113ca06feca318aafd3bb2c2dd1d.png](https://img-blog.csdnimg.cn/img_convert/f89e113ca06feca318aafd3bb2c2dd1d.png)
![12fbdeab6c85e8ef1294a76a1686774d.png](https://img-blog.csdnimg.cn/img_convert/12fbdeab6c85e8ef1294a76a1686774d.png)
降噪感觉不好做,就开始尝试拼接三角形,然后在像素级别,根据三角形亮度,做了个简单的Filter
![bfcf26fe47f213e07e045039ed47c24a.png](https://img-blog.csdnimg.cn/img_convert/bfcf26fe47f213e07e045039ed47c24a.png)
![f8334e4f77febba5b20be7ed885bfb52.png](https://img-blog.csdnimg.cn/img_convert/f8334e4f77febba5b20be7ed885bfb52.png)
![ff5c9f6767b4122229568af6119df4e1.png](https://img-blog.csdnimg.cn/img_convert/ff5c9f6767b4122229568af6119df4e1.png)
![980596ea99168e5746a41fbbc785d075.png](https://img-blog.csdnimg.cn/img_convert/980596ea99168e5746a41fbbc785d075.png)
![4e7e4052ee510de45491a93fecc6dd88.png](https://img-blog.csdnimg.cn/img_convert/4e7e4052ee510de45491a93fecc6dd88.png)
有一点效果了,但是确实还是不太行。
最后就开始,在三角形的层面去处理这个问题。
首先剔除掉一些无效的点,接着计算三角形面积,面积越大,三角形越暗,面积越小三角形越亮。于是便有了下面的结果
![b9d7f2da99e0361152f4f615542a83b3.png](https://img-blog.csdnimg.cn/img_convert/b9d7f2da99e0361152f4f615542a83b3.png)
![76359c18c9563ff7e8df9e06bf3d89d7.png](https://img-blog.csdnimg.cn/img_convert/76359c18c9563ff7e8df9e06bf3d89d7.png)
可以看到已经非常有那种味道了
![5ed55eed7eb5ec78eef89666b6217a56.png](https://img-blog.csdnimg.cn/img_convert/5ed55eed7eb5ec78eef89666b6217a56.png)
![e3154ed9d3f78cd2b2444a7218295a82.png](https://img-blog.csdnimg.cn/img_convert/e3154ed9d3f78cd2b2444a7218295a82.png)
![01535f517da838f36891028986820838.png](https://img-blog.csdnimg.cn/img_convert/01535f517da838f36891028986820838.png)
ok,到了这一步,这个焦散就差不多处理完了,标题图get。