Quadratic vs Cubic Bezier Curves in Three.js
In Three.js, QuadraticBezierCurve3 and
CubicBezierCurve3 are two classes used to create smooth,
parametric curves in 3D space. The fundamental mathematical difference
between them lies in the degree of their polynomial equations, which is
directly determined by the number of control points used to define the
curve’s shape and flexibility.
The Core Mathematical Differences
Both curves are defined parametrically by an interpolating variable \(t\), where \(t\) ranges from \(0\) (the start of the curve) to \(1\) (the end of the curve). However, they scale differently in terms of complexity and control.
1. QuadraticBezierCurve3 (Degree 2)
A quadratic Bezier curve is defined by three points: * \(P_0\): Start point * \(P_1\): Single control point (determines the bend) * \(P_2\): End point
The Equation
The mathematical formula for a quadratic Bezier curve at any point \(t\) is:
\[B(t) = (1 - t)^2 P_0 + 2(1 - t)t P_1 + t^2 P_2, \quad t \in [0, 1]\]
Characteristics
- Degree: 2 (quadratic polynomial).
- Shape limitations: Because it is a second-degree polynomial, a single quadratic Bezier curve cannot contain an inflection point. This means the curve cannot change the direction of its curvature; it can only bend in one direction (forming a simple C-shape).
2. CubicBezierCurve3 (Degree 3)
A cubic Bezier curve is defined by four points: * \(P_0\): Start point * \(P_1\): First control point (determines the departure tangent) * \(P_2\): Second control point (determines the arrival tangent) * \(P_3\): End point
The Equation
The mathematical formula for a cubic Bezier curve at any point \(t\) is:
\[B(t) = (1 - t)^3 P_0 + 3(1 - t)^2 t P_1 + 3(1 - t) t^2 P_2 + t^3 P_3, \quad t \in [0, 1]\]
Characteristics
- Degree: 3 (cubic polynomial).
- Shape limitations: Because it is a third-degree polynomial, it can have an inflection point where the curvature changes direction. This allows a single cubic Bezier curve to form “S” shapes, loops, and more complex paths.
Direct Comparison
| Feature | QuadraticBezierCurve3 | CubicBezierCurve3 |
|---|---|---|
| Control Points | 3 (\(P_0, P_1, P_2\)) | 4 (\(P_0, P_1, P_2, P_3\)) |
| Polynomial Degree | 2nd Degree (Quadratic) | 3rd Degree (Cubic) |
| Inflection Points | 0 (Cannot change curvature direction) | Up to 1 (Can form S-curves) |
| Three.js Constructor | new THREE.QuadraticBezierCurve3(v0, v1, v2) |
new THREE.CubicBezierCurve3(v0, v1, v2, v3) |
| Computational Cost | Lower (fewer multiplications) | Higher (more complex polynomial evaluation) |
Summary of Usage in Three.js
When choosing between the two in Three.js, use
QuadraticBezierCurve3 for simpler, gently arched paths
(like jump arcs or simple cables) to save on performance. Use
CubicBezierCurve3 when you need complex pathing, precise
tangent alignment at both ends, or “S” shaped transitions.