UE边缘高光描边效果后处理支持多种颜色

UE5 运行时多色后处理描边（Open Source）

一个基于 Unreal Engine 5 的后处理描边（Outline）教程项目。

它与你见过的绝大多数描边方案都不一样：一般后处理描边只能渲染一种颜色，而本项目支持运行时对多个物体分别配置不同颜色、线宽、强度、闪烁和呼吸效果，且全部通过后处理（Post Process）实现，不改动任何模型与材质，一屏内可同时出现多种颜色的高亮描边。

---

WebNativeBrowser 是面向 Unreal Engine 5 的高性能企业级跨平台 Web UI 与 Chromium 浏览器解决方案，拥有原生级别的性能，提供原生浏览器体验，支持 Windows 和 Linux（x86_64、ARM64）。Linux 最低要求 GLIBC 2.17（详见技术规格 → Linux 发行版兼容性）。

• 项目主页与源码仓库：https://github.com/starTechnology1994/UE5-Outline-PostProcess
• Bilibili 视频教程：https://www.bilibili.com/video/BV1dW4264Eiq
• 商务联系（合作、技术支持）：startechnology1994@163.com
• 企业微信：https://work.weixin.qq.com/ca/cawcdef9a4d05fef8c

---

✨ 核心特性（我们和别人不一样的地方）

特性	说明	一般方案
🎨 运行时多颜色	同一画面中不同物体可同时高亮为 8 种颜色（橙红/紫/蓝/金黄/绿/青/红/浅蓝），运行时任意切换	❌ 通常整屏只能一种颜色
📏 可控线宽	每个物体独立设置 4 档描边宽度（2px / 4px / 8px / 50px）	多为固定宽度
💡 可控强度	每个物体独立设置 4 档高亮强度（×1 / ×16 / ×32 / ×64）	多为固定强度
⚡ 可控闪烁 / 呼吸	每个物体可单独开启闪烁或呼吸效果，运行时任意切换	❌ 多不支持

关键点：颜色、线宽、强度、闪烁、呼吸可以自由组合，互不影响——例如物体 A 显示「蓝色 + 4px + 强 + 闪烁」，物体 B 同时显示「红色 + 8px + 弱 + 呼吸」。

具体如何用一个整数编码这 4 个属性，见下方核心算法章节。

---

🖼️ 效果展示

---

🧮 核心算法：CustomStencil 位打包

用一个整数（CustomStencil，0~255）打包 4 个属性，实现多模型各自不同的高亮效果。

一、核心思想

CustomStencil 是 0~255 的整数，二进制即 8 个 bit。按位置划分成 4 个字段，每个字段存一种属性：

bit 位置:   b7   b6 b5   b4 b3   b2 b1 b0
含义:      闪烁 | 强度   | 线宽   | 颜色
位数:      1位  |  2位   |  2位   | 3位
取值范围:   0~1 |  0~3   |  0~3   | 0~7

字段	占用位	位数	取值数	含义
ColorID（颜色）	bit0~2	3	0~7（8 种）	高亮颜色
ThicknessID（线宽）	bit3~4	2	0~3（4 档）	描边宽度
BrightnessID（强度）	bit5~6	2	0~3（4 档）	高亮强度
Blink（闪烁）	bit7	1	0/1	是否闪烁

类比：身份证号 110101199001011234 里前 6 位是地区、中间 8 位是生日——用位置区分含义。这里同理，用二进制的"位置"区分 4 个属性。

二、编码（设置 Stencil 值）

Stencil = ColorID + ThicknessID × 8 + BrightnessID × 32 + Blink × 128

系数 8、32、128 是"左移到位"的体现：

字段	左移位数	系数
ColorID	0 位	× 1
ThicknessID	3 位	× 8（2³）
BrightnessID	5 位	× 32（2⁵）
Blink	7 位	× 128（2⁷）

三、解码（从 Stencil 拆出 4 个值）

字段	公式	二进制含义
ColorID	Stencil % 8	取最低 3 位
ThicknessID	Floor(Stencil / 8) % 4	右移 3 位后取低 2 位
BrightnessID	Floor(Stencil / 32) % 4	右移 5 位后取低 2 位
Blink	Floor(Stencil / 128)	右移 7 位

本质：% 取低位，Floor(÷n) 把高位"挪"下来再取——这就是二进制的"按位截取"。

四、完整示例

目标：「蓝色(2) + 线宽 4px(1) + 强度 32(2) + 闪烁(1)」

Stencil = 2 + 1×8 + 2×32 + 1×128 = 202

202 转二进制 = 11001010：

11001010
│││ ││││
│││ │││└── bit0 = 0 ┐
│││ ││└─── bit1 = 1 │ 颜色 = 010 = 2 ✓（蓝）
│││ │└──── bit2 = 0 ┘
│││ └───── bit3 = 1 ┐ 线宽 = 01 = 1 ✓（4px）
││└─────── bit4 = 0 ┘
│└──────── bit5 = 0 ┐ 强度 = 10 = 2 ✓（32）
└───────── bit6 = 1 ┘
           bit7 = 1 → 闪烁 = 1 ✓

解码反向验证：

ColorID      = 202 % 8 = 2                    ✓
ThicknessID  = Floor(202 / 8) % 4 = 25 % 4 = 1  ✓
BrightnessID = Floor(202 / 32) % 4 = 6 % 4 = 2  ✓
Blink        = Floor(202 / 128) = 1             ✓

五、一句话总结

• 编码：Stencil = ColorID + ThicknessID×8 + BrightnessID×32 + Blink×128
• 解码：% 取低位，Floor(÷n) 右移后取位
• 本质：8 位二进制数的"位置" = 4 个属性的"字段"

---

📁 项目结构

OutLineDemo/
├── OutLineDemo.uproject          # 项目文件（EngineAssociation 5.3）
├── Config/                       # 项目配置（含 CustomDepth=3 后处理相关设置）
├── Content/
│   ├── Materials/
│   │   ├── BP_OutLineActor       # 描边 Actor 蓝图：负责给目标物体设置 CustomStencil 值
│   │   ├── M_Outline             # 后处理描边材质
│   │   ├── M_Outline_Inst        # 描边材质实例
│   │   ├── MF_CalcSingleOffsetDepth  # 材质函数：计算单个偏移方向的深度
│   │   └── MF_CalcAllOffsetDepths    # 材质函数：计算全方向偏移深度（描边核心）
│   └── MainMap.umap              # 演示关卡
├── README.md                     # 本说明文档（含核心算法详解）
└── images/
    ├── RenderEffect.jpg          # 效果图
    ├── setting.jpg               # 配置截图：开启 Custom Depth-Stencil Pass
    └── postprocess.jpg           # 配置截图：Post Process Volume 设置

---

⚙️ 配置说明（重要）

描边要生效，需要三步配置。本项目已在 Config/DefaultEngine.ini 里预设好了第一步（r.CustomDepth=3），打开即可运行；下面说明方便你在自己的项目里复刻。

1️⃣ 开启「自定义深度-模板」（Custom Depth-Stencil Pass）

进入 Edit（编辑）→ Project Settings（项目设置）→ Rendering（渲染）→ Postprocessing（后处理），找到 Custom Depth-Stencil Pass（自定义深度-模板通道），将其从 Disabled（禁用） 改为 Enabled with Stencil（启用带模板）。

对应的引擎配置项是 r.CustomDepth=3，本项目已预设好，无需手动修改。

2️⃣ 把描边材质挂到 PostProcessVolume

在场景中放置 Post Process Volume（后处理体积），将 M_Outline（或材质实例 M_Outline_Inst）加入其 Post Process Materials 列表，并勾选 Infinite Extent (Unbound)（无限范围），让效果覆盖全屏。

3️⃣ 为目标物体设置 Stencil 值

选中要描边的物体，在 Details（细节） 面板中：

• 勾选 Render CustomDepth Pass（渲染自定义深度通道）；
• 在 Custom Depth Stencil Value（自定义深度模板值） 中填入按公式计算出的值（例如 202）。

也可以直接使用蓝图 BP_OutLineActor 在运行时批量设置。

---

🚀 快速上手

1. 环境要求：Unreal Engine 5.3（支持 DX12 / SM6）。
2. 克隆/下载本项目后，右键 OutLineDemo.uproject → Generate Visual Studio project files（可选）或直接打开。
3. 打开 MainMap.umap，运行即可看到演示效果。
4. 应用到自己的物体：参见上方配置说明，按算法公式 Stencil = ColorID + ThicknessID×8 + BrightnessID×32 + Blink×128 设置 Custom Depth Stencil Value，即可在运行时控制该物体的描边颜色、宽度、强度与闪烁。

---

⚠️ 版本兼容性说明（重要）

本项目材质中使用了 Switch 节点，该节点是 UE 5.2 才引入的（5.1 及更早版本中不存在此节点）。

引擎版本	说明
UE 5.2 及以上	✅ 直接打开即可使用，无需额外处理
UE 5.1 及更早	❌ 材质中找不到 Switch 节点，需要用 If 节点手动判断实现同样的逻辑（按 Stencil 值逐段比较，输出对应的颜色 / 线宽 / 强度参数）

项目本身以 5.3 开发，理论上向上兼容（更高版本的 UE 均可正常打开运行）；低版本只需替换 Switch 节点为 If 判断即可。

---

🛠️ 技术栈

• Unreal Engine 5.2 及以上
• CustomDepth / CustomStencil 后处理
• 材质函数（Material Function）模块化实现
• 蓝图（Blueprint）运行时控制

---

📄 开源说明

本项目基于 MIT 协议 完全开源（详见 LICENSE），欢迎 Star ⭐ / Fork / Issue / PR。

如果你觉得这个项目对你有帮助，欢迎一键三连（Star + Watch + Fork）支持作者！