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连接两个点画直线是最简单的，但看起来会非常生硬和机械，缺乏美感与动态感。而曲线，特别是贝塞尔曲线，能以非常简洁的方式定义一条平滑的路径。

贝塞尔曲线的优势：在众多曲线算法中，我选择二次贝塞尔曲线作为起点，原因有三点：

1. 计算简单：二次贝塞尔曲线只需要一个起点（P0）、一个终点（P2）和一个控制点（P1）。其公式为B(t) = (1-t)² * P0 + 2*(1-t)*t * P1 + t² * P2，其中t在0到1之间变化。这个计算量对每帧更新来说可以忽略不计。
2. 控制直观：通过调整控制点P1的位置，你可以轻松控制曲线的“弯曲程度”和“弯曲方向”。想让曲线向上拱，就把P1放在两点连线的上方；想让曲线更平缓，就让P1靠近连线中心。这种控制方式非常符合美术和设计的直觉。
3. 效果足够：对于大多数表现“连接”、“飞跃”效果的动态射线，二次贝塞尔曲线提供的单弧度已经能产生非常不错的效果。它比直线生动，又比更高阶（如三次）的贝塞尔曲线更容易控制和预测。

当然，如果你的需求是更复杂的S形或波浪形路径，可以升级到三次甚至更高阶贝塞尔曲线，或者使用AnimationCurve来定义更复杂的路径函数。但对于我们“5分钟搞定”的目标和GitHub同款效果而言，二次贝塞尔是性价比最高的选择。

2.2 线条绘制：为什么是LineRenderer？

在Unity中绘制线段有多种方式，比如用GL接口直接绘制、用Mesh动态生成、或者使用TrailRenderer。

选择LineRenderer的理由：

1. 专精于线：LineRenderer组件就是为绘制多段线而生的。它抽象了底层Mesh生成的细节，你只需要提供一组世界坐标点，它就能自动生成连接这些点的、带有厚度的带状网格。
2. 功能全面：它原生支持宽度曲线（让线条头尾变细）、颜色渐变（实现流光溢彩）、纹理平铺与偏移（实现动态流动效果）、以及光照和阴影接收（如果需要的话）。这些特性正是我们实现动态射线的基石。
3. 性能可控：相比于自己用代码动态构建Mesh，LineRenderer经过高度优化，在点数量不多的情况下性能开销很小。我们可以通过控制曲线采样点的数量，在视觉效果和性能之间取得平衡。

因此，LineRenderer是我们实现线条主体的不二之选。我们的工作流将是：用贝塞尔曲线公式生成一系列路径点，然后将这些点赋值给LineRenderer。

2.3 动态效果：材质与Shader的选择

一条静态的曲线是远远不够的，GitHub射线的灵魂在于其上的光点或光带是流动的。这需要通过材质和Shader来实现。

核心思路：纹理偏移我们为LineRenderer赋予一个特殊的材质。这个材质使用一个纹理，比如一条从透明到亮色再透明的渐变条，或者一个点状图案。通过在Shader中随时间改变纹理的UV偏移量（_MainTex_ST中的偏移值，或者直接计算uv.x + _Time.y * _Speed），就能让纹理沿着线条长度方向运动，形成“流动”的视觉效果。

材质方案选型：

1. 使用Unity内置粒子Shader：例如Particles/Standard Unlit或Particles/Additive。这些Shader本身支持软粒子、颜色叠加和简单的UV动画，配置起来非常快。这是实现基础流动效果最快捷的方式。
2. 自定义Unlit Shader Graph：如果你使用的是URP（通用渲染管线），利用Shader Graph可以更直观地构建这个效果。你可以创建一个Unlit Master节点，然后连接Time节点、Tiling And Offset节点来控制UV，再配合一个渐变纹理（Gradient节点采样Simple Noise或直接使用Sample Texture 2D），可以创造出更复杂、更个性化的流动效果，比如速度变化、多段色彩等。
3. 标准Shader + 动画纹理：如果项目使用内置渲染管线或需要接收光照，也可以使用标准Shader，但通常动态射线作为特效，使用不受光照影响的Unlit类Shader更能保证视觉效果清晰明亮。

对于本次实战，为了兼顾效果和效率，我将演示使用URP下的Shader Graph来创建一个自定义流动材质，这样既直观，又便于后续调整参数。

3. 核心组件与脚本实现详解

理论清晰了，我们开始动手。这个部分会详细到每一个步骤和每一行关键代码的意图。

3.1 场景搭建与组件配置

首先，我们在Unity中创建一个空物体，命名为DynamicBeam。

1. 添加LineRenderer组件：选中DynamicBeam，在Inspector面板点击Add Component，搜索并添加LineRenderer。
2. 基础参数配置：
   • Position: 我们通过脚本动态设置，这里保持默认。
   • Width: 调整曲线宽度。我们可以使用Width Curve来让线条更有质感。点击宽度曲线图，将左端（起点）和右端（终点）的键值调低（如0.2），中间调高（如1.0），这样线条就会呈现中间粗、两头细的效果，更像一束能量射线。
   • Loop: 取消勾选。我们的射线有明确的起点和终点。
   • Shadow/Receive Shadows: 根据需求选择，通常作为特效可以关闭。
3. 材质配置（暂缓）：材质球我们稍后用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 = GetComponent<LineRenderer>(); // 设置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。

1. 创建Shader Graph：在Project窗口右键 -> Create -> Shader -> Universal Render Pipeline -> Shader Graph。命名为URP_BeamFlow。
2. 构建节点网络：
   • 添加一个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节点的颜色乘法输入，用于整体调色。
3. 保存并创建材质：保存Shader Graph。然后在Project窗口右键该Shader Graph，选择Create -> Material，命名为Mat_BeamFlow。
4. 配置LineRenderer材质：将创建好的Mat_BeamFlow材质拖拽到DynamicBeam对象上LineRenderer组件的Materials列表的第一个元素中。
5. 准备流动纹理：你需要一张用于流动的纹理。最简单的方法是在Photoshop或任何绘图软件中创建一张长宽比很大的图片（例如512x32），从左到右绘制一个颜色渐变（如黑->蓝->白->蓝->黑），或者使用粒子纹理。将这张图导入Unity，确保它的Wrap Mode设置为Repeat，这样纹理才能无缝循环流动。

3.4 场景组装与测试

1. 在场景中创建三个空物体，分别命名为Start，Control，End。将它们拖拽到BezierCurve脚本对应的字段中。
2. 将Start和End摆放在你希望射线连接的两个位置（比如两个代表城市的Cube）。
3. 将Control点向上移动一些，你会在Scene视图中看到一条弧形的Gizmos虚线，这就是曲线的“骨架”。
4. 运行游戏，你应该能看到一条连接起点和终点的平滑曲线。
5. 调整LineRenderer的宽度、颜色，并为Mat_BeamFlow材质赋予你制作的流动纹理，调整_FlowSpeed参数，直到看到光线沿着曲线流动的效果。

实操心得：控制点Control的位置是调整曲线形态的关键。一个常用的技巧是，让控制点垂直于起点和终点连线的中垂线方向移动。你可以写一个简单的编辑器脚本，让控制点自动保持在某个高度，或者始终朝向某个方向，这样在拖动起点和终点时，曲线能保持一个比较一致的“拱起”形态，提高工作效率。

4. 效果增强与高级技巧

基础效果有了，但离“炫酷”还差一点。下面分享几个立刻提升质感的技巧。

4.1 实现头部光球与碰撞体

GitHub的射线在起点和终点通常有一个光球。我们可以很容易地实现。

1. 创建光球：在Start和End对象下，各添加一个子对象（比如一个Sphere），缩放至合适大小。
2. 赋予发光材质：为这个Sphere创建一个新的材质，使用Particles/AdditiveShader，并给一个明亮的颜色（如蓝色）。你也可以使用Bloom（泛光）后处理效果，让这个球体看起来在“发光”。
3. 动态匹配：在BezierCurve脚本的Update方法最后，添加代码确保光球的位置始终与startPoint和endPoint的位置同步（如果它们不是同一个Transform的话）。

关于碰撞检测：如果你需要射线具有交互性（例如，玩家触碰到射线会受到伤害），LineRenderer本身没有碰撞体。你需要：

• 使用Edge Collider 2D（2D项目）并手动设置其点为曲线采样点。
• 或者在3D项目中，沿曲线路径动态生成一系列Capsule Collider或Sphere Collider。这会更复杂，需要根据曲线的resolution，在每个线段中间位置生成并旋转一个胶囊体碰撞体。对于性能要求高的场景，需要谨慎使用。

4.2 动态控制与动画

静态的射线不够生动。我们可以让控制点动起来，或者让射线在需要时才出现。

1. 控制点动画：为Control点的Transform位置添加动画。可以使用Unity的Animation窗口制作一个简单的上下浮动或圆周运动的动画。曲线形状随之变化，射线就会像呼吸一样“蠕动”，非常有生命力。
2. 射线的生成与消失：通常射线不是常驻的，而是触发后出现。我们可以通过控制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 t=0; t<1; t+=Time.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 t=0; t<1; t+=Time.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; }

3. 多段曲线与复杂路径：对于更长的、需要拐弯的路径，可以串联多条二次贝塞尔曲线，或者使用一个包含多个控制点的列表来实现三次贝塞尔曲线（CalculateCubicBezierPoint）。LineRenderer可以设置任意数量的点，你只需要计算出一个更长的点列表赋给它即可。

4.3 性能优化要点

当屏幕上需要同时显示几十上百条这样的射线时，性能就需要考虑了。

1. 控制resolution：这是最直接的影响因素。在保证视觉不失真的前提下，尽可能降低采样点数量。可以写一个根据射线长度动态调整resolution的算法，近处射线用高精度，远处射线用低精度。
2. 合并绘制（Batching）：LineRenderer默认每个都是独立的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); }

3. 对象池（Object Pooling）：射线的频繁生成和销毁会产生GC（垃圾回收）压力。对于需要大量、频繁出现的射线（如子弹轨迹、技能特效），务必使用对象池进行管理。预先创建一定数量的DynamicBeam对象并禁用，需要时从池中取出激活并设置参数，用完后再放回池中禁用，而不是Instantiate和Destroy。

5. 常见问题与排查实录

在实际操作中，你可能会遇到以下问题。这里记录了我的排查思路和解决方法。

5.1 射线不显示或显示异常

• 问题：运行后什么都看不到。

  • 排查：
    1. 检查LineRenderer组件是否被意外禁用。
    2. 检查BezierCurve脚本中的三个Transform引用是否在Inspector中正确赋值。
    3. 检查LineRenderer的Material槽位是否为空，或者材质Shader是否兼容当前渲染管线（URP/内置管线）。
    4. 检查相机的裁剪平面（Clipping Planes），是否射线在Near和Far范围之外。
  • 解决：逐一核对上述项。对于材质问题，如果是粉色（Missing Material），请确认使用的Shader是否在对应的渲染管线中可用。

• 问题：射线是直的，没有弯曲。

  • 排查：检查Control点的位置。如果控制点恰好位于起点和终点的连线上，贝塞尔曲线就会退化成一条直线。
  • 解决：将控制点移出起点-终点的连线。通常向上或向侧面移动即可。

• 问题：射线边缘锯齿严重。

  • 排查：抗锯齿（MSAA）可能未开启，或者LineRenderer的宽度在屏幕上过小。
  • 解决：在项目设置的Quality中开启抗锯齿。对于URP，可以在URP Asset中配置。也可以尝试轻微增加LineRenderer的宽度。

5.2 流动效果不正常

• 问题：纹理不流动，或者流动方向不对。

  • 排查：
    1. 检查Shader Graph中的_FlowSpeed参数是否被正确设置（大于0）。
    2. 检查纹理的Wrap Mode是否为Repeat。如果是Clamp，则移动到边界就会停止。
    3. 检查UV连接。流动应该是沿着线条方向（通常是UV的U方向）。在Shader Graph中，确保只对UV的X（或U）分量加上时间偏移。
    4. 检查LineRenderer的Texture Mode。对于沿长度方向的平铺流动，应设置为Tile（默认）。
  • 解决：确保速度参数为正数，纹理Wrap Mode为Repeat，并检查Shader节点连接。

• 问题：流动纹理在曲线上拉伸变形。

  • 排查：这是由LineRenderer根据每个线段的长度分配UV导致的。曲线中段的点距离可能更密集或更稀疏。
  • 解决：可以尝试将LineRenderer的Texture Mode改为Stretch，但这可能使纹理在弯曲处不均匀。更好的方法是使用一个自定义Shader，根据顶点在总曲线长度中的百分比（而不是屏幕空间UV）来采样纹理，但这需要更复杂的Shader编程。

5.3 性能相关问题

• 问题：当有大量射线时，游戏帧率下降明显。
  • 排查：使用Unity Profiler的Rendering部分，查看SetPass Calls（Draw 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还是游戏技能，它都能成为一个提升项目视觉表现力的得力工具。