1. 为什么要在Unity里手搓一条贝塞尔曲线如果你做过Unity项目大概率遇到过这些场景想让UI元素沿着一条平滑弧线飞入屏幕、想给相机做一个柔和的转场路径、想在策略游戏里画出部队的行军路线预览、或者想给技能编辑器加一个可拖拽的抛物线指示器。这些需求的共同点是什么直线插值太生硬动画曲线又不够自由你需要一条能随时调整形状、能精确控制弯曲程度的曲线。贝塞尔曲线就是干这个的。我在实际项目里第一次认真用贝塞尔曲线是做一个塔防游戏的怪物路径系统。当时策划要求路径必须是平滑的不能有折角而且要在编辑器里可视化拖拽控制点。一开始想用Unity自带的LineRenderer加动画曲线凑合结果发现根本没法自由控制弯曲方向。后来老老实实把贝塞尔曲线的数学原理啃了一遍自己写了一套绘制和采样逻辑才发现这东西一旦理解透了用起来是真的顺手。这篇文章面向的是有一定Unity基础、想在项目里实际用上贝塞尔曲线的开发者。不管你是做UI动效、路径规划、还是编辑器工具只要涉及“让物体沿一条平滑曲线运动”或者“在场景里画出平滑曲线”这里的内容都能直接拿去用。我会从数学原理讲到代码实现再到实际项目中的踩坑经验尽量把每个环节的“为什么”说清楚让你不只是抄代码而是真正理解自己在干什么。2. 贝塞尔曲线的核心原理与方案选型2.1 从生活场景理解贝塞尔曲线先别急着看公式。想象你手里有一根有弹性的细钢丝两端固定在墙上中间用手往某个方向拉一下再松手钢丝会自然弯曲成一条平滑的弧线。贝塞尔曲线本质上就是在用数学方法描述这条弧线。你拉的那个位置就是“控制点”钢丝两端就是“起点”和“终点”。控制点拉得越远曲线弯曲得越厉害控制点位置变了曲线的形状也跟着变。在计算机图形学里贝塞尔曲线是一组用伯恩斯坦多项式定义参数曲线的数学工具。最常见的是一阶、二阶、三阶分别对应1个、2个、3个控制点。Unity项目里用得最多的是三阶贝塞尔曲线因为它有起点、终点加两个控制点一共四个点既能画出足够复杂的形状计算量又不会太大。2.2 为什么选三阶而不是二阶或更高阶这里有个实际项目中的选型逻辑。二阶贝塞尔曲线只有一个控制点能画出的形状比较有限基本就是一条简单的弧线弯曲方向完全由那一个控制点决定。如果你要做一条S形路径二阶就做不到了。三阶有两个控制点可以分别控制起点和终点附近的切线方向能画出S形、波浪形、甚至接近圆角的形状灵活性大幅提升。那为什么不直接用更高阶的四阶、五阶理论上可以画出更复杂的曲线但计算量会上去而且控制点越多手动调整越困难。在编辑器里拖拽四个点已经够直观了拖六个点就开始晕了。另外高阶贝塞尔曲线在数值稳定性上也会变差容易出现曲线抖动或者自交的情况。所以三阶是工程上的甜点区够用、好调、算得快。2.3 两种实现路线的取舍在Unity里实现贝塞尔曲线有两条路可以走。第一条是纯数学计算自己写公式每帧采样若干点然后用LineRenderer或者GL接口画出来。第二条是借助Unity的AnimationCurve或者第三方样条插件。我两条路都试过最后在项目里选了纯数学计算。原因很简单AnimationCurve本质上是二维的只能表达y随x变化的关系没法处理三维空间里的曲线也没法做闭合曲线。第三方插件虽然功能全但引入依赖会增加项目复杂度而且很多插件封装的太厚想改一个采样精度都要翻半天源码。自己写公式虽然前期多花一两个小时但后面想怎么改就怎么改调试也方便。对于大多数中小型项目来说自己实现一套轻量的贝塞尔曲线工具是性价比最高的选择。3. 三阶贝塞尔曲线的数学拆解与代码实现3.1 公式推导与参数含义三阶贝塞尔曲线的参数方程长这样B(t) (1-t)³P₀ 3(1-t)²tP₁ 3(1-t)t²P₂ t³P₃其中t是参数取值范围0到1。P₀是起点P₃是终点P₁和P₂是两个控制点。这个公式看起来有点吓人但拆开看就很好理解。四个项分别对应四个点的权重权重之和恒等于1。当t0时只有第一项为1其余为0所以B(0)P₀当t1时只有最后一项为1所以B(1)P₃。中间过程就是四个点按不同权重“拉扯”出来的结果。我在第一次实现的时候犯过一个低级错误把t理解成了“时间”。其实t只是一个归一化的参数它和真实时间没有直接关系。如果你想让物体沿曲线匀速运动不能简单地让t随时间线性增加因为贝塞尔曲线的参数化不是弧长参数化t均匀增加时物体在曲线上的移动速度是不均匀的。这个问题后面会专门讲怎么解决。3.2 在C#中实现核心计算函数下面是我在项目里实际用的核心计算代码放在一个静态工具类里using UnityEngine; public static class BezierUtility { // 三阶贝塞尔曲线求值 public static Vector3 EvaluateCubic(Vector3 p0, Vector3 p1, Vector3 p2, Vector3 p3, float t) { t Mathf.Clamp01(t); float oneMinusT 1f - t; float oneMinusTSq oneMinusT * oneMinusT; float tSq t * t; return oneMinusTSq * oneMinusT * p0 3f * oneMinusTSq * t * p1 3f * oneMinusT * tSq * p2 tSq * t * p3; } // 计算切线方向用于让物体朝向曲线前进方向 public static Vector3 EvaluateTangent(Vector3 p0, Vector3 p1, Vector3 p2, Vector3 p3, float t) { t Mathf.Clamp01(t); float oneMinusT 1f - t; Vector3 tangent 3f * oneMinusT * oneMinusT * (p1 - p0) 6f * oneMinusT * t * (p2 - p1) 3f * t * t * (p3 - p2); return tangent.normalized; } }这段代码有两个关键点。第一Mathf.Clamp01(t)是必要的保护防止外部传入越界的t导致曲线跑到控制点外面去。第二切线函数是单独写的因为很多场景下你不仅需要位置还需要知道曲线在该点的朝向。比如让一个箭头沿着曲线飞箭头必须始终指向切线方向否则看起来会很别扭。3.3 采样精度与性能的平衡用LineRenderer画曲线的时候你需要把曲线离散成若干个点。采样点数量直接决定了曲线的平滑度和性能开销。我一般会根据曲线在屏幕上的大致长度来动态决定采样数经验公式是采样数 Mathf.Clamp(曲线包围盒对角线长度 × 2, 20, 200)这个公式的意思是曲线越长需要的采样点越多但最少20个点保证基本平滑最多200个点防止性能爆炸。在移动端项目里我会把上限压到100因为手机GPU对顶点数的敏感度比PC高得多。还有一个细节采样点不是越多越好。当采样数超过一定阈值后视觉上已经看不出区别了但每多一个点就多一次顶点计算和一次绘制调用。我实测过在1080p屏幕上一条横跨屏幕的曲线用60个点和用200个点肉眼几乎分辨不出来但帧率能差出3到5帧。所以别盲目堆采样数够用就行。4. 完整实操流程从零搭建一个可交互的贝塞尔曲线工具4.1 场景搭建与组件准备先建一个空场景创建一个空物体命名为BezierController挂上下面这个脚本。这个脚本的核心职责是管理四个控制点的Transform引用并在每帧更新时重新计算曲线并刷新LineRenderer。using UnityEngine; [RequireComponent(typeof(LineRenderer))] public class BezierController : MonoBehaviour { [Header(控制点)] public Transform point0; public Transform point1; public Transform point2; public Transform point3; [Header(曲线设置)] [Range(10, 200)] public int sampleCount 60; public float lineWidth 0.1f; private LineRenderer lineRenderer; void Awake() { lineRenderer GetComponentLineRenderer(); lineRenderer.positionCount sampleCount; lineRenderer.startWidth lineWidth; lineRenderer.endWidth lineWidth; lineRenderer.useWorldSpace true; } void Update() { if (point0 null || point1 null || point2 null || point3 null) return; for (int i 0; i sampleCount; i) { float t i / (float)(sampleCount - 1); Vector3 pos BezierUtility.EvaluateCubic( point0.position, point1.position, point2.position, point3.position, t ); lineRenderer.SetPosition(i, pos); } } }然后在场景里创建四个小球分别拖到四个控制点槽位里。运行之后你拖动任意一个小球曲线都会实时更新。这个就是最基础的交互式贝塞尔曲线编辑器雏形。4.2 让物体沿曲线运动并自动朝向光画出曲线还不够实际项目里更常见的是让某个物体沿着曲线移动。这里的关键是解决前面提到的“t均匀增加但速度不均匀”的问题。我的做法是预先计算一张弧长表然后根据目标速度反查t值。using UnityEngine; public class BezierMover : MonoBehaviour { public BezierController bezier; public float speed 2f; public bool loop true; private float[] arcLengthTable; private float totalLength; private const int TABLE_SIZE 200; private float progress 0f; void Start() { BuildArcLengthTable(); } void BuildArcLengthTable() { arcLengthTable new float[TABLE_SIZE]; Vector3 prev BezierUtility.EvaluateCubic( bezier.point0.position, bezier.point1.position, bezier.point2.position, bezier.point3.position, 0f ); arcLengthTable[0] 0f; for (int i 1; i TABLE_SIZE; i) { float t i / (float)(TABLE_SIZE - 1); Vector3 current BezierUtility.EvaluateCubic( bezier.point0.position, bezier.point1.position, bezier.point2.position, bezier.point3.position, t ); arcLengthTable[i] arcLengthTable[i - 1] Vector3.Distance(prev, current); prev current; } totalLength arcLengthTable[TABLE_SIZE - 1]; } void Update() { if (totalLength 0f) return; progress (speed / totalLength) * Time.deltaTime; if (loop) progress Mathf.Repeat(progress, 1f); else progress Mathf.Clamp01(progress); float t ArcLengthToT(progress * totalLength); Vector3 pos BezierUtility.EvaluateCubic( bezier.point0.position, bezier.point1.position, bezier.point2.position, bezier.point3.position, t ); Vector3 tangent BezierUtility.EvaluateTangent( bezier.point0.position, bezier.point1.position, bezier.point2.position, bezier.point3.position, t ); transform.position pos; if (tangent.sqrMagnitude 0.0001f) transform.rotation Quaternion.LookRotation(tangent); } float ArcLengthToT(float targetLength) { // 二分查找 int low 0, high TABLE_SIZE - 1; while (low high - 1) { int mid (low high) / 2; if (arcLengthTable[mid] targetLength) low mid; else high mid; } float segmentLength arcLengthTable[high] - arcLengthTable[low]; if (segmentLength 0f) return low / (float)(TABLE_SIZE - 1); float ratio (targetLength - arcLengthTable[low]) / segmentLength; return (low ratio) / (float)(TABLE_SIZE - 1); } }这段代码里有个细节值得说弧长表的精度直接决定了匀速运动的效果。TABLE_SIZE设成200是我在多个项目里试出来的平衡点。设成100的话快速移动时能感觉到轻微的速度波动设成500的话内存占用和构建时间都会上去但视觉提升几乎为零。200是一个比较稳妥的默认值。4.3 在编辑器里可视化控制点连线调试的时候光看曲线本身不够直观最好把控制点和控制多边形也画出来。Unity的OnDrawGizmos非常适合干这个void OnDrawGizmos() { if (point0 null || point1 null || point2 null || point3 null) return; // 画控制多边形 Gizmos.color Color.gray; Gizmos.DrawLine(point0.position, point1.position); Gizmos.DrawLine(point2.position, point3.position); // 画控制点 Gizmos.color Color.yellow; Gizmos.DrawSphere(point0.position, 0.15f); Gizmos.DrawSphere(point3.position, 0.15f); Gizmos.color Color.cyan; Gizmos.DrawSphere(point1.position, 0.12f); Gizmos.DrawSphere(point2.position, 0.12f); }灰色线是控制多边形它告诉你控制点是怎么“拉扯”曲线的。黄色球是起点和终点青色球是控制点。这个可视化在调试路径的时候特别有用你能一眼看出哪个控制点需要调整。5. 实际项目中的常见问题与排查技巧5.1 曲线抖动或出现折角这是最常见的问题通常有三个原因。第一采样数太低。如果你只采样10个点曲线看起来就是折线。解决办法是提高sampleCount或者根据曲线长度动态计算。第二控制点位置突变。如果你在代码里直接修改控制点的position而修改频率和Update不同步就会出现抖动。解决办法是把控制点修改放在LateUpdate里或者用插值平滑过渡。第三LineRenderer的alignment设置不对。如果曲线在三维空间里拐弯而LineRenderer的alignment设成了View线条会始终面向相机在某些角度下看起来就像折了。改成TransformZ或者用自定义的曲线网格可以解决。5.2 物体沿曲线运动时速度忽快忽慢这个问题我在第一个版本里踩过坑。当时直接让t随时间线性增加结果物体在曲线弯曲的地方明显变慢在平直的地方又突然加速。原因就是贝塞尔曲线的参数化不是弧长参数化。解决办法就是前面说的弧长表加二分查找。这里有个经验弧长表的构建最好放在Start或者Awake里不要每帧重建否则性能开销会很大。如果控制点会动态变化那就需要每帧重建但可以把TABLE_SIZE降到100来减少开销。5.3 曲线跑到控制点外面去了有些开发者会误以为贝塞尔曲线一定会经过所有控制点。实际上除了起点和终点中间的控制点只是“吸引”曲线靠近曲线并不会真正穿过它们。如果你需要曲线穿过某个特定点要么调整控制点位置要么用Catmull-Rom样条代替贝塞尔。Catmull-Rom的特点是曲线会穿过所有控制点适合做路径编辑。贝塞尔更适合做形状设计因为它的切线控制更直观。5.4 性能问题排查速查表问题现象可能原因排查方法解决方案帧率下降采样数过高在Profiler里看LineRenderer的顶点数降低sampleCount或动态调整曲线闪烁控制点每帧被重置检查是否有代码在Update里修改控制点把修改逻辑移到LateUpdate移动端发热每帧重建弧长表看CPU占用是否集中在BuildArcLengthTable缓存弧长表只在必要时重建曲线显示不全LineRenderer的positionCount没同步检查positionCount和实际设置的点数是否一致在设置点之前先设positionCount提示在移动端项目里如果曲线只是用来做UI指示器可以考虑用Mesh代替LineRenderer因为LineRenderer在部分安卓机型上有兼容性问题画出来的线宽会不一致。6. 进阶扩展从单条曲线到曲线系统6.1 多段贝塞尔曲线拼接单条三阶贝塞尔曲线能表达的形状有限。如果你需要一条很长的、有多个弯的路径就需要把多条贝塞尔曲线首尾拼接起来。拼接的关键是保证连接点处的切线连续否则会出现明显的折角。具体做法是前一条曲线的P₃等于后一条曲线的P₀并且前一条曲线的P₂、连接点、后一条曲线的P₁三点共线。这样拼接出来的曲线在连接点处是光滑的。我在做赛道编辑器的时候用过这个技巧。整条赛道由十几段贝塞尔曲线组成每段的控制点都可以独立调整但拼接处自动保持切线连续。实现方式是在编辑器里加一个“自动对齐”按钮点击后自动调整相邻控制点的位置。6.2 贝塞尔曲线在UI动效中的应用UI动效里用贝塞尔曲线最常见的是做缓动函数。Unity的AnimationCurve本质上就是贝塞尔曲线的一种应用。但如果你想做更复杂的UI路径动画比如让一个图标沿着弧线飞到目标位置就需要自己采样曲线并驱动RectTransform的位置。这里有个坑UI的坐标系和世界坐标系不一样RectTransform的anchoredPosition是相对于父节点的。如果你直接把世界空间的贝塞尔曲线采样点赋给anchoredPosition位置会完全不对。正确的做法是把控制点也转换到UI的局部坐标系里或者用RectTransformUtility.ScreenPointToLocalPointInRectangle做转换。6.3 用贝塞尔曲线做抛物线指示器很多游戏里都有扔手雷或者射箭的抛物线预览。这个用贝塞尔曲线做特别合适。起点是角色手部位置终点是鼠标点击的地面位置中间的控制点根据力度和角度计算。具体公式是控制点1 起点 方向 × 力度 × 0.3控制点2 终点 - 方向 × 力度 × 0.3。这样调整力度的时候抛物线的弯曲程度会自然变化。我实测下来这种参数化方式比直接用物理公式计算抛物线要直观得多策划也能自己调。而且贝塞尔曲线不涉及重力加速度这些物理量纯几何计算性能开销几乎可以忽略。7. 我个人在实际操作中的几点体会第一个体会是别怕数学。贝塞尔曲线的公式看起来复杂但真正用到的就是那几个乘法和加法。你不需要理解伯恩斯坦多项式的证明只需要知道每个点的权重是怎么分配的就行。我见过很多开发者一看到公式就绕道走结果用插件用了半年还不知道怎么改采样精度。第二个体会是可视化调试的时间投入绝对值得。我一开始为了省时间没写Gizmos绘制结果调控制点的时候全靠猜一个路径调了整整一个下午。后来花二十分钟把控制点和控制多边形画出来同样的路径十分钟就调好了。在编辑器工具上多花的时间会在后续调试里加倍还回来。第三个体会是弧长表是个好东西但别滥用。如果你的曲线是静态的弧长表建一次就够了。如果曲线会动态变化那就要权衡重建频率和精度。我一般会加一个阈值控制点移动距离小于0.01的时候不重建大于这个值才重建这样能省下大量不必要的计算。第四个体会是移动端项目里LineRenderer的材质要用Unlit的别用受光照影响的Shader。贝塞尔曲线通常只是辅助线或者UI元素不需要参与光照计算。用Unlit Shader能省下不少GPU开销而且颜色更纯粹不会因为场景光照变化而变色。最后分享一个小技巧如果你需要在运行时动态增删控制点可以考虑把贝塞尔曲线的阶数做成可配置的。虽然三阶最常用但偶尔也会遇到需要二阶或者四阶的场景。把阶数做成参数用循环计算权重代码会更通用。不过要注意阶数越高采样数也要相应增加否则曲线会显得不够平滑。