1. 项目概述为什么我们需要一个“会呼吸”的3D电子围栏在三维可视化、数字孪生或者游戏开发中我们常常需要划定一个虚拟的“禁区”或“安全区”。传统的做法可能是在地面上贴一张2D的贴图或者放一个静态的模型但这往往缺乏直观的视觉反馈和动态交互能力。想象一下你需要在地图上标记一个施工危险区域或者在一个虚拟展厅里划定参观路线一个能够实时响应、边界清晰、视觉效果醒目的3D电子围栏就显得至关重要。这个项目要做的就是利用Unity引擎快速构建一个可交互、带动态视觉效果、性能高效的3D电子围栏系统。它不仅仅是几条线而是一个“活”的边界当物体比如玩家角色、车辆靠近时围栏可以高亮、脉动甚至发出警告你可以通过代码动态修改它的形状和大小它的视觉效果由Shader驱动不依赖大量网格面片性能开销极低。网上很多教程要么只讲Shader要么只讲交互逻辑把两者割裂开。今天我们就来把它们拧成一股绳从设计思路到Shader代码手把手带你用5分钟的核心流程搭建出这个实用的系统。2. 核心架构设计如何让围栏既“好看”又“好用”一个健壮的3D电子围栏系统不能只靠一个炫酷的Shader它需要一套清晰的架构来支撑动态生成、交互响应和高效渲染。我的设计思路是“数据驱动渲染事件驱动交互”。2.1 组件职责分离我将系统拆分为三个核心组件各司其职FenceDataManager数据管理器这是系统的大脑。它持有一个ListVector3用于存储定义围栏形状的所有顶点坐标世界空间。所有对围栏形状的修改如添加点、删除点、插入点、清空都通过这个管理器进行。它负责维护数据的唯一真实性。FenceMeshGenerator网格生成器这是系统的骨架。它监听FenceDataManager的数据变化。一旦顶点列表更新它立刻根据这些点动态生成一个3D的“墙”状网格。这个网格的顶部和底部是开放的形成围栏的立体边界。生成网格时它会同时计算每个顶点的UV坐标用于Shader采样和到中心点的距离等信息并将这些数据写入顶点色或UV通道传递给Shader。FenceShaderControllerShader控制器 交互器这是系统的皮肤和神经。它挂载在拥有FenceMeshGenerator生成的网格的GameObject上。它内置了与围栏交互的所有逻辑视觉效果控制通过MaterialPropertyBlock动态向Shader传递参数控制围栏的基础颜色、高亮颜色、脉动速度、发光强度等。交互检测使用OnTriggerEnter/Stay/Exit或物理射线检测判断其他物体是否进入、离开或在围栏区域内。触发时可以改变Shader参数如切换为高亮状态并抛出C#事件如OnFenceEntered让外部业务逻辑如播放警报音效、显示UI提示能够响应。为什么用MaterialPropertyBlock而不是直接修改Material这是关键的性能优化点。一个Material实例被多个物体共享时直接修改material.color会触发一次材质实例化Material Instantiation产生新的材质球增加Draw Call和内存。而MaterialPropertyBlock允许我们单独修改某个渲染器的着色器属性不会破坏材质共享性能开销极小。这对于需要频繁更新视觉效果的动态物体至关重要。2.2 动态网格生成策略围栏的形状是多变的可能是矩形、多边形甚至是不规则形状。我们的网格生成器必须能处理任意数量的顶点。核心算法是创建侧边面遍历顶点列表将每两个相邻的顶点points[i]和points[i1]作为围栏的一条边。为这条边创建两个三角形构成一个垂直的四边形面片。假设围栏高度为height那么四个角的世界坐标分别是(points[i], 0),(points[i1], 0),(points[i1], height),(points[i], height)。处理闭合为了让围栏首尾相连我们需要额外处理最后一个顶点和第一个顶点构成的边。传递Shader所需数据在生成顶点时我们需要为每个顶点计算一些附加数据并通过Mesh的顶点数据通道如UV2、顶点色传递给Shader。一个常用的技巧是将顶点在围栏“路径”上的归一化位置0到1和到某个参考点的距离编码到UV中。例如UV.x可以存储该顶点在总路径长度上的百分比UV.y可以存储一个随机值或用于其他效果。这种动态生成的方式使得我们只需在数据变化时重建一次网格渲染时则完全依赖高效的Shader避免了每帧进行复杂CPU计算的性能瓶颈。3. 核心Shader效果开发用代码“绘制”发光的边界Shader是整个围栏视觉效果的核心。我们将编写一个Surface Shader或Unlit Shader根据项目需求实现以下核心效果基础颜色、动态高亮、边缘发光和脉动动画。这里我提供一个基于Unity URPUniversal Render Pipeline的简化版Shader代码框架并解释其原理。3.1 Shader输入与属性定义首先我们需要定义在材质面板和C#脚本中可以调节的属性。Shader Custom/InteractiveFence { Properties { _BaseColor (Base Color, Color) (0.1, 0.5, 1.0, 0.7) _HighlightColor (Highlight Color, Color) (1.0, 0.2, 0.1, 1.0) _EmissionIntensity (Emission Intensity, Range(0, 5)) 2.0 _PulseSpeed (Pulse Speed, Range(0, 5)) 1.0 _PulseAmplitude (Pulse Amplitude, Range(0, 0.5)) 0.1 _FresnelPower (Edge Fresnel Power, Range(1, 10)) 5.0 _FresnelIntensity (Edge Fresnel Intensity, Range(0, 5)) 1.0 // 一个0-1的参数用于混合基础色和高亮色。0为完全基础色1为完全高亮色。 _HighlightBlend (Highlight Blend, Range(0, 1)) 0.0 } SubShader { Tags { RenderTypeTransparent QueueTransparent RenderPipelineUniversalPipeline} Blend SrcAlpha OneMinusSrcAlpha ZWrite Off Cull Back Pass { HLSLPROGRAM #pragma vertex vert #pragma fragment frag #include Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl struct Attributes { float4 positionOS : POSITION; float3 normalOS : NORMAL; float2 uv : TEXCOORD0; // 假设我们通过UV2传递了路径位置信息 float2 uv2 : TEXCOORD1; }; struct Varyings { float4 positionHCS : SV_POSITION; float2 uv : TEXCOORD0; float pathPosition : TEXCOORD1; // 从uv2.x获取 float3 normalWS : TEXCOORD2; float3 viewDirWS : TEXCOORD3; float3 positionWS : TEXCOORD4; }; // 声明与Properties对应的变量 half4 _BaseColor; half4 _HighlightColor; half _EmissionIntensity; half _PulseSpeed; half _PulseAmplitude; half _FresnelPower; half _FresnelIntensity; half _HighlightBlend; Varyings vert (Attributes IN) { Varyings OUT; VertexPositionInputs vertexInput GetVertexPositionInputs(IN.positionOS.xyz); OUT.positionHCS vertexInput.positionCS; OUT.positionWS vertexInput.positionWS; VertexNormalInputs normalInput GetVertexNormalInputs(IN.normalOS); OUT.normalWS normalInput.normalWS; OUT.viewDirWS GetWorldSpaceNormalizeViewDir(OUT.positionWS); OUT.uv IN.uv; OUT.pathPosition IN.uv2.x; // 假设路径信息存储在uv2.x return OUT; } half4 frag (Varyings IN) : SV_Target { // 1. 计算菲涅尔边缘光 (Fresnel Edge) float fresnel pow(1.0 - saturate(dot(IN.normalWS, IN.viewDirWS)), _FresnelPower); float3 edgeGlow fresnel * _FresnelIntensity * _BaseColor.rgb; // 2. 计算脉动效果 (Pulse) // 使用路径位置作为偏移让脉动波沿着围栏移动而不是全局同步闪烁。 float pulse sin(_Time.y * _PulseSpeed IN.pathPosition * 6.283) * 0.5 0.5; float pulseEffect pulse * _PulseAmplitude; // 3. 混合基础色和高亮色 float3 finalColor lerp(_BaseColor.rgb, _HighlightColor.rgb, _HighlightBlend); // 叠加边缘光和脉动效果 finalColor edgeGlow; finalColor pulseEffect; // 4. 计算最终输出颜色 half4 col; col.rgb finalColor * _EmissionIntensity; // 乘以自发光强度 // Alpha通道基础透明度 边缘光贡献增加透明度 高亮混合时增加透明度 col.a _BaseColor.a fresnel * 0.3 _HighlightBlend * 0.2; col.a saturate(col.a); // 钳制到0-1 return col; } ENDHLSL } } }3.2 Shader效果原理解析菲涅尔边缘光 (Fresnel Effect)这是实现“发光边框”的关键。其原理是当观察方向与物体表面法线方向越接近垂直即看向边缘时效果越强。公式1.0 - saturate(dot(N, V))计算了法线N与视线V的夹角余弦值的反值夹角越大越边缘值越接近1。通过_FresnelPower控制效果的衰减速度值越大发光越集中在极边缘。沿路径脉动 (Moving Pulse)简单的全局sin(_Time.y)会让整个围栏同步闪烁很死板。我们将IN.pathPosition顶点在围栏路径上的位置0到1乘以2π约6.283作为相位偏移加入时间计算。这样正弦波会沿着围栏路径传播形成一种“能量流动”或“扫描”的视觉效果动态感更强。动态颜色混合_HighlightBlend这个参数是整个交互系统的视觉纽带。在C#脚本的FenceShaderController中当检测到物体进入围栏区域我们可以使用MaterialPropertyBlock将_HighlightBlend从0平滑过渡到1从而将围栏颜色从_BaseColor切换为_HighlightColor。离开时再过渡回0。实操心得善用顶点数据通道把pathPosition信息预计算并存入UV2是Shader中实现复杂、个性化效果的基础。除了用于脉动你还可以用它来做渐变色根据路径位置插值颜色、显示距离中心的距离需要额外计算并存入等。在FenceMeshGenerator中多花点功夫准备数据能让Shader编写事半功倍效果也更独特。4. 交互事件系统实现让围栏“感知”世界有了好看的皮囊接下来要赋予它灵魂——交互能力。FenceShaderController脚本将承担这个职责。4.1 交互检测的两种方式根据你的项目需求可以选择不同的检测方式触发器检测 (Trigger)在围栏GameObject上添加Mesh Collider或根据网格生成的Collider并设置为Is Trigger。然后在FenceShaderController中实现OnTriggerEnter、OnTriggerStay、OnTriggerExit方法。这种方式简单直接适用于需要持续感知区域内物体的场景如持续伤害区域、 buff区域。public class FenceShaderController : MonoBehaviour { public event System.ActionGameObject OnObjectEnteredFence; public event System.ActionGameObject OnObjectExitedFence; private Renderer _renderer; private MaterialPropertyBlock _mpb; private int _highlightBlendId; void Start() { _renderer GetComponentRenderer(); _mpb new MaterialPropertyBlock(); _highlightBlendId Shader.PropertyToID(_HighlightBlend); // 初始化状态 _renderer.GetPropertyBlock(_mpb); _mpb.SetFloat(_highlightBlendId, 0f); _renderer.SetPropertyBlock(_mpb); } private void OnTriggerEnter(Collider other) { // 过滤掉不需要交互的层如Ignore Raycast if (((1 other.gameObject.layer) interactionLayerMask) ! 0) { // 1. 触发视觉反馈 StartCoroutine(BlendHighlight(1.0f, 0.5f)); // 在0.5秒内过渡到高亮 // 2. 通知外部系统 OnObjectEnteredFence?.Invoke(other.gameObject); Debug.Log(${other.name} entered the fence.); } } private void OnTriggerExit(Collider other) { if (((1 other.gameObject.layer) interactionLayerMask) ! 0) { StartCoroutine(BlendHighlight(0.0f, 0.5f)); // 在0.5秒内过渡回基础状态 OnObjectExitedFence?.Invoke(other.gameObject); } } IEnumerator BlendHighlight(float targetValue, float duration) { _renderer.GetPropertyBlock(_mpb); float startValue _mpb.GetFloat(_highlightBlendId); float time 0; while (time duration) { time Time.deltaTime; float t time / duration; // 可以使用更平滑的插值函数如Mathf.SmoothStep float currentValue Mathf.Lerp(startValue, targetValue, t); _mpb.SetFloat(_highlightBlendId, currentValue); _renderer.SetPropertyBlock(_mpb); yield return null; } // 确保最终值准确 _mpb.SetFloat(_highlightBlendId, targetValue); _renderer.SetPropertyBlock(_mpb); } }射线检测 (Raycast)如果你需要更精确的控制比如只检测点击、或者检测特定高度的穿越可以在Update或使用物理查询中从摄像机或物体发射射线检测是否与围栏碰撞器相交。这种方式更灵活但CPU开销相对较大需要管理检测频率。4.2 事件驱动架构注意上面代码中定义的OnObjectEnteredFence和OnObjectExitedFence这两个C#事件。这是非常重要的设计模式。它实现了观察者模式让围栏交互逻辑与具体的业务逻辑解耦。围栏系统只负责“感知”和“提供视觉反馈”它不知道也不关心进入的是什么物体以及外部要做什么。外部系统如游戏管理器、UI控制器、音效管理器只需要订阅这些事件。当事件触发时它们执行自己的逻辑比如播放“闯入警报”音效、在UI上显示警告文字、记录日志等。这样做的好处是系统模块化易于维护和扩展。未来如果你想增加新的交互反馈比如震动手柄只需要在订阅事件的地方添加代码而无需修改FenceShaderController本身。5. 性能优化技巧确保流畅运行的关键一个视觉效果华丽的系统必须兼顾性能。以下是针对这个3D电子围栏系统的几个关键优化点5.1 网格与碰撞体优化动态批处理 (Dynamic Batching)确保围栏材质使用了相同的Shader并且网格顶点数不太多通常小于300个顶点。Unity会自动尝试对动态物体进行批处理减少Draw Call。使用MaterialPropertyBlock而不是单独Material实例是满足此条件的前提。碰撞体简化如果围栏形状复杂使用Mesh Collider可能会带来较高的物理开销。可以考虑使用多个简单的Box Collider或Capsule Collider来近似复杂形状。如果必须用Mesh Collider勾选Convex选项如果是凸体并考虑使用简化后的网格作为碰撞体。对于仅用于触发检测的围栏可以将其物理层设置为一个专用的层如“TriggerOnly”并在物理设置中减少与该层的碰撞检测计算。5.2 Shader优化精度选择在Shader中对于颜色、范围在0-1的参数使用half精度通常足够比float更快。对于世界坐标、视角方向等使用float。避免复杂运算sin,pow等函数在片段着色器中调用开销较大。如果效果允许可以考虑在顶点着色器中计算然后插值到片元。或者使用查找表LUT来替代实时计算。Alpha混合开销透明物体Queue”Transparent”无法参与深度写入ZWrite Off且渲染顺序靠后可能导致Overdraw一个像素被绘制多次。应尽量减少透明区域或在不必要时关闭透明如俯视视角下围栏顶部不可见时。5.3 代码逻辑优化协程代替Update像BlendHighlight这样的渐变效果使用协程比在Update中每帧判断状态更高效清晰。对象池管理如果场景中需要频繁创建和销毁大量围栏如RTS游戏中的临时标记务必使用对象池来复用GameObject、Mesh和MaterialPropertyBlock避免频繁的实例化和垃圾回收GC。按需更新FenceMeshGenerator只在顶点数据真正发生变化时才重建网格。FenceShaderController也只在交互状态改变时才更新MaterialPropertyBlock。避免每帧进行无意义的操作。6. 实际应用案例与扩展思路这个3D电子围栏系统绝不仅限于“围栏”本身。它的核心是一套动态生成边界、可交互、带高级视觉效果的解决方案可以变形应用到无数场景中。游戏开发技能范围指示器MOBA游戏中英雄施放技能时的范围圈。可以根据技能等级动态调整大小敌人进入时高亮。安全区/毒圈大逃杀类游戏的经典元素。围栏可以随时间平滑收缩Shader可以模拟能量场的扰动效果。建造与规划模拟经营或RTS游戏中放置建筑时的绿色/红色合法性预览框。工业与数字孪生电子周界报警在工厂、仓库的3D监控视图中实时显示安全区域当人或设备非法闯入时围栏变红并闪烁同时触发报警系统。虚拟巡检路线为巡检人员规划可视化路线偏离路线时给予提示。设备工作范围展示机械臂、吊车的活动范围防止虚拟碰撞。扩展效果增强数据驱动高度让围栏不同段的高度由数据控制如表示不同海拔的警戒级别。贴花与纹理在Shader中采样一张噪声贴图让发光边缘产生不均匀的“噪波”或“裂纹”效果更具科技感。与后处理结合当围栏高亮时可以启用一个全屏的后处理效果如轻微的全屏泛红或模糊增强警示感。空间扭曲效果在围栏表面使用法线贴图或顶点偏移模拟一种热浪或能量场导致的空间扭曲感。我在一个智慧园区项目中实际应用了这套系统。最初客户只是想要静态的2D区域划分图当我们演示了这个可以实时响应人员闯入、带有脉动光效的3D围栏后他们立刻被这种直观、高效的展示方式打动。这让我深刻体会到技术实现不仅要可靠更要创造超出预期的体验价值。你可以从最基础的版本开始先实现动态生成和基础高亮然后再逐步加入脉动、流动光效等高级特性最终让它成为你项目中的一个亮眼且实用的功能模块。