我在给一个3D像素风项目做美术升级时，第一次认真研究"轮廓线"这件事。当时项目里所有角色和场景都是方块堆出来的体素风格，光照和贴图都调得差不多了，但整体画面总觉得"散的慌"，角色和背景糊在一起，没有那种像素游戏该有的利落感。后来给所有物体加了轮廓线，画面瞬间"收紧"了，该突出的层次一下就出来了。这篇就聊聊我在3D像素艺术里加轮廓线踩过的坑、试过的方案，以及最后稳定落地的那套思路。
先说结论：为3D像素艺术加轮廓线，最稳的做法不是去改模型，也不是简单的屏幕后处理描边，而是"先像素化、再在低分辨率空间里做边缘检测"。这个方案既能保证轮廓线和色块对齐，又能避免传统描边在像素网格上产生一堆乱七八糟的断线。下面我一步步拆开讲。
1. 先搞清楚：我们要的"轮廓线"到底是什么
1.1 轮廓线的两种来源
很多教程会把轮廓线统称为"描边"或者"Outline"，但实际操作中，轮廓线其实有两种完全不同的来源。一种是几何轮廓，它来自物体本身的形状边界。比如一个球体的剪影，那条最外圈的弧线就是几何轮廓，它是由视线方向和表面法线的相对关系决定的。另一种是材质/颜色轮廓，它来自相邻区域的颜色差异或明暗差异。比如一个红色方块紧挨着一个蓝色方块，它们之间的分界线就是颜色轮廓。
游戏渲染里常见的描边方案，要么走几何路线，要么走图像路线。几何路线很好理解：把模型沿法线方向微微胀大一圈，然后反向渲染背面，或者直接做一个"视线方向与法线方向夹角接近90度就涂黑"的判断。图像路线则是把摄像机渲染出来的画面当成一张普通照片，在后处理阶段用sobel这类卷积算子，找出画面里深度或颜色变化剧烈的地方，涂成黑色。
这两种路线本身都不新鲜，真正麻烦的是它们在3D像素艺术里都会出问题。
1.2 3D像素艺术的"反常规"之处
3D像素艺术和普通3D游戏的最大区别在于：最终呈现在屏幕上的并不是渲染器的原始输出，而是一个被"像素化"过的采样结果。也就是说，无论你的模型有多精细，画面最终会被降采样到很低的像素网格上，每个格子内部颜色统一，呈现出类似马赛克或点阵的效果。
这就带来一个问题：普通的深度或颜色边缘检测，是在原始分辨率的画面里做的，检测出来的边缘像素宽度是1个原始像素。而3D像素艺术的画面本来就是一格一格的"大像素"，如果直接在原始分辨率上描边，再把描边结果一起像素化，你会发现边缘线在格子内部出现、粗细不均匀、还会偏移。就好比你在一张高清照片上用红色描了边，然后整张照片被打成马赛克，那条红线会碎成一段一段的，有的格子红、有的格子不红，看起来像得了皮肤病。
另外，3D像素艺术的表面大多由方块拼成，法线变化非常剧烈。相邻两个面如果朝向不同，法线夹角很容易超过45度，如果用默认的法线阈值去做边缘检测，会把每一条体素拼缝都当成轮廓线画出来。结果就是整个场景像被一张蜘蛛网罩住，完全失去了该有的简洁感。所以做3D像素艺术轮廓线，第一步不是选描边算法，而是想清楚描边应该发生在"像素化之前"还是"像素化之后"。
2. 方案选型：三条路线我为什么最终选了这一条
2.1 路线一：几何轮廓（背面放大法）
最终选择之前，我试过几何轮廓方案。做法很标准：准备一个专门画轮廓的Pass，把物体沿法线方向向外扩张一点，然后只输出纯色，再用ZTest设置为Greater把被原物体挡住的背面画出来。因为这个Pass画的是背面像素，正面物体遮挡的部分会被剔除，剩下的就是一圈外扩的轮廓。
这套方案在普通3D游戏里效果很好，边缘干净，而且完全不受屏幕分辨率影响。但在3D像素艺术里有两个问题特别棘手。首先是轮廓宽度不能精确控制：外扩量是在世界空间做的，但像素化之后，每个屏幕像素覆盖的世界空间大小是变化的，同一个外扩量在不同距离上可能占用2个像素，也可能只占1个像素，有时干脆把一整格像素都盖掉，导致轮廓时粗时细。其次是体素模型的拓扑很碎：一个看似简单的方块角色，实际由几十个小立方体拼成，沿法线外扩时每个小立方体各自膨胀，交界的边缘会撕裂或互相穿透，描边看起来脏。
所以几何轮廓方案我只做了一版demo就放弃了。它适合模型连续、表面光滑的角色，但不太适合我们这种"一堆方块摞起来"的体素艺术。
2.2 路线二：常规后处理Sobel描边
第二套方案更主流：在后处理阶段，拿到深度纹理和法线纹理，对每个像素做sobel卷积，检测深度或法线的梯度，梯度超过阈值就输出轮廓色。网上能搜到的描边Shader基本全是这个套路，代码也就几十行。
这套方案在普通3D场景里非常成熟，但放到3D像素艺术里有个致命伤，就是前面说的边缘对齐问题。因为后处理是在渲染画面的原始分辨率下执行的，而你最终要像素化，中间存在一个分辨率转换。只要这个转换发生，边缘线就不可能和像素格子完全对齐。我实测下来，最直接的表现是轮廓线出现在色块边缘的"内部"或"中间"，而不是刚好压在两个色块的分界线上，总差那么半格像素。对于追求整齐划一的像素风来说，这种半格偏移非常扎眼。
2.3 路线三：先像素化再做边缘检测（最终选择）
真正敲定下来的方案其实是一个顺序上的调整：先把画面降采样到目标分辨率，让所有画面内容变成一格一格的像素色块，然后在这个低分辨率画面上做边缘检测。
这样做有几个立竿见影的好处：
- 后处理检测到的边缘天然就是1个目标像素宽，和像素格子完美对齐。
- 深度阈值和法线阈值的判断对象是"格子"而不是"原始像素"，相当于自动消除了原始画面里的高频噪声，边缘检测结果非常干净。
- 不管远处近处的物体，描边都以固定的"格数"呈现，符合像素艺术的硬边特征。
代价是要多维护一张低分辨率深度纹理和法线纹理，并且边缘检测的卷积采样只能在低分辨率缓冲上进行。但这点开销在像素化游戏里完全可接受，因为我们本来就是故意降分辨率来营造风格的，额外的计算都在低分辨率上跑，反而比高分辨率后处理更省。
3. 实操：从渲染管线改造到核心Shader实现
3.1 第一步：把渲染管线拆成"像素化前"和"像素化后"
要落地方案三，首先得明确我们说的"像素化"发生在哪一步。我项目用的是类URP结构，简化的流程是：
- 场景正常渲染一张高分辨率画面A，分辨率等于屏幕分辨率。
- 增加两个低分辨率缓冲：一个存场景的颜色，一个存场景的深度和法线。
- 颜色缓冲直接通过降采样得到低分辨率颜色图，深度法线缓冲在低分辨率下重新采样一次G-Buffer数据得到。
这里有个关键点：像素化一定用最近邻采样，不能双线性。双线性会在色块之间插值出过渡色，破坏像素艺术"一格一色"的硬边感。我见过很多项目在降采样阶段不小心开了双线性过滤，结果场景看起来像"马赛克糊了层雾"，其实就是采样模式不对。
然后是法线纹理。如果引擎没提供低分辨率法线G-Buffer，最简单的办法是在全屏Pass里把深度纹理解包成世界坐标，再用屏幕空间差分算出法线方向。公式大概是：
float3 normal; float2 texel = 1.0 / _LowResScreenSize; float3 worldPosCenter = ReconstructWorldPos(uv, depth); float3 worldPosRight = ReconstructWorldPos(uv + float2(texel.x, 0.0), depth); float3 worldPosUp = ReconstructWorldPos(uv + float2(0.0, texel.y), depth); normal = normalize(cross(worldPosRight - worldPosCenter, worldPosUp - worldPosCenter));用屏幕空间差分重建的法线在普通模型上会有点糙，但对3D像素艺术来说刚刚好——因为在低分辨率下，一个像素格子内部本来就是平面，差分出来的法线正好代表这个格子的朝向，不会出现子像素噪声。这就是"先像素化再算法线"的另一个好处：法线天然被平滑成一个格子一个值。
3.2 第二步：边缘检测Shader怎么写
有了低分辨率颜色图、深度图、法线图之后，核心描边Shader就不复杂了。我的实现思路是：对一个目标像素，采样它周围8个邻居的深度和法线，如果深度差超过阈值，或者法线夹角超过阈值，就判定该像素为轮廓像素，混合输出轮廓色和原色。
下面是一段可以作为参考的伪Shader代码，注释里我标了关键参数：
// 输入：低分辨率颜色图 _MainTex、低分辨率深度图 _CameraDepthTexture、 // 低分辨率法线图 _CameraNormalsTexture（或差分重建） // 参数： // _PixelSize：目标像素对应的UV步长，等于 1.0 / 低分辨率尺寸 // _DepthThreshold：深度差阈值，建议按线性深度差值调试 // _NormalThreshold：法线夹角阈值，单位度，建议 20~60 // _OutlineStrength：描边强度，线性混合系数 // _OutlineColor：描边颜色 float4 OutlinePass(VertexOutput input) : SV_Target { float2 uv = input.uv; // 中心像素深度（线性深度） float centerDepth = LinearEyeDepth(SAMPLE_DEPTH(uv)); float3 centerNormal = SampleNormal(uv); float edge = 0.0; // 3x3邻域：用两个for循环展开，这里简化成8个偏移 float2 offsets[8] = { float2(-_PixelSize.x, -_PixelSize.y), float2(0.0, -_PixelSize.y), float2(_PixelSize.x, -_PixelSize.y), float2(-_PixelSize.x, 0.0), float2(_PixelSize.x, 0.0), float2(-_PixelSize.x, _PixelSize.y), float2(0.0, _PixelSize.y), float2(_PixelSize.x, _PixelSize.y) }; for (int i = 0; i < 8; i++) { float2 sampleUV = uv + offsets[i]; // 深度差判断 float neighborDepth = LinearEyeDepth(SAMPLE_DEPTH(sampleUV)); float depthDiff = abs(neighborDepth - centerDepth); edge = max(edge, step(_DepthThreshold, depthDiff)); // 法线夹角判断 float3 neighborNormal = SampleNormal(sampleUV); float cosine = saturate(dot(centerNormal, neighborNormal)); float angle = acos(cosine) * 57.29578; // 弧度转角度 edge = max(edge, step(_NormalThreshold, angle)); } half3 color = tex2D(_MainTex, uv).rgb; half3 finalColor = lerp(color, _OutlineColor.rgb, edge * _OutlineStrength); return half4(finalColor, 1.0); }注意这里我用的是max而不是平均，这是刻意的。边缘检测是二值决定，只要8个邻居里有任何一个的深度或法线差异超过阈值，这个像素就应当被视为轮廓点，不能因为其他7个邻居都很相似就把它平均成非边缘。用max可以保证强边缘一定被保留下来。
深度阈值和法线阈值在草稿阶段可以先各给一个保守值：深度阈值0.03，法线阈值45度。0.03是以"线性深度差"为单位的，实际项目中最好换算成相机近远裁剪面下的归一化差值，或者干脆存一份世界空间深度再比较。至于法线阈值45度，很适合体素风格——一个正方体相邻面的法线夹角就是90度，两个对角面夹角更大，45度阈值可以很从容地把"面与面的转折"和"同一平面上微小的凹凸"区分开。
3.3 第三步：轮廓颜色、宽度与Z轴方向的控制
后处理描边有一个天然优势：轮廓颜色可以随意改，不必依赖模型材质。我在项目里把轮廓色做成一个全局参数，根据场景氛围动态调整。像素风日常给黑色，夜晚场景给深蓝，洞穴里给偏红的暗调，这样不需要每个材质都改一遍。
轮廓宽度也很有讲究。我建议把宽度控制在1个低分辨率像素，也就是描边刚好占一个格子。这是最"像素艺术"的宽度，看起来像漫画里的硬勾线。如果你想要更粗的2格轮廓，可以在检测出边缘后再做一次膨胀，把轮廓像素的周围也涂成轮廓色。膨胀次数和轮廓像素数成正比，但注意膨胀会让所有轮廓变粗，包括某些你不想突出的内部细节，所以一开始先别贪宽。
还有个容易忽略的坑：高度落差大的物体轮廓可能互相遮挡。比如一个方块后面紧挨着另一个方块，两者深度差很小，深度阈值设得不够灵敏，描边就不会把前后两层分开。这时候单靠深度不够，必须配合法线差。反过来说，如果深度阈值设得太大，又会把本来连着的表面也割开。经验做法是先调深度阈值把"前后景分离"做对，再用法线阈值去补"同一平面上的转折"，两者分工不同，不能混用。
4. 参数调优与可视化验证
4.1 到底哪几个参数最影响观感
很多新手一上来就盯着描边颜色调半天，其实颜色是最不重要的。最影响观感的三个参数依次是：深度阈值、法线阈值、像素化分辨率。
深度阈值决定"前后层次"的分离强度。阈值越小，前后物体分得越开，但小到一定程度，同一次渲染中的雾效、小台阶、轻微地形起伏都会变成轮廓，画面会很吵。法线阈值决定"转折面"的分离强度。阈值越小，描边的面越多，适合风格化明显的漫画感场景；阈值大则只保留最明显的转折，画面更素净。像素化分辨率则决定整张画面的格子大小，格子越大，像素感越强，但轮廓线能表达细节的能力也越弱。这三者是一个联动关系，比如你提高了像素化分辨率，格子变小，同样的深度阈值可能就会把更多细节框出来，需要重新平衡。
4.2 参数配置速查表
下表是我在几个典型场景里调出来的一组起点值，以低分辨率画面尺寸为980x540左右、相机FOV约60度为基准。你有类似设置时可以先套用这一组再微调。
| 场景类型 | 深度阈值 | 法线阈值 | 轮廓宽度 | 轮廓颜色 |
|---|---|---|---|---|
| 户外白天 | 0.03 | 45度 | 1格 | 黑色，透明度50% |
| 洞穴/室内 | 0.02 | 35度 | 1格 | 深棕色，透明度60% |
| 夜晚街景 | 0.04 | 50度 | 1格 | 深蓝色，透明度40% |
| 主城大场景 | 0.02 | 40度 | 1格 | 近黑，透明度45% |
透明度的实现很简单：不要用纯色直接把原色覆盖掉，而是让轮廓色和原色进行lerp混合。纯黑全覆盖在像素风里会很死板，稍微透一点，让底色透出来，轮廓线会更有手绘勾线的味道。我一般把透明度压在40%到60%之间，特殊场景才会到100%。
4.3 验证方法：一张测试场景快速判断
调参时最忌讳在正式场景里反复改来改去，因为正式场景信息量太大，你根本分不清哪些线条是符合预期的。我习惯做一个固定测试场景：一个红色正方体放在浅灰色地面中央，正方体旁边放一个球体，地面随机铺十几块大小不一的立方体，背景是天空盒。
- 正方体本身应该有一圈清晰的轮廓，四条竖直棱线明显，顶面边缘也要完整。
- 球体应该呈现一圈平滑的轮廓，但球体表面本身的明暗变化不会造成碎线。如果你的方案里球体表面出现了很多"鳞片状"短线，说明法线阈值太低，或者像素化前的高频信息没滤干净。
- 地面上那些大小不一的立方体，每块都应该有独立的轮廓，同时相邻块的高度差很小的话，不应被深度边缘误判成轮廓。
这四类检查点覆盖了轮廓线最常见的四类问题：主体轮廓、曲面轮廓、细节轮廓、层级轮廓。全部通过，再回到正式场景里微调颜色和透明度，效率会高很多。
5. 常见问题与排查技巧实录
5.1 轮廓线抖动/闪烁
轮廓线在动态镜头里闪烁是像素风格游戏最常遇到的坑。原因往往不是描边算法本身，而是降采样时深度或法线的采样点出现了半像素偏移。所谓半像素偏移，就是你在低分辨率画面上采样某个格子时，因为UV坐标落在了格子边界上，导致采样结果在相邻两个格子之间反复横跳，进而让边缘检测结果不稳定。
解决办法有两个，都亲测有效。一是确保低分辨率纹理的采样UV按(像素坐标 + 0.5) / 分辨率来计算，让每个采样点准确落在格子中心。二是在深度比较前加一个极小的epsilon容差，比如0.0005，消除浮点精度造成的随机跳动。如果做完了还是闪，多半是深度纹理精度不够，把深度缓冲从16位换成24位或32位浮点，基本能根治。
5.2 轮廓线断层与粗细不均
很多入门教程里出现过的经典问题：远处物体轮廓线能看清，近处物体轮廓线反而非常粗，走到跟前甚至糊成一团。这是因为后处理描边是基于屏幕空间像素的，而屏幕空间像素在近处投射到世界空间时覆盖的面积小，所以在同样的深度阈值下，近处物体深度梯度大，容易被判定为边缘；远处物体深度梯度小，边缘检测就不敏感。
针对这个问题，我的方案是把深度阈值改成非线性。简单做法是先把线性深度做个归一化：depth01 = saturate((linearDepth - near) / (far - near))，然后乘以一个距离系数，让近处用更小的阈值、远处用更大的阈值。当然更好的办法是引入"像素到相机的距离"作为权重，让描边的世界空间厚度近似恒定。但说实话，在3D像素艺术里我反而更推荐保持屏幕空间固定宽度，因为像素风格本来就是"格子化"的视觉语言，近大远小不会太违和，反而是画面的风格特征。
5.3 描边与雾效、透明物体的冲突
像素风游戏普遍喜欢用雾效营造氛围。但雾效会让深度图变得"不可靠"——远处物体被雾染白，前后景的深度差在颜色上看不出来，但深度值还是存在的，描边依然会出现。结果就是远处雾里的物体轮廓像一圈"黑色水印"浮在雾气上，很突兀。
我建议在雾效渲染之后再做描边。既然深度已经拿到了，描边判断的是几何深度差，不受雾的颜色影响。但如果你想"雾越深、轮廓越淡"，可以在描边Shader里采样雾的浓度，用浓度来衰减_OutlineStrength。这样远处物体在雾里若有若无，轮廓也若有若无，视觉上非常舒服。
透明物体则更麻烦。如果透明物体也写入深度buffer，描边会把透明物体和后面物体的轮廓混在一起；如果不写入深度，又无法对齐。我的经验是透明物体统一走一个"只做颜色、不参与边缘检测"的Pass，他们可以有颜色叠加，但不产生轮廓。这样至少不会出现大面积透明玻璃上密密麻麻全是描边的奇怪画面。
5.4 性能优化经验
最后说说性能。3D像素艺术本来就有"低分辨率"这个天然优势，描边检测又跑在低分辨率缓冲上，开销并不大。8个邻居的采样在低分辨率下完全跑得起。但如果你的像素化分辨率很高，比如要支持4K下两倍像素化，那么可以把3x3卷积换成十字形采样，只采样上下左右4个邻居，视觉上差异很小，性能却省了近一半。
另外，深度图和法线图如果不需要每帧都更新（比如场景完全静止，或者描边是作为角色专用风格），可以缓存起来隔几帧算一次。不过动态游戏里不建议这么干，因为描边延迟会明显。最重要的是别在描边Shader里做循环展开前忘了[unroll]指令，编译器如果没把循环展开，动态索引会在GPU上拖后腿。
写到这里差不多把方案、代码、调参、踩坑都过了一遍。最后分享一个我个人一直保留的调试习惯：每次调整参数，我都会截一张对比图存档，并记下场景的时间、天气和相机距离。因为像素风格的轮廓线非常依赖场景整体密度，同一个参数在开阔地形和狭窄巷道里的观感完全不同。攒上两周截图回看，你会很清楚自己偏好的"描边手感和浓度方向"，这比临时到现场改参数要稳得多。
