Curves and

Curved Surfaces

Adapted by FFL from

CSE167: Computer Graphics

Instructor: Ronen Barzel

UCSD, Winter 2006

1

Outline for today

Summary of Bézier curves

Piecewise-cubic curves, B-splines

Surface Patches

2

Curves: Summary

Use a few control points to describe a curve in space

Construct a function x(t)

moves a point from start to end of curve as t goes from 0 to 1

tangent to the curve is given by derivative x’(t)

We looked at:

Linear -- trivial case, just to get oriented

Bézier curves -- in particular, cubic

p0

p1

p0

p1 p2

p0

p1

p2

p3

Linear Quadratic Cubic

3

Linear Interpolation: Summary

Given two points p0 and p1

“Curve” is line segment between them

p0

p1

t=1

.

. 0<t<1 t=0

Three ways of writing expression:

         

x(t) (1 t)p0 (t)p1 Weighted average of the control points

x(t) (p1 p0 )t p0 Polynomial in t

x(t) p0 p1 1 1

1 0

t

1

Matrix form

4

Cubic Bézier Curve: Summary

Given four points p0, p1, p2, p3

curve interpolates the endpoints

intermediate points adjust shape: “tangent handles”

Recursive geometric construction

de Casteljau algorithm

Three ways to express curve

Weighted average of the control points: Bernstein polynomials

Polynomial in t

Matrix form

x

• p0

p1

p2

p3

5

Notice:

Weights always add to 1

B0 and B3 go to 1 -- interpolating the endpoints

                    x(t) B0 t p0 B1 t p1 B2 t p2 B3 t p3

The cubic Bernstein polynomials :

                    B0 t t 3 3t 2 3t 1

                    B1 t 3t 3 6t 2 3t

                    B2 t 3t 3 3t 2

                     B3 t t 3                        

                 Bi (t) 1

Cubic Bézier: �Bernstein Polynomials

6

Cubic Bézier: Polynomial, Matrix, Notation

Polynomial in t :

        x(t) at 3 bt 2 ct d

a p0 3p1 3p2 p3

b 3p0 6p1 3p2

c 3p0 3p1

d p0  Matrix form:

        x(t) p0 p1 p2 p3

GBez

1 3 3 1

3 6 3 0

3 3 0 0

1 0 0 0

BBez

t 3

t 2

t

1

T

 (New) Notation:

        Bez(t,p0 ,p1,p2 ,p3) x(t) for the given control points

7

Tangent to Cubic Bézier

Polynomial in t :

         x (t) 3at 2 2bt c

a p0 3p1 3p2 p3

b 3p0 6p1 3p2

c 3p0 3p1

d p0 d not used in tangent

 Matrix form:

         x (t) p0 p1 p2 p3

GBez

1 3 3 1

3 6 3 0

3 3 0 0

1 0 0 0

BBez

3t 2

2t

1

0

T

 Notation:

        Be z (t,p0 ,p1,p2 ,p3) x (t) for the given control points

8

nth-order Bézier curve

x t Bi

n t pi

i0

n

Bi

n t n

i

1 t

n it

B0

1 t t 1      B0

2 t t 2 2t 1      B0

3 t t 3 3t 2 3t 1

B1

1 t t B1

2 t 2t 2 2t B1

3 t 3t 3 6t 2 3t

B2

2 t t 2 B2

3 t 3t 3 3t 2

B3

3 t t 3

9

Evaluate/draw curves by:

Sampling uniformly in t

Adaptive/Recursive Subdivision

x(0.0)

x(0.25)

x(0.5)

x(0.75)

x(t)

x(t)

x(1.0)

10

Outline for today

Summary of Bézier curves

Piecewise-cubic curves, B-splines

Surface Patches

11

More control points

Cubic Bézier curve limited to 4 control points

Cubic curve can only have one inflection

Need more control points for more complex curves

With k points, could define a k-1 order Bézier

But it’s hard to control and hard to work with

The intermediate points don’t have obvious effect on shape

Changing any control point can change the whole curve

• Want local support: each control point only influences nearby portion of curve

12

Piecewise Curves

With a large number of points… Construct a curve that is a sequence of simple (low-order) curves end-to-end

Known as a piecewise polynomial curve

E.g., a sequence of line segments: a piecewise linear curve

E.g., a sequence of cubic curve segments: a piecewise cubic curve In this case, piecewise Bézier

13

Continuity

For the whole curve to look smooth, we need to consider continuity: C0 continuity: no gaps. The segments must match at the endpoints

C1 continuity: no corners. The tangents must match at the endpoints

C2 continuity: tangents vary smoothly (curvatures match). (smoother curves.)

Note also: G1, G2, etc. continuity • Looks at geometric continuity without considering parametric continuity

• Roughly, means that the tangent directions must match, but not the magnitudes

• Gets around “bad” parametrizations

• Often it’s what we really want, but it’s harder to compute

14

Constructing a single curve from many

Given N curve segments: x0(t), x1(t), …, xN-1(t)

Each is parameterized for t from 0 to 1

Define a new curve, with u from 0 to N:

Alternate: u also goes from 0 to 1

x(u)

x0 (u), 0 u 1

x1(u 1), 1 u 2

xN 1(u N 1 ),    N 1 u N

x(u) xi (u i),  where i u    (and x(N ) xN 1(1))

x(u) xi (Nu i),  where i Nu

15

Given N+1 points p0, p1, …, pN

Define curve:

N+1 points define N linear segments

x(i)=pi

C0 continuous by construction

G1 at pi when pi-1, pi, pi+1 are collinear

C1 at pi when pi-pi-1 = pi+1-pi

Piecewise-Linear curve

x(u) Lerp(u i,pi ,pi1),           i u i 1

(1 u i)pi (u i)pi1,   i u

p0

p1

p2

p3

p4

p5

p6

x(1.5)

x(5.25)

x(2.9)

16

Piecewise Bézier curve: segments

Given 3N 1 points p0 ,p1, ,p3N

Define N Bézier segments:

x0 (t) B0 (t)p0 B1(t)p1 B2 (t)p2 B3(t)p3

x1(t) B0 (t)p3 B1(t)p4 B2 (t)p5 B3(t)p6

           xN 1(t) B0 (t)p3N 3 B1(t)p3N 2 B2 (t)p3N 1 B3(t)p3N

x0(t)

x1(t)

x2(t)

x3(t)

p0

p1 p2

p3

p4 p5

p6

p7 p8

p9

p10 p11

p12

17

Piecewise Bézier curve

           x(u)

x0 ( 1

3u), 0 u 3

x1(1

3u 1), 3 u 6

xN 1(1

3u (N 1)), 3N 3 u 3N

           x(u) xi1

3u i , where i 1

3u

x0(t)

x1(t)

x2(t)

x3(t)

x(3.5)

x(8.75)

18

Piecewise Bézier curve

3N+1 points define N Bézier segments

x(i)=p3i

C0 continuous by construction

G1 continuous at p3i when p3i-1, p3i, p3i+1 are collinear

C1 continuous at p3i when p3i-p3i-1 = p3i+1-p3i

C2 is harder to get

p0

p0

p1

p2

P3

P3

p2

p1

p4

p5

p6

p6

p5

p4

C1 continuous C1 discontinuous

19

Piecewise Bézier curves

Used often in 2D drawing programs.

Inconveniences:

Must have 4 or 7 or 10 or 13 or … (1 plus a multiple of 3) points

Not all points are the same

• UI inconvenience: Interpolate, approximate, approximate, interpolate, …

• Math inconvenience: Different weight functions for each point.

UI solution: “Bézier Handles”

Math solution: B-spline

20

UI for Bézier Curve Handles

Bézier segment points:

Interpolating points presented normally as curve control points

Approximating points presented as “handles” on the curve points

UI features:

All curve control points are the same

Can have option to enforce C1 continuity

(www.blender.org)

21

Blending Functions

Evaluate using “Sliding window”

Local support: Window spans 4 points

Window contains 4 different Bernstein polynomials

Window moves forward by 3 units when u passes to next Bézier segment

Evaluate matrix in window:

x(u) t 3 t 2 t 1

T

1 3 3 1

3 6 3 0

3 3 0 0

1 0 0 0

BBez

p3i

p3i1

p3i2

p3i3

GBez

   where t 1

3u i and i 1

3u

22

B-spline blending functions

Still a sliding “window”, but use same weight function for every point

Weight function goes to 0 outside the 4-point neighborhood

local support -- each spot on curve only affected by neighbors

Shift “window” by 1, not by 3

No discrete segments: every point is the same

x(u) t 3 t 2 t 1

T

1

6

1 3 3 1

3 6 3 0

3 0 3 0

1 4 1 0

BB spline

pi

pi1

pi2

pi3

GB spline

where t u i and i u

23

B-Spline

Widely used for surface modeling

Intuitive behavior

Local support: curve only affected by nearby control points

Techniques for inserting new points, joining curves, etc.

Does not interpolate endpoints

Not a problem for closed curves

Sometimes use Bézier blending at the ends

But wait, there’s more!

Rational B-Splines

Non-uniform Rational B-Splines (NURBs)

24

Big drawback of all cubic curves: can’t make circles!

Nor ellipses, nor arcs. I.e. can’t make conic sections.

Rational B-spline: Add a weight to each point.

Homogeneous point: use w.

Weight causes point to “pull” more (or less).

With proper points & weights, can do circles.

Rational B-splines widely used for surface modeling

Need UI to adjust the weight.

Often hand-drawn curves are unweighted, but automatically-generated

curves for circles etc. have weights.

Rational Curves

pull more

pull less

25

Non-Uniform Rational B-Spline (NURBS)

Don’t assume that control points are equidistant in u

Introduce knot vector that describes the separation of the points.

Features…

Allows tighter bends or corners.

Allows corners (C1 discontinuity).

Certain knot values turn out to give a Bézier segment.

Allows mixing interpolating (e.g. at endpoints) & approximating.

Math is messier

Read about it in references.

Very widely used for surface modeling

Can interactively create as if uniform.

Techniques for cutting, inserting, merging, filleting, revolving,

etc…

26

Outline for today

Summary of Bézier curves

Piecewise-cubic curves, B-splines

Surface Patches

27

Curved Surfaces

Remember the overview of curves:

Described by a series of control points

A function x(t)

Segments joined together to form a longer curve

Same for surfaces, but now 2 dimensions

Described by a mesh of control points

A function x(u,v)

Patches joined together to form a bigger surface.

28

x(u,v) describes a point in space for any given (u,v) pair

u,v each range from 0 to 1

Rectangular topology

Parametric curves:

For fixed u0 , have a v curve x(u0,v)

For fixed v0 , have a u curve x(u,t0)

For any point on the surface, there are a pair of parametric curves that go through point

Parametric Surface Patch

0 1

1

u

v

x

y

z

x(0.8,0.7)

u

v

x(0.4,v)

x(u,0.25)

29

Parametric Surface Tangents

The tangent to a parametric curve is also tangent to the surface

For any point on the surface, there are a pair of (parametric) tangent vectors

Note: not necessarily perpendicular to each other

u

v

Notation:

    The tangent along a u curve, AKA the tangent in the u direction, is written as:

                           x

u(u,v) or

ux(u,v) or xu (u,v)

    The tangent along a v curve, AKA the tangent in the v direction, is written as:

                        x

v(u,v) or

vx(u,v) or xv (u,v)

Note that each of these is a vector-valued function:

    At each point x(u,v) on the surface, we have tangent vectors

ux(u,v) and

vx(u,v)

x

u

x

v

30

Parametric Surface Normal

Get the normal to a surface at any point by taking the cross product of the two parametric tangent vectors at that point.

Order matters!

               n(u,v) x

u(u,v)

x

v(u,v)

Typically we are interested in the unit normal, so we need to normalize

               n*(u,v) x

u(u,v)

x

v(u,v)

               n(u,v) n*(u,v)

n*(u,v)

x

u

x

vn

31

Polynomial Surface Patches

x(s,t) is typically polynomial in both s and t

Bilinear:

Bicubic:

x(s,t) ast bs ct d

x(s,t) (at b)s (ct d) -- hold t constant  linear in s

x(s,t) (as c)t (bs d) -- hold s constant linear in t

x(s,t) as3t 3 bs3t 2 cs3t 2 ds3 es2t 3 fs2t 2 gs2t hs2

   ist 3 jst 2 kst ls mt 3 nt 2 ot p

x(s,t) (at 3 bt 2 ct d)s3 (et 3 ft 2 gt h)s2    -- hold t constant cubic in s

(it 3 jt 2 kt l)s (mt 3 nt 2 ot p)    

x(s,t) (as3 es2 is m)t 3 (bs3 fs2 js n)t 2      -- hold s constant  cubic in t

(cs3 gs2 ks o)t (ds3 hs2 ls p)      

32

Bilinear Patch (control mesh)

A bilinear patch is defined by a control mesh with four points p0, p1, p2, p3

AKA a (possibly-non-planar) quadrilateral

Compute x(u,v) using a two-step construction

p0 p1

p2

p3

u

v

33

Bilinear Patch (step 1)

For a given value of u, evaluate the linear curves on the two u-direction edges

Use the same value u for both:

q0=Lerp(u,p0,p1) q1=Lerp(u,p2,p3)

p0 p1

p2

p3

u

v

q0

q1

34

Bilinear Patch (step 2)

Consider that q0, q1 define a line segment. Evaluate it using v to get x

p0 p1

p2

p3

u

v

q0

q1

x

x Lerp(v,q0,q1)

35

Bilinear Patch (full)

Combining the steps, we get the full formula

p0 p1

p2

p3

u

v

q0

q1

x

x(u,v) Lerp(v,Lerp(u,p0,p1),Lerp(u,p2,p3))

36

Bilinear Patch (other order)

Try the other order: evaluate first in the v direction

r0 Lerp(v,p0,p2 )     r1 Lerp(v,p1,p3)

p0 p1

p2

p3

u

v

r0

r1

37

Bilinear Patch (other order, step 2)

Consider that r0, r1 define a line segment. Evaluate it using u to get x

x Lerp(u,r0,r1)

p0 p1

p2

p3

u

v

r0

r1

x

38

Bilinear Patch (other order, full)

The full formula for the v direction first:

x(u,v) Lerp(u,Lerp(v,p0,p2 ), Lerp(v,p1,p3))

p0 p1

p2

p3

u

v

r0

r1

x

39

Bilinear Patch (either order)

It works out the same either way!

x(u,v) Lerp(v, Lerp(u,p0 ,p1), Lerp(u,p2 ,p3))

x(u,v) Lerp(u, Lerp(v,p0 ,p2 ), Lerp(v,p1,p3))

p0 p1

p2

p3

u

v

q0

q1

r0

r1

x

40

Bilinear Patch

41

Bilinear patch formulations

As a weighted average of control points:

          x(u,v) (1 u)(1 v)p0 u(1 v)p1 (1 u)vp2 uvp3

In polynomial form:

          x(u,v) (p0 p1 p2 p3)uv (p1 p0 )u (p2 p0 )v p0

42

We have this matrix form for linear curves:

                x(t) p0 p1 1 1

1 0

t

1

Can derive this for bilinear patches:

                xx (u,v) v 1 1 1

1 0

p0 x p1x

p2 x p3x

1 1

1 0

u

1

                xy (u,v) v 1 1 1

1 0

p0 y p1y

p2 y p3y

1 1

1 0

u

1

                xz (u,v) v 1

VT

1 1

1 0

BLinT

p0z p1z

p2z p3z

Gx,y,z

1 1

1 0

BLin

u

1

U

Compactly, we have:

                x(u,v)

VTCxU

VTCyU

VTCzU

where

Cx BLin

TGxBLin

Cy BLin

TGyBLin

Cz BLin

TGzBLin

are constants

Bilinear patch: Matrix form

43

Bilinear Patch

Properties of the bilinear patch:

Interpolates the control points

The boundaries are straight line segments connecting the control points

If the all 4 points of the control mesh are co-planar, the patch is flat

If the points are not coplanar, get a curved surface • saddle shape, AKA hyperbolic paraboloid

The parametric curves are all straight line segments! • a (doubly) ruled surface: has (two) straight lines through every point

Kinda nifty, but not terribly useful as a modeling primitive

44

Bézier Control Mesh

A bicubic patch has a grid of 4x4 control points, p0 through p15

Defines four Bézier curves along u: p0,1,2,3; p4,5,6,7; p8,9,10,11; p12,13,14,15

Defines four Bézier curves along v: p0,4,8,12; p1,6,9,13; p2,6,10,14; p3,7,11,15

Evaluate using same approach as bilinear…

p0 p1

p2

p3

p4 p5

p6

p7

p8 p9

p10

p11

p12 p13

p14 p15

u

v

45

Bézier patch (step 1)

Evaluate all four of the u-direction Bézier curves at u, to get points q0 … q3

p0 p1

p2

p3

p4 p5

p6

p7

p8 p9

p10

p11

p12 p13

p14 p15

u

v

q0

q1

q2

q3

q0 Bez(u,p0 ,p1,p2 ,p3)

q1 Bez(u,p4 ,p5 ,p6 ,p7 )

q2 Bez(u,p8 ,p9 ,p10 ,p11)

q3 Bez(u,p12 ,p13,p14 ,p15 )

46

Bézier patch (step 2)

Consider that points q0 … q3 define a Bézier curve; evaluate it at v

p0 p1

p2

p3

p4 p5

p6

p7

p8 p9

p10

p11

p12 p13

p14 p15

u

v

q0

q1

q2

q3

x

x(u,v) Bez(v,q0,q1,q2,q3)

47

Bézier patch (either order)

Sure enough, you get the same result in either order.

p0 p1

p2

p3

p4 p5

p6

p7

p8 p9

p10

p11

p12 p13

p14 p15

u

v

r0 r1

r2 r3

x

q0 Bez(u,p0 ,p1,p2 ,p3)

q1 Bez(u,p4 ,p5 ,p6 ,p7 )

q2 Bez(u,p8 ,p9 ,p10 ,p11)

q3 Bez(u,p12 ,p13,p14 ,p15 )

x(u,v) Bez(v,q0 ,q1,q2 ,q3)

  

r0 Bez(v,p0 ,p4 ,p8 ,p12 )

r1 Bez(v,p1,p5 ,p9 ,p13)

r2 Bez(v,p2 ,p6 ,p10 ,p14 )

r3 Bez(v,p3,p7 ,p11,p15 )

x(u,v) Bez(u,r0 ,r1,r2 ,r3)

q0

q1

q2

q3

48

Bézier patch

Properties: Convex hull: any point on the surface will fall within the convex hull of the control points

Interpolates 4 corner points.

Approximates other 12 points, which act as “handles”

The boundaries of the patch are the Bézier curves defined by the points on the mesh edges

The parametric curves are all Bézier curves

49

Evaluating a Bézier patch

Most straightforward: follow the 2-step construction

Lets you evaluate patch using existing methods for evaluting curves

Won’t write out the weighted average or polynomial forms

But can do matrix form…

50

U

u3

u2

u

1

    V

v3

v2

v

1

     BBez

1 3 3 1

3 6 3 0

3 3 0 0

1 0 0 0

BBez

T

     

Cx BBez

T GxBBez

Cy BBez

TGyBBez

Cz BBez

TGzBBez

        Gx

p0 x p1x p2 x p3x

p4 x p5 x p6 x p7 x

p8 x p9 x p10 x p11x

p12 x p13x p14 x p15 x

, Gy = , Gz =

x u,v

VTCxU

VTCyU

VTCzU

Bézier patch, matrix form

51

Bézier patch, matrix form

Cx stores the coefficients of the bicubic equation for x

Cy stores the coefficients of the bicubic equation for y

Cz stores the coefficients of the bicubic equation for z

Gx stores the geometry (x components of the control points)

Gy stores the geometry (y components of the control points)

Gz stores the geometry (z components of the control points)

BBez is the basis matrix (Bézier basis)

U and V are the vectors formed from the powers of u and v

Compact notation

Leads to efficient method of computation

Can take advantage of hardware support for 4x4 matrix arithmetic

52

Tangents of Bézier patch

The “q” and “r” curves we constructed are actually the parametric curves at x(u,v)

Remember, tangents to surface = tangents to parametric curves.

So we can compute the tangents using the same construction curves!

Notice that the tangent in the u direction is for the curve that varies in u, i.e. for the “r” curve;

Similarly, the tangent in the v direction is for the “q” curve.

(Get the normal as usual by taking cross product of the tangents.)

p0 p1

p2

p3

p4 p5

p6

p7

p8 p9

p10

p11

p12 p13

p14

p15

u

v

r0 r1

r2 r3

x

q0

q1

q2

q3

x

u

x

v

53

Tangents of Bézier patch, construction

q0 Bez(u,p0 ,p1,p2 ,p3)

q1 Bez(u,p4 ,p5 ,p6 ,p7 )

q2 Bez(u,p8 ,p9 ,p10 ,p11)

q3 Bez(u,p12 ,p13,p14 ,p15 )

x

v(u,v) Be z (v,q0 ,q1,q2 ,q3)

         

r0 Bez(v,p0 ,p4 ,p8 ,p12 )

r1 Bez(v,p1,p5 ,p9 ,p13)

r2 Bez(v,p2 ,p6 ,p10 ,p14 )

r3 Bez(v,p3,p7 ,p11,p15 )

x

u(u,v) Be z (u,r0 ,r1,r2 ,r3)

p0 p1

p2

p3

p4 p5

p6

p7

p8 p9

p10

p11

p12 p13

p14

p15

u

v

r0 r1

r2 r3

x

q0

q1

q2

q3

x

u

x

v

54

Tangents of Bézier patch, matrix form

The matrix form makes it easy to evaluate the tangents directly:

U

u3

u2

u

1

   U

3u2

2u

1

0

              V

v3

v2

v

1

   V

3v2

2v

1

0

                       x(u,v)

VTCxU

VTCyU

VTCzU

     x

u(u,v)

VTCx U

VTCy U

VTCz U

         x

v(u,v)

VT CxU

VT CyU

VT CzU

55

Tessellating a Bézier patch

Uniform tessellation is most straightforward

Evaluate points on a grid

Compute tangents at each point, take cross product to get per-vertex normal

Draw triangle strips (several choices of direction)

Adaptive tessellation/recursive subdivision

Potential for “cracks” if patches on opposite sides of an edge divide differently

Tricky to get right, but can be done.

56

Building a surface from Bézier patches

Lay out grid of adjacent meshes

For C0 continuity, must share points on the edge Each edge of a Bézier patch is a Bézier curve based only on the edge mesh points

So if adjacent meshes share edge points, the patches will line up exactly.

But we have a crease…

57

C1 continuity across Bézier edges

We want the parametric curves that cross each edge to

have C1 continuity

So the handles must be equal-and-opposite across the edge:

http://www.spiritone.com/~english/cyclopedia/patches.html

58

Modeling with Bézier patches

Original Utah teapot specified as Bézier Patches

59

Modeling Headaches

Original Teapot isn’t “watertight”

spout & handle intersect with body

no bottom

hole in spout

gap between lid and body

Rectangular topology makes it hard to:

join or abut curved pieces

build surfaces with holes

build surfaces with awkward topology or structure

60

Advanced surface modeling

B-spline patches

For the same reason as using B-spline curves

More uniform behavior

Better mathematical properties

Does not interpolate any control points.

61

Advanced surface modeling

NURBS surfaces.

Can take on more shapes

• conic sections

• kinks

Can blend, merge, fillet, …

Still has rectangular topology, though..

62

Advanced surface modeling

Trim curves: cut away part of surface

Implement as part of tessellation/rendering

And/or construct new geometry

63

Subdivision Surfaces

Arbitrary mesh, not rectangular topology

Not parametric

No u,v parameters

Can make surfaces with arbitrary topology or

connectivity

Work by recursively subdividing mesh faces

Per-vertex annotation for weights, corners,

creases

Used in particular for character animation:

One surface rather than collection of patches

Can deform geometry without creating cracks