EN中文
开发者社区 > 程序

Unity中的曲线绘制（二）——贝塞尔曲线

发表于2016-11-02
评论0 9.7k浏览
贝塞尔曲线
　　贝塞尔曲线是一种特殊的曲线，它由一系列的点所定义。它开始于第一点结束于最后一个点，但并不需要经过中间点。中间点只用于端点插值，使得曲线平滑。




　　右图为二次贝塞尔曲线演示动画，t在[0,1]区间，可以看到曲线从p0开始，到p2结束，但是并不经过p1.
　　新建一个BezierCurve类，它包含三个点，同样定义Reset方法来初始化点的值，当绑定了BezierCurve脚本的对象创建或重置时，Unity editor会自动调用Reset方法。这个类代表了一个二次贝塞尔曲线。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
using UnityEngine;
 
public class BezierCurve : MonoBehaviour {
 
    public Vector3[] points;
 
    public void Reset () {
        points = new Vector3[] {
            new Vector3(1f, 0f, 0f),
            new Vector3(2f, 0f, 0f),
            new Vector3(3f, 0f, 0f)
        };
    }
}
　　同样地，我们为curve写一个inspector，它和LineInspector颇为类似。为了减少重复代码，我们把显示点的代码放在单独的ShowPoint方法里，通过传入参数index来调用。将curve,handleTransform和handleRotation作为全局变量，这样在调用ShowPoint时不用再传一次参数。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
using UnityEditor;
using UnityEngine;
 
[CustomEditor(typeof(BezierCurve))]
public class BezierCurveInspector : Editor {
 
    private BezierCurve curve;
    private Transform handleTransform;
    private Quaternion handleRotation;
 
    private void OnSceneGUI () {
        curve = target as BezierCurve;
        handleTransform = curve.transform;
        handleRotation = Tools.pivotRotation == PivotRotation.Local ?
            handleTransform.rotation : Quaternion.identity;
 
        Vector3 p0 = ShowPoint(0);
        Vector3 p1 = ShowPoint(1);
        Vector3 p2 = ShowPoint(2);
 
        Handles.color = Color.white;
        Handles.DrawLine(p0, p1);
        Handles.DrawLine(p1, p2);
    }
 
    private Vector3 ShowPoint (int index) {
        Vector3 point = handleTransform.TransformPoint(curve.points[index]);
        EditorGUI.BeginChangeCheck();
        point = Handles.DoPositionHandle(point, handleRotation);
        if (EditorGUI.EndChangeCheck()) {
            Undo.RecordObject(curve, "Move Point");
            EditorUtility.SetDirty(curve);
            curve.points[index] = handleTransform.InverseTransformPoint(point);
        }
        return point;
    }
}



　　贝塞尔曲线可以定义为一个参数方程。给定一个[0,1]区间内的参数t，就能得到曲线上的一个点，当t从0增至1，我们就能得到一条完整的贝塞尔曲线。
　　为了在场景中显示一条贝塞尔曲线，我们可以通过连续地画直线来模拟。做一个简单的循环，在点和点之间连续地绘制直线，并且将颜色设置为灰色。假设已经有GetPoint方法。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
private const int lineSteps = 10;
 
private void OnSceneGUI () {
    curve = target as BezierCurve;
    handleTransform = curve.transform;
    handleRotation = Tools.pivotRotation == PivotRotation.Local ?
        handleTransform.rotation : Quaternion.identity;
 
    Vector3 p0 = ShowPoint(0);
    Vector3 p1 = ShowPoint(1);
    Vector3 p2 = ShowPoint(2);
 
    Handles.color = Color.gray;
    Handles.DrawLine(p0, p1);
    Handles.DrawLine(p1, p2);
 
    Handles.color = Color.white;
    Vector3 lineStart = curve.GetPoint(0f);
    for (int i = 1; i <= lineSteps; i++) {
        Vector3 lineEnd = curve.GetPoint(i / (float)lineSteps);
        Handles.DrawLine(lineStart, lineEnd);
        lineStart = lineEnd;
    }
}
　　现在我们必须在BezierCurve里添加GetPoint方法，否则会编译报错。这一次要假设我们已经有一个工具类Bezier，对控制点进行插值处理。同样要将控制点转为世界坐标。
?
1
2
3
public Vector3 GetPoint (float t) {
    return transform.TransformPoint(Bezier.GetPoint(points[0], points[1], points[2], t));
}
　　添加一个静态类Bezier，暂时忽略中间点，只对p0和p1做插值试试看。
?
1
2
3
4
5
public static class Bezier {
    public static Vector3 GetPoint (Vector3 p0, Vector3 p1, Vector3 p2, float t) {
        return Vector3.Lerp(p0, p2, t);
    }
}


　　当然，端点之间的线性插值完全忽略了中间点。那么，我们如何将中间点也考虑进来呢？答案是多次插值。第一步，在起点和中间点之间进行插值，第二步在中间点和终点之间进行插值。这样就得到了两个点。再对这两个点进行一次插值，得到的结果就是贝塞尔曲线上的一个点。
?
1
2
3
public static Vector3 GetPoint (Vector3 p0, Vector3 p1, Vector3 p2, float t) {
    return Vector3.Lerp(Vector3.Lerp(p0, p1, t), Vector3.Lerp(p1, p2, t), t);
}
　　这种曲线又被称为二次贝塞尔曲线，因为它的数学表示是二次多项式。
线性贝塞尔曲线： 。


　　升一阶就可以得到 ，即将线性贝塞尔曲线中的P0和P1换成了两个新的插值点。整理后可以得到二次贝塞尔曲线的数学表示： 。


　　根据上面的公式我们可以用二次多项式来代替原代码中的Vector3.Lerp。
　　既然已经得到了二次贝塞尔曲线的多项式表示，我们可以写出它的一阶导： ，添加相关方法。
?
1
2
3
4
5
public static Vector3 GetFirstDerivative (Vector3 p0, Vector3 p1, Vector3 p2, float t) {
    return
        2f * (1f - t) * (p1 - p0) +
        2f * t * (p2 - p1);
}
　　曲线上某个点的一阶导就是该点的切线，这个方法返回的值可以认为是点沿曲线移动的速度，因此我们可以在BezierCurve中添加GetVelocity方法来获取速度。
　　因为它返回的是一个速度的向量而非一个点，它同样会受到曲线对象位置的影响，因此我们需要对它进行位置变换。
?
1
2
3
4
public Vector3 GetVelocity (float t) {
    return transform.TransformPoint(Bezier.GetFirstDerivative(points[0], points[1], points[2], t)) -
        transform.position;
}
　　为什么这里要用TransformPoint而不是TransformDirection呢？
因为TransformDirection方法不会考虑缩放的转换，但是我们需要把这个因素也考虑进去。因此我们把速度向量先当成一个点来处理，得到转换后的结果后再减去曲线对象的位置，就能得到正确的速度向量，即使缩放系数为负数，这个方法也会生效。
　　现在我们也绘制一下速度，同样在BezierCurveInspector中的OnSceneGUI方法中进行。
?
1
2
3
4
5
6
7
8
9
10
11
Vector3 lineStart = curve.GetPoint(0f);
Handles.color = Color.green;
Handles.DrawLine(lineStart, lineStart + curve.GetVelocity(0f));
for (int i = 1; i <= lineSteps; i++) {
    Vector3 lineEnd = curve.GetPoint(i / (float)lineSteps);
    Handles.color = Color.white;
    Handles.DrawLine(lineStart, lineEnd);
    Handles.color = Color.green;
    Handles.DrawLine(lineEnd, lineEnd + curve.GetVelocity(i / (float)lineSteps));
    lineStart = lineEnd;
}


　　我们可以很清楚地看到速度沿曲线变化的过程，但是这些线的长度太长，影响视图。我们改为只显示速度方向即可。
?
1
2
3
4
5
6
7
8
9
10
11
Vector3 lineStart = curve.GetPoint(0f);
Handles.color = Color.green;
Handles.DrawLine(lineStart, lineStart + curve.GetDirection(0f));
for (int i = 1; i <= lineSteps; i++) {
    Vector3 lineEnd = curve.GetPoint(i / (float)lineSteps);
    Handles.color = Color.white;
    Handles.DrawLine(lineStart, lineEnd);
    Handles.color = Color.green;
    Handles.DrawLine(lineEnd, lineEnd + curve.GetDirection(i / (float)lineSteps));
    lineStart = lineEnd;
}
　　在BezierCurve中添加GetDirection方法，对速度进行标准化。
?
1
2
3
public Vector3 GetDirection (float t) {
    return GetVelocity(t).normalized;
}


　接下来我们再升一阶，为Bezier添加新的方法，来处理三次贝塞尔曲线。和二次贝塞尔曲线类似，只不过它有四个点，其中两个控制点，两个起始点，共需要6次线性插值。整理后的曲线方程为： ，它的一阶导为 。


?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public static Vector3 GetPoint (Vector3 p0, Vector3 p1, Vector3 p2, Vector3 p3, float t) {
    t = Mathf.Clamp01(t);
    float oneMinusT = 1f - t;
    return
        oneMinusT * oneMinusT * oneMinusT * p0 +
        3f * oneMinusT * oneMinusT * t * p1 +
        3f * oneMinusT * t * t * p2 +
        t * t * t * p3;
}
 
public static Vector3 GetFirstDerivative (Vector3 p0, Vector3 p1, Vector3 p2, Vector3 p3, float t) {
    t = Mathf.Clamp01(t);
    float oneMinusT = 1f - t;
    return
        3f * oneMinusT * oneMinusT * (p1 - p0) +
        6f * oneMinusT * t * (p2 - p1) +
        3f * t * t * (p3 - p2);
}
　　将BezierCurve从二次升为三次贝塞尔曲线，为它添加第四个点，记得重置组件。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public Vector3 GetPoint (float t) {
    return transform.TransformPoint(Bezier.GetPoint(points[0], points[1], points[2], points[3], t));
}
 
public Vector3 GetVelocity (float t) {
    return transform.TransformPoint(
        Bezier.GetFirstDerivative(points[0], points[1], points[2], points[3], t)) - transform.position;
}
 
public void Reset () {
    points = new Vector3[] {
        new Vector3(1f, 0f, 0f),
        new Vector3(2f, 0f, 0f),
        new Vector3(3f, 0f, 0f),
        new Vector3(4f, 0f, 0f)
    };
}
　　BezierCurveInspector 同样也要进行更新，显示新添加的点。
?
1
2
3
4
5
6
7
8
Vector3 p0 = ShowPoint(0);
Vector3 p1 = ShowPoint(1);
Vector3 p2 = ShowPoint(2);
Vector3 p3 = ShowPoint(3);
 
Handles.color = Color.gray;
Handles.DrawLine(p0, p1);
Handles.DrawLine(p2, p3);


　　可以看到，我们利用直线绘制出来了初步的贝塞尔曲线，通过增加lineSteps的值，曲线会变得更为平滑。实际上，Unity已经封装了三次贝塞尔曲线的绘制方法 - Handles.DrawBezier
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
private const float directionScale = 0.5f;
 
private void OnSceneGUI () {
    curve = target as BezierCurve;
    handleTransform = curve.transform;
    handleRotation = Tools.pivotRotation == PivotRotation.Local ?
        handleTransform.rotation : Quaternion.identity;
 
    Vector3 p0 = ShowPoint(0);
    Vector3 p1 = ShowPoint(1);
    Vector3 p2 = ShowPoint(2);
    Vector3 p3 = ShowPoint(3);
 
    Handles.color = Color.gray;
    Handles.DrawLine(p0, p1);
    Handles.DrawLine(p2, p3);
 
    ShowDirections();
    Handles.DrawBezier(p0, p3, p1, p2, Color.white, null, 2f);
}
 
private void ShowDirections () {
    Handles.color = Color.green;
    Vector3 point = curve.GetPoint(0f);
    Handles.DrawLine(point, point + curve.GetDirection(0f) * directionScale);
    for (int i = 1; i <= lineSteps; i++) {
        point = curve.GetPoint(i / (float)lineSteps);
        Handles.DrawLine(point, point + curve.GetDirection(i / (float)lineSteps) * directionScale);
    }
}


腾讯GAD游戏程序交流群：484290331

如社区发表内容存在侵权行为，您可以点击这里查看侵权投诉指引

标签：

游戏开发Unity游戏视觉PK场景PVP