3D模型轮廓发光高亮系统搭建：从轮廓提取到光晕合成

做了几年实时渲染开发，最常被问到的一个需求就是"把场景里的模型轮廓高亮出来"。听起来简单，真正落地的时候才发现，"发光"和"高亮"不是一回事，也不是随便改个材质颜色就能糊弄过去的。最近我在某个3D交互可视化项目里，把一套模型轮廓发光高亮系统从零搭了起来，这篇文章就把整个过程做一次完整复盘：需求怎么拆解、轮廓怎么提取、光晕怎么合成、参数怎么标定，以及我在实际调试中踩过的那些坑。适合正在做3D编辑器、大屏可视化、工业仿真这类需要高频选中反馈的开发者参考。

1. 选中反馈的痛点是第一个该想清楚的问题

1.1 一个真实的交互场景：点什么、怎么亮、多快亮

先还原一下场景。某个3D可视化系统里，用户要从上百个设备模型里选中一个来查看详细信息，点击后程序要把选中对象从场景里"摘"出来。注意，是"摘"出来，不是简单标个颜色。这意味着视觉反馈要满足几个层次：第一，无论在什么视角下，用户都能立刻判断选中了哪个；第二，高亮不能破坏模型本身的材质信息，因为用户接下来还要看这个模型的真实外观；第三，反馈要快，从点击到高亮出现不能有超过一帧的延迟感；第四，这个功能会被高频触发，所以性能要稳，不能一高亮就掉帧。

这些需求看似基础，但每一条背后都藏着一个技术选择。视角无关决定了单纯正面描边不够用，模型转过去就看不见了；材质保留决定了不能简单替换模型材质，否则信息密度反而降低；响应速度和稳定性则排除了那些每帧都要全屏扫描的重型后处理方案。把这些需求先用产品语言写清楚，再落到技术指标上，选型才不会跑偏。

1.2 改颜色、半透明、细描边各自输在哪

我在这个项目里实际试过三种"朴素方案"，最后都放弃了。

第一种是直接改模型材质颜色。最简单，但问题也最明显：模型本身的贴图、金属度、粗糙度全部丢失，呈现出来像一块纯色塑料，用户看到的信息反而变少了。而且当场景背景色和选中色接近时，比如冷色场景里用蓝色高亮，识别度会急剧下降。

第二种是做半透明叠加层，给选中模型加一个半透明的"罩子"。这个方案视觉上比纯色好一些，但半透明渲染的排序问题会把人折磨疯。模型自身有嵌套结构时，罩子会出现前一帧穿透、后一帧消失的闪烁现象，这在交互场景里是致命的。

第三种是只画一圈细描边。轮廓是有了，但"选中感"还是不够。细描边在屏幕空间宽度有限，一旦相机拉远，描边会变成一两个像素甚至直接消失；而且没有发光过渡，视觉上显得生硬，跟场景里其他的动效风格不搭。

这三轮试错给我留下的最大教训是：交互反馈不能靠"加一个效果"去解决问题，而是要想清楚高亮在屏幕上的最终形态。

1.3 把需求翻译成技术指标

经过上面三轮试错，我把需求翻译成了几条明确的技术指标：

• 轮廓必须"有厚度"，而且这个厚度在屏幕空间要尽量稳定，不能近大远小到离谱；
• 视觉上要有"外发光"效果，即从实心核心到透明外围有一个柔和的渐变带；
• 高亮层独立于模型材质，任何模型都可以无差别套用；
• 出现和消失要有极短的过渡，大约100到150毫秒，避免闪变；
• 在1080p分辨率、场景中最多20个高亮模型的情况下，高亮系统整体开销控制在1.5毫秒以内。

指标定下来之后，技术选型就有了明确方向。

2. 三条轮廓提取路线：原理、成本、翻车点

2.1 背面膨胀法：画一个放大一圈的"外壳"

背面膨胀法的思路非常朴素：把模型的每个顶点沿着法线方向向外推一段距离，整个模型就会"胖"一圈。这时候把正面剔除掉，只渲染背面，屏幕上看到的就是物体外轮廓的一圈补丁。因为背面被推到了物体原本轮廓的外侧，在视觉上就形成了一圈描边。

这个方案之所以被广泛应用，是因为它对模型数据几乎没有任何要求：不需要拓扑分析，不需要额外的预处理，最普通的三角网格就能跑。一个Pass能同时完成"提取轮廓"和"上色"两步，GPU开销也不大。

但它也有明确的翻车点。第一，模型如果有硬边，比如低模圆柱体的侧面，相邻顶点的法线方向不一致，外推之后接缝处会裂开或者重叠，轮廓线上会出现明显的断点。第二，物体特别大或者特别近的时候，固定世界空间宽度的外扩会造成屏幕空间上过于夸张的描边，反过来又需要做距离补偿。第三，它本质上只能给出"描边"效果，要得到柔和发光的渐变带，还得靠后处理模糊来补。

2.2 屏幕空间边缘检测：线宽一致但费钱

屏幕空间边缘检测的思路是把场景的深度和法线渲染到离屏RT里，然后用边缘检测算子（比如Sobel这类3x3卷积核）在图像上找不连续的地方，把这些不连续点连起来就是轮廓。这个方法最大的优点是线宽在屏幕空间完全一致，不管你离物体多远，描边都是固定像素宽度，比背面膨胀法的"近大远小"要优雅得多。

缺点是昂贵的全屏后处理成本和"伪边缘"问题。全屏检测意味着每一帧都要对整张深度图做多次卷积采样，分辨率越高越贵。伪边缘则是指不选中的物体如果恰好和高亮物体在深度上很接近，两物体的交界处也会被检测成边缘，出现"没选中的对象也被描了边"的尴尬效果。要消除伪边缘，还得给每个物体分配唯一的ID再逐ID检测，复杂度上升一个量级。对于纯粹的选中高亮场景，这个方案属于"牛刀杀鸡"。

2.3 几何边提取：精确但工程量大

几何边提取是在模型数据层面直接找出"边缘"。具体做法是以相邻面的法线夹角为判据，夹角超过某个阈值就认为这两个面之间存在一条可见边；再加上深度断裂检测，把前后层次分明的边也标出来。这个方案在CAD审图、工程标注里非常吃香，因为可以精确到"只显示这条边"。

但要用到通用高亮场景里，工程成本不太划得来。首先需要预处理或实时遍历拓扑结构，其次提取到的边大多是一条条线段，要在屏幕空间里正确画出并保持封闭，需要处理线段裁剪、焊接、投影等一系列问题。做一个Demo容易，做成稳定的产品功能很费劲。

2.4 我的选型结论

最终我选择的是"背面膨胀法提取轮廓 + 降采样模糊合成光晕"的组合，理由有三个：

• 输入要求最低：项目里的模型来源杂，手工建模和程序化网格都有，背面膨胀法对谁都友好；
• 扩展性好：同一套轮廓数据既能输出细描边，也能配合模糊生成外发光；
• 性能可控：轮廓Pass只画被选中的物体，其他所有处理都在低分辨率RT上做，预算比全屏后处理宽松得多。

这个表格列出来，选型结论就很直观了。如果你的场景是"要在普通3D应用里做选中提示"，背面膨胀法是那个不会出错的基础选项。

3. 轮廓发光高亮系统从零搭建：渲染链路与Shader

3.1 整套系统的渲染顺序设计

整个高亮系统的渲染链路是这样的：场景先按正常流程渲染一遍，所有物体的不透明Pass把深度和颜色都写进场景缓冲；然后进入高亮阶段，对每个被标记的高亮物体执行轮廓Pass，把轮廓颜色写进一张独立的RT，叫它HighlightRT；拿到HighlightRT之后，对它做多级降采样和模糊，得到一组从细到粗的模糊结果；最后把核心轮廓和模糊结果分别用加法混合叠加回场景图像上。

这里有两个容易搞反的顺序问题值得强调。第一个，高亮Pass一定要在场景正常渲染完成后再执行，让现有的深度缓冲来负责遮挡关系。第二个，核心轮廓层和光晕层要分开合成：光晕层先加，核心轮廓层后加，这样光晕在下面、轮廓在上面，视觉层次才干净。实际执行顺序如下：

• 第1步：正常渲染场景，所有模型写入深度和颜色；
• 第2步：清除HighlightRT，对高亮物体执行轮廓Pass；
• 第3步：对HighlightRT做4到5级降采样并逐级模糊；
• 第4步：把每一级模糊结果按强度参数叠加到场景；
• 第5步：把未模糊的核心轮廓叠加到最上层。

3.2 轮廓Pass的Shader实现

轮廓Pass的核心代码并不长，关键是那两行"沿法线外推"和"Cull Front"。下面是我的GLSL风格实现，引擎里换成自己的Shader语法即可：

glsl复制// ---------- 轮廓Pass：顶点着色器 ----------
#version 330 core

layout(location = 0) in vec3 aPos;
layout(location = 2) in vec3 aNormal;

uniform mat4 uModel;
uniform mat4 uView;
uniform mat4 uProj;
uniform vec3 uCameraPos;
uniform float uOutlineWidth;      // 外扩宽度（世界空间单位）
uniform float uDistanceScale;     // 距离补偿系数

void main()
{
    // 法线转到世界空间，注意如果模型带非等比缩放，要用逆转置矩阵
    vec3 worldNormal = normalize(mat3(uModel) * aNormal);
    vec3 worldPos = (uModel * vec4(aPos, 1.0)).xyz;

    // 距离补偿：离相机越远，外扩宽度越大，让屏幕上的描边宽度尽量稳定
    float dist = distance(worldPos, uCameraPos);
    float expand = uOutlineWidth * (1.0 + uDistanceScale * dist);

    worldPos += worldNormal * expand;

    gl_Position = uProj * uView * vec4(worldPos, 1.0);
}

glsl复制// ---------- 轮廓Pass：片元着色器 ----------
#version 330 core

uniform vec4 uHighlightColor;

out vec4 FragColor;

void main()
{
    FragColor = uHighlightColor;
}

Shader之外的Pass状态设置，才是这件事里真正容易出错的部分。我的配置是：

• Cull Front：只渲染背面，内部膨胀部分自然被隐藏，只露出外壳的最外侧一圈；
• ZTest LEqual：沿用场景深度，被其他物体遮挡的部分会被正确丢弃；
• ZWrite Off：轮廓不写入深度，避免影响后续透明物和光晕合成；
• 开启实例化提交：把多个高亮物体合并成一个绘制组，减少DrawCall。

提示：如果你的模型存在明显的硬边裂缝，尝试给轮廓Pass单独烘焙一份平滑法线数据，即把共享位置的顶点法线取平均后再做一次单位化。这个预处理只影响轮廓外扩方向，不影响模型本身的法线。

另外，如果模型带了非均匀缩放，直接乘mat3(uModel)取法线会有问题，严谨的写法是用逆转置矩阵。我一开始图省事直接乘，结果一个被拉扁的圆柱体轮廓歪得离谱，排查了半天才意识到是这个原因。

3.3 光晕合成：降采样模糊的完整流程

有了HighlightRT之后，光晕合成的思路是把这张图逐级变小、加模糊，再把所有层级叠回来。具体流程我在项目里用的是五级处理：

• 第0级：原始HighlightRT，作为核心轮廓层，保持完全清晰；
• 第1级：降到二分之一分辨率，做一次双向模糊，作为第一层光晕；
• 第2级：降到四分之一分辨率，模糊，作为第二层光晕；
• 第3级：降到八分之一分辨率，模糊，作为第三层光晕；
• 第4级：降到十六分之一分辨率，模糊，作为最外层的淡光晕。

每级模糊实际上是在两个Pass里完成的：先横向采样，再纵向采样。模糊的核我推荐用偏移采样法，而不是大半径的NxN卷积。理由很实际：大半径卷积在低分辨率下开销大，而偏移采样法一次能采两个对角点配合双线性过滤，两步就能得到一个接近正态分布加权的模糊效果：

glsl复制// ---------- 可分离模糊：单方向示意 ----------
#version 330 core

uniform sampler2D uTex;
uniform vec2 uTexelSize;
uniform vec2 uDir;        // vec2(1, 0) 横向 / vec2(0, 1) 纵向
uniform float uRadius;    // 模糊半径（像素单位）

out vec4 FragColor;

void main()
{
    vec2 uv = gl_FragCoord.xy * uTexelSize;
    vec2 step = uDir * uTexelSize * uRadius;

    vec4 sum = texture(uTex, uv) * 0.34;
    sum += texture(uTex, uv + step) * 0.24;
    sum += texture(uTex, uv - step) * 0.24;
    sum += texture(uTex, uv + step * 2.0) * 0.09;
    sum += texture(uTex, uv - step * 2.0) * 0.09;
    FragColor = sum;
}

横向Pass跑完，把输出当作纵向Pass的输入，uDir换成vec2(0, 1)即可。模糊半径参数控制在每级对应像素的2到3倍之间，这样五级叠加出来的光晕是均匀的"核亮外柔"渐变，不会出现一圈一圈的条纹。

3.4 合成顺序与颜色处理细节

合成阶段要把五层图按强度参数叠加回场景。这里用的混合模式是加法混合，因为光晕本质上是增加亮度，不是遮挡底色。实际操作中我会给每一层单独设强度系数，从核心层到最外层依次递减，比如核心层1.0、一级0.8、二级0.5、三级0.3、四级0.15。这样出来的光晕边缘是渐隐的，而不是生硬的一个大光圈。

还有三个细节容易影响最终观感。第一，核心轮廓层不建议完全用纯色，可以在纯色基础上加5%到10%的白色补偿，让轮廓中心有"更亮"的视觉重心。第二，颜色过曝问题：高亮度光晕叠加后，场景中该区域的RGB很容易超过1.0，如果管线里没有合适的色调映射，亮部会变成一片死白，最简单的做法是把单层强度控制在合理范围，而不是依赖后期压制。第三，光晕颜色饱和度建议比核心轮廓略低一点，物理上外发光总是比核心更"散"，饱和度低一些看起来更自然。

4. 参数标定、性能预算与三个真实踩坑

4.1 核心参数表与标定方法

标定方法：先把相机固定在一个中等距离，肉眼观察屏幕上的轮廓宽度是否合适；再把相机拉到最远和最近，确认距离补偿后的变化不要超过两倍。光晕部分的标定建议用灰度模式观察，这样可以避免颜色干扰，只看亮度分布是否均匀。

4.2 多个高亮物体与遮挡场景怎么处理

多个高亮物体同时出现时，核心思路是共用一个HighlightRT。所有高亮物体的轮廓Pass都往同一张RT上画，然后用同一套模糊和合成流程处理，这样不会因为物体数量增多而额外增加模糊成本。需要注意合批：如果引擎支持实例化渲染，把多个高亮物体的轮廓Pass合并为一个DrawCall提交，数量超过20个时开销差距非常明显。

遮挡关系的处理完全交给深度测试，这也是我把高亮Pass放在场景渲染之后的原因。正常情况下，被墙挡住的物体不会显示轮廓，这是物理正确的表现。但如果产品希望"被遮挡的物体也要显示一个提示"，那就需要在高亮Pass里额外设置ZTest Always，并叠加一个与正常轮廓不同样式的层，比如用虚线或低透明度表示"在墙后面"。这个功能最好做成一个开关，因为实际使用中很多人并不喜欢看到轮廓穿透墙壁的"透视"效果。

4.3 三个典型故障的完整排查链路

第一个坑：轮廓在模型接缝处断裂。现象是纯色轮廓线上出现细小的缺口和毛刺，尤其在圆柱、立方体这些低模上很明显。我的排查过程从Shader检查开始，先把外推宽度调大，确认是裂缝还是闪烁；调大之后裂缝更明显，说明问题出在外推方向不一致。接着在渲染器的调试视图里把法线可视化打开，发现硬边处的顶点法线确实被拆成了多份，各自指向不同方向。最后解决方法是给轮廓Pass单独烘焙平滑法线：遍历所有顶点，把共享位置的平均法线存进一份辅助顶点数据，轮廓Shader改用这份数据外推。效果立竿见影，裂缝完全消失。

第二个坑：高亮开启后帧率整体下降，而且波动明显。现象是原本稳定60帧的场景，只要出现高亮就掉到40帧出头，还伴随间歇性卡顿。我的排查链路是先抓性能分析工具，发现每次高亮切换时都有一次明显的渲染目标创建和销毁操作，这是最容易忽略的性能杀手。动态申请RT会导致显存分配波动，驱动层每一帧都要同步等待。进一步看模糊Pass，发现降采样级别是写死的高分辨率，完全没有做分级处理。修复分两步：把所有用到的RT预先创建好放进一个RT池，按需复用；降采样从全分辨率改为固定4级，第一级直接跳半分辨率。改完帧率回到55帧以上，波动消失。

第三个坑：光晕出现"方块感"和条纹。现象是光晕边缘能看到马赛克状颗粒，层次之间有明显分界线。排查时我先确认了模糊算法本身没问题，然后把怀疑点转到降采样系数上。因为我用的降采样不是精确的2倍关系，而是随手写了个0.45，导致每级分辨率不对齐，双线性采样的权重产生偏差。修正为严格2倍降采样，并把每层的模糊半径和层间强度按等比递减对齐后，条纹消失，光晕过渡变得顺滑。这个问题的教训是：降采样系数和模糊半径必须精确对应，不能凭感觉写。

4.4 优化清单和性能预算参考

我把整个高亮系统的性能预算梳理成了一份清单，项目里直接对照执行：

• 轮廓Pass只画被选中的物体，且只画背面，三角形数大约是模型总量的一半；
• 所有模糊都在低分辨率RT上进行，四档降采样加一次合成，满打满算全屏计算不到三次；
• 多个高亮对象合批，尽量一次DrawCall画完所有轮廓；
• RT全部池化复用，禁止逐帧分配；
• 光晕强度用全局Uniform控制，不要为每个物体单独创建材质实例；
• 过渡动画只改强度和宽度Uniform，不切换Pass，避免Shader变体切换。

以1080p为例，我实测的数据是：20个高亮模型时轮廓Pass约0.35毫秒，四档模糊加合成约0.9毫秒，总开销大约1.3毫秒，在60帧预算内留出了足够余量。如果模型数量上百，还可以做动态降级：检测到帧时间超限时，自动减少一级光晕模糊。

5. 高亮系统的进阶玩法：动画、语义与组合效果

5.1 让轮廓"呼吸"起来

静态的高亮能用，但交互感不足。我加入的第一个动态效果是"呼吸"：让光晕强度按正弦曲线缓慢变化，模拟柔和的生命感。参数上，频率放在1.2到2Hz之间比较舒服，太快会让人烦躁，太慢则几乎察觉不到。幅度控制在基础强度的15%以内，否则最外层光晕会忽明忽暗得很突兀。

更推荐的做法是"命中闪烁"：选中发生的瞬间，强度先冲到120%，然后在150ms内用指数衰减回稳态。这个微动画符合人的视觉注意力规律，突然出现的东西需要在第一帧抓住眼球，稳定之后就不需要继续保持高刺激了。实现上只需要在材质参数里加一个衰减计时器，Shader里做一行插值，成本几乎为零。

5.2 用颜色承载业务语义

高亮系统的颜色不应该散落在各个调用点，而是应该做成一套语义映射。项目里我们定义了四种状态色：正常选中用主题蓝，警告用琥珀黄，错误用红色，完成或成功用绿色。并且警告和错误状态的脉动频率会比正常状态更高，这样用户即使不看颜色，单看闪烁频率也能感受到紧急程度。

颜色管理上建议把状态色集中放在一个配置表里，运行时根据状态索引取色，避免"这处用了浅蓝、那处用了深蓝"的口径不一致。同时每个状态色要为光晕层级准备一套递减强度配置，如果全靠代码里临时调，最后的效果大概率是失控的。

5.3 高亮和其他交互反馈的组合

到了这一步，高亮系统已经不只是"选中反馈"了，它可以成为整个交互体系的一部分。

实用的组合方案有三个。第一，高亮加非选中物体降透明：用户选中某个设备后，场景里其他模型统一降到30%透明度，选中物体保持全不透明加轮廓，对比度直接拉满。第二，高亮加相机轻微聚焦：选中后相机做一小段缓慢推近，配合轮廓光晕，用户的注意力会自然跟随。第三，高亮加信息面板联动：点击信息面板里的标签，对应模型的高亮颜色切换为标签同款色，模型和面板之间建立视觉绑定。

这些组合里，高亮系统本身不需要改架构，只是把强度、颜色、动画参数开放给上层逻辑即可。这也是我在复盘时最满意的一点：一开始老老实实把轮廓提取和光晕合成做成了独立模块，后来所有扩展都是"加参数、加接口"的事，没有推翻重来。

最后说几句个人体会。轮廓高亮这套东西，技术本身不复杂，真正的复杂度其实在"好维护、好调参、好扩展"。我踩过的那些坑，硬边裂缝、RT分配波动、降采样系数不匹配，每一个单独拿出来都不难解决，但它们恰恰是常规文档里不会写的部分。如果你正在做类似的功能，我的建议是先想清楚高亮的最终形态，再动手写Shader。哪怕需求只有一句话，把它拆成"核心轮廓、外发光、过渡动画、语义颜色"这四个层次去设计，后面对接交互和UI都会顺很多。