简介面向UE4/UE5开发者的模型交互高亮功能实现资源以UE5工程形式完整呈现鼠标点击选中模型并触发边缘高亮的可复用方案。资源包共485个文件以uasset资源资产材质、蓝图、umap关卡地图、ini配置文件及uproject工程文件为主整体体积673.69MB。已有4749人学习下载适合需要为项目增加选中反馈的交互设计师或引擎开发者。工程基于第一人称模板搭建包含自定义高亮材质利用发光颜色控制边缘亮度、射线碰撞检测蓝图、选中对象记录与状态切换逻辑等关键模块并将检测组件集成到角色蓝图中可直接在场景中运行验证。通过该工程可快速掌握UE5中点击选中高亮的完整实现链路便于迁移到其他交互场景。1. 鼠标点击选中边缘高亮先讲清楚UE5工程里要做的三件事做过虚拟展厅、数字孪生或编辑器工具的开发者多半接到过这样的需求场景里几十个模型鼠标点一下选中的模型边缘亮一圈。第一反应是给模型换一个带描边效果的自发光材质但换完材质会发现轮廓要么糊成一片要么选中状态和普通状态切起来非常生硬。边缘高亮真正可行的做法是把“谁被选中”和“边缘怎么画”分开处理用 Custom Depth/Stencil 缓冲标记被选中的物体再用后处理材质只对这些像素做深度差描边。这篇笔记按 UE5 工程落地顺序讲清楚原理、点击检测、材质参数以及几种最常见的翻车现场适合做交互展厅、数字孪生和资产展示类项目的 UE 开发者照着复现。2. 边缘高亮原理与工程配置Custom Depth/Stencil 是绕不开的那条路2.1 三种边缘高亮方案的取舍常见实现边缘高亮的路线有三条选错后面会走不少弯路。第一种是给物体准备一个带描边的材质运行时动态替换或被选中物体的材质。这种方案在小场景、物体数量少的时候能用但问题在于替换材质会打断原来的动态材质实例假如这个物体本身有 Color 渐变、透明度动画或者贴图混合换材质后这些动态参数全部要重新初始化。而且描边是“长”在模型UV上的一旦模型布线不均匀描边宽度跟着变放大缩小时边缘粗细也不一致。第二种是整屏后处理描边对 SceneDepth 或 SceneNormal 统一做边缘提取给整个场景画轮廓。这种方案适合做风格化渲染或“透视描边”但没法区分“哪个物体被选中”。你可以在深度阈值上做文章让选中物体附近的边缘更强但控制粒度非常粗糙两个物体靠在一起时根本分不开。第三种就是本标题对应的方案Custom Depth/Stencil 标记选中物体再用后处理材质只对标记区域做边缘检测。它不修改模型原材质选中与否只取决于物体上每一个 PrimitiveComponent 的两个属性是否写入Custom Depth、写入的Stencil值是多少。后处理材质读这张缓冲就能精确知道哪些像素是被选中的物体然后再对这些像素做深度差边缘提取。三种方案对比下来第三个是维护成本最低、效果最稳定的UE4 从 4.20 左右开始就支持整套流程UE5 工程里改动也不大。2.2 Custom Depth / Stencil 的工作原理Custom Depth 是一条独立于主场景的渲染通道。正常绘制完场景之后引擎把所有开启了 Custom Depth 的物体再渲染一遍输出到一张独立的深度缓冲里同时每个像素还会写入一个 8 位的 Stencil 值也就是组件上的 Custom Depth Stencil Value。后处理材质通过 SceneTexture 节点读这张缓冲判断当前像素是不是被选中的物体。这里有个关键认知Custom Depth Pass 和物体原本的材质完全无关。你不需要为“选中状态”单独准备一套材质也不需要在蓝图里做材质切换。只要在代码或蓝图里把目标模型的 UPrimitiveComponent 的 Set Render Custom Depth 置为 true再把 Stencil 值写成一个固定值剩下的事情全部交给后处理材质去画。用 C 控制单个组件的写法很简单// 把选中物体的所有PrimitiveComponent标记到CustomDepth for (UPrimitiveComponent* Prim : PrimComps) { Prim-SetCustomDepthStencilValue(255); // 写入模板值255 Prim-SetRenderCustomDepth(true); // 开启该物体的CustomDepth写入 }逻辑说明SetCustomDepthStencilValue 控制写入 Stencil 缓冲的值SetRenderCustomDepth 控制是否写入。这里把 Stencil 值写成 255 而不是 1是为了和后处理材质里的 SceneStencil 值对齐。材质里读到的 Stencil 是归一化到 0 到 1 的浮点数写入 255 读出来约等于 1.0如果你写 1读出来只有 0.0039后处理材质做比较时很难命中。2.3 工程配置与渲染设置UE5 工程默认关闭 Custom Depth-Stencil Pass第一步必须去项目设置里打开路径是 Project Settings Rendering Post Processing Custom Depth-Stencil Pass选择 Enabled with Stencil。注意不要选 Enabled without Stencil后者只写深度不写模板后处理材质拿不到选中标记。如果项目已经在运行想临时验证是不是这个开关没打开可以用控制台命令r.CustomDepth 3这个命令用于运行时临时把 Custom Depth 和 Stencil 同时打开方便快速判断问题出在渲染配置还是出在碰撞检测。它只影响当前运行实例打包后的项目仍然以项目设置里的开关为准所以最终一定要回 Project Settings 里改。完成渲染设置后还要准备一个 Post Process Volume。在场景里放一个 Post Process Volume细节面板勾选 Infinite Extent (Unbound)确保全屏生效。然后创建后处理材质把材质域 Material Domain 改为 Post Process混合位置 Blendable Location 选 After Tonemapping。这样描边颜色不会再被 Tone Mapping 压掉高亮颜色和你在材质里调出来的数值更接近。至于 Stencil 或深度边缘检测是材质内部 SceneTexture 节点的事下一章会详细讲。3. 鼠标点击检测与选中对象管理从射线命中到高亮状态切换3.1 碰撞设置与鼠标可见性鼠标点击选中模型本质是发射一条射线从摄像机经过鼠标屏幕坐标打到场景里然后取第一个命中的 Actor。最常见的实现是 PlayerController 的 Get Hit Result Under Cursor by Channel 节点它直接拿鼠标位置做射线检测不需要你自己处理屏幕坐标到世界的换算。要让这条射线稳定命中模型两个前置条件必须满足。第一Player Controller 的 Show Mouse Cursor 要设为 true否则游戏里看不到鼠标射线位置无从谈起。第二被点击的模型要能响应 Visibility 通道的射线检测。默认情况下 Static Mesh Actor 的碰撞预设是 Block AllVisibility 通道是 Block可以直接命中。但如果你导入了美术给的模型碰撞盒没生成或者碰撞预设被改成了 Overlap/ignore点击就会穿过去。检查方法是选中模型看 Details 面板里 Collision Enabled 是否为 Query Only 或 Query and PhysicsCollision Preset 里的 Visibility 通道是否为 Block。如果你做的是射击游戏那种默认锁鼠标的项目还要在处理点击之前调用 Set Input Mode Game and UI并设置鼠标可见否则射线拿到的是上一帧的残留位置点击感会很差。3.2 蓝图版点击检测与高亮切换流程蓝图里的整体逻辑不复杂核心是一条输入事件加一个函数。先在项目设置里创建 Input Action比如 IA_Select绑定到鼠标左键。在关卡蓝图或玩家控制器蓝图里用左键事件触发一个自定义事件 SelectActorUnderCursor。这个自定义事件里连接 Get Hit Result Under Cursor by ChannelTrace Channel 选 Visibility然后判断 Hit Actor 是否有效。如果命中的 Actor 和当前已经选中的 Actor 不同就先把上一个选中物体的高亮清掉再给新命中的 Actor 开启高亮。清掉高亮的做法是把所有 PrimitiveComponent 的 Set Render Custom Depth 设为 falseSet Custom Depth Stencil Value 设为 0。开启高亮则反过来Stencil 写 255Render Custom Depth 设 true。还有一个细节高亮状态和 UI 显示要分开处理。推荐在蓝图或 C 里定义一个动态多播委托 OnSelectionChanged参数是 NewActor 和 OldActor。UI 的标题显示、音效播放、属性面板刷新都订阅这个委托而不是在点击事件里直接写 UI 逻辑。这样以后加多选、加右键菜单选中逻辑不用改。UE5 的多播委托在蓝图里表现为 Event Dispatcher用法一样只是用蓝图节点连接更直观。3.3 用 C 写一个可复用的选择组件SelectionComponent当场景里可交互模型超过几十个或者你需要在运行时批量切换高亮纯蓝图节点会显得很散。我会把这些逻辑抽成一个 UActorComponent挂到玩家控制器或交互 Pawn 上蓝图里只需要调用一个函数。// SelectionComponent.h #pragma once #include CoreMinimal.h #include Components/ActorComponent.h #include SelectionComponent.generated.h DECLARE_DYNAMIC_MULTICAST_DELEGATE_TwoParams(FOnSelectionChanged, AActor*, NewActor, AActor*, OldActor); UCLASS(ClassGroup (Interaction), meta (BlueprintSpawnableComponent)) class YOURPROJECT_API USelectionComponent : public UActorComponent { GENERATED_BODY() public: UPROPERTY(BlueprintAssignable, Category Selection) FOnSelectionChanged OnSelectionChanged; UFUNCTION(BlueprintCallable, Category Selection) void SelectActorUnderCursor(APlayerController* PC); UFUNCTION(BlueprintCallable, Category Selection) void SetSelectedActor(AActor* NewActor); protected: void ApplyHighlight(AActor* Actor, bool bHighlight); UPROPERTY() TObjectPtrAActor CurrentSelected; };// SelectionComponent.cpp #include SelectionComponent.h #include Components/PrimitiveComponent.h #include GameFramework/PlayerController.h void USelectionComponent::SelectActorUnderCursor(APlayerController* PC) { if (!PC) { return; } FHitResult Hit; PC-GetHitResultUnderCursorByChannel(ECC_Visibility, false, Hit); SetSelectedActor(Hit.GetActor()); } void USelectionComponent::SetSelectedActor(AActor* NewActor) { if (NewActor CurrentSelected) { return; } AActor* OldActor CurrentSelected; if (OldActor) { ApplyHighlight(OldActor, false); } CurrentSelected NewActor; if (NewActor) { ApplyHighlight(NewActor, true); } OnSelectionChanged.Broadcast(NewActor, OldActor); } void USelectionComponent::ApplyHighlight(AActor* Actor, bool bHighlight) { if (!Actor) { return; } TInlineComponentArrayUPrimitiveComponent* PrimComps; Actor-GetComponents(PrimComps); for (UPrimitiveComponent* Prim : PrimComps) { if (!Prim) { continue; } if (bHighlight) { Prim-SetCustomDepthStencilValue(255); Prim-SetRenderCustomDepth(true); } else { Prim-SetCustomDepthStencilValue(0); Prim-SetRenderCustomDepth(false); } } }逻辑说明SelectActorUnderCursor 负责射线检测SetSelectedActor 负责状态切换ApplyHighlight 负责实际修改组件参数。三个函数各司其职以后想改成“鼠标悬停高亮、点击选中”只要把 SelectActorUnderCursor 的调用点改到悬停事件上。想改成按住 Ctrl 多选就在 SetSelectedActor 里加一个参数控制是否追加选择。参数说明主要有三个。ECC_Visibility 表示射线检测使用 Visibility 通道默认场景里大多数模型都能被命中省去单独配置 Object Channel 的步骤。GetHitResultUnderCursorByChannel 的第二个参数设为 false表示只检测简单碰撞性能更好。有些美术模型碰撞体特别复杂或者要点击到镂空模型里的空心结构再改成 true 做复杂碰撞检测。CustomDepthStencilValue 写 255而不是常见的 1原因前面说过是为了让后处理材质里的 SceneStencil 值刚好等于 1.0不用做额外换算。3.4 空白点击与选中状态清理射线打空时Hit.GetActor() 返回空指针SetSelectedActor 里把 NewActor 设为 nullptr同时会把上一个选中物体的高亮清掉OnSelectionChanged 广播的 NewActor 是空值。这样 UI 那边收到空 Actor就知道该隐藏属性面板了。很多项目第一次做这个功能只处理了“点到物体”的情况没处理“点到空白处”结果选中的物体永远亮着。这个组件在 SetSelectedActor 的入口做了 NewActor 为空的处理问题自然消失。蓝图版本也建议保留同样的分支点击空白时把上一个高亮重置。4. 后处理描边材质与参数调节边缘宽度、颜色、防穿透4.1 后处理材质的最小节点连接后处理材质是整个高亮方案里最容易出效果也最容易翻车的部分。核心思路是先用 SceneStencil 识别哪些像素属于选中物体再做深度边缘检测只有同时满足“属于选中物体”和“处于边缘位置”的像素才输出描边色。在 UE5 材质编辑器里第一步创建一个 Post Process 材质域材质添加一个 SceneTexture 节点把 Scene Texture Id 设为 SceneStencil。这个节点的 R 通道输出选中物体的模板值。接着用 If 节点比较 SceneStencil 和常数 1.0相等输出 1不相等输出 0得到一个 Mask。注意这里常数值必须是 1.0对应 C 里写入的 Stencil 255。第二步做边缘检测。添加五个 SceneTexture 节点Scene Texture Id 都选 SceneDepth分别作为中心、左、右、上、下的深度采样。左右上下四个采样点要手动偏移 UV偏移量用一个 Constant2Vector 节点控制比如 X 偏移 0.002、Y 偏移 0。然后把中心深度和四个方向深度分别做 Abs 减法再把四个差值加起来得到 EdgeStrength。数值越大说明当前像素和周围深度差异越大越可能是边缘。第三步把 Mask 和 EdgeStrength 相乘得到一个权重值。最后输出节点的 EmissiveColor 连成PostProcessInput0 * (1 - 权重) OutlineColor * 权重。PostProcessInput0 是原始场景颜色这样非边缘像素保持原样边缘像素露出描边色。简单理解就是Mask 告诉你“这个像素是不是选中物体”EdgeStrength 告诉你“这个像素是不是轮廓”两者相乘才是最终描边权重。4.2 三个必调参数描边宽度、深度阈值、Stencil值参数设置直接决定效果是“一圈细边”还是“一团白雾”。下面这张表是我在多个 UE5 工程里验证过的起始值。参数控制内容参考起始值调大后表现OutlineColor描边颜色橙色RGB 约为 (1.0, 0.4, 0.1)颜色越亮越显眼但容易盖住模型细节OutlineThicknessUV偏移量0.002边缘变粗模型偏小时可能糊成一团DepthThreshold深度差阈值0.02能识别的边缘变多但细微褶皱也会被描边StencilValue与Stencil比较的常数1.0不等于实际写入值时高亮完全失效调 OutlineThickness 要注意它用的单位是 UV 偏移数值大小和屏幕分辨率、模型大小都有关系。建议做成 Scalar Parameter在材质实例里实时调而不是每次改动都回到材质编辑器里改节点。模型很大时 0.002 可能看不到边要适当加大模型很小、相机离得近时0.002 又可能把整个模型盖住。DepthThreshold 和边缘粗细是相反的调节方向。阈值调小更多深度差异会被判定为边缘描边更碎更细阈值调大只有深度跳变明显的位置才画边描边更干净但模型和背景深度接近的地方容易漏边。如果发现选中的模型放在深色地面上时边缘消失优先把阈值从 0.02 降到 0.01 试试而不是盲目加粗描边。StencilValue 这个参数最容易踩坑。材质里的 SceneStencil 输出的是 0 到 1 的浮点数C 里写 255材质里就匹配 1.0。如果你写的是 1材质里却拿 1.0 比较结果就是永远匹配不上。统一约定代码里 Stencil 写 255材质参数写 1.0。4.3 运行时切换颜色与 UI 联动描边颜色不一定固定一个色。有的项目要求“普通物体选中是橙色危险物体选中是红色”此时不一定要做两套后处理材质。可以把 OutlineColor 改成材质参数在蓝图里调用 Post Process Volume 的 Blendable 数组找到这个后处理材质用 Set Vector Parameter Value 修改颜色。更省事的办法是直接做几个后处理材质实例运行时切换 Blendable 数组里对应的实例索引。UI 联动方面使用第三章的 OnSelectionChanged 多播委托UI 只需要做两件事收到 NewActor 时刷新名称和属性收到空值时隐藏面板。这里我不建议在点击事件里直接 Get Actor Name 然后设置 TextBlock因为以后加“右键菜单”“双击打开”时这些逻辑会散落在多个蓝图里。统一走多播委托UI 侧只需要监听一个事件源。5. 避坑记录鼠标点击选中高亮的五种翻车现场与修复5.1 现象点击模型没有任何高亮反应射线检测好像完全失效原因通常是三个叠加鼠标没有可见化、模型碰撞预设不对、工程没开 Custom Depth-Stencil Pass。新手最容易忽略的是第三个项目设置里的开关默认关闭材质和 C 逻辑写得再正确也白搭。另一个隐蔽问题是碰撞预设如果模型的 Collision Enabled 被设为 No CollisionGetHitResultUnderCursorByChannel 直接穿过它。解决先跑起来按控制台波浪号键输入 r.CustomDepth 3确认高亮是否能出现。如果出现去 Project Settings 固化设置。如果还没反应检查 PlayerController 的 Show Mouse Cursor再检查模型组件的 Collision Preset确认 Visibility 通道是 Block。5.2 现象高亮变成整个模型填充色完全看不到边缘这是后处理材质里最常见的连线错误。如果你把 Mask 直接连到 EmissiveColor或者 EdgeStrength 没有参与计算那么所有选中物体的像素都会被描边色覆盖看起来像模型被整体染色了。另一个原因是 DepthThreshold 调得太大模型和背景之间深度差没有超过阈值边缘识别不出来只剩下内部区域的 Mask。解决检查材质连线最终输出必须是“原始场景颜色 * 非边缘权重 描边颜色 * 边缘权重”不能跳过 SceneDepth 那一路。然后把 DepthThreshold 先降到 0.01 验证确认边缘能出现后再慢慢调高。5.3 现象点了一个物体之后整个场景里的物体都带着描边原因是切换选中时没有清理上一个物体的高亮状态。如果代码里只是给新物体开启了 SetRenderCustomDepth(true)上一个物体的组件仍然在向 Custom Depth 缓冲写入后处理材质会认为所有写入 Stencil 值的像素都属于选中物体于是全部描边。解决在 SetSelectedActor 里先对 OldActor 调用 ApplyHighlight(false)再对新 Actor 调用 ApplyHighlight(true)。这里要特别强调遍历组件不能只重置第一个 UPrimitiveComponent有些模型由多个 Static Mesh Component 组成漏掉一个就会出现“这个物体没被选中但边缘还在”的诡异效果。5.4 现象高亮穿透墙面点到被墙挡住的模型原因是拿 Visibility 通道做射线检测时有些墙体模型的碰撞预设可能把 Visibility 设成了 Ignore射线直接穿过墙命中后面的物体。还有一种情况是半透明模型没有写入深度射线检测对半透明模型来说就像不存在一样这跟物理 Overlap 事件的“碰撞盒识别不到”是两回事别混在一起排查。解决如果项目中可交互物体类型很明确建议单独建一个 Object Channel比如定义为 Interactable把所有可交互模型的碰撞预设设置为 Block 这个通道。射线检测改用 GetHitResultUnderCursorByObjectType只检测 Interactable。这样墙体、地面、粒子特效无论怎么设碰撞都不会挡住点击射线。5.5 现象后处理材质连完 SceneTexture 后画面要么变黑要么全屏发白原因一材质里用 SceneTexture 读取了 SceneStencil但项目设置没开 Custom Depth-Stencil Pass缓冲是空的。原因二Post Process Volume 没有勾选 Infinite Extent材质只在 Volume 范围内生效站在范围外就看不到效果。原因三材质混合位置选错了放在 Before Tonemapping 时SceneDepth 的数值范围可能导致颜色被错误映射。解决确认项目设置里的 Custom Depth-Stencil Pass 为 Enabled with Stencil。把 Post Process Volume 的 Infinite Extent 勾上。材质域和混合位置重新检查一遍Post Process 材质域 After Tonemapping这两个缺一个都可能出现异常颜色。6. 进阶验证多选、触摸平台与性能基线做交互项目的人很快就会遇到多选需求。把 SelectionComponent 升级成多选有几个注意点用一个 TArray 保存当前选中集合而不是单个 CurrentSelectedCtrl 加左键点击时在 SetSelectedActor 里追加或移除而不是替换每次操作后广播整个数组的变更事件。ApplyHighlight 函数不用改它天然支持对任意 Actor 开关高亮。验证效果有个很实用的技巧编辑器视口里把 Buffer Visualization 切到 Custom Stencil能直接看到哪些物体写入了 Stencil。如果你看到选中物体是白色的其他物体是黑色的说明渲染链路已经通了。此时去调后处理材质参数会直观很多。性能方面边缘检测的采样次数是最主要的开销。四个方向的深度检测需要五个 SceneDepth 采样在低端显卡上全屏跑一遍并不便宜。如果项目目标平台是移动端建议把后处理材质的计算改成半分辨率或者用法线边缘替代深度边缘减少模型边缘对阈值的敏感度。用 ProfileGPU 看耗时如果这段后处理的 GPU 时间超过 2 毫秒优先降采样方向数量而不是降分辨率。我现在的习惯是每个交互工程的选中逻辑第一版一定先接 SelectionComponent 和后处理材质半成品跑通“点击变高亮”这条链路再调颜色和粗细。这一步通了后面加 UI、加音效、加多选都只是重复劳动。希望帮到你。本文还有配套的精品资源点击获取