1. 座舱3D HMI水面效果到底在做什么先说结论座舱3D HMI里的水面效果不是单纯给车机加一个“好看的动态壁纸”而是3D HMI场景中用来承载环境氛围、状态反馈、视觉层级过渡的关键元素之一。它常见于智能座舱的首页场景、天气动效、驾驶模式切换、充电动画、迎宾模式、空调风向联动等场景中用实时渲染的流体模拟来模拟水波、涟漪、反射、折射、焦散等光学现象让整个座舱界面“活”起来。近几年座舱HMIHuman Machine Interface人机交互界面已经从2D平面转向3D场景化设计。高通骁龙8295、英伟达Orin等座舱SoC的GPU算力越来越强Unreal Engine、Unity、Kanzi、Cocos等引擎在车机上的适配也越来越成熟3D场景已经不只是展示一辆车模型转圈圈而是需要真正“跑得动、看得爽、不发热、不卡顿”。水面效果在这个背景下属于典型的“视觉冲击力强、渲染开销可控、互动感明显”的加分项几乎每个做3D座舱HMI的项目都会在某个版本里加入水面。这篇文章想聊的就是我在实际项目中做座舱3D HMI水面效果时踩过的坑、验证过的方案、以及最终能落地到车机上的那套做法。内容偏实操不堆理论适合正在做智能座舱3D HMI的设计师、UE/Unity开发、座舱系统工程师以及想了解这套东西到底怎么实现的硬件/测试同学。2. 方案选型为什么不能直接拿游戏引擎里的水面Shader上车2.1 车机渲染环境的特殊约束做座舱3D HMI和做游戏有一个本质区别游戏可以假设用户有一块不错的独立显卡但车机上的GPU资源是固定的、共享的而且要跟导航、仪表、HUD、倒车影像抢资源。座舱里的3D场景一般跑在Hypervisor/QNXAndroid或者纯Android环境下渲染线程和UI线程、安全关键应用之间要做资源隔离。以我常用的Unity引擎为例车机上的渲染分辨率通常是1920x720仪表或2560x1600中控目标帧率一般是30fps或者60fps。水面Shader如果写得太重一个全屏水面Effect就可能吃掉3~5ms的GPU时间再加上场景里还有车模、天空盒、粒子、实时反射帧率直接崩到20fps都有可能。所以选型的第一原则是水面效果必须能控制GPU负载能在中低端座舱SoC上稳定运行。2.2 游戏引擎自带水景方案的局限性Unity的Water、Unreal的Water插件都是为PC/主机场景设计的功能很全但太重。它们往往需要多层法线贴图采样、平面反射Planar Reflection、屏幕空间反射SSR、体积焦散、甚至完整的Wave模拟。在座舱这种“背景级”应用场景里用户不会盯着水面看很久主要看的是整体氛围和交互反馈根本不需要物理级精确的水面。我之前在一款中控HMI里试过直接用Unreal的Water插件做座舱主页背景结果在NVIDIA Orin的Linux环境下跑起来水面区域占到屏幕1/3时整体帧率勉强30fps但GPU温度升温很快。测试那边反馈长时间开机有降频风险只能回炉重做。后来换了轻量方案帧率稳定在60fpsGPU占用还不到15%。2.3 座舱HMI水面的实际需求分级做需求分析时先把“水面效果”拆开不同场景对水面的要求完全不一样氛围型水面主页背景、天气场景、待机屏保。要求整体流动感自然颜色与座舱主题一致不需要精细到每个波纹。反馈型水面点击水面的涟漪、滑动时水波随手指波动、充电时的能量波动。要求响应快、跟手局部区域有变化即可。叙事型水面驾驶模式切换比如运动模式水面激荡、舒适模式水面平缓、导航到湖边的动态场景。要求有一定情绪表达但依然不需要物理级真实。所以在动手做之前先确定你要做的是哪一种这直接决定了Shader的复杂度和资源预算。氛围型可以全屏铺反馈型只需要局部交互叙事型则是时间驱动的动画三者混着做容易把性能预算吃爆。3. 核心实现一套能上车的轻量水面渲染方案3.1 基础思路法线扰动反射透射深度座舱3D HMI的水面效果我用的方案核心是三个字假、轻、稳。“假”是指不追求真实流体模拟而是用多层法线贴图采样加上UV动画来伪造波光粼粼的视觉效果。“轻”是指Shader指令数控制在合理范围纹理采样次数少不用反射探针实时渲染。“稳”是指在车机GPU上不存在驱动兼容性问题OpenGL ES 3.0以上即可跑。具体来说一个可用的水面Shader包含以下核心部分UV动画与法线扰动用两张法线贴图以不同方向和速度滚动叠加后得到动态法线模拟水面波动。这是最常见的水面fake做法。反射混合环境反射用一张预烘焙的Cubemap座舱环境、天空、场景色调采样根据法线扰动改变反射方向让“水面”反射周围环境。深度透射与颜色混合使用Camera Depth Texture采样计算水面以下物体的“透明度”模拟浅水区可以看到池底或水下物体的效果。座舱里一般是深色背景或车辆模型底面这个效果可以增强立体感。边缘衰减水面边缘靠近屏幕边界或水下遮挡物渐变为透明或深色避免生硬的边界。3.2 Shader代码示例Unity URP版本我用URPUniversal Render Pipeline比较多因为它在移动端和车机端性能表现最优Shader语法与LWRP接近适配起来方便。下面给一个可用的简化版本基于URP的Unlit Shader改造包含法线扰动、反射Cubemap采样、以及简单的深度透射。Shader Cockpit/WaterSurface { Properties { _MainColor (水面基色, Color) (0.2, 0.5, 0.8, 0.6) _DeepColor (深水颜色, Color) (0.02, 0.1, 0.2, 1.0) _NormalMap1 (法线贴图1, 2D) bump {} _NormalMap2 (法线贴图2, 2D) bump {} _NormalSpeed1 (法线速度1, Vector) (0.02, 0.01, 0, 0) _NormalSpeed2 (法线速度2, Vector) (-0.015, 0.02, 0, 0) _EnvCube (环境Cubemap, Cube) {} _ReflectionStrength (反射强度, Range(0, 1)) 0.3 _Transparency (透射强度, Range(0, 1)) 0.5 _Smoothness (光滑度, Range(0, 1)) 0.8 } SubShader { Tags { RenderTypeTransparent QueueTransparent RenderPipelineUniversalPipeline } Blend SrcAlpha OneMinusSrcAlpha ZWrite Off Cull Off Pass { HLSLPROGRAM #pragma vertex vert #pragma fragment frag #include Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl #include Packages/com.unity.render-pipelines.universal/ShaderLibrary/Lighting.hlsl struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float2 uv : TEXCOORD0; float4 vertex : SV_POSITION; float3 worldPos : TEXCOORD1; float3 worldNormal : TEXCOORD2; float4 screenPos : TEXCOORD3; }; CBUFFER_START(UnityPerMaterial) float4 _MainColor; float4 _DeepColor; float4 _NormalMap1_ST; float4 _NormalMap2_ST; float4 _NormalSpeed1; float4 _NormalSpeed2; float _ReflectionStrength; float _Transparency; float _Smoothness; CBUFFER_END TEXTURE2D(_NormalMap1); SAMPLER(sampler_NormalMap1); TEXTURE2D(_NormalMap2); SAMPLER(sampler_NormalMap2); TEXTURECUBE(_EnvCube); SAMPLER(sampler_EnvCube); TEXTURE2D(_CameraDepthTexture); SAMPLER(sampler_CameraDepthTexture); v2f vert (appdata v) { v2f o; o.vertex TransformObjectToHClip(v.vertex.xyz); o.uv TRANSFORM_TEX(v.uv, _NormalMap1); o.worldPos TransformObjectToWorld(v.vertex.xyz); o.worldNormal TransformObjectToWorldNormal(float3(0, 1, 0)); o.screenPos ComputeScreenPos(o.vertex); return o; } half4 frag (v2f i) : SV_Target { // 双层法线贴图采样并叠加 float2 uv1 i.uv _Time.y * _NormalSpeed1.xy; float2 uv2 i.uv _Time.y * _NormalSpeed2.xy; float3 normal1 UnpackNormal(SAMPLE_TEXTURE2D(_NormalMap1, sampler_NormalMap1, uv1)); float3 normal2 UnpackNormal(SAMPLE_TEXTURE2D(_NormalMap2, sampler_NormalMap2, uv2)); float3 normal normalize(float3(normal1.xy normal2.xy, normal1.z * normal2.z)); // 反射方向 视线反射 float3 viewDir normalize(GetWorldSpaceViewDir(i.worldPos)); float3 reflectDir reflect(-viewDir, normal); // Cubemap反射 half3 envColor SAMPLE_TEXTURECUBE(_EnvCube, sampler_EnvCube, reflectDir).rgb; // 深度透射使用线性01深度 float2 screenUV i.screenPos.xy / i.screenPos.w; #if UNITY_UV_STARTS_AT_TOP screenUV.y 1 - screenUV.y; #endif float sceneDepth SampleSceneDepth(screenUV); float linearDepth LinearEyeDepth(sceneDepth, _ZBufferParams); float waterDepth saturate(linearDepth - i.screenPos.w * 0.001); // 转为相对深度 // 颜色混合反射 基色 深水色 half3 waterColor lerp(_MainColor.rgb, _DeepColor.rgb, saturate(waterDepth * _Transparency)); half3 finalColor waterColor envColor * _ReflectionStrength * _Smoothness; // 透明度靠近边缘更透明 float alpha _MainColor.a * (1 - saturate(waterDepth * 2)); alpha saturate(alpha); return half4(finalColor, alpha); } ENDHLSL } } Fallback Off }这段Shader有几个关键点需要说明法线贴图的选择不要用细节过于丰富的法线贴图座舱场景中水面占屏幕面积不一定大过高频率的细节会导致视觉噪点。我一般用两张256x256或者512x512的法线贴图一张偏大波低频、一张偏小波高频两者速度方向相反叠加后能制造出一种“水面在呼吸”的生动感。Cubemap采样检查场景里的Cubemap是否正确设置。座舱HMI里环境Cubemap就是整个3D场景的背景色和主体色如果Cubemap没设对水面反射会显得发灰或颜色不对。最好在Unity里用Reflection Probe烘焙一张静态环境贴图动态物体不用参与。深度透射这行代码_CameraDepthTexture采样是整个屏幕深度不是局部水面深度。在URP里需要确保相机启用了Depth Texture选项否则场景深度值全是远平面值透射效果会失效。我在项目中因为这个坑苦恼了两天后来翻了URP源码才明白。3.3 轻量替代方案在UI层用“伪水面”如果项目引擎不是Unity或Unreal比如用KanziRightware或者QML做HMI那Shader方案可能就不好用了。这种情况下我推荐一个朴素的替代用视频序列帧或GIF动画铺底。具体做法是提前在PC端用After Effects或者Unreal渲染一段透明背景的循环水面动画导出为带有Alpha通道的WebM或H.265视频注意车机H.265硬解支持较好然后在HMI中将它作为一个底层视频播放叠加UI控件。播放时可以通过视频的透明度、颜色滤镜与主题联动。这个方案在早期平台上如瑞萨H3N、NXP i.MX8非常实用因为它们的GPU不支持复杂Shader但视频硬解能力很强跑1080p的循环动画毫无压力。代价是没有交互反馈——不能点击产生涟漪不能滑动改变水面方向。所以它只适合氛围型需求不适合反馈型需求。4. 实操细节从开发环境到座舱项目的落地过程4.1 开发环境准备做座舱3D HMI我个人常用的组合是引擎Unity 2021 LTS / 2022 LTSURP管线建模工具Blender 3.x / 3ds Max负责场景模型、UV展开、法线贴图制作贴图工具Substance Painter 或在线工具如NormalMap-Online生成法线贴图开发板/车机高通8295开发板、英伟达Orin开发板、瑞萨R-Car H3e开发板版本管理Git Git LFS工程文件体积大普通Git会撑爆仓库在PC上开发和车机上运行是两回事。我强烈建议从第一天开始就在目标分辨率和目标GPU环境下测试。很多水面效果在RTX 4090上流畅无比一到车机上就掉帧。项目初期就应该把渲染质量、分辨率、帧率这些目标参数定下来。4.2 性能预算的分配方法在座舱项目里我一般给水面效果定的性能预算是中控场景整体帧预算16.6ms60fps或33.3ms30fps水面Effect的GPU时间不超过2ms内存占用Shader一般几百KB、法线贴图256x256x2张约0.5MB、Cubemap128x128x6面约1MB内如果水面的GPU时间超过2ms我会先检查是不是全屏后处理导致的。全屏水面效果意味着整个屏幕的每个像素都要跑一遍Shader这在车机上是需要谨慎的。一个技巧是让水面Shader只作用于特定的渲染层。在Unity中给水面Mesh指定一个Layer比如“Water”然后通过Camera.cullingMask只让主相机渲染这个Layer或者反过来让水面区域使用单独的相机渲染到RenderTexture再叠加到UI上。这样水面Shader不会覆盖整个屏幕。4.3 UI与3D水面的融合座舱HMI的UI层一般是独立的UI框架如Qt、Kanzi、Unity UGUI、Flutter等3D水面场景是一个独立的Surface。如何把3D水面和UI控件完美叠合是另一个坑点。我的做法是3D水面渲染到RenderTexture然后在UI层作为一个Image/Texture显示UI控件永远在更高层级。这样做的好处是UI和3D场景彻底解耦UI不依赖3D引擎的渲染进度。坏处是如果3D场景包含交互比如点击水面产生涟漪需要把触点坐标从UI坐标系转换到3D相机坐标系。这里有一个很好用的技巧如果UI和3D在同一引擎内比如Unity的UGUI3D场景不用单独渲染到RenderTexture可以把UI相机和3D相机分开通过CullingMask只让UI相机渲染UI层、3D相机渲染3D层然后调整UI相机的Depth值让它显示在最上层即可。这样可以避免RenderTexture带来的性能损耗和分辨率匹配问题。4.4 座舱端特有的资源加载策略座舱项目的3D资源不像手机App那样可以随意在线下载。车机存储空间固定启动时间要求短一般要求冷启动到HMI首帧不超过3秒所以水面相关的Shader、贴图、动画必须做静态加载和预热。我的策略是Shader变体预编译在构建时把水面Shader用到的关键词全部预编译避免运行时Shader编译导致的卡顿。在Unity里通过ShaderVariantCollection把变体集打包进AssetBundle。贴图压缩格式法线贴图用ASTC 4x4或ETC2格式Cubemap用ASTC内存占用能比RGBA32减半还多。预加载开机时把水面相关资源加载到内存之后切换场景不再重新加载保证HMI切换流畅。双缓冲与帧同步水面动效如果和UI动画同时进行要确保UI动画和3D渲染帧同步否则会出现撕裂。在Android车机上一般用HWCHardware Composer做图层合成3D渲染Surface和UI Surface分开提交系统负责合成。5. 常见问题与排查技巧实录5.1 水面看起来“油腻”或“玻璃感”太重这是最常见的问题。法线扰动强度太大、反射强度太高、Cubemap分辨率太高都会让水面看起来像玻璃或果冻而不是水。排查方法把法线强度从1降到0.2~0.4观察波纹是否柔和。把反射强度从0.8降到0.3左右让基色水体本身的颜色占主导。自然界的水面反射率跟视角有关座舱场景里视觉上反射太强会很假反而弱反射更自然。颜色尽量偏深。很多车机主题是深色模式水面基色用偏暗的青蓝或藏蓝比亮蓝色高级很多。5.2 全屏水面Shader导致帧率波动前面提到过全屏后处理的风险。如果水面就是覆盖全屏的背景建议不要把Shader铺满屏而是用一个3D平面Mesh放置在相机前方合适位置这样Shader只在平面区域内计算平面外的像素不参与。屏幕上的背景色由相机Clear Color或天空盒来控制水面区域用Mesh挡住。5.3 车机上水面出现花屏或闪烁花屏通常和深度缓冲有关。座舱场景里3D相机和UI相机如果深度冲突会导致水面和背景交替闪烁。解决办法确保水面Shader的ZWrite Off这样它不写入深度缓冲。水面Mesh的RenderQueue设置为Transparent3000以上在场景所有不透明物体之后渲染。5.4 点击水面的涟漪响应不跟手反馈型水面最大的痛点是“跟手”。Unity里做点击涟漪不要在Update里每帧检测触摸那样会吃掉大量CPU时间。更高效的做法是在UI层捕获触摸事件然后把触点坐标通过屏幕坐标转世界坐标ScreenToWorldPoint再传给Shader或脚本生成涟漪中心。涟漪效果可以用粒子系统或者在Shader里维护一个数组存储多个涟漪的中心点和生命周期在片元着色器里计算每个像素到涟漪中心的距离并叠加波纹。我给一个简化的涟漪Shader核心代码同样URP// 在Fragment中叠加涟漪效果 half4 frag (v2f i) : SV_Target { // 已有的水面颜色计算略... half3 waveColor 0; for (int j 0; j _RippleCount; j) { float2 center _RippleCenters[j].xy; float radius _RippleCenters[j].z; float life _RippleLives[j]; float dist distance(i.uv, center); float wave sin((dist - radius) * _RippleFrequency life * 2.0) * 0.5 0.5; wave * exp(-dist * _RippleFalloff); wave * life; waveColor wave * _RippleColor; } finalColor waveColor; }这里在循环里做距离计算如果涟漪数量不超过5个开销可以接受。超过10个就需要考虑用绘制调用代替Shader循环否则GPU会吃不消。5.5 水面与车载主题模式联动的处理深色模式/浅色模式下水面的颜色应该跟着变。深色模式下水面用深蓝、墨绿色系浅色模式下用天蓝、淡青色。实际操作中不要让Shader里的颜色硬编码而是通过UI层传入两个Color参数主题切换时做插值动画。我在项目里是定义了一个全局Shader变量_WaterThemeColorUI层在切换主题时调用Shader.SetGlobalColor所有用到水面的材质自动更新不用逐个修改。6. 工具选型与工作流建议6.1 引擎选型对比我经历过几个项目分别用了Unity、Unreal和Kanzi简单对比一下引擎优点缺点适用场景Unity移动端/车机优化好URP性能强C#开发效率高社区多原生UI能力较弱需配合UGUI或第三方UI大多数座舱3D HMIUnreal画面质量上限高蓝图可视化Water插件方便编译慢运行时开销大对车机GPU压力大高端座舱概念车、3D场景极度复杂的项目Kanzi原生HMI框架与Qt等UI集成好启动速度快Shader能力受限复杂3D效果难以实现量产车机的仪表面板、简单3D场景如果做量产车机我强烈建议Unity或Kanzi。如果做Demo车、概念车Unreal完全没问题。6.2 法线贴图的制作技巧水面法线贴图可以自己生成不需要专业美术。方法1用Photoshop或GIMP新建一张512x512灰度图填充“云彩”滤镜然后用“查找边缘”或“浮雕”滤镜处理得到一个类似水波纹理的灰度图再通过在线工具转换为法线贴图。方法2用Substance Designer的Water Flow滤镜参数调整可以生成非常自然的水面法线贴图。它有细分波长、方向、强度、细节等参数可以双向调节生成后导出为TGA或PNG。方法论低频大波波长100~200像素和高频小波波长20~50像素分别生成两张贴图效果最自然。单张细节贴图会导致水面“很脏”双张分层才能模拟出水面的层次感。6.3 测试与验证清单水面效果上车前我建议至少过一遍以下测试项低亮度模式下能否看清水面边界夜间模式高亮度模式下反射是否过曝白天强光60fps和30fps模式下水面流动速度是否一致时间步长相关长时间运行水温、GPU负载是否稳定压力测试切换驾驶模式/主题时水面颜色过渡是否平滑车辆动效起步、刹车时水面是否有异常晃动分屏显示如仪表中控双屏互动时同一水面效果是否能在两个屏幕上统一呈现7. 我的经验和一些额外的建议做座舱3D HMI水面效果技术本身不复杂真正麻烦的是性能、视觉与交互三者的平衡。经历了几个项目后我自己总结下来的心得是第一不要一开始就想做“物理级水面”。座舱环境里用户视线停留时间短水面的本质是情绪调味品不是主角。做“好看”远大于做“真实”。色彩、流动感、与主题的融合度这三样做好效果就能打90分。第二Shader性能优化要前置。不要等效果做漂亮了再开始优化。我建议每完成一个环节就测一次GPU时间比如法线贴图从3张减到2张GPU时间从2.8ms降到1.7ms这种优化在开发中期就要做掉不要拖到最后。第三多跟UI/UX设计师聊。水面效果做出来之后设计师经常会有一些“空气感”的建议比如“水波应该是从中心扩散还是从底部涌上来”“涟漪应该跟车门的开关有互动吗”。这些建议会增加实现的复杂度但也有可能把水面从“背景装饰”变成“品牌记忆点”。最后分享一个小技巧在做水面Shader时把法线贴图的UV速度调低一点让水面动得慢一些。很多初做水面的同学喜欢把速度调快觉得动感越强越好实际上座舱场景里缓慢的、甚至需要仔细看才能察觉的波动显得更高级也更不会分散驾驶员注意力。车速快时可以加速但默认状态一定是“慢下来”。这句话我觉得是座舱3D HMI水面效果里最值得记住的一条经验。