Ocean Rendering   By Outerra

Let me first say that I'm often visiting my own blog to read how I did certain things. This is mostly true for some of the older, more technical posts. I decided to blog about recent water rendering development in a way that will be helpful for me in time when my brain niftily sends all the crucial bits to desert. I apologize in advance if some pieces seem incoherent.
首先，我想说的是，我经常访问自己的博客，阅读我是如何完成某些事情的。这主要是针对一些较旧的、技术性更强的帖子。我决定以一种将来当我的大脑巧妙地把所有关键信息都发送到沙漠时对我有帮助的方式，来记录最近水渲染技术的发展。如果有些部分看起来不连贯，请提前谅解。

更多精彩图片 请登录

Now for the rendering of water in Outerra.
There are two types of waves mixed - open sea waves with the direction of wind (fixed for now), and shore waves (the surf) that orient themselves perpendicularly to the shore, appearing as the result of oscillating water volume that gets compressed with rising underwater terrain.

现在来谈谈Outerra中的水体渲染。
有两种类型的波浪混合在一起——一种是朝向风向的开阔海浪（目前是固定的），另一种是沿海岸线垂直排列的海岸浪（海浪），它们是因水体体积在上升的水下地形中受到压缩而产生的振荡结果。

更多精彩图片 请登录

Open sea waves are simulated in a usual way by summing a bunch of trochoidal (Gerstner) waves with various frequencies over a 2D texture that is then tiled over the sea surface. Obviously, the texture should be seamlessly tileable, and that puts some constraints on possible frequencies of the waves. Basically, the wave should peak on each point of the grid. This can be satisfied by guaranteeing that the wave has an integral number of peaks in both u,v texture directions. Resulting wave frequency is then

Other wave parameters depend on the frequency (or its reciprocal, the wavelength). Generally, wave amplitude should be kept below 1/20th of wave length, as larger ones would break.
Wave speed for deep waves can be computed using the wavelength λ as:


开阔海浪通常通过在2D纹理上叠加一系列具有不同频率的摆线形（Gerstner）波浪来模拟，然后将该纹理平铺在海面上。显然，纹理应该是无缝可平铺的，这给波浪的可能频率带来了一些限制。基本上，波浪应该在网格的每个点上都有峰值。这可以通过确保波浪在u、v纹理方向上都有整数个峰值来满足。然后，得到的波浪频率是：

\[ f = \frac{1}{\lambda} \]

其他波浪参数取决于频率（或其倒数，波长）。一般来说，波浪的振幅应该保持在波长的1/20以下，因为更大的振幅会导致波浪破碎。
深水波浪的速度可以使用波长λ来计算：

\[ v = \sqrt{\frac{g}{2\pi} \cdot \lambda} \]
其中，\( g \) 是重力加速度（约 \( 9.81 \, \text{m/s}^2 \)）。

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

Direction of waves can be determined by manipulating the amplitudes of generated wave, for example the directions that lie closer to the direction of wind can have larger amplitudes than the ones flowing in opposite direction. The opposite wave directions can be even suppressed completely, which may be usable e.g. for rivers.
Shore waves form as the terrain rises and water slows down, while the wave amplitude rises. These waves tend to be perpendicular to shore lines.
In order to make the beach waves we need to know the distance from particular point in water to shore. Additionally, a direction vector is needed to animate the foam.

波浪的方向可以通过调整生成波浪的振幅来确定，例如，与风向更接近的方向的波浪可以比相反方向的波浪有更大的振幅。相反方向的波浪甚至可以完全抑制，这可能适用于河流等场景。
海岸波浪的形成是由于地形上升和水流减慢，同时波浪的振幅上升。这些波浪倾向于与海岸线垂直。
为了制作海滩波浪，我们需要知道水体中特定点到海岸的距离。此外，还需要一个方向向量来动画化泡沫。
在模拟这些波浪时，可以采用以下步骤：
确定波浪方向：根据风向调整波浪的振幅，使得与风向一致的波浪振幅更大。
海岸波浪的形成：当地形上升导致水流减慢时，波浪的振幅会增加，形成垂直于海岸线的海岸波浪。
计算到海岸的距离：为了模拟海滩波浪，需要计算水体中每个点到海岸的距离，这有助于确定波浪的形态和振幅。
方向向量的使用：为了动画化泡沫，需要一个方向向量，这通常与波浪的传播方向有关，可以帮助模拟波浪冲击海岸时产生的泡沫效果。
这些步骤结合起来，可以创建出逼真的水体渲染效果，包括开阔海浪和海岸波浪，以及它们与地形和风向的相互作用。


Distance from shore is used as an argument to wave shape function, stored in a texture. This shape is again trochoidal, but to simulate a breaking wave the equation has been extended to a skewed trochodial wave by adding another parameter determining the skew. Here's how it affects the wave shape:
The equation for skewed trochoidal wave is:
Skew γ=1 gives a normal Gerstner wave.
Several differently skewed waves are precomputed in a small helper texture, and the algorithm chooses the right one depending on water depth.
Distance map is computed for terrain tiles that contain a shore, i.e. those with maximum elevation above sea level and minimum elevation below it. Shader finds the nearest point of opposite type (above or below sea level) and outputs the distance. Resulting distance map is filtered to smooth it out.
Gradient vectors are computed by applying Sobel filter on the distance map.
Gradient field created from Gaussian filtered distance map


海岸距离用作波浪形状函数的参数，存储在纹理中。这种形状再次是摆线形的，但为了模拟破碎波，方程已经通过添加另一个参数来确定偏斜，从而扩展为偏斜摆线波。以下是它如何影响波浪形状的：

偏斜摆线波的方程是：
Skew 𝛾 = 1
给出一个正常的 Gerstner 波。
Skew γ=1 给出一个正常的 Gerstner 波。

几种不同偏斜的波浪预先计算在一个小型辅助纹理中，算法根据水深选择正确的波浪。

距离图是针对包含海岸的地形瓦片计算的，即那些海拔高度高于海平面最大值和低于海平面最小值的瓦片。着色器找到最近点的相反类型（高于或低于海平面）并输出距离。生成的距离图经过过滤以平滑处理。

梯度向量是通过在距离图上应用Sobel滤波器来计算的。
从高斯滤波的距离图创建梯度场。
这些技术允许创建出更加逼真的水体渲染效果，特别是模拟波浪破碎和海岸线附近的波浪行为。通过调整偏斜参数，可以模拟出不同类型的波浪，从平滑的波浪到破碎的波浪。距离图和梯度场的计算则帮助确定波浪的形状和方向，以及它们如何响应地形的变化。


Both wave types are then added together. The beach waves are conditioned using another texture with mask changing in time so that they aren't continual all around the shore.
Water color is determined by several indirect parameters, most importantly by the absorption of color components under the water. For most of the screen shots shown here it was set to values of 7/30/70m for RGB colors, respectively. These values specify the distances at which the respective light components get reduced to approximately one third of their original value.        
Red: 7m, Green: 30m, Blue: 70m, Scattering coefficient: 0.005        Red: 70m, Green: 30m, Blue: 7m
Another parameter is a reflectivity coefficient that tells how much light is scattered towards the viewer. Interestingly, scattering effect in pure water is negligible in comparison with the effect of light absorption. Main contributor to the observed scattering effect is dissolved organic matter, followed by inorganic compounds. This also gives seas slightly different colors.        
Scattering coefficient: 0.000        Scattering coefficient: 0.020
Here's a short video showing it all in motion.

然后将这两种波浪类型相加。海滩波浪通过另一种随时间变化的遮罩纹理进行条件化，以确保它们不会持续不断地出现在整个海岸线周围。
水的颜色由几个间接参数决定，最重要的是水下颜色成分的吸收。在这里展示的大多数屏幕截图中，RGB颜色的吸收值分别设置为7/30/70米。这些值指定了相应的光成分减少到其原始值大约三分之一的距离。
红色：7米，绿色：30米，蓝色：70米，散射系数：0.005
红色：70米，绿色：30米，蓝色：7米
另一个参数是反射率系数，它告诉我们有多少光被散射到观察者的方向。有趣的是，与光吸收效应相比，纯水中的散射效应可以忽略不计。观察到的散射效应的主要贡献者是溶解的有机物，其次是无机化合物。这也赋予了海洋略微不同的颜色。
散射系数：0.000       散射系数：0.020
这里有一个短视频展示了所有这些动态效果。

https://outerra.blogspot.com/2011/02/ocean-rendering.html

必须支持

感谢楼主分享~