1. 项目概述与核心价值最近在翻看一些科技公司的官网或者产品发布会经常能看到那种连接两个节点、带有流动光效的动态射线效果比如GitHub地球页面上那些连接全球开发者节点的炫酷线条。这种效果视觉冲击力强能清晰地表达“连接”与“数据流动”的概念。很多朋友第一反应可能是用WebGL的Three.js来实现毕竟前端领域这类案例很多。但如果你是一个Unity开发者正在做一个数据可视化大屏、科技感UI或者需要类似特效的游戏难道还要去学一套新东西吗完全不用。其实用Unity内置的LineRenderer组件配合一点基础的贝塞尔曲线数学我们就能在5分钟内复刻出同款甚至更酷的动态射线效果。这个方法不仅快而且因为是在Unity引擎内你可以轻松地将其与你的3D场景、UI系统或者游戏逻辑深度结合获得比网页端更强大的控制力和表现力。这个项目的核心就是利用LineRenderer来绘制线条用贝塞尔曲线算法来生成平滑、自然的路径再通过材质和Shader赋予其动态流动的光效。整个过程几乎不涉及复杂的第三方插件全是Unity原生或基础数学知识非常适合用来提升项目的视觉质感或者作为学习LineRenderer和曲线应用的实战案例。无论你是想做个炫酷的科技演示还是为你的游戏角色技能、传送门、能量光束寻找一个解决方案这套思路都能直接拿来用。2. 核心思路与方案选型要实现GitHub地球同款的动态射线我们可以将其拆解为三个核心环节路径生成、线条绘制和动态效果。下面我们来逐一拆解并说明为什么选择对应的技术方案。2.1 路径生成为什么是二次贝塞尔曲线路径决定了射线从哪里来到哪里去以及中间的“弧度”是怎样的。GitHub地球上的射线并非直线而是带有一定弧度的曲线这更符合在球面或空间中进行“跨越”连接的视觉直觉。直线 vs. 曲线直接用LineRenderer连接两个点画直线是最简单的但看起来会非常生硬和机械缺乏美感与动态感。而曲线特别是贝塞尔曲线能以非常简洁的方式定义一条平滑的路径。贝塞尔曲线的优势在众多曲线算法中我选择二次贝塞尔曲线作为起点原因有三点计算简单二次贝塞尔曲线只需要一个起点P0、一个终点P2和一个控制点P1。其公式为B(t) (1-t)² * P0 2*(1-t)*t * P1 t² * P2其中t在0到1之间变化。这个计算量对每帧更新来说可以忽略不计。控制直观通过调整控制点P1的位置你可以轻松控制曲线的“弯曲程度”和“弯曲方向”。想让曲线向上拱就把P1放在两点连线的上方想让曲线更平缓就让P1靠近连线中心。这种控制方式非常符合美术和设计的直觉。效果足够对于大多数表现“连接”、“飞跃”效果的动态射线二次贝塞尔曲线提供的单弧度已经能产生非常不错的效果。它比直线生动又比更高阶如三次的贝塞尔曲线更容易控制和预测。当然如果你的需求是更复杂的S形或波浪形路径可以升级到三次甚至更高阶贝塞尔曲线或者使用AnimationCurve来定义更复杂的路径函数。但对于我们“5分钟搞定”的目标和GitHub同款效果而言二次贝塞尔是性价比最高的选择。2.2 线条绘制为什么是LineRenderer在Unity中绘制线段有多种方式比如用GL接口直接绘制、用Mesh动态生成、或者使用TrailRenderer。选择LineRenderer的理由专精于线LineRenderer组件就是为绘制多段线而生的。它抽象了底层Mesh生成的细节你只需要提供一组世界坐标点它就能自动生成连接这些点的、带有厚度的带状网格。功能全面它原生支持宽度曲线让线条头尾变细、颜色渐变实现流光溢彩、纹理平铺与偏移实现动态流动效果、以及光照和阴影接收如果需要的话。这些特性正是我们实现动态射线的基石。性能可控相比于自己用代码动态构建MeshLineRenderer经过高度优化在点数量不多的情况下性能开销很小。我们可以通过控制曲线采样点的数量在视觉效果和性能之间取得平衡。因此LineRenderer是我们实现线条主体的不二之选。我们的工作流将是用贝塞尔曲线公式生成一系列路径点然后将这些点赋值给LineRenderer。2.3 动态效果材质与Shader的选择一条静态的曲线是远远不够的GitHub射线的灵魂在于其上的光点或光带是流动的。这需要通过材质和Shader来实现。核心思路纹理偏移我们为LineRenderer赋予一个特殊的材质。这个材质使用一个纹理比如一条从透明到亮色再透明的渐变条或者一个点状图案。通过在Shader中随时间改变纹理的UV偏移量_MainTex_ST中的偏移值或者直接计算uv.x _Time.y * _Speed就能让纹理沿着线条长度方向运动形成“流动”的视觉效果。材质方案选型使用Unity内置粒子Shader例如Particles/Standard Unlit或Particles/Additive。这些Shader本身支持软粒子、颜色叠加和简单的UV动画配置起来非常快。这是实现基础流动效果最快捷的方式。自定义Unlit Shader Graph如果你使用的是URP通用渲染管线利用Shader Graph可以更直观地构建这个效果。你可以创建一个Unlit Master节点然后连接Time节点、Tiling And Offset节点来控制UV再配合一个渐变纹理Gradient节点采样Simple Noise或直接使用Sample Texture 2D可以创造出更复杂、更个性化的流动效果比如速度变化、多段色彩等。标准Shader 动画纹理如果项目使用内置渲染管线或需要接收光照也可以使用标准Shader但通常动态射线作为特效使用不受光照影响的Unlit类Shader更能保证视觉效果清晰明亮。对于本次实战为了兼顾效果和效率我将演示使用URP下的Shader Graph来创建一个自定义流动材质这样既直观又便于后续调整参数。3. 核心组件与脚本实现详解理论清晰了我们开始动手。这个部分会详细到每一个步骤和每一行关键代码的意图。3.1 场景搭建与组件配置首先我们在Unity中创建一个空物体命名为DynamicBeam。添加LineRenderer组件选中DynamicBeam在Inspector面板点击Add Component搜索并添加LineRenderer。基础参数配置Position: 我们通过脚本动态设置这里保持默认。Width: 调整曲线宽度。我们可以使用Width Curve来让线条更有质感。点击宽度曲线图将左端起点和右端终点的键值调低如0.2中间调高如1.0这样线条就会呈现中间粗、两头细的效果更像一束能量射线。Loop: 取消勾选。我们的射线有明确的起点和终点。Shadow/Receive Shadows: 根据需求选择通常作为特效可以关闭。材质配置暂缓材质球我们稍后用Shader Graph创建好后拖入。3.2 贝塞尔曲线脚本BezierCurve.cs接下来我们创建核心的C#脚本来计算曲线路径。创建一个名为BezierCurve.cs的脚本。using UnityEngine; [RequireComponent(typeof(LineRenderer))] public class BezierCurve : MonoBehaviour { // 控制点起点、控制点、终点 public Transform startPoint; public Transform controlPoint; public Transform endPoint; // LineRenderer 引用 private LineRenderer lineRenderer; // 曲线采样精度在0到1之间取多少个点来模拟曲线 [Range(2, 100)] public int resolution 30; void Start() { // 获取并缓存LineRenderer组件 lineRenderer GetComponentLineRenderer(); // 设置LineRenderer的点数量为采样精度 lineRenderer.positionCount resolution; } void Update() { // 每一帧都根据控制点的当前位置更新曲线 DrawQuadraticBezierCurve(); } void DrawQuadraticBezierCurve() { // 如果任意一个控制点未赋值则直接返回 if (startPoint null || controlPoint null || endPoint null) return; // 循环生成曲线上的每一个点 for (int i 0; i resolution; i) { // 计算当前的t值从0到1均匀分布 float t i / (float)(resolution - 1); // 根据二次贝塞尔公式计算当前点的位置 Vector3 point CalculateQuadraticBezierPoint(t, startPoint.position, controlPoint.position, endPoint.position); // 将该点位置设置给LineRenderer lineRenderer.SetPosition(i, point); } } // 二次贝塞尔曲线公式B(t) (1-t)^2 * P0 2*(1-t)*t * P1 t^2 * P2 Vector3 CalculateQuadraticBezierPoint(float t, Vector3 p0, Vector3 p1, Vector3 p2) { // (1-t) 的平方 float u 1 - t; float tt t * t; float uu u * u; // 公式的三个部分相加 Vector3 point uu * p0; // (1-t)^2 * P0 point 2 * u * t * p1; // 2*(1-t)*t * P1 point tt * p2; // t^2 * P2 return point; } // 在Scene视图中绘制Gizmos便于编辑时直观看到控制点 void OnDrawGizmos() { if (startPoint null || controlPoint null || endPoint null) return; Gizmos.color Color.green; Gizmos.DrawSphere(startPoint.position, 0.1f); Gizmos.DrawSphere(endPoint.position, 0.1f); Gizmos.color Color.yellow; Gizmos.DrawSphere(controlPoint.position, 0.1f); // 用虚线连接起点-控制点和控制点-终点显示曲线的“骨架” Gizmos.color Color.gray; Gizmos.DrawLine(startPoint.position, controlPoint.position); Gizmos.DrawLine(controlPoint.position, endPoint.position); } }脚本解析与注意事项RequireComponent属性确保了挂载此脚本的GameObject上一定有LineRenderer避免空引用错误。resolution分辨率参数至关重要。它决定了用多少个直线段来模拟曲线。值太低如5曲线会显得棱角分明值太高如100虽然平滑但会浪费性能。对于屏幕空间内不长的射线30-50是一个很好的平衡点。在Update中更新曲线意味着射线是动态的。如果你的起点、控制点、终点是静止的可以改为在Start中计算一次或在它们变化时调用DrawQuadraticBezierCurve以节省性能。OnDrawGizmos方法不是必须的但它是一个强大的调试工具。在Scene视图里你可以实时看到三个控制点和曲线的“骨架”拖动控制点Transform曲线形状会即时变化这对于调整效果非常方便。3.3 动态流动材质创建URP Shader Graph现在我们来制作让射线“动起来”的材质。假设你使用的是URP。创建Shader Graph在Project窗口右键 - Create - Shader - Universal Render Pipeline - Shader Graph。命名为URP_BeamFlow。构建节点网络添加一个Texture 2D属性命名为_MainTex用于输入流动纹理如一张细长的渐变纹理。添加一个Float属性命名为_FlowSpeed用于控制流动速度。添加一个Time节点获取游戏时间。将Time节点的Time输出端口乘以_FlowSpeed属性得到流动的速度量。添加一个Tiling And Offset节点。将UV输入连接到UV0将上一步计算的速度量连接到Offset的X分量Y分量设为0因为我们希望纹理沿线条方向流动。将Tiling And Offset节点的输出连接到Sample Texture 2D节点的UV输入然后将纹理属性_MainTex连接到Sample Texture 2D的Texture输入。最后将Sample Texture 2D节点的RGBA输出连接到Fragment节点的Base Color。将Alpha输出连接到Fragment节点的Alpha。可选可以添加一个Color属性连接到Sample Texture 2D节点的颜色乘法输入用于整体调色。保存并创建材质保存Shader Graph。然后在Project窗口右键该Shader Graph选择Create - Material命名为Mat_BeamFlow。配置LineRenderer材质将创建好的Mat_BeamFlow材质拖拽到DynamicBeam对象上LineRenderer组件的Materials列表的第一个元素中。准备流动纹理你需要一张用于流动的纹理。最简单的方法是在Photoshop或任何绘图软件中创建一张长宽比很大的图片例如512x32从左到右绘制一个颜色渐变如黑-蓝-白-蓝-黑或者使用粒子纹理。将这张图导入Unity确保它的Wrap Mode设置为Repeat这样纹理才能无缝循环流动。3.4 场景组装与测试在场景中创建三个空物体分别命名为StartControlEnd。将它们拖拽到BezierCurve脚本对应的字段中。将Start和End摆放在你希望射线连接的两个位置比如两个代表城市的Cube。将Control点向上移动一些你会在Scene视图中看到一条弧形的Gizmos虚线这就是曲线的“骨架”。运行游戏你应该能看到一条连接起点和终点的平滑曲线。调整LineRenderer的宽度、颜色并为Mat_BeamFlow材质赋予你制作的流动纹理调整_FlowSpeed参数直到看到光线沿着曲线流动的效果。实操心得控制点Control的位置是调整曲线形态的关键。一个常用的技巧是让控制点垂直于起点和终点连线的中垂线方向移动。你可以写一个简单的编辑器脚本让控制点自动保持在某个高度或者始终朝向某个方向这样在拖动起点和终点时曲线能保持一个比较一致的“拱起”形态提高工作效率。4. 效果增强与高级技巧基础效果有了但离“炫酷”还差一点。下面分享几个立刻提升质感的技巧。4.1 实现头部光球与碰撞体GitHub的射线在起点和终点通常有一个光球。我们可以很容易地实现。创建光球在Start和End对象下各添加一个子对象比如一个Sphere缩放至合适大小。赋予发光材质为这个Sphere创建一个新的材质使用Particles/AdditiveShader并给一个明亮的颜色如蓝色。你也可以使用Bloom泛光后处理效果让这个球体看起来在“发光”。动态匹配在BezierCurve脚本的Update方法最后添加代码确保光球的位置始终与startPoint和endPoint的位置同步如果它们不是同一个Transform的话。关于碰撞检测如果你需要射线具有交互性例如玩家触碰到射线会受到伤害LineRenderer本身没有碰撞体。你需要使用Edge Collider 2D2D项目并手动设置其点为曲线采样点。或者在3D项目中沿曲线路径动态生成一系列Capsule Collider或Sphere Collider。这会更复杂需要根据曲线的resolution在每个线段中间位置生成并旋转一个胶囊体碰撞体。对于性能要求高的场景需要谨慎使用。4.2 动态控制与动画静态的射线不够生动。我们可以让控制点动起来或者让射线在需要时才出现。控制点动画为Control点的Transform位置添加动画。可以使用Unity的Animation窗口制作一个简单的上下浮动或圆周运动的动画。曲线形状随之变化射线就会像呼吸一样“蠕动”非常有生命力。射线的生成与消失通常射线不是常驻的而是触发后出现。我们可以通过控制LineRenderer的enabled属性或者更平滑地通过控制材质Alpha透明度来实现淡入淡出。脚本控制示例public void ActivateBeam(float duration) { StartCoroutine(BeamFadeInOut(duration)); } IEnumerator BeamFadeInOut(float dur) { lineRenderer.enabled true; Material mat lineRenderer.material; Color c mat.color; // 淡入 for(float t0; t1; tTime.deltaTime/dur*0.5f) { c.a Mathf.Lerp(0, 1, t); mat.color c; yield return null; } c.a 1; mat.color c; // 保持一段时间可根据需求调整 yield return new WaitForSeconds(dur * 0.3f); // 淡出 for(float t0; t1; tTime.deltaTime/dur*0.5f) { c.a Mathf.Lerp(1, 0, t); mat.color c; yield return null; } c.a 0; mat.color c; lineRenderer.enabled false; }多段曲线与复杂路径对于更长的、需要拐弯的路径可以串联多条二次贝塞尔曲线或者使用一个包含多个控制点的列表来实现三次贝塞尔曲线CalculateCubicBezierPoint。LineRenderer可以设置任意数量的点你只需要计算出一个更长的点列表赋给它即可。4.3 性能优化要点当屏幕上需要同时显示几十上百条这样的射线时性能就需要考虑了。控制resolution这是最直接的影响因素。在保证视觉不失真的前提下尽可能降低采样点数量。可以写一个根据射线长度动态调整resolution的算法近处射线用高精度远处射线用低精度。合并绘制BatchingLineRenderer默认每个都是独立的Draw Call。如果大量射线使用完全相同的材质Unity的动态合批Dynamic Batching可能对其生效需满足网格顶点数等条件。为了最大化合批应确保所有动态射线的材质实例是同一个通过脚本修改其颜色或偏移等属性使用MaterialPropertyBlock而不是创建多个材质实例。MaterialPropertyBlock可以让你在不破坏合批的情况下改变渲染属性。MaterialPropertyBlock mpb; void Awake() { mpb new MaterialPropertyBlock(); } void UpdateBeamColor(Color newColor) { lineRenderer.GetPropertyBlock(mpb); mpb.SetColor(_Color, newColor); // 假设Shader中有_Color属性 lineRenderer.SetPropertyBlock(mpb); }对象池Object Pooling射线的频繁生成和销毁会产生GC垃圾回收压力。对于需要大量、频繁出现的射线如子弹轨迹、技能特效务必使用对象池进行管理。预先创建一定数量的DynamicBeam对象并禁用需要时从池中取出激活并设置参数用完后再放回池中禁用而不是Instantiate和Destroy。5. 常见问题与排查实录在实际操作中你可能会遇到以下问题。这里记录了我的排查思路和解决方法。5.1 射线不显示或显示异常问题运行后什么都看不到。排查检查LineRenderer组件是否被意外禁用。检查BezierCurve脚本中的三个Transform引用是否在Inspector中正确赋值。检查LineRenderer的Material槽位是否为空或者材质Shader是否兼容当前渲染管线URP/内置管线。检查相机的裁剪平面Clipping Planes是否射线在Near和Far范围之外。解决逐一核对上述项。对于材质问题如果是粉色Missing Material请确认使用的Shader是否在对应的渲染管线中可用。问题射线是直的没有弯曲。排查检查Control点的位置。如果控制点恰好位于起点和终点的连线上贝塞尔曲线就会退化成一条直线。解决将控制点移出起点-终点的连线。通常向上或向侧面移动即可。问题射线边缘锯齿严重。排查抗锯齿MSAA可能未开启或者LineRenderer的宽度在屏幕上过小。解决在项目设置的Quality中开启抗锯齿。对于URP可以在URP Asset中配置。也可以尝试轻微增加LineRenderer的宽度。5.2 流动效果不正常问题纹理不流动或者流动方向不对。排查检查Shader Graph中的_FlowSpeed参数是否被正确设置大于0。检查纹理的Wrap Mode是否为Repeat。如果是Clamp则移动到边界就会停止。检查UV连接。流动应该是沿着线条方向通常是UV的U方向。在Shader Graph中确保只对UV的X或U分量加上时间偏移。检查LineRenderer的Texture Mode。对于沿长度方向的平铺流动应设置为Tile默认。解决确保速度参数为正数纹理Wrap Mode为Repeat并检查Shader节点连接。问题流动纹理在曲线上拉伸变形。排查这是由LineRenderer根据每个线段的长度分配UV导致的。曲线中段的点距离可能更密集或更稀疏。解决可以尝试将LineRenderer的Texture Mode改为Stretch但这可能使纹理在弯曲处不均匀。更好的方法是使用一个自定义Shader根据顶点在总曲线长度中的百分比而不是屏幕空间UV来采样纹理但这需要更复杂的Shader编程。5.3 性能相关问题问题当有大量射线时游戏帧率下降明显。排查使用Unity Profiler的Rendering部分查看SetPass CallsDraw Call是否激增。同时查看CPU开销是否BezierCurve脚本的Update计算负担过重。解决降低Draw Call如前所述使用MaterialPropertyBlock和共享材质。降低CPU开销如果射线路径是静态的不要在Update中计算改为在Start或路径变化时计算。降低resolution。对于大量射线考虑使用Job System和Burst Compiler进行并行计算高级优化。使用对象池避免每帧生成/销毁GameObject。5.4 与其他系统的集成问题问题射线如何跟随移动的目标解决非常简单。只需要将BezierCurve脚本中的startPoint或endPoint绑定到目标物体的Transform上即可。脚本每帧会读取它们的最新位置并重新计算曲线。如果目标是刚体为了更平滑可以考虑使用Vector3.Lerp或Vector3.SmoothDamp对计算出的曲线点进行插值。问题如何在2D项目中使用解决原理完全一样。只需要确保所有控制点的Z轴坐标一致例如都为0。LineRenderer默认在3D空间渲染但在正交Orthographic相机下2D和3D坐标是兼容的。你也可以考虑使用专门用于2D的LineRenderer需要导入2D SpriteShape包中的UnityEngine.Experimental.U2D命名空间但通用LineRenderer在2D中工作得也很好。经过以上步骤你应该已经成功地在Unity中创建出了GitHub地球同款、甚至更具个性化的动态射线效果。这套方法的核心在于理解LineRenderer与贝塞尔曲线的结合方式以及通过Shader实现动态UV动画。掌握了这个基础框架后你可以尽情发挥创意调整曲线形态、流动样式、颜色和粒子效果创造出属于你自己的炫酷连接特效。无论是用于数据可视化、科幻UI还是游戏技能它都能成为一个提升项目视觉表现力的得力工具。
Unity实现GitHub同款动态射线：LineRenderer与贝塞尔曲线实战
1. 项目概述与核心价值最近在翻看一些科技公司的官网或者产品发布会经常能看到那种连接两个节点、带有流动光效的动态射线效果比如GitHub地球页面上那些连接全球开发者节点的炫酷线条。这种效果视觉冲击力强能清晰地表达“连接”与“数据流动”的概念。很多朋友第一反应可能是用WebGL的Three.js来实现毕竟前端领域这类案例很多。但如果你是一个Unity开发者正在做一个数据可视化大屏、科技感UI或者需要类似特效的游戏难道还要去学一套新东西吗完全不用。其实用Unity内置的LineRenderer组件配合一点基础的贝塞尔曲线数学我们就能在5分钟内复刻出同款甚至更酷的动态射线效果。这个方法不仅快而且因为是在Unity引擎内你可以轻松地将其与你的3D场景、UI系统或者游戏逻辑深度结合获得比网页端更强大的控制力和表现力。这个项目的核心就是利用LineRenderer来绘制线条用贝塞尔曲线算法来生成平滑、自然的路径再通过材质和Shader赋予其动态流动的光效。整个过程几乎不涉及复杂的第三方插件全是Unity原生或基础数学知识非常适合用来提升项目的视觉质感或者作为学习LineRenderer和曲线应用的实战案例。无论你是想做个炫酷的科技演示还是为你的游戏角色技能、传送门、能量光束寻找一个解决方案这套思路都能直接拿来用。2. 核心思路与方案选型要实现GitHub地球同款的动态射线我们可以将其拆解为三个核心环节路径生成、线条绘制和动态效果。下面我们来逐一拆解并说明为什么选择对应的技术方案。2.1 路径生成为什么是二次贝塞尔曲线路径决定了射线从哪里来到哪里去以及中间的“弧度”是怎样的。GitHub地球上的射线并非直线而是带有一定弧度的曲线这更符合在球面或空间中进行“跨越”连接的视觉直觉。直线 vs. 曲线直接用LineRenderer连接两个点画直线是最简单的但看起来会非常生硬和机械缺乏美感与动态感。而曲线特别是贝塞尔曲线能以非常简洁的方式定义一条平滑的路径。贝塞尔曲线的优势在众多曲线算法中我选择二次贝塞尔曲线作为起点原因有三点计算简单二次贝塞尔曲线只需要一个起点P0、一个终点P2和一个控制点P1。其公式为B(t) (1-t)² * P0 2*(1-t)*t * P1 t² * P2其中t在0到1之间变化。这个计算量对每帧更新来说可以忽略不计。控制直观通过调整控制点P1的位置你可以轻松控制曲线的“弯曲程度”和“弯曲方向”。想让曲线向上拱就把P1放在两点连线的上方想让曲线更平缓就让P1靠近连线中心。这种控制方式非常符合美术和设计的直觉。效果足够对于大多数表现“连接”、“飞跃”效果的动态射线二次贝塞尔曲线提供的单弧度已经能产生非常不错的效果。它比直线生动又比更高阶如三次的贝塞尔曲线更容易控制和预测。当然如果你的需求是更复杂的S形或波浪形路径可以升级到三次甚至更高阶贝塞尔曲线或者使用AnimationCurve来定义更复杂的路径函数。但对于我们“5分钟搞定”的目标和GitHub同款效果而言二次贝塞尔是性价比最高的选择。2.2 线条绘制为什么是LineRenderer在Unity中绘制线段有多种方式比如用GL接口直接绘制、用Mesh动态生成、或者使用TrailRenderer。选择LineRenderer的理由专精于线LineRenderer组件就是为绘制多段线而生的。它抽象了底层Mesh生成的细节你只需要提供一组世界坐标点它就能自动生成连接这些点的、带有厚度的带状网格。功能全面它原生支持宽度曲线让线条头尾变细、颜色渐变实现流光溢彩、纹理平铺与偏移实现动态流动效果、以及光照和阴影接收如果需要的话。这些特性正是我们实现动态射线的基石。性能可控相比于自己用代码动态构建MeshLineRenderer经过高度优化在点数量不多的情况下性能开销很小。我们可以通过控制曲线采样点的数量在视觉效果和性能之间取得平衡。因此LineRenderer是我们实现线条主体的不二之选。我们的工作流将是用贝塞尔曲线公式生成一系列路径点然后将这些点赋值给LineRenderer。2.3 动态效果材质与Shader的选择一条静态的曲线是远远不够的GitHub射线的灵魂在于其上的光点或光带是流动的。这需要通过材质和Shader来实现。核心思路纹理偏移我们为LineRenderer赋予一个特殊的材质。这个材质使用一个纹理比如一条从透明到亮色再透明的渐变条或者一个点状图案。通过在Shader中随时间改变纹理的UV偏移量_MainTex_ST中的偏移值或者直接计算uv.x _Time.y * _Speed就能让纹理沿着线条长度方向运动形成“流动”的视觉效果。材质方案选型使用Unity内置粒子Shader例如Particles/Standard Unlit或Particles/Additive。这些Shader本身支持软粒子、颜色叠加和简单的UV动画配置起来非常快。这是实现基础流动效果最快捷的方式。自定义Unlit Shader Graph如果你使用的是URP通用渲染管线利用Shader Graph可以更直观地构建这个效果。你可以创建一个Unlit Master节点然后连接Time节点、Tiling And Offset节点来控制UV再配合一个渐变纹理Gradient节点采样Simple Noise或直接使用Sample Texture 2D可以创造出更复杂、更个性化的流动效果比如速度变化、多段色彩等。标准Shader 动画纹理如果项目使用内置渲染管线或需要接收光照也可以使用标准Shader但通常动态射线作为特效使用不受光照影响的Unlit类Shader更能保证视觉效果清晰明亮。对于本次实战为了兼顾效果和效率我将演示使用URP下的Shader Graph来创建一个自定义流动材质这样既直观又便于后续调整参数。3. 核心组件与脚本实现详解理论清晰了我们开始动手。这个部分会详细到每一个步骤和每一行关键代码的意图。3.1 场景搭建与组件配置首先我们在Unity中创建一个空物体命名为DynamicBeam。添加LineRenderer组件选中DynamicBeam在Inspector面板点击Add Component搜索并添加LineRenderer。基础参数配置Position: 我们通过脚本动态设置这里保持默认。Width: 调整曲线宽度。我们可以使用Width Curve来让线条更有质感。点击宽度曲线图将左端起点和右端终点的键值调低如0.2中间调高如1.0这样线条就会呈现中间粗、两头细的效果更像一束能量射线。Loop: 取消勾选。我们的射线有明确的起点和终点。Shadow/Receive Shadows: 根据需求选择通常作为特效可以关闭。材质配置暂缓材质球我们稍后用Shader Graph创建好后拖入。3.2 贝塞尔曲线脚本BezierCurve.cs接下来我们创建核心的C#脚本来计算曲线路径。创建一个名为BezierCurve.cs的脚本。using UnityEngine; [RequireComponent(typeof(LineRenderer))] public class BezierCurve : MonoBehaviour { // 控制点起点、控制点、终点 public Transform startPoint; public Transform controlPoint; public Transform endPoint; // LineRenderer 引用 private LineRenderer lineRenderer; // 曲线采样精度在0到1之间取多少个点来模拟曲线 [Range(2, 100)] public int resolution 30; void Start() { // 获取并缓存LineRenderer组件 lineRenderer GetComponentLineRenderer(); // 设置LineRenderer的点数量为采样精度 lineRenderer.positionCount resolution; } void Update() { // 每一帧都根据控制点的当前位置更新曲线 DrawQuadraticBezierCurve(); } void DrawQuadraticBezierCurve() { // 如果任意一个控制点未赋值则直接返回 if (startPoint null || controlPoint null || endPoint null) return; // 循环生成曲线上的每一个点 for (int i 0; i resolution; i) { // 计算当前的t值从0到1均匀分布 float t i / (float)(resolution - 1); // 根据二次贝塞尔公式计算当前点的位置 Vector3 point CalculateQuadraticBezierPoint(t, startPoint.position, controlPoint.position, endPoint.position); // 将该点位置设置给LineRenderer lineRenderer.SetPosition(i, point); } } // 二次贝塞尔曲线公式B(t) (1-t)^2 * P0 2*(1-t)*t * P1 t^2 * P2 Vector3 CalculateQuadraticBezierPoint(float t, Vector3 p0, Vector3 p1, Vector3 p2) { // (1-t) 的平方 float u 1 - t; float tt t * t; float uu u * u; // 公式的三个部分相加 Vector3 point uu * p0; // (1-t)^2 * P0 point 2 * u * t * p1; // 2*(1-t)*t * P1 point tt * p2; // t^2 * P2 return point; } // 在Scene视图中绘制Gizmos便于编辑时直观看到控制点 void OnDrawGizmos() { if (startPoint null || controlPoint null || endPoint null) return; Gizmos.color Color.green; Gizmos.DrawSphere(startPoint.position, 0.1f); Gizmos.DrawSphere(endPoint.position, 0.1f); Gizmos.color Color.yellow; Gizmos.DrawSphere(controlPoint.position, 0.1f); // 用虚线连接起点-控制点和控制点-终点显示曲线的“骨架” Gizmos.color Color.gray; Gizmos.DrawLine(startPoint.position, controlPoint.position); Gizmos.DrawLine(controlPoint.position, endPoint.position); } }脚本解析与注意事项RequireComponent属性确保了挂载此脚本的GameObject上一定有LineRenderer避免空引用错误。resolution分辨率参数至关重要。它决定了用多少个直线段来模拟曲线。值太低如5曲线会显得棱角分明值太高如100虽然平滑但会浪费性能。对于屏幕空间内不长的射线30-50是一个很好的平衡点。在Update中更新曲线意味着射线是动态的。如果你的起点、控制点、终点是静止的可以改为在Start中计算一次或在它们变化时调用DrawQuadraticBezierCurve以节省性能。OnDrawGizmos方法不是必须的但它是一个强大的调试工具。在Scene视图里你可以实时看到三个控制点和曲线的“骨架”拖动控制点Transform曲线形状会即时变化这对于调整效果非常方便。3.3 动态流动材质创建URP Shader Graph现在我们来制作让射线“动起来”的材质。假设你使用的是URP。创建Shader Graph在Project窗口右键 - Create - Shader - Universal Render Pipeline - Shader Graph。命名为URP_BeamFlow。构建节点网络添加一个Texture 2D属性命名为_MainTex用于输入流动纹理如一张细长的渐变纹理。添加一个Float属性命名为_FlowSpeed用于控制流动速度。添加一个Time节点获取游戏时间。将Time节点的Time输出端口乘以_FlowSpeed属性得到流动的速度量。添加一个Tiling And Offset节点。将UV输入连接到UV0将上一步计算的速度量连接到Offset的X分量Y分量设为0因为我们希望纹理沿线条方向流动。将Tiling And Offset节点的输出连接到Sample Texture 2D节点的UV输入然后将纹理属性_MainTex连接到Sample Texture 2D的Texture输入。最后将Sample Texture 2D节点的RGBA输出连接到Fragment节点的Base Color。将Alpha输出连接到Fragment节点的Alpha。可选可以添加一个Color属性连接到Sample Texture 2D节点的颜色乘法输入用于整体调色。保存并创建材质保存Shader Graph。然后在Project窗口右键该Shader Graph选择Create - Material命名为Mat_BeamFlow。配置LineRenderer材质将创建好的Mat_BeamFlow材质拖拽到DynamicBeam对象上LineRenderer组件的Materials列表的第一个元素中。准备流动纹理你需要一张用于流动的纹理。最简单的方法是在Photoshop或任何绘图软件中创建一张长宽比很大的图片例如512x32从左到右绘制一个颜色渐变如黑-蓝-白-蓝-黑或者使用粒子纹理。将这张图导入Unity确保它的Wrap Mode设置为Repeat这样纹理才能无缝循环流动。3.4 场景组装与测试在场景中创建三个空物体分别命名为StartControlEnd。将它们拖拽到BezierCurve脚本对应的字段中。将Start和End摆放在你希望射线连接的两个位置比如两个代表城市的Cube。将Control点向上移动一些你会在Scene视图中看到一条弧形的Gizmos虚线这就是曲线的“骨架”。运行游戏你应该能看到一条连接起点和终点的平滑曲线。调整LineRenderer的宽度、颜色并为Mat_BeamFlow材质赋予你制作的流动纹理调整_FlowSpeed参数直到看到光线沿着曲线流动的效果。实操心得控制点Control的位置是调整曲线形态的关键。一个常用的技巧是让控制点垂直于起点和终点连线的中垂线方向移动。你可以写一个简单的编辑器脚本让控制点自动保持在某个高度或者始终朝向某个方向这样在拖动起点和终点时曲线能保持一个比较一致的“拱起”形态提高工作效率。4. 效果增强与高级技巧基础效果有了但离“炫酷”还差一点。下面分享几个立刻提升质感的技巧。4.1 实现头部光球与碰撞体GitHub的射线在起点和终点通常有一个光球。我们可以很容易地实现。创建光球在Start和End对象下各添加一个子对象比如一个Sphere缩放至合适大小。赋予发光材质为这个Sphere创建一个新的材质使用Particles/AdditiveShader并给一个明亮的颜色如蓝色。你也可以使用Bloom泛光后处理效果让这个球体看起来在“发光”。动态匹配在BezierCurve脚本的Update方法最后添加代码确保光球的位置始终与startPoint和endPoint的位置同步如果它们不是同一个Transform的话。关于碰撞检测如果你需要射线具有交互性例如玩家触碰到射线会受到伤害LineRenderer本身没有碰撞体。你需要使用Edge Collider 2D2D项目并手动设置其点为曲线采样点。或者在3D项目中沿曲线路径动态生成一系列Capsule Collider或Sphere Collider。这会更复杂需要根据曲线的resolution在每个线段中间位置生成并旋转一个胶囊体碰撞体。对于性能要求高的场景需要谨慎使用。4.2 动态控制与动画静态的射线不够生动。我们可以让控制点动起来或者让射线在需要时才出现。控制点动画为Control点的Transform位置添加动画。可以使用Unity的Animation窗口制作一个简单的上下浮动或圆周运动的动画。曲线形状随之变化射线就会像呼吸一样“蠕动”非常有生命力。射线的生成与消失通常射线不是常驻的而是触发后出现。我们可以通过控制LineRenderer的enabled属性或者更平滑地通过控制材质Alpha透明度来实现淡入淡出。脚本控制示例public void ActivateBeam(float duration) { StartCoroutine(BeamFadeInOut(duration)); } IEnumerator BeamFadeInOut(float dur) { lineRenderer.enabled true; Material mat lineRenderer.material; Color c mat.color; // 淡入 for(float t0; t1; tTime.deltaTime/dur*0.5f) { c.a Mathf.Lerp(0, 1, t); mat.color c; yield return null; } c.a 1; mat.color c; // 保持一段时间可根据需求调整 yield return new WaitForSeconds(dur * 0.3f); // 淡出 for(float t0; t1; tTime.deltaTime/dur*0.5f) { c.a Mathf.Lerp(1, 0, t); mat.color c; yield return null; } c.a 0; mat.color c; lineRenderer.enabled false; }多段曲线与复杂路径对于更长的、需要拐弯的路径可以串联多条二次贝塞尔曲线或者使用一个包含多个控制点的列表来实现三次贝塞尔曲线CalculateCubicBezierPoint。LineRenderer可以设置任意数量的点你只需要计算出一个更长的点列表赋给它即可。4.3 性能优化要点当屏幕上需要同时显示几十上百条这样的射线时性能就需要考虑了。控制resolution这是最直接的影响因素。在保证视觉不失真的前提下尽可能降低采样点数量。可以写一个根据射线长度动态调整resolution的算法近处射线用高精度远处射线用低精度。合并绘制BatchingLineRenderer默认每个都是独立的Draw Call。如果大量射线使用完全相同的材质Unity的动态合批Dynamic Batching可能对其生效需满足网格顶点数等条件。为了最大化合批应确保所有动态射线的材质实例是同一个通过脚本修改其颜色或偏移等属性使用MaterialPropertyBlock而不是创建多个材质实例。MaterialPropertyBlock可以让你在不破坏合批的情况下改变渲染属性。MaterialPropertyBlock mpb; void Awake() { mpb new MaterialPropertyBlock(); } void UpdateBeamColor(Color newColor) { lineRenderer.GetPropertyBlock(mpb); mpb.SetColor(_Color, newColor); // 假设Shader中有_Color属性 lineRenderer.SetPropertyBlock(mpb); }对象池Object Pooling射线的频繁生成和销毁会产生GC垃圾回收压力。对于需要大量、频繁出现的射线如子弹轨迹、技能特效务必使用对象池进行管理。预先创建一定数量的DynamicBeam对象并禁用需要时从池中取出激活并设置参数用完后再放回池中禁用而不是Instantiate和Destroy。5. 常见问题与排查实录在实际操作中你可能会遇到以下问题。这里记录了我的排查思路和解决方法。5.1 射线不显示或显示异常问题运行后什么都看不到。排查检查LineRenderer组件是否被意外禁用。检查BezierCurve脚本中的三个Transform引用是否在Inspector中正确赋值。检查LineRenderer的Material槽位是否为空或者材质Shader是否兼容当前渲染管线URP/内置管线。检查相机的裁剪平面Clipping Planes是否射线在Near和Far范围之外。解决逐一核对上述项。对于材质问题如果是粉色Missing Material请确认使用的Shader是否在对应的渲染管线中可用。问题射线是直的没有弯曲。排查检查Control点的位置。如果控制点恰好位于起点和终点的连线上贝塞尔曲线就会退化成一条直线。解决将控制点移出起点-终点的连线。通常向上或向侧面移动即可。问题射线边缘锯齿严重。排查抗锯齿MSAA可能未开启或者LineRenderer的宽度在屏幕上过小。解决在项目设置的Quality中开启抗锯齿。对于URP可以在URP Asset中配置。也可以尝试轻微增加LineRenderer的宽度。5.2 流动效果不正常问题纹理不流动或者流动方向不对。排查检查Shader Graph中的_FlowSpeed参数是否被正确设置大于0。检查纹理的Wrap Mode是否为Repeat。如果是Clamp则移动到边界就会停止。检查UV连接。流动应该是沿着线条方向通常是UV的U方向。在Shader Graph中确保只对UV的X或U分量加上时间偏移。检查LineRenderer的Texture Mode。对于沿长度方向的平铺流动应设置为Tile默认。解决确保速度参数为正数纹理Wrap Mode为Repeat并检查Shader节点连接。问题流动纹理在曲线上拉伸变形。排查这是由LineRenderer根据每个线段的长度分配UV导致的。曲线中段的点距离可能更密集或更稀疏。解决可以尝试将LineRenderer的Texture Mode改为Stretch但这可能使纹理在弯曲处不均匀。更好的方法是使用一个自定义Shader根据顶点在总曲线长度中的百分比而不是屏幕空间UV来采样纹理但这需要更复杂的Shader编程。5.3 性能相关问题问题当有大量射线时游戏帧率下降明显。排查使用Unity Profiler的Rendering部分查看SetPass CallsDraw Call是否激增。同时查看CPU开销是否BezierCurve脚本的Update计算负担过重。解决降低Draw Call如前所述使用MaterialPropertyBlock和共享材质。降低CPU开销如果射线路径是静态的不要在Update中计算改为在Start或路径变化时计算。降低resolution。对于大量射线考虑使用Job System和Burst Compiler进行并行计算高级优化。使用对象池避免每帧生成/销毁GameObject。5.4 与其他系统的集成问题问题射线如何跟随移动的目标解决非常简单。只需要将BezierCurve脚本中的startPoint或endPoint绑定到目标物体的Transform上即可。脚本每帧会读取它们的最新位置并重新计算曲线。如果目标是刚体为了更平滑可以考虑使用Vector3.Lerp或Vector3.SmoothDamp对计算出的曲线点进行插值。问题如何在2D项目中使用解决原理完全一样。只需要确保所有控制点的Z轴坐标一致例如都为0。LineRenderer默认在3D空间渲染但在正交Orthographic相机下2D和3D坐标是兼容的。你也可以考虑使用专门用于2D的LineRenderer需要导入2D SpriteShape包中的UnityEngine.Experimental.U2D命名空间但通用LineRenderer在2D中工作得也很好。经过以上步骤你应该已经成功地在Unity中创建出了GitHub地球同款、甚至更具个性化的动态射线效果。这套方法的核心在于理解LineRenderer与贝塞尔曲线的结合方式以及通过Shader实现动态UV动画。掌握了这个基础框架后你可以尽情发挥创意调整曲线形态、流动样式、颜色和粒子效果创造出属于你自己的炫酷连接特效。无论是用于数据可视化、科幻UI还是游戏技能它都能成为一个提升项目视觉表现力的得力工具。
