风格化Ocean渲染：

水体是我们最常见的材质之一，有海水、河水、湖水、积水……，有清澈的水、浑浊的水，有热带的水和寒带的水，毕竟水占地球表面积约71%，可谓各种各样、随处可见。但水体渲染涵盖了大量渲染难题，透明（最大的bug、性能问题源头之一）、次表面、镜面反射、折射、流体模拟与交互、随机波形等等，所以水体渲染既基础又复杂，下面让我们试着一口一口啃下这根硬骨头。

一、特征分析

1. 波形、波纹和Flow

波形强调水面整体的起伏

波纹强调水面细节的涌动

Flow强调水向某方向的流动

2. 反射（镜面、高光）、折射和菲涅尔

当光线从空气或其他介质射入水面时，部分光线以反射的方式从水面反射出来。这种反射遵循光线入射角等于反射角的规律，并且在适当的角度和条件下，会形成镜面反射和高光效果。镜面反射是指水面上出现的明亮、清晰的反射图像，通常呈现为反射的环境、天空、人物等。高光则是指水面上由光线直接反射而产生的强烈闪光部分，给人一种波光粼粼的浪漫梦幻，突出水体的亮度与光线的折射。

折射是光线经过界面从一种介质进入另一种介质时，由于两种介质的密度不同而导致光线方向改变的现象。当光线从空气射入水中时，由于水的密度较大，光线被偏折，并且在适当的角度和条件下会产生折射现象。通过折射可以表现出水的透明度和质感，特别是随着法线和折射率变化导致的视线动态扭曲会产生一种独特的视觉效果。

《什么是菲涅尔 （Fresnel Effect）》

https://zhuanlan.zhihu.com/p/357190332

3. 焦散

焦散是折射现象的延申，当光线从空气射入水中时，光线会发生折射并产生焦散效应。真实的焦散不仅会产生耀眼的光斑，还因不同颜色的光线在折射时受到不同程度的偏离，出现一种类似彩虹的效果。焦散效果可以增强物体的透明感和真实感，使画面亮部细节更丰富，并且水底朦胧扭曲的焦散可以增强水体的立体感和动态感。

4. 次表面散射

次表面散射（Sub-Surface-Scattering）简称3S，用来描述光线穿过透明/半透明表面时发生散射的照明现象，可以抽象理解为光线在材质内部进行多次散射和从材质表面反射的过程。其成因主要由于物质内部材质分布不规则（例如有杂质）和折射率分布不均匀，次表面散射一般是在半透明的材质上表现明显，如玉石、皮肤、水果等。

• 透亮，次表面散射反射使得光线能够从物体内部透射出来，使物体呈现出透亮的效果。

• 朦胧，物体内的多次散射使得光线能够在物体内部进行扩散和传播，不会出现明显的光束或锐利的反射，这种效果类似于物体被轻薄的云雾包围，给人一种柔和、朦胧的感觉。

• 分色，次表面散射反射通常会导致光线在物体内部被吸收或散射后改变其颜色。例如，皮肤内的血红蛋白、水果内的果汁等会引起光线的散射和颜色变化。这种色彩的变化为物体增添了生动感和真实感。

5. 颜色（物质、光照、阴影、深度、远近）

水的颜色要受很多因素的影响，除了基础的光影，自身的溶解物与悬浮物的颜色，环境色的反射与折射外，还受水的透明度、深浅，水面的远近等因素的影响。

不同的物质有不同的颜色，溶解和包含了其他物质的水也会呈现对应的颜色，所以，不包含其他物质的纯水在常规光照下是无色透明的，溶解了泥土的泥水有着和泥土一样的褐黄色，血液是红色可以解释为水中含有大量的血红蛋白。当看到五彩斑斓的湖水我们会感慨自然的鬼斧神工，但《走进自然》之类的科普节目肯定会告诉我们这是因为水中含有各种各样的元素，甚至对人有危险。

光对水颜色的影响可以用基础的PBR光照模型去理解。这里面包含光的颜色、强度、冷暖，光带来的高光、漫反射、镜面反射、折射等，想想海上升明月与海上升旭日在视觉上有什么区别又有什么相似？

水面阴影应该是一种很常见的自然现象，但是你能试着具体形容一下水面上的阴影吗？其实这还是有一定难度的，因为水面的阴影相比一般阴影更为多变，且会隐身。多变是指阴影的强弱与水的透明度有关，清澈的水阴影更弱，浑浊的水阴影更暗，并且不同的波纹会影响阴影的形状。隐身是指生活中我们很少提及水面阴影，更多的是说水面倒影，“倒影”这一词本身就融合了镜面反射与阴影两种自然现象，所以现实中我们一般很难区分水面的反射与阴影，并且水面反射相比阴影更能吸引我们的目光，所以阴影被隐身也是人眼的一种选择。

在浅水中，由于光线的折射角度较小，光线会多次反射和折射，使水看起来更亮、更透明，颜色呈现较浅的外观。深水中，光线的折射角度较大，会经过多次反射和折射后，大部分光线被吸收和散射，使水看起来较暗，颜色呈现较深的外观。

简言之，水的这种深度衰减使水有明暗虚实、颜色渐变的视觉效果，通过还原这种颜色的变化能够反映水的环境气候与清澈度。

菲涅尔效应与大气散射使远近不同的水会有颜色差异。菲涅尔效应使入射角由大到小（距离由近到远）有折射到反射的渐变，而折射与反射会给人眼带来不同的颜色感知。同时，在更远距离，由于大气散射的存在光线会发生折射、散射和吸收，这些大气作用会使光线中的某些波长被过滤，导致颜色的变化。大气对光线中的低频成分（如红色光）被过滤较多，使水呈现较蓝绿色调。而近处的水受大气层的影响较少，颜色可能更接近原始颜色。并且在更远的距离，水面会融合更多雾的颜色。

这种水平距离的颜色渐变，可以增强画面的空间感，形成色彩透视效果，通过色彩的变化也能丰富画面的色彩节奏。下图展示了水面色调的变化。

7. 泡沫（浪花、边缘）

白沫（Foam），在有些文献中也被称为Whitecap或White Water，是一种复杂的现象。即使白沫下方的材质具有其他颜色，白沫也通常看起来是白色的。出现这种现象的原因是因为白沫是由包含空气的流体薄膜组成的。随着每单位体积薄膜的数量增加，所有入射光都被反射而没有任何光穿透到其下方。这种光学现象使泡沫看起来比材质本身更亮，以至于看起来几乎是白色的。[1]

我把泡沫简单分为浪花泡沫与边缘泡沫两种，浪花泡沫主要指随着波浪飘动的泡沫，主要分布在浪尖周围；边缘泡沫主要指水面与其他物体交界处产生的泡沫，包括与岸边的交界处，以及与可移动物体（例如玩家）的交界处。泡沫的表现有许多作用，其明亮洁白的颜色在水中较为突出，可以以近似线条的形式描绘出海边蜿蜒曲折的形状，其来回飘荡的节奏可以增强波浪的动势。

二、性能分析

1. 水波模拟

我们在前面把水波分为了波形、波纹和Flow三种形式，其中最大的性能瓶颈是波形，而波纹与Flow多基于预渲染的纹理以简单UV动画的形式实现效果，既不需要复杂的算法也不需要较多顶点数量的模型。

波形渲染性能开销大不大不是一件绝对的事情，因为我们有许多水体波形实现的方法，但大体上波形渲染效果的真实度与性能开销成正比。如果你想要影视级别的水波肯定没有办法实时渲染实现，当然我们也可以用预渲染的方法实现真实细致的水波，但重复、死板的感觉不可避免。水波渲染本质是一种物理模拟，我们可以很容易让一个平面模型动起来，困难点在于如何模拟水面真实的物理波动，所以平衡效果与性能是解决波形模拟的关键。

GAMES101课程有讲解图形学物理模拟的课程，可以看看下面简单的笔记链接：

《GAMES101 闫令琪〈现代计算机图形学入门〉学习笔记P22》

https://zhuanlan.zhihu.com/p/576275899

基于顶点动画模拟水的流动（本文暂不讨论粒子碰撞模拟水体的方法）必然要考虑模型顶点的疏密与数量，为了优化模型顶点、面数，水体渲染往往会使用LOD技术和动态曲面细分技术。

能够实现水面反射效果的方法并不少，这些方法各有优劣，它们的性能消耗排序大致为：反射探针＞平面反射＞屏幕空间平面反射>立方体贴图，而它们的效果基本与性能消耗成正比，所以使用何种方案要根据项目具体情况来考虑。下面是关于这几种反射方案的详细分析链接：

《反射探针（Reflection Probe）》

https://zhuanlan.zhihu.com/p/438022045

《Unity 实现平面反射（基于 URP）》

https://zhuanlan.zhihu.com/p/493766119

《Unity URP实现屏幕空间平面反射（SSPR）》

https://zhuanlan.zhihu.com/p/651134124

《详解Cubemap、IBL与球谐光照》

https://zhuanlan.zhihu.com/p/463309766

折射效果的实现相较反射要简单些，也并没有太多的方案供抉择。折射效果主要出现在透明材质上，在实时渲染中常用的方法是透明度混合或环境贴图和纹理映射，而要产生水面折射感主要使用纹理映射方法。但透明度混合或环境贴图和纹理映射都存在透明排序的问题，渲染排序容易产生Bug，因此需要格外注意。

3. 次表面散射

次表面散射涉及到对光线在物体内部的路径进行跟踪和采样。此过程对算力和内存要求较高，尤其是在复杂的场景中，需要跟踪大量的光线和进行多次采样、迭代计算，增大了计算量和内存开销。

我们比较常用的次表面散射方案有如下5种，大家可以根据项目的需求，平衡性能与效果，选择合适的方案。

• 屏幕空间次表面散射SSSSS（5S）(屏幕空间模糊Screen Space Blur）

• 可分离的次表面散射SSSS（4S）

• 预积分次表面散射Pre-Integrated

• 路径追踪次表面散射（光线步进）

• 快速次表面散射（Fast Subsurface Scattering）（https://zhuanlan.zhihu.com/p/82778692）

《Unity Shader - 屏幕空间次表面散射》

https://zhuanlan.zhihu.com/p/416022588

《【详解4S皮肤】可分离次表面散射Separable SSS（含透射项）》

https://zhuanlan.zhihu.com/p/617658356

《从零开始的预积分次表面散射》

https://zhuanlan.zhihu.com/p/444091986

《光线追踪次表面散射（Ray-Traced Subsurface Scattering）》

https://docs.unity3d.com/cn/Packages/com.unity.render-pipelines.high-definition@10.4/manual/Ray-Traced-Subsurface-Scattering.html

《Unity Shader - 伪次表面散射模拟》

https://zhuanlan.zhihu.com/p/409370107

4. 粒子特效

为制作一个完整的水体效果，我们有时也会使用粒子特效实现浪花、溅射、垂直水流等水的效果，所以特效的性能优化也是整个水体性能分析的一部分。关于特效的部分作者还在学习中，以防有错漏，故推荐两篇自己学习特效性能相关的笔记，供读者了解阅读。

《技术美术百人计划-美术 4.4 特效优化注意点美术向 笔记》

https://zhuanlan.zhihu.com/p/644509615

《技术美术百人计划-美术 4.5 特效规范及拆分实现 笔记》

https://zhuanlan.zhihu.com/p/644591455

二、实现方案

从上面的特征分析可以看到水有复杂的美术表现，想要还原一个完美的水很可能是一个吃力不讨好的事情，我们往往根据项目需求和水体材质的重要性对一些细微特征做删减，记住我们想要的是符合现实认知、视觉效果好、性能消耗可接受的水体，平衡正确、美观、性能也是一项重要的能力。

下面我们从一个简单的材质开始一步步实现一个相对完整的水体效果。

水体基础

水最核心、基础的美术特征就是透明、流动、反射。

1. 透明

实现透明效果最常用的方法是透明度混合与颜色Lerp。

Unity：需要在Shader中设置：

Tags { "Queue"="Transparent" "RenderType"="Transparent" }

Blend SrcAlpha OneMinusSrcAlpha // 使用透明混合模式

然后将透明度传递给输出颜色的Alpha通道即可。

UE：只需要设置材质的Blend Mode为“Translucent”或“Additive”（具体情况根据您的需求而定），然后将透明度数值连接到材质的透明度控制的“Opacity”接口即可。

2. 流动

我们可以用法线贴图来模拟水面波纹的效果，想让我们的波纹动起来只需给法线贴图加上UV动画。

Unity：

下面提供了一个实现UV动态偏移的简单函数，用函数实现UV随时间的偏移后就可以直接采样水纹法线了。

float2 Panner(float2 uv, float2 direction, float speed)
{
    return uv + normalize(direction) * speed * _Time.y;
}

UE：

甚至我们可以使用下面的函数/节点对法线做更随机混沌的融合，使我们的水波更为自然。

float3 MotionFourWayChaos(sampler2D tex, float2 uv, float speed, bool unpackNormal)
    {
        float2 uv1 = Panner(uv + float2(0.000, 0.000), float2(0.1,  0.1), speed);
        float2 uv2 = Panner(uv + float2(0.418, 0.355), float2(-0.1, -0.1), speed);
        float2 uv3 = Panner(uv + float2(0.865, 0.148), float2(-0.1,  0.1), speed);
        float2 uv4 = Panner(uv + float2(0.651, 0.752), float2(0.1, -0.1), speed);

        float3 sample1;
        float3 sample2;
        float3 sample3;
        float3 sample4;

        if (unpackNormal)
            {
                sample1 = UnpackNormal(tex2D(tex, uv1)).rgb;
                sample2 = UnpackNormal(tex2D(tex, uv2)).rgb;
                sample3 = UnpackNormal(tex2D(tex, uv3)).rgb;
                sample4 = UnpackNormal(tex2D(tex, uv4)).rgb;

                return normalize(sample1 + sample2 + sample3 + sample4);
            }
        else
            {
                sample1 = tex2D(tex, uv1).rgb;
                sample2 = tex2D(tex, uv2).rgb;
                sample3 = tex2D(tex, uv3).rgb;
                sample4 = tex2D(tex, uv4).rgb;

                return (sample1 + sample2 + sample3 + sample4) / 4.0;
            }
    }

反射的实现有简单也有复杂的方案，最简单的方案就是在PBR材质上把光滑度调高一些，这样我们就可以在光滑的水体材质上看到环境的反射，只不过这个反射有不太正确、不太完整、缺少动态等问题，但是这对一个简单的水体材质来说已经勉强够用了。

下面简单梳理一下实现更复杂反射的一些方案，包括：反射探针、平面反射、屏幕空间反射、屏幕空间平面反射和光线追踪等。

反射探针：

反射探针为引擎内置的功能，可以通过下面三个文档详细了解反射探针的功能与用法。

《反射探针（Reflection Probe）》

https://zhuanlan.zhihu.com/p/438022045

《反射探针 - Unity 手册》

https://docs.unity3d.com/cn/current/Manual/ReflectionProbes.html

《反射捕获》

https://dev.epicgames.com/documentation/zh-cn/unreal-engine/reflections-captures-in-unreal-engine?application_version=5.3

平面反射：

下面分别是平面反射的原理介绍，以及Unity与UE引擎实现平面反射效果的方法。

《Unity 实现平面反射（基于 URP）》

https://zhuanlan.zhihu.com/p/493766119

《Planar Reflections for Unity》

https://github.com/eldskald/planar-reflections-unity

《平面反射》

https://dev.epicgames.com/documentation/zh-cn/unreal-engine/planar-reflections-in-unreal-engine?application_version=5.3

屏幕空间反射：

下面是UE引擎的屏幕空间反射方案介绍。

《屏幕空间反射》

https://dev.epicgames.com/documentation/zh-cn/unreal-engine/screen-space-reflections-in-unreal-engine?application_version=5.3

屏幕空间平面反射：

下面分别是SSPR的原理介绍，以及Unity实现屏幕空间平面反射的方法。

《【URP】屏幕空间平面反射（ScreenSpacePlanarReflection）学习笔记》

https://zhuanlan.zhihu.com/p/367496408

《UnityURP-MobileScreenSpacePlanarReflection》

https://github.com/ColinLeung-NiloCat/UnityURP-MobileScreenSpacePlanarReflection

光线追踪：

下面是有关UE光线追踪反射的介绍，可以大致了解一下。

https://www.youtube.com/watch?v=quynkx1dTkI

几种镜面反射方案的对比：

1. CubeMap只能反射Map上的颜色，静态。

2. 反射探针，适合室内场景、静态场景、并且消耗存储空间。

3. 平面反射需要以平面为对称面，用第二个相机渲染一张RT，然后用反射矩阵计算反射效果，缺点只适合平面，不太适合移动端。

4. SSR，屏幕空间，适合延迟管线，不局限平面物体，需要使用光线步进算法性能消耗大，只能反射屏幕空间的信息。屏幕空间的反射需要做模糊处理。

5. SSPR，适合平面物体，适合移动端，也只能反射屏幕空间信息。用深度图还原屏幕空间3D坐标，以反射平面为对称平面，计算屏幕空间颜色在平面上对应的反射点，只需要知道平面空间颜色的目标坐标位置（Compute Shader计算），在离相机近的平面可能会出现重叠，需要选择远更远的像素。

6. 光线追踪方案可以真实的反射整个环境空间，但性能消耗极大，并不适合实时渲染。

我们可以通过上面的任意一种方案实现自己的反射效果，只是水面的反射效果会随着水波摇曳、拉伸、模糊，给镜面反射加上扰动、缩放、模糊等处理将会得到更好的效果，大家可以根据自己对水面倒影的理解发挥想象，加上自己喜欢的效果。

高光（Specular）：我们需要根据波形（波形的实现将在下面介绍）重新计算法线朝向，然后用简单的Blinn-Phong光照模型，或者直接把波形法线与前面采样法线贴图的结果融合，以计算高光效果。

下面链接介绍了如何获取顶点动画后模型的正确法线：

https://www.youtube.com/watch?v=P8-oGG2d1RY

波光粼粼：我们可以通过下面的代码实现波光粼粼的闪烁效果。

float3 MotionFourWaySparkle(sampler2D tex, float2 uv, float4 coordinateScale, float speed)
    {
        float2 uv1 = Panner(uv * coordinateScale.x, float2(0.1,  0.1), speed);
        float2 uv2 = Panner(uv * coordinateScale.y, float2(-0.1, -0.1), speed);
        float2 uv3 = Panner(uv * coordinateScale.z, float2(-0.1,  0.1), speed);
        float2 uv4 = Panner(uv * coordinateScale.w, float2(0.1, -0.1), speed);

        float3 sample1 = UnpackNormal(tex2D(tex, uv1)).rgb;
        float3 sample2 = UnpackNormal(tex2D(tex, uv2)).rgb;
        float3 sample3 = UnpackNormal(tex2D(tex, uv3)).rgb;
        float3 sample4 = UnpackNormal(tex2D(tex, uv4)).rgb;

        float3 normalA = float3(sample1.x, sample2.y, 1);
        float3 normalB = float3(sample3.x, sample4.y, 1);

        return normalize(float3((normalA + normalB).xy, (normalA * normalB).z));
    }

float3 sparkly1 = MotionFourWaySparkle(_SparklesNormalMap, worldPosition.xz / _SparkleScale, float4(1,2,3,4), _SparkleSpeed);
float3 sparkly2 = MotionFourWaySparkle(_SparklesNormalMap, worldPosition.xz / _SparkleScale, float4(1,0.5,2.5,2), _SparkleSpeed);
float sparkleMask = dot(sparkly1, sparkly2) * saturate(3.0 * sqrt(saturate(dot(sparkly1.x, sparkly2.x))));
sparkleMask = ceil(saturate(pow(saturate(sparkleMask), _SparkleExponent)));
float3 sparkleColor = _SparkleColor * sparkleMask;

+折射、菲涅尔

1. 折射

水的折射在视觉上给人的感觉就是将水下的内容随水波慢慢扭动，所以最简单的方法就是渲染一张水平面以下部分的RenderTexture，然后用水波法线或噪声纹理扰动UV，然后采样这张RenderTexture。

Unity：

我们在URP管线中勾选渲染OpaqueTexture，然后在Shader中声明_CameraOpaqueTexture后可以直接使用管线已经渲染好的屏幕空间不透明Queue的颜色纹理。在Build-in管线中我们可以通过GrabPass {_CameraOpaqueTexture}渲染我们需要的纹理。

float2 offset = normalWS.xy * _Distortion * _CameraOpaqueTexture_TexelSize.xy;
screenCoord.xy = offset * i.scrPos.z + screenCoord.xy;
float3 fragColor = tex2D(_CameraOpaqueTexture, screenCoord.xy).rgb；

UE:

UE材质提供了两种实现折射的方案：折射率（Index of Refraction）、像素法线偏移（Pixel Normal Offset）。下面提供了使用两种折射方案的操作方法，可以根据需要选择任意一种实现你的水体折射效果。

《使用像素法线偏移实现折射》

https://dev.epicgames.com/documentation/zh-cn/unreal-engine/refraction-using-pixel-normal-offset-in-unreal-engine?application_version=5.3

《使用折射》

https://dev.epicgames.com/documentation/zh-cn/unreal-engine/using-refraction-in-unreal-engine?application_version=5.3

2. 菲涅尔

反射与折射的实现都已完成，现在是时候实现菲涅尔部分了，菲涅尔决定了反射或折射的正确显现。

Unity：

《〈Unity Shader 入门精要〉从Bulit-in 到URP （HLSL）Chapter10-Fresnel》

https://zhuanlan.zhihu.com/p/536049767

float fresnel = pow(saturate(1 - dot(worldNormal, viewDirWS)), _FresnelPower);
half3 color = lerp(refraction, reflection, saturate(fresnel));

UE:

关于波形毛星云前辈的这篇文章做了非常细致的分享，本文的大量内容也参考了这篇文章。

《真实感水体渲染技术总结》

https://zhuanlan.zhihu.com/p/95917609

这篇文章把波形的实现分为七大类：线性波形叠加法、统计模型法、波动粒子方法、物理方程方法、预渲染方法和其他方法。其中线性波形叠加法、预渲染方法多用于实时渲染的游戏项目；统计模型法、物理方程方法多用于离线渲染的影视项目；波动粒子方法则更适合模拟物体与水的交互效果。

考虑到本文主要面向游戏渲染，所以仅就线性波形叠加法、预渲染方法实践讲解。

线性波形叠加法意如其名，具体实现方法是将不同方向大小的线性波形函数累加以构建水面的波动，如下图。

常用的两种波形函数为正弦波（Sinusoids Wave）和Gerstner波（Gerstner Wave）。

1. 正弦波（Sinusoids Wave）

正弦波法渲染出的水面波形较为平滑、圆润，适合表现平静湖面的水波。

// Returns a simple waveform (to be used as a height offset) from the input wave parameters.
float SimpleWave(float2 position, float2 direction, float wavelength, float amplitude, float speed)
    {
        float x = PI * dot(position, direction) / wavelength;
        float phase = speed * _Time.y;
        return amplitude * sin(x + phase);
        return amplitude * (1 - abs(sin(x + phase)));
    }

float GetWaveHeight(float2 worldPosition)
    {
        float2 dir1 = float2(cos(PI * _Wave1Direction), sin(PI * _Wave1Direction));
        float2 dir2 = float2(cos(PI * _Wave2Direction), sin(PI * _Wave2Direction));
        float wave1 = SimpleWave(worldPosition, dir1, _Wave1Wavelength, _Wave1Amplitude, _Wave1Speed);
        float wave2 = SimpleWave(worldPosition, dir2, _Wave2Wavelength, _Wave2Amplitude, _Wave2Speed);
        return wave1 + wave2;
    }

    // Approximates the normal of the wave at the given world position. The d
    // parameter controls the "sharpness" of the normal.
float3x3 GetWaveTBN(float2 worldPosition, float d)
    {
        float waveHeight = GetWaveHeight(worldPosition);
        float waveHeightDX = GetWaveHeight(worldPosition - float2(d, 0));
        float waveHeightDZ = GetWaveHeight(worldPosition - float2(0, d));

        // Calculate the partial derivatives in the Z and X directions, which
        // are the tangent and binormal vectors respectively.
        float3 tangent = normalize(float3(0, waveHeight - waveHeightDZ, d));
        float3 binormal = normalize(float3(d, waveHeight - waveHeightDX, 0));

        // Cross the results to get the normal vector, and return the TBN matrix.
        // Note that the TBN matrix is orthogonal, i.e. TBN^-1 = TBN^T.
        // We exploit this fact to speed up the inversion process.
        float3 normal = normalize(cross(binormal, tangent));
        return transpose(float3x3(tangent, binormal, normal));
    }

v2f vert (appdata v)
        {
            v2f o;

            o.worldPosition = mul(unity_ObjectToWorld, v.vertex).xyz;
            o.worldPosition.y += GetWaveHeight(o.worldPosition.xz);
            o.vertex = mul(UNITY_MATRIX_VP, float4(o.worldPosition, 1));
        }

float4 frag (v2f i) : SV_Target
        {
            // ------------------- //
            // NORMAL CALCULATIONS //
            // ------------------- //

            // Get the tangent to world matrix.
            float3x3 tangentToWorld = GetWaveTBN(i.worldPosition.xz, 0.01);

            // Sample the wave normal map and calculate the world-space normal for this fragment.
            float3 normalTS = MotionFourWayChaos(_WaveNormalMap, i.worldPosition.xz/_WaveNormalScale, _WaveNormalSpeed, true);
            float3 normalWS = mul(tangentToWorld, normalTS);
        }

源码链接：

Gerstner波是正弦波的进化版，相比正弦波水的波形更为尖锐和有方向感。简言之波峰尖锐，波谷宽阔，适合模拟海面波涛。Gerstner波是目前平衡效果与性能的最佳方案，把Gerstner波与粒子特效水波结合能模拟出3A游戏品质的水体效果。

https://www.youtube.com/watch?v=BJSMVvZMQ1w

预渲染方法主要包含四种方案：顶点高度位移贴图、FlowMap、离线FFT贴图烘焙和离线流体帧动画烘焙。它们都采用预渲染的方式把水体复杂的运动状态存储在贴图之上，然后在实时渲染的过程中读取贴图的数据直接还原水体的运动状态，省去用复杂算法还原运动状态的过程以提升渲染速度。但是由于贴图存储空间的限制，我们不能还原水无限运动变化的状态，所以预渲染方法有一个共同的缺陷——周期性重复。

3. 顶点高度位移贴图

顶点高度位移贴图通过使用纹理数据来修改模型顶点的位置，从而实现形变效果。用顶点高度位移贴图实现波形的基本思路与前面用UV动态偏移法线贴图实现流动效果相似，只不过一个是改变模型的顶点高度，一个是改变模型的法线。

注意在顶点着色器采样贴图需要指定贴图的采样层级，主要由于顶点着色器阶段没有办法使用ddx、ddy函数（它们对于求解贴图层级很关键）。

下面是采样计算位移贴图的简单示例：

void vert(inout appdata_full v, out Input o) {
    float4 displacement = tex2Dlod(_DisplacementTex, float4(v.texcoord.xy, 0, 0));
    v.vertex.xyz += normalize(displacement.rgb - 0.5) * _DisplacementAmount;
}

位移贴图不仅可以模拟水面的波形，还可以实现丰富多样的效果，见下图。

4. FlowMap

FlowMap本质是记录UV位移向量的预处理贴图，你可以理解为FlowMap按照某种预设的规律驱动UV坐标向特定方向循环运动，然后借用UV的运动间接驱动颜色或法线纹理运动。因为驱动UV运动的向量是二维的，只需要贴图RGB中的两个通道存储，剩下的一个通道我们可以用来存储运动强度/速度或者其他数据。

此外，FlowMap不仅可以用来模仿水流效果，也常被用于火焰、云层、流沙、草地风效等效果。它可以为表面添加动态和流动的细节，增强真实感和视觉效果。

//get and uncompress the flow vector for this pixel
float2 flowmap = tex2D( FlowMapS, tex0 ).rg * 2.0f - 1.0f;
float cycleOffset = tex2D( NoiseMapS, tex0 ).r;
float phase0 = cycleOffset * .5f + FlowMapOffset0;
float phase1 = cycleOffset * .5f + FlowMapOffset1;

// Sample normal map.
float3 normalT0 = tex2D(WaveMapS0, ( tex0 * TexScale ) + flowmap * phase0 );
float3 normalT1 = tex2D(WaveMapS1, ( tex0 * TexScale ) + flowmap * phase1 );
float flowLerp = ( abs( HalfCycle - FlowMapOffset0 ) / HalfCycle );
float3 offset = lerp( normalT0, normalT1, flowLerp );

UE：

下图分别为FlowMap MaterialFunction的内部材质蓝图节点，以及用FlowMap MaterialFunction采样流水法线的蓝图节点。

如果想要更详细的了解FlowMap的制作与使用，可以阅读下面文章链接。

《技术美术百人计划-图形 2.8 flowmap的实现 笔记》

https://zhuanlan.zhihu.com/p/624651983

5. 离线FFT贴图烘焙

离线FFT贴图烘焙即离线渲染烘焙出FFT（快速傅里叶变换）模拟海洋波浪的一系列Texture，包括高度图、法线图、Flow图、Foam图等。快速傅里叶变换（Fast Fourier Transform，FFT）和快速逆傅里叶变换（Inverse Fast Fourier Transform，IFFT）是一对互逆的算法（即时域与频域的互相转换），可以用于模拟细节丰富、效果逼真的海洋波浪效果，但其算法对于实时渲染来说过于昂贵，所以我们选择将其离线烘焙为一些四方连续、时间循环的贴图，并在运行时进行采样还原效果。这一方法最早由《刺客信条3》团队提出。

Unity实现该方案可以参考下面链接：

《从零开始的水渲之形状Shape[二]》

https://zhuanlan.zhihu.com/p/351455975

UE：

UE实现该方案可以参考下面链接：

《虚幻5渲染编程（DCC工具篇---houdini）【Houdini Ocean Simulation To UnrealEngine】》

https://zhuanlan.zhihu.com/p/420924601

6. 离线流体帧动画烘焙

离线流体帧动画烘焙方案的思路很简单，与我们常见到的序列帧动画的实现并无不同。该方案把水面的波形/波纹看作是连续播放的序列帧动画，不同之处在于其播放的贴图为离线渲染烘焙的法线贴图或者高度图。该方案实现简单，但其动画形式较为重复单调。

下图为离线烘焙的水面涟漪序列帧法线贴图。

float3 SequenceAnimationFrame(sampler2D Tex, float2 uv, int Count, float speed)
{
    float time = floor(_Time.y * speed);
    float row = floor(time / Count) + 1;
    float column = time - row * Count;

    float2 uvOffset = float2(uv.x / Count, uv.y / Count);
    uvOffset += float2(column / Count, -row / Count);

    return UnpackNormal(tex2D(Tex, uvOffset)).rgb;
}

UE：

我们可以直接使用UE提供给我们的FlipBook MaterialFunction。

+颜色变化

1. 次表面散射

前面在性能分析中提到数种实现次表面散射的方案，但考虑到对水体材质的适用性以及性能压力，真正适用水体渲染的次表面散射方案主要是预积分次表面散射与快速次表面散射（Fast Subsurface Scattering）。

Fast Subsurface Scattering

https://zhuanlan.zhihu.com/p/82778692

因为预积分方法同样适用于实现下面的深度颜色变化，所以我们先尝试快速次表面散射。

我们把光源分成了两部分之后，可以采用两种光照模型分别计算两种光源的照射结果。对于L光源我们采用常用的PBR光照模型即可。对与-L光源我们将使用下面的光照模型公式计算，最终把两个光照模型计算的结果相加之后就可以得到我们想要的效果。

https://www.alanzucconi.com/2017/08/30/fast-subsurface-scattering-1/

下面将分析Unity与UE的具体实现。

Unity：

float3 backLitDir = normalWS * _SSSDistortion + (_MainLightPosition.xyz - float3(0, worldPosition.y, 0));
float backSSS = saturate(dot(viewDirWS, -backLitDir));
float3 sssColor = _SSSColor * pow(backSSS, _SSSPower) * _SSSScale;

UE：

经过Crest Ocean System改进的《盗贼之海》的SSS方案可以总结如下：

假设光更有可能在波浪的一侧被水散射与透射。

基于FFT模拟产生的顶点偏移，为波的侧面生成波峰Mask。

根据视角，光源方向和波峰Mask的组合，将深水颜色和次表面散射水体颜色之间进行混合，得到次表面散射颜色。

将位移值（Displacement）除以波长，并用此缩放后的新的位移值计算得出次表面散射项强度。

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，即散射强度，由采样位移值计算得出。

2. 深度颜色

水体深度颜色变化主要由光线体积散射衰减造成，抛开各种物理原理去理解其逻辑就是：水体深度对水体颜色的影响。所以不论使用什么方案实现该效果，最核心的功能是获得水的深度并根据深度匹配水的颜色。下面我们将分享基于预积分和指数函数两种方案实现该效果。

我们在前面次表面散射实现中有提到预积分可以用来实现次表面散射效果，但该方案是基于水体的深度值采样LUT纹理，故放在深度颜色实现中讲解。下图是水的深浅对应水的颜色的LUT纹理（我们可以在这个纹理的Alpha通道中加入水的深浅对应的透明度）。

有了LUT纹理之后我们就可以直接计算水的深度并采样，下面是Unity与UE的具体实现。

Unity：

//屏幕空间采样颜色和深度
float fragDepth = tex2D(_CameraDepthTexture, screenCoord.xy).x;
//海水深度以及与视线距离对颜色的影响
//表现水的清澈程度
float opticalDepth = LinearEyeDepth(fragDepth, _ZBufferParams) - LinearEyeDepth(i.vertex.z, _ZBufferParams);
float4 DepthColor = tex1D(_LUTTex, opticalDepth);

UE：

关于水体深度的详细计算可以看下面的教程，获得水体深度后直接用深度采样LUT纹理即可。

https://www.youtube.com/watch?v=TObymSnTwV0&t=302s

如果我们没有LUT纹理，我们可以选择方案二，用exp()函数处理深度值后用来插值我们在材质面板输入的水面颜色与水底颜色。

Unity：

float transmittance = exp(-_DepthDensity * abs(opticalDepth));
//用深度造成的体积散射lerp深度颜色与屏幕空间颜色
float3 baseColor = lerp(_DeepColor, fragColor, transmittance);

UE：

要实现不同距离的颜色渐变我们可以直接使用菲涅尔数值来插值颜色，因为我们可以把水面看作是法线朝上的平面，菲涅尔代表的视线入射角大小正好与水面距离的远近成负相关，且数值范围在（0，1）区间。下面再Unity与UE中实现这个简单效果。

Unity：

float fresnel = pow(saturate(1 - dot(float3(0, -1, 0), viewDirWS)), _FresnelPower);
baseColor = lerp(baseColor, _FarColor, fresnel);

UE：

我们在前面分析了水面阴影与普通阴影的不同之处，如果想要更好看的水面阴影我们可以用水的透明度控制阴影的颜色深浅，通过阴影UV的处理改变阴影的形状。由于引擎没有在材质/Shader中提供阴影的可编程，仅提供了可配置选项，所以对阴影的深度修改不可避免的要自定义渲染管线。由于此部分难度较高，作者在此处主要抛砖引玉，想要提高阴影效果的读者可以进一步探索尝试。

Unity：

//计算阴影
VertexPositionInputs vertexInput;
vertexInput.positionWS = worldPosition;
float4 shadowCoord = GetShadowCoord(vertexInput);
half shadowAttenutation = MainLightRealtimeShadow(shadowCoord);
//控制阴影颜色
color = lerp(color, _ShadowColor, (1.0 - shadowAttenutation));

UE：

可也参考这位知乎网友分享的在UE中修改阴影渲染的方案。

《UE5.21风格化渲染探索01---阴影获取》

https://zhuanlan.zhihu.com/p/647120967

+泡沫

在特征分析中我们把水体泡沫分为浪花泡沫与边缘泡沫，其中边缘泡沫包括静态物体的边缘与动态物体的边缘。两种泡沫的实现方式有所不同，下面我们将依次介绍。

浪花泡沫

我们其实在前文波形的实现中已经提到过一种浪花泡沫方案，即在烘焙离线FFT高度、法线贴图的同时我们也可以制作与之对应的Foam贴图，由于此方案是整体离线预渲染水体的一部分，且材质制作思路就是将烘焙好的贴图进行采样，所以此处不再具体展开实现该方案。

下面将分享比较主流的Saturate高度方案的实现，其思路是将一个制作好的白沫纹理在高于某一高度H₀的顶点上进行颜色混合。用于混合的参数计算公式如下：

其中，H_MAX是泡沫最大时的高度，H₀是基准高度，H是当前高度。

下面分享一下Unity与UE的实现方案。

Unity：

//用自定义方向和波浪高度控制泡沫出现的位置
float2 flowUV = worldPosition.xz * _WiggleUV + frac(float2(0.0, -0.1) * _Time.y * 0.1 * _FlowTime);
float flow = tex2D(_FlowTex, flowUV).r * _DistortionStrength;
float2 foamUV = lerp(worldPosition.xz, worldPosition.xz + float2(flow, flow), 0.5);
half foamTex = tex2D(_FoamTex, foamUV / _FoamTexScale).r;
half foamNoise = tex2D(_FoamNoiseTex, worldPosition.xz / _FoamNoiseScale).r;
float foam = saturate(dot(float3(_FoamDirection.x, 0, _FoamDirection.y), normalWS)) * smoothstep(_FoamDirection.z, _FoamDirection.w, worldPosition.y);
half3 waveFoam = lerp(0, _WaveFoamColor * foamTex, foam * foamNoise);

UE：

边缘泡沫

目前制作水体边缘泡沫的绝大多数方案的基本思路都是遮罩+噪声+FoamTexture，区别只在于具体制作细节的不同尝试。由于边缘泡沫多分布于岸边较浅区域，所以我们可以直接使用前面计算水深颜色时获得的水深图，制作一个边缘泡沫遮罩。

接下来我们可以对遮罩的效果做一些优化，可以看到原始的遮罩边缘生硬不自然，我们可以先将其与一张噪声图做一些混合或者扰动，让边缘更加的随机自然。并且静态的遮罩并不符合自然规律，我们需要给它加上一些运动变化，运动变化的实现方法也是五花八门，我们既可以给刚才的噪声混合、扰动加上一些时间变化，也可以用Sine函数实现环形收敛动画。

除了对遮罩效果做优化我们也可以像制作浪尖泡沫那样为FoamTexture加上UV扰动、噪音遮罩、序列帧动画等效果。下面来看一下在Unity与UE的具体实现方法吧。

Unity：

//通过UV动画采样Noise,基于屏幕空间深度实现水面边缘检测，再用sine函数实现向内收缩的多层环状遮罩
float2 samplerUV = float2(_Time.y * _WaveControl, 0);
half distortNoise = tex2D(_EdgeFoamNoise, worldPosition.xz / _NoiseScale + samplerUV).r;
float edgeFoamMask = 1 - smoothstep(-1.0, _EdgeFoamDepth, opticalDepth);
edgeFoamMask = saturate(sin((edgeFoamMask - _Time.y * _EdgeSpeed) * PI * _EdgeAmount)) * edgeFoamMask * distortNoise;
float3 edgeFoamColor = lerp(0, _EdgeFoamColor, edgeFoamMask);

UE：

https://www.youtube.com/watch?v=oI_q5g3580I

+焦散

目前在实时渲染中焦散效果的实现大多基于焦散贴图，差别主要在采样方法的不同。

1. 直接在水面采样渲染焦散，该方法简单、性能节省，但无法贴合凹凸不平的水底，如果水底地形过于崎岖会显得悬浮、不够真实。

2. 在地形材质中采样渲染焦散，以笔刷画在水底地形上。缺点是会增加地形材质系统的复杂性，且焦散范围固定，不会随水的潮起潮落改变分布，与水体材质效果不够和谐。

3. 在贴花材质中采样渲染焦散，通过贴画粘贴在水底地形表面。缺点和方法2一样不能随水的流动改变分布，并且大面积使用贴花性能消耗极大，因此只适合小面积水域。

同时，我们还可以通过多种方法使焦散的运动更随机自然，包括多层采样叠加混合和UV噪声扰动等。

此外，前面特征分析中有提到光线折射时不同颜色光波的折射角度有偏差会使焦散产生一种多彩的效果，实现彩色焦散效果我们可以简单地使用彩色焦散贴图，也可以在采样时对RGB颜色通道做细微的偏移。

Unity：

下面实现在水面采样渲染焦散方案。

float2 causticsUV = worldPosition.xz / _CausticsScale;
float3 causticsColor = MotionFourWayChaos(_CausticsTexture, causticsUV, _CausticsSpeed, false);
causticsColor = _CausticsColor * causticsColor * _CausticsContribution;

UE：

UE中以贴花的形式实现焦散效果。

https://www.youtube.com/watch?v=9z6EMsoqLDY

参考

[1] 引用来源：https://zhuanlan.zhihu.com/p/95917609

UWA DAY 2024｜游戏开发者大会，干货议题持续更新

近期精彩回顾

【学堂上新】服务器AOI(Area Of Interest)算法和功能实现

【学堂上新】基于.NetCore开发MMORPG分布式游戏服务器

【万象更新】UWA Gears Realtime模式实用小技巧

【万象更新】深入了解UWA Gears Realtime模式性能参数