企业官网建设流程全解析

1. 项目概述：从“有水”到“有灵魂的水”

在数字孪生、虚拟仿真和游戏开发领域，水体的表现力直接决定了场景的真实感和沉浸感。很多朋友在用Cesium for Unreal（后文简称CesiumUnreal）时，可能都止步于官方示例或基础教程，打开“水遮罩”，看到一片蓝色平面，就觉得“水做完了”。这其实只解决了“有没有水”的问题，离“像不像水”、“美不美”还差得很远。一片死寂、毫无波澜、质感塑料的水面，会瞬间拉低整个三维场景的档次。

我接手过不少项目，初期都卡在水效果上。客户常说：“你们这个海，怎么像果冻一样？” 或者“这个湖面太平了，一点生气都没有。” 问题的核心在于，我们往往只使用了CesiumUnreal提供的最表层功能，而没有深入其材质系统的核心——CesiumSimpleWaterSurface材质函数。这个函数才是驱动一切动态水面效果（波浪、涟漪、焦散、泡沫）的引擎。

本文的目标很明确：带你绕过那些浅尝辄止的教程，直接深入CesiumUnreal水域特效的腹地。我们将不再满足于一个静态的蓝色平面，而是要亲手打造出拥有动态波浪序列、可自定义颜色、透明度、反射、折射细节的“活水”。我会手把手拆解CesiumSimpleWaterSurface的每一个关键输入，分享如何通过参数调节和材质层叠加，实现从平静湖面到惊涛骇浪的各种效果。无论你是数字孪生的开发者、地理信息系统的可视化工程师，还是追求电影级画质的游戏制作人，这套基于物理的、可完全自定义的水材质制作流程，都将为你打开一扇新的大门。

2. 核心思路：解构CesiumSimpleWaterSurface材质函数

要制作高级水特效，第一步必须是理解引擎提供的核心工具。在CesiumUnreal中，所有水效果都构建在CesiumSimpleWaterSurface这个材质函数之上。它不是最终材质，而是一个功能强大的“积木块”，你需要把它嵌入到你自己的材质蓝图里，并为其提供各种“养料”（输入参数），它才能输出最终的水面视觉效果。

2.1 材质函数的工作原理与数据流

你可以把CesiumSimpleWaterSurface想象成一个黑盒处理器。它接收两类核心输入：全局参数和纹理/向量。全局参数控制水的宏观属性，比如基础颜色、粗糙度、反射强度；纹理和向量则提供动态变化的细节，比如波浪的高度图、法线图。

它的输出主要是两个关键信息：颜色和位移。颜色输出决定了水面最终呈现的色泽、高光、反射内容；位移输出则直接作用于顶点的世界位置，是形成三维波浪的关键。在Unreal Engine的材质编辑器中，我们通常将这个函数的“颜色”输出连接到主材质节点的“自发光颜色”或“基础颜色”（配合适当的混合模式），将“世界位移”输出连接到“世界位置偏移”，这样材质就同时具备了着色和形变的能力。

理解这个数据流至关重要。很多新手会困惑为什么调了参数没反应，往往是因为输出连接错了通道，或者没有启用材质实例的动态参数覆盖功能。

2.2 关键输入参数深度解析

CesiumSimpleWaterSurface暴露了众多参数，我们挑出最核心、最能改变水面“性格”的几个来深入讲解：

1. Water Color (水色)：这不仅仅是水的颜色。在物理渲染中，它更接近于水的“吸收色”。浅水区域，光线穿透水层照射到水底再反射回来，会混合水底的颜色；深水区域，光线被大量吸收，会呈现更深的颜色（如深蓝）。因此，我通常不会用一个纯色，而是用一个根据水深（由Cesium地形或自定义深度图提供）进行插值的颜色梯度。例如，从岸边的浅绿色/青蓝色，渐变到深水区的深蓝色。

2. Roughness (粗糙度)：控制水面反射的模糊程度。值为0时，水面像镜子一样清晰反射天空和周围环境；值增大时，反射会变得模糊、扩散。动态调整粗糙度是模拟不同风力条件水面的关键。风平浪静时粗糙度低，狂风大作时粗糙度高。你可以将其与一个基于时间变化的噪声纹理相乘，来模拟水面局部粗糙度的自然变化。

3. Wave Height & Wave Speed (波高与波速)：这是驱动动态波浪的核心。波高决定了波浪的振幅（陡峭程度），波速决定了波浪移动的快慢。这里有一个常见的误区：直接给一个很大的波高值，以为就能得到大浪。实际上，如果缺乏相应的高频波浪细节（由法线纹理提供），单纯的大波高只会让水面看起来像是一个缓慢起伏的怪异曲面，而不是由无数细小浪花组成的复杂海面。正确的做法是波高、波速与多层、不同尺度的法线纹理配合使用。

4. Normal Maps (法线纹理)：这是实现水面细节的灵魂。CesiumSimpleWaterSurface允许输入多张法线贴图。每一张法线贴图都代表一种尺度的波浪细节。例如：

   • 第一层（大尺度）：使用一张低频率、大波长的法线图，模拟洋流或涌浪的宏观走向。
   • 第二层（中尺度）：使用一张中等频率的法线图，模拟常见的风浪。
   • 第三层（小尺度）：使用一张高频率、小波长的法线图，模拟水面上的细碎波纹和浪花泡沫的基底。技巧在于，让这几层法线图以不同的速度和方向滚动。例如，大尺度层慢速横向滚动，模拟洋流；小尺度层快速无序滚动，模拟风的作用。将它们叠加起来，就能得到极其丰富、真实的波浪细节。Unreal Engine内置的Water插件中的T_Water_N系列纹理就是很好的起点。

5. Foam & Caustics (泡沫与焦散)：这是提升真实感的“魔法调料”。泡沫通常出现在波浪的波峰、岸边以及物体与水面的交界处。你可以通过一张泡沫遮罩纹理，根据波浪的高度（波峰处值高）或水深（岸边浅水处值高）来动态显示。焦散是水底的光线折射图案，可以通过一个基于屏幕空间位置和法线信息计算的光照函数来模拟，或者使用一张动态的焦散纹理贴在水底材质上。

实操心得：不要试图一次性调好所有参数。我的工作流是“分层调试”：先关闭所有波浪和法线，只调基础水色和粗糙度，得到一个平静的深水效果。然后，只开启一层大尺度法线，调出缓慢的涌浪。接着加入中尺度层，增加风浪细节。最后加入小尺度层和泡沫。每加一层，都微调之前层的强度，确保和谐。这样能有效定位问题，避免参数互相干扰导致调试崩溃。

3. 实战：构建动态多层波浪系统

理论说得再多，不如动手调一遍。下面我们就在Unreal Engine中，从零开始构建一个支持动态风场控制的多层波浪水面材质。

3.1 创建材质与引入核心函数

首先，在内容浏览器中右键创建新的材质，命名为M_Cesium_Ocean_Advanced。双击打开材质编辑器。

1. 设置材质属性：在细节面板中，将“材质域”设置为“表面”，“混合模式”设置为“半透明”。如果你的水面需要与水下场景混合（如看到水下的岩石、植被），还需要适当调整“不透明度”和“折射”相关属性。为了性能考虑，可以启用“双面”选项。
2. 引入函数：在材质图表中右键搜索CesiumSimpleWaterSurface，将其拖入。你会看到这个函数节点有很多输入引脚。
3. 连接必需参数：至少需要连接“Water Color”和“Base Roughness”。可以先给一个简单的颜色常量（如浅蓝色）和粗糙度常量（0.3）。

3.2 设计多层法线纹理混合网络

这是实现动态波浪的核心步骤。我们将创建三个层级的法线混合。

1. 准备纹理与UV：从内容浏览器拖入三张不同频率的法线贴图（例如T_Water_Normal_01，T_Water_Normal_02， 或自己制作的纹理）。为每一张纹理创建一个TextureSample节点。
2. 创建平移UV：要让纹理动起来，就需要让UV随时间偏移。对每一层纹理，我们创建独立的UV平移逻辑：
   • 使用Time节点获取游戏时间。
   • 使用一个Multiply节点，将时间乘以一个二维向量Speed_X（如(0.02, 0.01)），这个向量代表该层波浪在U和V方向上的移动速度。速度值很小，通常在0.01到0.1之间。
   • 使用Add节点，将平移后的UV与纹理采样节点的UV输入连接。这样，纹理就会沿着指定方向缓慢滚动了。
3. 分层混合：将三层处理后的法线纹理输出，通过BlendAngleCorrectedNormals节点进行混合。这个节点能更好地处理法线向量的叠加，避免失真。混合的顺序通常是从大尺度到小尺度。你可以为每一层连接一个标量参数（如Normal_Intensity_1）来控制其强度。
4. 连接至函数：将最终混合好的法线向量，连接到CesiumSimpleWaterSurface节点的“Normal”输入。

// 伪代码逻辑示意，非实际HLSL float2 UV_Layer1 = UV + Time * Speed_Layer1; float3 Normal1 = tex2D(NormalTex1, UV_Layer1).rgb * Intensity1; float2 UV_Layer2 = UV + Time * Speed_Layer2; float3 Normal2 = tex2D(NormalTex2, UV_Layer2).rgb * Intensity2; float2 UV_Layer3 = UV + Time * Speed_Layer3; float3 Normal3 = tex2D(NormalTex3, UV_Layer3).rgb * Intensity3; float3 FinalNormal = BlendNormals(BlendNormals(Normal1, Normal2), Normal3);

3.3 集成风场控制系统

为了让波浪效果能动态响应环境变化（比如游戏中的天气系统），我们需要建立一个风场控制参数集。

1. 创建材质参数集：在内容浏览器中创建MaterialParameterCollection，命名为MPC_WorldWind。
2. 定义全局参数：在MPC中创建以下向量和标量参数：
   • WindDirection(Vector2): 风向。这将影响各层法线纹理的滚动方向。例如，(1,0)表示东风，波浪主要向西移动。
   • WindSpeed(Scalar): 风速。这将作为一个乘数，同时影响所有层的波高(Wave Height)和法线滚动速度(Speed_X/Y)。
   • WindTurbulence(Scalar): 风紊流强度。可以用于扰动法线，或影响粗糙度，让水面看起来更混乱。
3. 在材质中引用MPC：在材质图表中使用CollectionParameter节点，选择MPC_WorldWind，并获取相应的参数。
4. 驱动波浪参数：
   • 将WindSpeed乘以一个基础波高系数，再连接到Wave Height。
   • 将WindDirection归一化后，乘以一个基础速度系数，再分别与各层的速度向量结合，动态决定其滚动方向。这样，当你在游戏蓝图中改变MPC_WorldWind里的WindDirection和WindSpeed时，整个海面的波浪就会实时发生变化。

注意事项：直接让风速线性控制波高可能会在风速很大时产生不自然的突变。一个好的做法是使用一个非线性函数（如平方根或饱和函数）来处理风速到波高的映射，使其在低风速时变化敏感，在高风速时增长趋于平缓，更符合物理规律。

4. 高级效果：自定义颜色、泡沫与焦散

有了动态波浪的骨架，接下来我们为水面增添血肉——复杂的视觉细节。

4.1 基于深度与泥沙的自定义水色

真实的水色绝非单一颜色。我们创建一个基于水面到水底距离（深度）的复杂颜色混合。

1. 获取深度：使用SceneDepth节点减去PixelDepth节点，可以近似得到当前像素处的水深。但更精确的方法是，如果水底有独立的地形或网格，可以渲染其深度进行对比。
2. 创建颜色渐变：使用LinearGradient或自定义的TextureSample（一张从浅到深的颜色渐变图）。将计算出的深度值（归一化后）作为UV的U坐标去采样这个渐变纹理。渐变的左端（深度0）对应岸边浅水色（如浅绿、沙黄色），右端（深度大）对应深水色（深蓝）。
3. 混合泥沙影响：在近岸浅水区，水色会深受水底泥沙影响。你可以准备一张表示水底泥沙分布的黑白贴图（白色表示沙质，黑色表示岩石）。在浅水区域（深度小于某个阈值），将水色与泥沙颜色（如土黄色）进行线性插值（Lerp），插值系数由深度和泥沙贴图共同决定。
4. 最终输出：将这个最终计算出的动态水色，连接到CesiumSimpleWaterSurface的“Water Color”输入。

4.2 动态泡沫生成与渲染

泡沫能极大地增强波浪的冲击感和水体的质感。

1. 泡沫遮罩生成：泡沫通常出现在两个地方：波浪的波峰和物体（如船体、海岸线）周围。对于波峰泡沫，我们可以利用CesiumSimpleWaterSurface内部计算的一个中间值——波浪的导数或高度场的极值区域。更实用的方法是，使用一张高频噪声纹理，其显示强度由波浪高度控制。即，将之前计算的波浪高度图（或法线图的某个通道）作为一个阈值，去控制噪声纹理的显示。当波浪高度大于阈值时，显示泡沫噪声。
2. 岸边泡沫：对于岸边泡沫，可以利用深度信息。在深度非常浅（接近0）的区域，强制显示泡沫纹理。可以使用一个DepthFade节点来平滑泡沫与水的边界，避免生硬的剪裁。
3. 泡沫材质：泡沫本身不是一个颜色，它是一种高光强烈、粗糙度低、略带半透明的材质。因此，更好的做法不是简单输出泡沫颜色，而是将泡沫遮罩作为一个独立因素，去影响最终材质的粗糙度、高光和自发光。例如，在有泡沫的区域，将粗糙度降低（让泡沫更亮更刺眼），并增加一点点自发光（模拟泡沫对光的散射）。
4. 整合到材质：将计算出的泡沫遮罩（一个0-1的值）作为一个输入，在材质的主节点处，用它来动态调整最终输出的粗糙度和自发光强度。这通常需要在CesiumSimpleWaterSurface的输出之后，再增加一层混合计算。

4.3 屏幕空间焦散模拟

真实的焦散计算（光线通过水面折射在水底形成的光斑）非常昂贵。在实时渲染中，我们常用屏幕空间技巧来模拟。

1. 原理：利用水面的法线信息去扰动一张用于渲染水底（或水下物体）的焦散纹理的UV坐标。
2. 实现步骤：
   • 获取当前像素的屏幕空间位置。
   • 采样水面的法线贴图（可以使用我们之前混合好的法线，但可能需要进行一次模糊或下采样，让焦散光斑更大更柔和）。
   • 用法线的XY分量去偏移屏幕空间位置。
   • 用偏移后的位置去采样一张动态的、平铺的焦散光斑纹理（通常是一张黑白噪波图）。
   • 将采样结果作为一个亮度乘数，叠加到水底场景的颜色上。这通常需要在后期处理材质（Post Process Material）或自定义渲染通道中实现，因为它影响的是水底而非水面本身。
3. 性能考量：屏幕空间焦散是一个屏幕后处理效果，对性能有额外开销。在移动端或大型场景中需谨慎使用，可以考虑只在近处水面或特定高质量模式下开启。

踩坑记录：我曾在一个项目中为整个大湖面开启了全精度的屏幕空间焦散，导致GPU耗时飙升。后来优化为：只对摄像机附近一定范围内的水面像素进行焦散计算，并且将焦散纹理的分辨率和采样次数降低。同时，将焦散效果与水的深度关联，深水区焦散减弱直至消失，这样既保证了视觉中心的效果，又大幅提升了性能。

5. 性能优化与平台适配策略

视觉效果和性能永远需要权衡。一套再漂亮的水材质，如果导致帧率骤降，也是不可接受的。

5.1 材质指令数优化

在Unreal Engine的材质编辑器左下角，可以实时查看当前材质的指令数（Instruction Count）。这是衡量材质复杂度和性能开销的关键指标。

1. 简化数学运算：检查是否有重复的、可以合并的计算。例如，多个地方都用到了Time * Speed，可以计算一次后存储到局部变量中复用。
2. 减少纹理采样：纹理采样是昂贵的操作。确保没有冗余的纹理采样。如果多张法线图尺寸相同且滚动速度一致，可以考虑将它们打包到一张纹理的不同通道（RGB通道存储三套法线），这样只需一次采样就能获取所有数据。
3. 利用材质函数：将复杂的、可复用的计算网络（如泡沫生成网络）封装成材质函数。材质函数在某些情况下可以被引擎更好地优化。
4. 分支代价：谨慎使用If节点或比较操作。在Shader中，分支（特别是基于纹理或动态参数的分支）可能导致性能波动。尽量用Lerp（线性插值）或数学函数来替代简单的条件判断。

5.2 LOD与参数动态调整

水面通常覆盖巨大面积，需要根据距离动态调整细节。

1. 材质LOD：Unreal Engine支持材质级别的LOD。你可以为材质创建多个质量等级。在低LOD等级下，可以：
   • 减少法线纹理的层数（例如从3层减到1层）。
   • 使用更低分辨率的纹理。
   • 关闭昂贵的特效，如屏幕空间焦散、复杂的泡沫计算。
   • 降低波浪的Tessellation（细分）等级（如果水面网格使用了细分曲面）。
2. 基于距离的动态参数：在材质中，使用CameraPosition和WorldPosition计算像素与摄像机的距离。利用这个距离去驱动一系列标量参数，实现平滑过渡。例如：
   • 法线强度：距离越远，各层法线强度逐渐减弱。
   • 波浪高度：远距离波浪可以降低高度，减少顶点位移的计算消耗和视觉上的闪烁（Aliasing）。
   • 粗糙度：远距离水面可以适当增加基础粗糙度，因为细节看不清，高模糊反射可以节省采样开销。

5.3 移动端与VR特别优化

移动平台和VR头显对性能极其敏感，且对功耗有严格要求。

1. 大幅简化：移动端可能只保留一层法线纹理，甚至考虑使用顶点动画代替像素着色器中的复杂波浪计算。CesiumSimpleWaterSurface函数本身可能就过重了，需要评估是否可以用更简化的自定义函数替代核心计算。
2. 精度降低：在移动端材质中，将大量float精度计算改为half精度。在纹理采样器设置中，也可以考虑使用压缩格式更小、更快的纹理。
3. 避免透明混合：半透明水面对移动端渲染排序和Overdraw是灾难。如果可能，尽量使用不透明水材质+后期处理模拟折射的效果（如扭曲屏幕UV）。如果必须透明，确保水面网格尽可能简单，并利用深度预通道（Prepass）优化。
4. VR注意事项：VR要求高帧率（通常90Hz或以上）和低延迟。除了上述移动端优化，还需特别注意：
   • 波浪动画：确保波浪的移动是平滑的，时间参数要稳定，避免抖动。
   • 视觉舒适度：过于剧烈、高频的波浪动画可能引起部分用户的眩晕感。提供参数让用户能调节波浪强度。
   • 单通道渲染：确保材质在VR的单通道立体渲染模式下工作正常，所有基于摄像机位置的计算都需要正确处理双眼差异。

6. 常见问题排查与调试技巧

即使按照步骤操作，也难免遇到各种“水面变黑”、“波浪不动”、“闪烁怪异”的问题。这里分享一套我常用的排查流程和技巧。

6.1 水面变黑或显示异常

这是最常见的问题，通常与光照、材质属性和渲染管线设置有关。

• 检查材质混合模式与着色模型：确认材质是否为“半透明”或“蒙版”混合模式，着色模型是否为“默认光照”。如果设置为“无光照”，水面将不会对场景光源产生反应，可能呈现黑色或纹理本色。
• 检查法线纹理设置：确保导入的法线贴图在纹理资产中，将“压缩设置”设置为“法线贴图”（Normalmap），并且“sRGB”选项关闭（否）。sRGB用于颜色纹理，法线贴图是线性数据，开启会导致严重错误。
• 检查光照环境：场景中必须有有效的光源（定向光、天光等）。在完全黑暗的场景中，水面自然是黑的。可以临时添加一个强光源测试。
• 检查后期处理体积：确保场景中存在后期处理体积，并且启用了“无限范围”，同时检查其中的“曝光”和“颜色分级”设置是否异常，导致水面过暗。
• 检查Cesium SunSky：如果使用Cesium自带的CesiumSunSky组件，确保其已正确启用并指向Cesium地理太阳位置。有时时间设置错误（如午夜）也会导致水面漆黑。

6.2 波浪没有动画效果

波浪不动，说明时间因子没有正确驱动纹理UV或波浪高度。

• 检查Time节点：确保材质图表中使用了Time节点，并且它没有被某个静态常量覆盖。
• 检查材质实例参数：如果你创建了材质实例（Material Instance）来调节参数，请确认在实例中覆盖了Wave Speed或相关的速度参数。材质实例默认使用父材质的参数值，如果父材质里速度是0，实例里没改，就不会动。
• 检查UV平移逻辑：仔细检查连接TextureSample节点UV输入的加法网络。确保Time节点乘以了一个非零的速度向量，并且这个加法的结果确实传递给了UV。可以用Preview功能将UV平移后的结果临时输出到自发光颜色上，看看纹理是否在移动。
• 检查材质是否已应用：确保你修改并保存后的材质，已经成功应用到了场景中的水面静态网格体（Static Mesh）或地形图层上。

6.3 水面闪烁（Z-Fighting）或边缘锯齿

• Z-Fighting：当水面网格与地形网格几乎处于同一深度时，会产生深度缓冲冲突，导致闪烁。解决方案：
  1. 稍微将水面网格沿世界Z轴（向上）偏移一个微小距离（如0.1个单位）。
  2. 或者，在材质中启用“深度偏移”（Depth Offset），给水面一个微小的深度偏移值，使其在深度测试中“胜出”。
• 边缘锯齿：波浪边缘或水岸线出现锯齿。
  1. 抗锯齿：确保项目设置中启用了合适的抗锯齿方法（如TAA）。
  2. 材质抗锯齿：对于由噪声或高频法线产生的锯齿，可以在采样纹理前对UV进行一个非常轻微的低通滤波（模糊），或者在材质中使用Derivative节点进行自定义的纹理过滤。
  3. 水岸线柔和：使用DepthFade节点来平滑水面与地形交接的边缘。根据摄像机到水岸线的深度差，渐变混合水色与地形颜色。

6.4 性能热点定位与优化

当游戏运行时帧率下降，怀疑是水面材质导致时，可以使用Unreal Engine的性能分析工具。

• GPU Visualizer：在编辑器中使用Ctrl+Shift+,（逗号）打开GPU Visualizer。它会以热力图形式显示屏幕上各像素的GPU耗时。大面积的水面如果非常耗时会显示为红色或白色区域。通过它，你可以直观看到是像素着色器（我们的材质）复杂，还是几何处理（细分曲面）开销大。
• 材质指令数：再次检查材质编辑器中的指令数。尝试注释掉（断开连接）一些复杂的网络（如焦散、多层泡沫），看指令数下降是否明显，从而定位瓶颈。
• 纹理分辨率：检查使用的法线等纹理的分辨率是否过高。对于远处水面，1024x1024甚至512x512的纹理可能已经足够，无需使用4K纹理。
• Draw Call：如果场景中有多个独立的水面网格，考虑是否可以将它们合并（Merge）成一个网格，以减少Draw Call。对于Cesium地形上的水面，通常是作为地形材质的一个层来渲染的，Draw Call相对固定。

调试是一个迭代过程。我的习惯是，每实现一个复杂功能（如增加一层法线、加入泡沫），就保存一个材质版本，并到场景中测试性能和表现。这样当出现问题或性能下降时，可以快速回退到上一个稳定版本，对比排查，效率要高得多。记住，最炫酷的效果往往不是最实用的效果，在视觉质量和运行流畅度之间找到那个完美的平衡点，才是资深TA和图形程序的价值所在。