ue4光追降噪_【魔改UE4】后记_焦散效果总结

我了解的的焦散共有三种做法:

  1. 贴图动画
  2. 实时焦散:Normal 挤出网格【我感觉非常漂亮,可以低成本模拟rtx效果】
  3. 实时焦散:rtx,主动点亮场景

以UE4 为例。

一、贴图动画

UE4 有一个实例场景,展示粒子特效的,在山洞里,有焦散的效果,就是利用贴图动画实现的。

24e02221b3c7ab74906c6877496871bd.png
UE4_Casutichttps://www.zhihu.com/video/1194590310406189056

把下面这张贴图做一个简单投影,就能出这种效果了。在UE4 中完成这种投影很简单,使用LightFunction即可

e72d9e741f1d39c64c5a20694e40326d.png
Caustic 贴图

其实这样的贴图,是可以通过一个专业的软件导出的,可以导出单帧,也可以导出一个序列动画。

68d8fd60623f700268353038ed6f74c1.png
LightFunction 材质

可以看到,这种方法确实非常简单,而且美术容易控制它的效果。只不过有个小缺点就是,无法交互。所以有了下面的两种做法。

2、法线挤出网格,模拟焦散。

我也是最近看到用这种方法做出的比较精致的效果,最初是在webgl 上看到的一个water 实例

7cfbf8d2f8850df2d5f952ea14b74bb7.png
源码​github.com

效果非常惊艳~

然后看到一个小伙伴用Unity 实现了一下,效果也非常好。

84b4ad7f92966b703ac5836fecf2a41a.gif

这个是它的 github 源码

AsehesL/UnityWaveEquation​github.com
71959f64c25041232a6e8941b467a0dd.png

其实这些是多个效果组合完成的,包括了水面渲染,焦散,水体渲染(体积光)。

于是我照着做了一下,只做了焦散部分。

ac5aaa8043056b9cddfd0725ae7b783d.png
https://www.zhihu.com/video/1194594140313223168

水面波纹很好实现这里不多说。

在做焦散的时候,它是先生成一个和水面同样大小的网格,但是网格非常密~ 顶点需要足够多,最终的效果才会非常平滑。

然后根据前期做水面波纹时候生成的水面法线,在vs 中对这个网格的顶点做变形。过程如下图:

原始网格

8de2a03fe6ebdc39623b916a64329ca7.png

网格变形;

c416058ac0671d519891f4625c0f75fb.png

有了这个网格,就需要生成Caustic 贴图了,这一部分非常简单:

做一次从上到下的正交投影,计算水面每一个点三角形变形前后的面积,做除法,搞定

v2f 

生成的Caustic贴图:

e33071d740d9ab443efdf155456dd4a5.png

有了这个Caustic 贴图,最后就只需对场景做一次投影,就可以啦~

最终效果:

7be6ab11ae9f79cf288632b99ae8db19.png

因为整个过程是和水面波纹效果一起在运行时计算的,但是它不需要ray tracing,对硬件要求不高,所以它的优势就体现出来了:

  • 1、实时效果
  • 2、消耗小

第一次看到这种方法出来的效果,确实很惊讶,在一些场景下,确实可以代替RayTracing 的焦散了。

但是它确实有它的缺点:

是在xz 平面做网格变形,最后也是生成一张Caustic 贴图,最后投影到场景。对于水平平面来说够用了,但是如果平面立起来,就得特殊处理了,再说简单点,它其实就是一种模拟,所谓的Trick~。

第三种方法RayTracing 焦散就完美的解决了所有问题啦~

三、RayTracing 焦散:

Rtx 焦散的详细流程,其实上一篇文章已经介绍过了。这里把我做的过程展示一下:

先拿简单的一张 法线贴图 做demo

第一步,根据法线,对场景发射线,直接点亮场景。

d92e848f7f447b2af89a7ef5f61beded.png

这种方法不经过降噪,就是一堆点

7046014654a4acc68dfef123b76832f3.png

833f9009f71c57465b5ef428f541efb2.png

接着在真实法线中做测试。我先是实现了一个水波纹,然后看到这些点动起来,还是非常震撼的~

3d5aac493c643bd8374b5112d552f185.png

aedccc7f5777beeca6dffa8f99503e8b.png

76295188ec9b27580c7e484369695293.png

91554ef750ff02a3e31bab3f85a62bfb.png
f89e113ca06feca318aafd3bb2c2dd1d.png
https://www.zhihu.com/video/1194598964002136064
12fbdeab6c85e8ef1294a76a1686774d.png
https://www.zhihu.com/video/1194601715452989440

降噪感觉不好做,就开始尝试拼接三角形,然后在像素级别,根据三角形亮度,做了个简单的Filter

bfcf26fe47f213e07e045039ed47c24a.png

f8334e4f77febba5b20be7ed885bfb52.png

ff5c9f6767b4122229568af6119df4e1.png

980596ea99168e5746a41fbbc785d075.png
4e7e4052ee510de45491a93fecc6dd88.png
https://www.zhihu.com/video/1194600052633747456

有一点效果了,但是确实还是不太行。

最后就开始,在三角形的层面去处理这个问题。

首先剔除掉一些无效的点,接着计算三角形面积,面积越大,三角形越暗,面积越小三角形越亮。于是便有了下面的结果

b9d7f2da99e0361152f4f615542a83b3.png

76359c18c9563ff7e8df9e06bf3d89d7.png

可以看到已经非常有那种味道了

5ed55eed7eb5ec78eef89666b6217a56.png
https://www.zhihu.com/video/1194600780995567616

e3154ed9d3f78cd2b2444a7218295a82.png
01535f517da838f36891028986820838.png
https://www.zhihu.com/video/1194601245451571200

ok,到了这一步,这个焦散就差不多处理完了,标题图get。

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值