1. 项目概述与核心思路拆解最近在做一个末日生存题材的小项目场景里需要一种地面突然崩裂、碎石飞溅的震撼效果。如果只是简单播放一个预制动画或者用粒子系统模拟总觉得差点意思缺乏那种随着视角移动而产生的深度感和真实感。于是我花了不少时间研究并实现了一个基于视差映射Parallax Mapping的Unity3D地裂效果。这个效果的核心就是让一张平面的裂缝贴图在玩家移动视角时能模拟出真实的凹凸起伏和深度错位仿佛地面真的被撕裂开了一道深邃的沟壑。简单来说视差映射是一种在无需增加模型几何复杂度的前提下极大增强表面细节感知的技术。它比法线贴图Normal Mapping更进一步。法线贴图只是改变了光线反射的方向让平面“看起来”有凹凸但轮廓和遮挡关系依然是平的。而视差映射则通过根据视角和高度信息动态偏移纹理采样的UV坐标模拟出视差位移从而创造出真实的深度错觉和遮挡效果。对于地裂这种需要强烈纵深感的特效视差映射几乎是目前性价比最高的方案。这个效果非常适合用在各种需要环境互动的场景中比如角色释放技能震裂地面、陨石撞击、地震灾害表现或者作为场景中一个静态的、但极具视觉冲击力的破损细节。它不依赖复杂的模型主要靠Shader计算对性能的影响相对可控尤其适合移动端或性能要求较高的项目。接下来我就把从原理到实现的完整过程以及过程中踩过的坑和优化心得详细拆解一遍。2. 视差地裂效果的技术原理深度解析2.1 从法线贴图到视差映射视觉欺骗的升级要理解视差地裂得先明白它的技术演进路径。最开始我们想让一个平面砖墙看起来有凹凸会用法线贴图。法线贴图存储了每个像素点的法线方向RGB通道对应XYZ在着色时根据这个修改后的法线来计算光照从而在光照层面制造出凹凸感。但你从侧面看这面墙它的轮廓依然是笔直的一条线砖块之间也没有真实的相互遮挡。视差映射就是为了解决这个“侧面穿帮”问题。它的核心思想是既然我们知道这个表面有高度起伏通过一张高度图或叫视差图来定义也知道当前观察的视角那么我是否可以“预测”一下视线应该落在表面下方的哪个点实现方法就是在片段着色器中根据视角方向和当前采样点的高度对纹理坐标UV进行一个反向的偏移。想象你看着一本厚书侧面的书页。你的视线想看到书页侧面相当于纹理的某个图案但由于书页有厚度高度你实际看到的图案位置会比假设书页是平面时看到的位置要更靠“里面”一些。视差映射就是这个计算过程的逆向工程我知道书有多厚高度也知道我从哪个角度看视角那么我就把要采样的纹理坐标沿着视角方向的反方向“推”到它应该出现的位置去。这样在视角移动时不同高度的部位就会产生不同的偏移量高处的偏移小低处的偏移大从而模拟出真实的视差和遮挡。2.2 高度图与视角空间变换实现视差映射需要两张关键纹理高度图Height Map通常是一张灰度图白色值1.0代表该点最高黑色值0.0代表该点最低。对于地裂效果这张图就是裂缝的形状裂缝深处是黑色两旁隆起的地面是白色或灰色。漫反射/法线贴图就是表现裂缝表面颜色的贴图通常配合法线贴图使用让光照反应更正确。在Shader中我们需要将视角方向从世界空间或观察空间转换到切线空间。切线空间是以当前像素点为原点法线N、切线T、副切线B为基向量的局部空间。在这个空间里视角方向向量V的Z分量在Unity中通常是Y分量取决于坐标系就代表了“看向表面”的深度方向而X、Y分量则代表了在表面平面上的方向这正是我们计算UV偏移所需要的。计算过程可以简化为UV偏移量 (视角向量的XY分量 / 视角向量的Z分量) * 高度采样值 * 控制强度这个公式意味着视角越倾斜XY分量越大或者视线越接近表面Z分量越小注意在视角方向指向表面时这个值可能是负的需要取反或取绝对值或者高度越高产生的UV偏移就越大。2.3 分层采样与陡峭视差映射基础的视差映射也称为视差偏移映射在高度变化剧烈时比如我们地裂的垂直边缘容易产生采样错误和难看的锯齿。因为一次偏移就直接决定了新的采样点如果这个点跨过了实际的高度断层视觉上就会“滑”过去而不是被“挡住”。因此在实际项目中更常用的是陡峭视差映射。它的思路是把从表面到最大深度的这段距离分成若干层比如20层、30层。我们从表面开始沿着视角方向一步步“深入”表面。每一步我们都采样当前层深度对应的高度图值并与当前层的深度进行比较。如果当前层的深度已经大于该点的高度图值意味着视线已经“进入”了表面之下那么我们就找到了视线与高度场的大致交点。这个过程就像用视线做“射线步进”。通过增加步进层数我们可以更精确地找到遮挡边界效果也更真实当然计算量也更大。对于地裂效果裂缝边缘的陡峭处正是这种技术最能发挥优势的地方它能产生清晰的遮挡阴影让裂缝看起来深不见底。3. 实现视差地裂效果的完整实操流程3.1 资源准备与场景搭建首先我们需要准备核心资源。高度图制作使用Photoshop、Substance Designer或甚至免费的在线工具如Materialize来生成。画一张黑底白色裂缝的图。白色代表地面高度高黑色代表裂缝深处高度低。裂缝的线条要有粗细变化和分支这样更自然。保存为PNG格式导入Unity后需要将纹理类型设置为Default并勾选sRGB (Color Texture)确保灰度信息读取正确。我通常还会生成一张对应的法线贴图。颜色贴图制作根据你的场景风格来定。可以是干燥土地的纹理也可以是岩石、冰面等。将裂缝部分处理成黑暗的、或者有内部纹理的样子。确保其UV布局与高度图完全一致。创建材质与Shader在Project视图中右键 - Create - Shader - Standard Surface Shader作为起点方便修改。将其重命名为“ParallaxGroundCrack”。然后右键该Shader文件 - Create - MaterialUnity会自动用这个Shader创建一个材质球将其命名为“Mat_GroundCrack”。场景搭建在场景中创建一个Plane平面作为地面。将“Mat_GroundCrack”材质拖拽给它。调整平面的大小和位置。创建一个平行光Directional Light用于照明。最后将Main Camera调整到一个倾斜的角度便于观察视差效果。3.2 Shader代码实现详解接下来是核心部分编写视差Shader。这里我基于Surface Shader进行修改因为它能很好地处理光照。我们主要修改surf函数和添加必要的顶点输入。首先在Properties块中声明我们需要用到的属性Properties { _MainTex (Albedo (RGB), 2D) white {} _NormalMap (Normal Map, 2D) bump {} _HeightMap (Height Map, 2D) white {} _HeightScale (Height Scale, Range(0, 0.5)) 0.1 _ParallaxSteps (Parallax Steps, Range(1, 100)) 30 _Glossiness (Smoothness, Range(0,1)) 0.5 _Metallic (Metallic, Range(0,1)) 0.0 }_HeightScale控制视差效果的强度。值越大裂缝看起来越深。但过大如超过0.5容易导致严重的失真。_ParallaxSteps陡峭视差映射的步进层数。层数越多精度越高性能消耗越大。对于静态或移动缓慢的地面20-30层通常就能有很好的效果。在CGPROGRAM部分需要定义对应的变量并修改输入结构体加入切线信息sampler2D _MainTex; sampler2D _NormalMap; sampler2D _HeightMap; float _HeightScale; float _ParallaxSteps;struct Input { float2 uv_MainTex; float3 viewDir; // 表面着色器会自动在切线空间下填充这个值 };最关键的是在surf函数中在采样颜色和法线贴图之前先对视差偏移后的UV进行计算。我们添加一个函数float2 ParallaxOffset(Input IN, float heightScale) { // 获取当前UV点的高度值 float height tex2D(_HeightMap, IN.uv_MainTex).r; // 计算偏移量。IN.viewDir是在切线空间下的其xy分量是方向需要归一化并乘以高度和强度。 // 注意在Unity的切线空间下视角方向指向表面时viewDir的z分量是正的所以这里用除法。 float2 parallaxOffset IN.viewDir.xy / IN.viewDir.z; parallaxOffset * height * heightScale; // 返回偏移后的UV return IN.uv_MainTex - parallaxOffset; // 注意是减号因为我们要沿着视线反方向偏移 }然后在surf函数中这样使用void surf (Input IN, inout SurfaceOutputStandard o) { // 计算视差偏移后的UV float2 parallaxUV ParallaxOffset(IN, _HeightScale); // 使用偏移后的UV采样贴图 fixed4 c tex2D (_MainTex, parallaxUV); o.Albedo c.rgb; o.Normal UnpackNormal(tex2D(_NormalMap, parallaxUV)); o.Metallic _Metallic; o.Smoothness _Glossiness; o.Alpha c.a; }这是一个基础的视差偏移映射。要实现更高质量的陡峭视差映射我们需要将ParallaxOffset函数替换为步进版本float2 SteepParallaxOffset(Input IN, float heightScale, float numSteps) { // 计算每层的深度步长 float layerDepth 1.0 / numSteps; // 当前层的深度从表面0开始向内部1步进 float currentLayerDepth 0.0; // 计算每层UV的偏移增量 float2 P IN.viewDir.xy * heightScale; float2 deltaUV P / numSteps; float2 currentUV IN.uv_MainTex; float currentDepthMapValue tex2Dlod(_HeightMap, float4(currentUV, 0, 0)).r; // 步进循环 [unroll(30)] // 可以给一个提示性的循环展开对性能有细微好处 for (int i 0; i numSteps; i) { currentLayerDepth layerDepth; currentUV - deltaUV; currentDepthMapValue tex2Dlod(_HeightMap, float4(currentUV, 0, 0)).r; // 如果当前层深度大于高度图值说明我们已经穿过表面 if (currentLayerDepth currentDepthMapValue) { break; } } // 可选可以进行二分查找以进一步精确交点这里为了性能先省略 return currentUV; }在surf函数中调用这个新函数float2 parallaxUV SteepParallaxOffset(IN, _HeightScale, _ParallaxSteps);3.3 材质参数调试与效果优化Shader写好后将材质球的Shader选择为我们刚写的“ParallaxGroundCrack”。然后把制作好的贴图分别拖入对应的槽位。_HeightScale从0.05开始调节。值太小效果不明显值太大会导致纹理严重扭曲。对于地裂0.1到0.3之间通常比较合适能产生明显的深度感。_ParallaxSteps先从20开始。在Game视图下左右移动摄像机视角观察裂缝边缘。如果看到明显的“游泳”现象纹理抖动或锯齿可以逐步提高到30、50。同时注意性能开销在移动设备上建议不要超过30步。法线贴图强烈建议使用。即使颜色贴图一样有了法线贴图光线在裂缝边缘的反射会立刻让立体感提升一个档次。你可以用高度图在Unity的导入设置中直接生成将纹理类型设为Normal map并点击“Create from Grayscale”或者用专业软件生成质量更高的。一个重要的调试技巧你可以暂时将_MainTex替换为_HeightMap这样就能直观地看到视差偏移是如何作用于高度图本身的便于调整_HeightScale参数。4. 性能考量、常见问题与进阶技巧4.1 性能优化要点视差映射尤其是陡峭视差映射是一个像素级别的操作并且涉及循环纹理采样对性能有一定影响。以下是几个优化方向控制步进次数这是最直接的影响因素。在保证视觉效果可接受的前提下使用尽可能少的步数。对于远处或非焦点区域的地面可以使用动态步数或直接降级为普通法线贴图。使用LOD细节层次为材质编写一个简化的、无视差或低步进次数的Shader变体根据摄像机距离进行切换。Unity的Shader LOD或自定义的脚本都可以实现。纹理压缩与Mipmap确保高度图、法线贴图使用了合适的压缩格式如DXT5nm用于法线并开启Mipmap。这不仅能减少内存和带宽占用在远处也能减少因纹理采样导致的闪烁。视锥体与遮挡剔除确保地裂效果只在摄像机可见范围内被渲染。对于大型场景可以将地面分割成多个区块。4.2 常见问题与排查实录问题1效果不明显移动视角时裂缝没变化。排查首先检查_HeightScale值是否过小比如0.01。其次检查摄像机视角是否真的在移动。最可能的原因是viewDir计算有误。在Shader中尝试将IN.viewDir.xy输出到颜色上o.Albedo float3(IN.viewDir.xy, 0);在场景中移动视角观察平面颜色是否变化。如果没有变化说明视角方向没有正确传递到切线空间。解决确保在Input结构体中声明了float3 viewDir : TEXCOORDn;表面着色器通常会自动处理。如果自己编写顶点着色器需要手动计算切线空间下的视角方向并传递。问题2裂缝边缘出现严重的纹理拉伸或“撕裂”现象。排查这是基础视差偏移映射的典型问题在高度变化剧烈裂缝边缘且视角较倾斜时发生。解决切换到陡峭视差映射。如果已经使用尝试增加_ParallaxSteps步数。如果步数已经很高50仍有问题可能是高度图本身黑白对比太极端尝试用曲线工具柔化高度图的边缘过渡。问题3在特定角度下裂缝内部出现奇怪的“闪光”或错误颜色。排查这通常是因为步进循环在找到交点前UV坐标已经偏移到了纹理坐标范围0,1之外采样到了纹理边缘或默认颜色。解决在步进循环中或采样前对UV进行钳制clamp。例如currentUV clamp(currentUV, 0.001, 0.999);。或者将纹理的Wrap Mode设置为Clamp。更高级的解决方案是使用“视差遮蔽映射”在步进找到交点后对交点两侧进行混合但这会更复杂。问题4移动端上帧率下降明显。排查使用Unity的Frame Debugger或Profiler查看GPU耗时确认是当前Shader导致的。解决降低_ParallaxSteps到15-20。考虑使用更简单的视差偏移映射无循环作为移动端Fallback。检查纹理尺寸512x512的高度图通常足够无需使用1024或更高。确保Shader中使用了tex2Dlod并在循环外指定了Mip层级如上面代码中的0这比使用tex2D且依赖动态微分计算性能稍好。4.3 效果融合与场景互动一个孤立的地裂效果是苍白的需要与场景其他元素互动才能活起来。粒子系统配合在地裂生成的瞬间或持续期间在裂缝位置播放灰尘、碎石飞溅的粒子效果。粒子发射器的形状可以沿着裂缝的走向进行设置。动态顶点动画在Shader中除了视差还可以根据高度图或时间对裂缝周围的顶点进行小幅度的上下位移顶点动画模拟地面震动的感觉。这需要修改顶点着色器部分。后期处理增强使用屏幕空间环境光遮蔽SSAO可以极大地增强裂缝内部的阴影和深度感。运动模糊Motion Blur在地面剧烈开裂的动画过程中也能增加动态模糊的真实感。声音与物理为地裂效果配上相应的音效岩石撕裂、低鸣。如果需要角色能与裂缝互动可以考虑沿着裂缝生成一个对撞体Collider或者使用一个简化的网格碰撞体。实现这个视差地裂效果的过程让我再次体会到Shader编程的魅力——用数学和算法在屏幕上“无中生有”地创造深度与真实。它不是一个可以一键拖拽的预制件需要你根据项目需求仔细调整参数、制作资源。但当你看到平平无奇的地面随着视角移动而裂开一道深邃的缝隙时那种成就感是独特的。最关键的是这个方案的可扩展性很强掌握了视差映射的核心你完全可以把它应用到墙壁破损、浮雕装饰、复杂地表等任何需要廉价深度细节的场合。