BlueRoseNote/03-UnrealEngine/Rendering/Shader/Effect/海洋、云Demo制作方案.md

210 lines
10 KiB
Markdown
Raw Normal View History

2023-06-29 11:55:02 +08:00
---
title: 海洋、云Demo制作方案
date: 2022-11-04 09:38:11
excerpt:
tags:
rating: ⭐
---
# 海洋方案
浅墨的总结https://zhuanlan.zhihu.com/p/95917609
波形Gerstner 波、快速傅立叶变换、空间-频谱混合方法、离线FFT贴图烘焙Offline FFT Texture
着色Depth Based LUT Approach、Sub-Surface Scattering Approximation Approach
白沫:浪尖=>[Tessendorf 2001] 基于雅克比矩阵的方法、岸边=》[GDC 2018]《孤岛惊魂5》基于有向距离场的方法、交互白浪ASher的Niagara方案https://zhuanlan.zhihu.com/p/100700549
## 波形方案
### 线性波形叠加方法
正弦波Sinusoids Wave[Max 1981]
Gerstner 波 Gerstner Wave [Fournier 1986]
### 统计学模型法
快速傅立叶变换Fast Fourier Transform[Mastin 1987]
空间-频谱混合方法Spatial -Spectral Approaches[Thon 2000]
### 波动粒子方法(不考虑)
波动粒子方法Wave Particles [Yuksel 2007]
水波小包方法Water Wave Packets[Jeschke 2017]
水面小波方法Water Surface Wavelets[Jeschke 2018]
### 预渲染
流型图Flow Map[Vlachos 2010]
离线FFT贴图烘焙Offline FFT Texture [Torres 2012]
离线流体帧动画烘焙bake to flipbook[Bowles 2017]
## 水体渲染中的着色方案
《神秘海域3》在2012年SIGGRAPH上的技术分享中有一张分析水体渲染技术非常经典的图如下。
![](https://pic1.zhimg.com/80/v2-4823537ae9b63c38fb34795315074932_720w.jpg)
- 漫反射Diffuse
- 镜面反射Specular
- 法线贴图Normal Map
- 折射Reflection
- 通透感Translucency
- 基于深度的查找表方法Depth Based LUT Approach
- 次表面散射Subsurface Scattering
- 白沫Foam/WhiteCap
- 流动表现Flow
- 水下雾效Underwater Haze
### 通透感Translucency
#### 水体散射效果
##### 基于深度的查找表方法Depth Based LUT Approach
Depth Based-LUT方法的思路是计算视线方向的水体像素深度然后基于此深度值采样吸收/散射LUTAbsorb/Scatter LUT纹理以控制不同深度水体的上色得到通透的水体质感表现。
![](https://picb.zhimg.com/80/v2-1dcd2811c3c1c1e6d74eb87399878ab3_720w.jpg)
![](https://picb.zhimg.com/80/v2-f51ba3db9aeb111e0762c1c0739f33df_720w.jpg)
##### 次表面散射近似方法Sub-Surface Scattering Approximation Approach
- [SIGGRAPH 2019] Crest Ocean System改进的《盗贼之海》SSS方案。
- [GDC 2011] 寒霜引擎的Fast SSS方案。
经过Crest Ocean System改进的《盗贼之海》的SSS方案可以总结如下
假设光更有可能在波浪的一侧被水散射与透射。
基于FFT模拟产生的顶点偏移为波的侧面生成波峰mask
根据视角光源方向和波峰mask的组合将深水颜色和次表面散射水体颜色之间进行混合得到次表面散射颜色。
将位移值Displacement除以波长并用此缩放后的新的位移值计算得出次表面散射项强度。
对应的核心实现代码如下:
```hlsl
float v = abs(i_view.y);
half towardsSun = pow(max(0., dot(i_lightDir, -i_view)),_SubSurfaceSunFallOff);
half3 subsurface = (_SubSurfaceBase + _SubSurfaceSun * towardsSun) *_SubSurfaceColour.rgb * _LightColor0 * shadow;
subsurface *= (1.0 - v * v) * sssIndensity;
```
col += subsurface;
其中sssIndensity即散射强度由采样位移值计算得出。
![](https://picb.zhimg.com/80/v2-6cab41811b287dffce3627ab89250f77_720w.jpg)
图 《Crest Ocean System》中基于次表面散射近似的水体表现
![](https://pic4.zhimg.com/80/v2-127e25cc5edb14b9ab20d5331dc7a3fd_720w.jpg)
[GDC 2011] 寒霜引擎的Fast SSS方案
[GDC 2011]上Frostbite引擎提出的Fast Approximating Subsurface Scattering方案也可以用于水体渲染的模拟。
![](https://pic2.zhimg.com/80/v2-d0362f75e76028d9c518f3bb37e043e0_720w.jpg)
### 白沫Foam/WhiteCap
白沫Foam在有些文献中也被称为WhitecapWhite Water是一种复杂的现象。即使白沫下方的材质具有其他颜色白沫也通常看起来是白色的。出现这种现象的原因是因为白沫是由包含空气的流体薄膜组成的。随着每单位体积薄膜的数量增加所有入射光都被反射而没有任何光穿透到其下方。这种光学现象使泡沫看起来比材质本身更亮以至于看起来几乎是白色的。
![](https://pic3.zhimg.com/80/v2-290d266a361649e1a048d3c5e53522cb_720w.jpg)
对于白沫的渲染而言,白沫可被视为水面上的纹理,其可直接由对象交互作用,浪花的飞溅,或气泡与水表面碰撞而产生。
白沫的渲染方案,按大的渲染思路而言,可以分为两类:
- 基于动态纹理dynamic texture
- 基于粒子系统particle system
按照类型,可以将白沫分为三种:
- 浪尖白沫
- 岸边白沫
- 交互白沫
而按照渲染方法,可将白沫渲染的主流方案总结如下:
- 基于粒子系统的方法[Tessendorf 2001]
- 基于Saturate高度的模拟方法 [GPU Gems 2]
- 基于雅可比矩阵的方法 [Tessendorf 2001]
- 屏幕空间方法 [Akinci 2013]
- 基于场景深度的方法 [Kozin 2018][Sea of Thieves]
- 基于有向距离场的方法 [GDC 2018][Far Cry 5]
#### 浪尖白沫
##### 5.2.1 浪尖白沫:[Tessendorf 2001] 基于雅克比矩阵的方法
Tessendorf在其著名的水体渲染paper《Simulating Ocean Water》[Tessendorf 2001]中提出了可以基于雅克比矩阵Jacobian为负的部分作为求解白沫分布区域的方案。据此即可导出一张或多张标记了波峰白沫区域的Folding Map贴图。
![](https://pic4.zhimg.com/80/v2-c9f35b65405599ea96d9701ccb4156c9_720w.jpg)
《战争雷霆War Thunder》团队在CGDC 2015上对此的改进方案为取雅克比矩阵小于M的区域作为求解白沫的区域其中M~0.3...05。
![](https://picb.zhimg.com/80/v2-5edc9e15ff8d57d88334c3c131f599c9_720w.jpg)
图 《战争雷霆War Thunder》选取雅克比矩阵小于M的区域作为求解白沫的区域 [CGDC 2015]
另外《盗贼之海Sea of Thieves》团队在SIGGRPAPH 2018上提出可以对雅可比矩阵进行偏移以获得更多白沫。且可以采用渐进模糊Progressive Blur来解决噪点noisy问题以及提供风格化的白沫表现。
![](https://pic1.zhimg.com/80/v2-82bfb8a8f2e6eb78037fbed281bb11ca_720w.jpg)
!(https://vdn1.vzuu.com/SD/cfb76434-ec75-11ea-acfd-5ab503a75443.mp4?disable_local_cache=1&bu=pico&expiration=1601438226&auth_key=1601438226-0-0-1b75c02f8faa2d5a94b74ad8ebb6e595&f=mp4&v=hw)
图 《盗贼之海》基于雅可比矩阵偏移 + 渐进模糊Progressive Blur的风格化白沫表现
##### 浪尖白沫:[GPU Gems 2] 基于Saturate高度的方法
《GPU Gems 2》中提出的白沫渲染方案思路是将一个预先创建的白沫纹理在高于某一高度H0的顶点上进行混合。白沫纹理的透明度根据以下公式进行计算
`$ Foam.a=saturate(\frac {H-H_0} {H_{max}-H_0}) $`
- 其中, `$H_{max}$` 是泡沫最大时的高度, `$H_0$` 是基准高度,`$H$` 是当前高度。
- 白沫纹理可以做成序列帧来表示白沫的产生和消失的演变过程。此动画序列帧既可以由美术师进行制作,也可以采用程序化生成。
- 将上述结果和噪声图进行合理的结合,可以得到更真实的泡沫表现。
#### 岸边白沫:[2012]《刺客信条3》基于Multi Ramp Map的方法
《刺客信条3》中的岸边白沫的渲染方案可以总结为
- 以规则的间距对地形结构进行离线采样,标记出白沫出现的区域。
- 采用高斯模糊和Perlin噪声来丰富泡沫的表现形式以模拟海岸上泡沫的褪色现象。
- 由于白沫是白色的因此在RG和B通道中的每个通道中都放置三张灰度图然后颜色ramp图将定义三者之间的混合比率来实现稠密、中等、稀疏三个级别的白沫。要修改白沫表现美术师只需对ramp图进行颜色校正即可。如下图所示
![](https://picb.zhimg.com/80/v2-105c23770b47d723f8c853e7670d72c0_720w.jpg)
![](https://pic1.zhimg.com/80/v2-cf82916125139f7d2d807639c62056ae_720w.jpg)
#### 浪尖白沫&岸边白沫:[GDC 2018]《孤岛惊魂5》基于有向距离场的方法
GDC 2018上《孤岛惊魂5》团队分享的白沫渲染技术也不失为一种优秀的方案主要思路是基于单张Noise贴图控制白沫颜色结合两个offset采样Flow Map控制白沫的流动并基于有向距离场Signed Distance FieldSDF控制岩石和海岸线处白沫的出现然后根据位移对白沫进行混合。
![](https://pic3.zhimg.com/80/v2-7b29981b76be6f41d5ed586843a244d4_720w.jpg)
### 水面高光
![](https://cdn.jsdelivr.net/gh/blueroseslol/ImageBag@latest/ImageBag/Images/OceanSpecular.jpg)
### 水焦散
水焦散的渲染 Rendering Water Caustics
GPU Gems 1
ShaderBits.com
### 其他Demo
6.5 NVIDIA UE4 WaveWorks
GDC 2017上NVIDIA和Unreal Engine合作推出了WaveWorks以集成到Unreal Engine 4.15引擎中的形式放出。
源代码传送门https://github.com/NvPhysX/UnrealEngine/tree/WaveWorks
demo视频https://www.youtube.com/watch?v=DhrNvZLPBGE&list=PLN8o8XBheMDxCCfKijfZ3IlTP3cUCH6Jq&index=11&t=0s
## 云方案
eg2020的一篇很思路很新的论文
有空写篇文章分享一下思路
下面是改编了一下的shader
raymarch的次数降低了很多倍同样也增加了不少sdf的采样次数
优化思路想到再发。
https://www.shadertoy.com/view/WdKczW
### ASher的方案
https://zhuanlan.zhihu.com/p/107016039
https://www.bilibili.com/video/BV1FE411n7rU
https://www.bilibili.com/video/BV1L54y1271W
### 大表哥2
分帧渲染
https://zhuanlan.zhihu.com/p/127435500
安泊霖的分析:
https://zhuanlan.zhihu.com/p/91359071
### 地平线:黎明时分
在有道云里有pdf
https://zhuanlan.zhihu.com/p/97257247
https://zhuanlan.zhihu.com/p/57463381
### UE4云层阴影实现
https://zhuanlan.zhihu.com/p/130785313
## 其他相关
### GPU Gems 1
https://developer.nvidia.com/gpugems/gpugems/foreword
http://http.download.nvidia.com/developer/GPU_Gems/CD_Image/Index.html
浅墨的总结:
https://zhuanlan.zhihu.com/p/35974789
https://zhuanlan.zhihu.com/p/36499291
真实感水体渲染Realistic Water Rendering
无尽草地的渲染Rendering Countless Blades of Waving Grass
水焦散渲染Rendering Water Caustics