03-GDC09 Eiserloh Squirrel Interpolation

8/10/2019 03-GDC09 Eiserloh Squirrel Interpolation

1/212


2/212

Interpolationand

Splines

Squirrel EiserlohDirector

TrueThought LLC

[email protected]

[email protected]
mailto:[email protected]:[email protected]:[email protected]:[email protected]


3/212

Overview

Averaging and Blending Interpolation Parametric Equations Parametric Curves and Splines

including:Bezier splines (linear, quadratic, cubic)

Cubic Hermite splinesCatmull-Rom splinesCardinal splinesKochanekBartels splinesB-splines


4/212


5/212

Averaging and Blending First, we start off with the basics. I mean, really basic. Lets go back to grade school.

How do you average two numbers together?

( A + B) / 2


6/212

Averaging and Blending Lets change that around a bit.

( A + B) / 2

becomes

(.5 * A) + (.5 * B)

i.e. half of A, half of B, or a blend of A and B


7/212

We can, of course, also blend A and B unevenly(with different weights ):

(.35 * A) + ( .65 * B)

In this case, we are blending 35% of A with65% of B.

Can use any blend weights we want, as long asthey add up to 1.0 (100%).

Averaging and Blending


8/212


9/212

Averaging and Blending So if we try to generalize here, we could say:

(s * A) + ( t * B)

...where s is how much of A we want, and t is how much of B we want

...and s + t = 1.0 (really, s is just 1- t )

so: ( (1- t ) * A) + ( t * B)

Which means we can control the balance of theentire blend by changing just one number: t


10/212

Averaging and Blending There are two ways of thinking about this (and a formula

for each):

#1: Blend some of A with some of B

(s * A) + ( t * B) where s = 1- t

#2: Start with A, and then add some amount of thedistance from A to B

A + t *(B A)


11/212


In both cases, the result of our blend is just plain A if t =0;i.e. if we dont want any of B.

(1.00 * A) + (0.00 * B) = A

or: A + 0.00*(B A) = A


12/212


Likewise, the result of our blend is justplain B if t =1; i.e. if we dont want anyof A.

(0.00 * A) + (1.00 * B) = B

or: A + 1.00*(B A) = A + B A = B


13/212

Averaging and Blending However we choose to think about it, theres a

single knob, called t , that we are tweakingto get the blend of A and B that we want.


14/212

Blending Compound Data


15/212

Blending Compound Data We can blend more than just numbers.

Blending 2D and 3D vectors, for example, is a cinch:

Just blend each component (x,y,z) separately, at thesame time.

P = (s * A) + (t * B) where s = 1-t

is equivalent to:

Px = (s * A x) + (t * B x)

Py = (s * A y) + (t * B y)Pz = (s * A z) + (t * B z)


16/212

Blending Compound Data(such as Vectors)


17/212



18/212



19/212



20/212

Blending Compound Data Need to be careful, though!

Not all compound data types will blend

correctly with this sort of (blend-the-components) approach.

Examples: Color RGBs, Euler angles(yaw/pitch/roll), Matrices, Quaternions...

...in fact, there are a bunch that wont.


21/212


Heres an RGB color example:

If A is RGB( 255, 0, 0 ) bright red...and B is RGB( 0, 255, 0 ) bright

green

Blending the two (with t = 0.5) gives:RGB( 127, 127, 0 )

...which is a dull, swampy color . Yuck.


22/212


What we wanted was this:

...and what we got instead was this:


23/212


24/212

Interpolation


25/212

Interpolation

Interpolation is just changing blendweights over time . Also called Lerp . i.e. Turning the knob (t) progressively,

not just setting it to some position. Often we crank slowly from t=0 to t=1.


26/212

Interpolation Since games are generally frame-based, we

usually have some Update() method that getscalled, in which we have to decide what weresupposed to look like at this instant in time.

There are two main ways of approaching thiswhen were interpolating:

#1: Blend from A to B over the course of

several frames ( parametric evaluation );

#2: Blend one step from wherever-Im-at nowto wherever-Im-going ( numericalintegration ).


27/212


28/212

Interpolation We use lerping

all the time, underdifferent names.

For example:

an Audio crossfade


29/212



For example:

an Audio crossfade fading up lights


30/212



For example:

an Audio crossfade fading up lights or this cheesy

PowerPoint effect.


31/212

Interpolation

Basically, whenever we do any sort ofblend over time , were lerping.


32/212

Implicit EquationsSweetness...

I loves me some math!

Thats my cue to go get a margarita. -Squirrels wife


33/212

Implicit Equations

Implicit equations define what is, and isnt,included in a set of points (a locus).


34/212

Implicit Equations

If the equation is TRUE for some x and y,then the point (x,y) is included on the line.


35/212

Implicit Equations

If the equation is FALSE for some x and y,then the point (x,y) is NOT included on the line.


36/212

Implicit Equations

Here, the equation X 2 + Y 2 = 25 defines a locus of all the points within 5 units of the origin.


37/212

Implicit Equations

If the equation is TRUE for some x and y,then the point (x,y) is included on the circle.


38/212

Implicit Equations

If the equation is FALSE for some x and y,then the point (x,y) is NOT included on the circle.


39/212

Parametric Equations A parametric equation is one that has been rewritten

so that it has one clear input parameter (variable)that everything else is based in terms of.

In other words, a parametric equation is basicallyanything you can hook up to a single knob . Its aformula that you can feed in a single number (the

knob value, t, usually from 0 to 1), and the formulagives back the appropriate value for that particular t.

Think of it as a function that takes a float and returns...whatever (a position, a color, an orientation, etc.):

someComplexData ParametricEquation( float t );


40/212

Parametric Equations Essentially:

P(t) = some formula with t in it

...as t changes, P changes(P depends upon t)

P(t) can return any kind of value; whatever we wantto interpolate, for instance.

Position (2D, 3D, etc.)OrientationScale

Alphaetc.


41/212

Parametric Equations

Example: P(t) is a 2D position...Pick some value of t, plug it in, see where P is!


42/212




43/212




44/212




45/212




46/212




47/212




48/212




49/212


50/212

Parametric Curves

Parametric curves are curves that are definedusing parametric equations.


51/212


52/212

Parametric Curves

Set the knob to 0, and crank it towards 1


53/212

Parametric Curves

As we turn the knob, we keep plugging the latest tinto the curve equation to find out where P is now


54/212


55/212

Parametric Curves

So thats the basic idea.

Now how do we actually do it?


56/212

Bezier Curves


57/212

Linear Bezier Curves

Bezier curves are the easiest kind to understand.

The simplest kind of Bezier curves areLinear Bezier curves.

Theyre so simple, theyre not even curvy!


58/212


P = ( (1-t) * A) + (t * B) // weighted average

or, as I prefer to write it:

P = ( s * A) + (t * B) where s = 1-t


59/212




P = ( s * A) + (t * B) where s = 1-t


60/212




P = ( s * A) + (t * B) where s = 1-t


61/212


So, for t = 0.75 (75% of the way from A to B):

P = ( (1-t) * A) + ( t * B)

or P = ( .25 * A) + ( .75 * B)


62/212


So, for t = 0.75 (75% of the way from A to B):

P = ( (1-t) * A) + ( t * B)

or P = ( .25 * A) + ( .75 * B)


63/212


Here it is in motion (thanks, internet!)

A

B


64/212

Quadratic Bezier Curves


65/212


A Quadratic Bezier curve is just a blend

of two Linear Bezier curves.

The word quadratic means that if wesniff around the math long enough,well see t 2 . (In our Linear Beziers we

saw t and 1-t , but never t2).


66/212


Three control points : A, B, and C


67/212



Two different Linear Beziers: AB and BC


68/212



Two different Linear Beziers: AB and BC Instead of P, using E for AB and F for BC


69/212


70/212


Interpolate E along AB as we turn the knob

Interpolate F along BC as we turn the knob Move E and F simultaneously only one t!


71/212


Interpolate E along AB as we turn the knob Interpolate F along BC as we turn the knob Move E and F simultaneously only one t!


72/212


73/212


Now lets turn the knob again...(from t=0 to t=1)

but draw a line between E and F as they move.


74/212





75/212


76/212





77/212





78/212


This time, well also interpolate P from E to F...using the same t as E and F themselves

Watch where P goes !


79/212





80/212





81/212





82/212





83/212


Note that mathematicians useP

0, P

1, P

2instead of A, B, C

I will keep using A, B, C here for simplicity

A

B

C


84/212


We know P starts at A, and ends at C It is clearly influenced by B...

...but it never actually touches B

A

B

C


85/212


86/212

Quadratic Bezier Curves B is a guide point of this curve; drag

it around to change the curves contour.


87/212




88/212




89/212


By the way, this is also that thing you weredrawing in junior high when you were bored.

(when you werent drawing D&D maps, that is)


90/212


By the way, this is also that thing you weredrawing in junior high when you were bored.

(when you werent drawing D&D maps, that is)

A

B C


91/212


BONUS: This is also how they makeTrue Type Fonts look nice and curvy.


92/212

Quadratic Bezier Curves Remember:

A Quadratic Bezier curve is just a blend

of two Linear Bezier curves.

So the math is still pretty simple.

(Just a blend of two Linear Bezierequations.)


93/212


E(t) = (s * A) + (t * B) where s = 1-t F(t) = (s * B) + (t * C) P(t) = (s * E) + (t * F) technically E(t) and F(t) here


94/212


E(t) = sA + tB where s = 1-t F(t) = sB + tC P(t) = sE + tF technically E(t) and F(t) here


95/212


96/212


97/212

Quadratic Bezier Curves What if t = 0 ? (at the start of the curve)

so then... s = 1

P(t) = (s 2) A + 2(st) B + (t 2)Cbecomes

P(t) = (1 2) A + 2(1*0) B + (0 2)C

becomesP(t) = (1) A + 2(0) B + (0) C

becomes

P(t) = A


98/212

Quadratic Bezier Curves What if t = 1 ? (at the end of the curve)

so then... s = 0


P(t) = (0 2) A + 2(0*1) B + (1 2)C

becomesP(t) = (0) A + 2(0) B + (1) C

becomes

P(t) = C


99/212

Quadratic Bezier Curves What if t = 0.5 ? (halfway through the curve)

so then... s = 0.5 also


P(t) = (0.5 2) A + 2(0.5*0.5) B + (0.5 2)C

becomesP(t) = (0.25) A + 2(0.25) B + (.25) C

becomes

P(t) = .25 A + .50 B + .25 C


100/212

Quadratic Bezier Curves If we say M is the midpoint of the line

AC...


101/212

Quadratic Bezier Curves If we say M is the midpoint of the line

AC...


102/212

Quadratic Bezier Curves And H is the halfway point on the curve

(where t = 0.5 )


103/212

Quadratic Bezier Curves Then H is also halfway from M to B


104/212

Quadratic Bezier Curves So, lets say that wed rather drag the

halfway point ( H) around than B.(maybe because H is on the curve itself)


105/212

Quadratic Bezier Curves So now we know H, but not B.

(and we also know A and C)


106/212

Quadratic Bezier Curves Start by computing M (midpoint of AC):

M = .5 A + .5 C


107/212

Quadratic Bezier Curves Compute MH (H M)


108/212

Quadratic Bezier Curves Add MH to H to get B

B = H + MH (or 2 H M)


109/212


110/212


111/212

Cubic Bezier Curves


112/212

Cubic Bezier Curves

A Cubic Bezier curve is just a blend of

two Quadratic Bezier curves.

The word cubic means that if we sniffaround the math long enough, well seet 3 . (In our Linear Beziers we saw t ; in

our Quadratics we saw t2

).


113/212

Cubic Bezier Curves

Four control points : A, B, C, and D 2 different Quadratic Beziers: ABC and BCD 3 different Linear Beziers: AB , BC, and CD


114/212

Cubic Bezier Curves

As we turn the knob (one knob, one t for everyone):Interpolate E along AB // all three lerp simultaneously

Interpolate F along BC // all three lerp simultaneouslyInterpolate G along CD // all three lerp simultaneously


115/212

Cubic Bezier Curves




116/212

Cubic Bezier Curves




117/212

Cubic Bezier Curves




118/212

Cubic Bezier Curves




119/212

Cubic Bezier Curves

Also:Interpolate Q along EF // lerp simultaneously with E,F,G

Interpolate R along FG // lerp simultaneously with E,F,G


120/212

Cubic Bezier Curves




121/212

Cubic Bezier Curves




122/212

Cubic Bezier Curves




123/212

Cubic Bezier Curves




124/212

Cubic Bezier Curves

And finally:Interpolate P along QR

(simultaneously with E,F,G,Q,R) Again, watch where P goes !


125/212

Cubic Bezier Curves




126/212


127/212

Cubic Bezier Curves




128/212

Cubic Bezier Curves




129/212

Cubic Bezier Curves

A

B C

D

Now P starts at A, and ends at D It never touches B or C...

since they are guide points


130/212

Cubic Bezier Curves Remember:

A Cubic Bezier curve is just a blend of twoQuadratic Bezier curves.

Which are just a blend of 3 Linear Beziercurves.

So the math is still not too bad.

(A blend of blends of Linear Bezier equations.)


131/212

Cubic Bezier Curves

E(t) = s A + t B where s = 1-t F(t) = s B + t C G(t) = s C + t D


132/212

Cubic Bezier Curves

And then Q and R interpolate those results... Q(t) = s E + t F R (t) = s F + t G


133/212

Cubic Bezier Curves

And lastly P interpolates from Q to R

P(t) = s Q + t R


134/212

Cubic Bezier Curves E(t) = s A + t B // Linear Bezier (blend of A and B) F(t) = s B + t C // Linear Bezier (blend of B and C) G(t) = s C + t D // Linear Bezier (blend of C and D)

Q(t) = s E + t F // Quadratic Bezier (blend of E and F) R (t) = s F + t G // Quadratic Bezier (blend of F and G)

P(t) = s Q + t R // Cubic Bezier (blend of Q and R)

Okay! So lets combine these all together...


135/212

Cubic Bezier Curves Do some hand-waving mathemagic

here......and we get one equation to

rule them all :

P(t) = (s 3) A + 3(s 2t) B + 3(st 2)C + (t 3)D

(BTW, theres our cubic t 3 )


136/212

Cubic Bezier Curves Lets compare the three Bezier

equations (Linear, Quadratic, Cubic):

P(t) = (s) A + (t) BP(t) = (s 2) A + 2(st) B + (t 2)CP(t) = (s 3) A + 3(s 2t) B + 3(st 2)C + (t 3)D

Theres some nice symmetry here...


137/212

Cubic Bezier Curves Write in all of the numeric coefficients ... Express each term as powers of s and t

P(t)= 1 (s 1 t0 ) A + 1 (s 0 t1 )BP(t)= 1 (s 2 t0 ) A + 2 (s 1 t1 )B + 1 (s 0 t2 )CP(t)= 1 (s 3 t0 ) A + 3 (s 2 t1 )B + 3 (s 1 t2 )C + 1 (s 0 t3 )D


138/212

Cubic Bezier Curves Write in all of the numeric coefficients ... Express each term as powers of s and t

P(t)= 1 (s1 t0 ) A + 1 (s0 t1 )BP(t)= 1 (s2 t0 ) A + 2 (s1 t1 )B + 1 (s0 t2 )CP(t)= 1 (s3 t0 ) A + 3 (s2 t1 )B + 3 (s1 t2 )C + 1 (s0 t3 )D

Note: s exponents count down

Cubic Bezier Curves


139/212

Cubic Bezier Curves

Write in all of the numeric coefficients ... Express each term as powers of s and t


Note: s exponents count down Note: t exponents count up

Cubic Bezier Curves


140/212

Cubic Bezier Curves

Write in all of the numeric coefficients ... Express each term as powers of s and t


Note: numeric coefficients are from PascalsTriangle...

Cubic Bezier Curves


141/212

Cubic Bezier Curves

What if t = 0.5 ? (halfway through the curve)

so then... s = 0.5 also

P(t) = (s 3) A + 3(s 2t)B + 3(st 2)C + (t 3)D

becomesP(t) = (.5 3) A + 3(.5 2*.5) B + 3(.5*.5 2)C + (.5 3)D

becomes

P(t) = (.125) A + 3(.125) B + 3(.125) C + (.125) Dbecomes

P(t) = .125 A + .375 B + .375 C + .125 D

Cubic Bezier Curves


142/212

Cubic Bezier Curves

Cubic Bezier Curves can also be S-shaped, iftheir control points are twisted as pictured

here.

Cubic Bezier Curves


143/212

Cubic Bezier Curves

Cubic Bezier Curves can also be S-shaped, iftheir control points are twisted as pictured

here.

Cubic Bezier Curves


144/212

Cubic Bezier Curves

They can also loop back around in extremecases.


145/212

Cubic Bezier Curves


146/212

Seen in lots of places:

Photoshop GIMP PostScript Flash AfterEffects 3DS Max Metafont

Understable Disc Golf flightpath, from above

Cubic Bezier Curves


147/212

Splines

Splines


148/212

Splines

Okay, enough of Curves already.

So... whats a Spline?

Splines


149/212

Splines

A spline is a chain of curves joined end-to-end.

Splines


150/212

Splines


Splines


151/212

Splines


Splines


152/212

Splines


Splines


153/212

Splines

Curve end/start points (welds) are knots

Splines


154/212

Splines

Think of two different t s:

splines t : Zero at start of spline, keepsincreasing until the end of the spline chain

local curves t : Resets to 0 at start ofeach curve (at each knot).

Conventionally, the local curves t is

fmod( spline_t, 1.0 )

Splines


155/212

Splines

For a spline of 4 curve-pieces:

Interpolate spline_t from 0.0 to 4.0

If spline_t is 2.67, then we are:67% through this curve ( local_t = .67)In the third curve section (0,1, 2 ,3)

Plug local_t into third curve equation

Splines


156/212

Splines

Interpolating spline_t from 0.0 to 4.0...

Splines


157/212

p


Splines


158/212

p


Splines


159/212

p


Splines


160/212

p


Splines


161/212

p


Splines


162/212

p


Splines


163/212

p


Splines


164/212

p


Quadratic Bezier Splines


165/212

Q p

This spline is a quadratic Bezier spline ,

since it is made out of quadratic Bezier curves

Continuity


166/212

y

Good continuity (C 1);

connected andaligned

Poor continuity (C 0);

connected but notaligned

Continuity


167/212

y

To ensure good continuity (C 1), make BC of first

curve colinear (in line with) AB of second curve.(derivative is continuous across entire spline)

Continuity


168/212

y

Excellent continuity (C 2) is when speed/density

matches on either side of each knot.(second derivative is continuous across entire spline)

Cubic Bezier Splines


169/212

We can build a cubic Bezier spline insteadby using cubic Bezier curves.

Cubic Bezier Splines


170/212

We can build a cubic Bezier spline insteadby using cubic Bezier curves.


171/212


172/212

Cubic Hermite Splines



173/212

A cubic Hermite spline is very similar to acubic Bezier spline.



174/212

However, we do not specify the B and C guide points. Instead, we give the velocity at point A (as U), and the

velocity at D (as V ) for each cubic Hermite curve .

U

V



175/212

To ensure connectedness (C 0), D from curve #0 isagain welded on top of A from curve #1 (at a knot).



176/212

To ensure smoothness (C 1), velocity into D ( V ) mustmatch velocitys direction out of the next curves A (U).



177/212

For best continuity (C 2), velocity into D ( V ) must matchdirection and magnitude for the next curves A (U).

(Hermite splines usually do match velocity magnitudes)



178/212

Hermite curves, and Hermite splines, are alsoparametric and work basically the same wayas Bezier curves: plug in t and go!

The formula for cubic Hermite curve is:

P(t) = s 2(1+2t) A + t 2(1+2s) D + s 2tU + st 2 V



179/212

Cubic Hermite and Bezier curves can beconverted back and forth.

To convert from cubic Hermite to Bezier:

B = A + ( U / 3)C = D ( V / 3)

To convert from cubic Bezier to Hermite:

U = 3(B A) V = 3(D C)


180/212

Catmull-Rom Splines

Catmull-Rom Splines


181/212

A Catmull-Rom spline is just a cubicHermite spline with special values chosen forthe velocities at the start ( U) and end ( V )points of each section.

You can also think of Catmull-Rom not as atype of spline, but as a technique for buildingcubic Hermite splines.

Best application: curve-pathing through points

Catmull-Rom Splines


182/212

Start with a series of points (spline start,spline end, and interior knots)

Catmull-Rom Splines


183/212

1. Assume U and V velocities are zero at startand end of spline (points 0 and 6 here).

Catmull-Rom Splines


184/212

2. Compute a vector from point 0 to point 2.(Vec 0_to_2 = P 2 P 0)


185/212

Catmull-Rom Splines


186/212

3. Set the velocity for point 1 to be of that.

Catmull-Rom Splines


187/212

Now we have set positions 0 and 1, andvelocities at points 0 and 1. Hermite curve!

Catmull-Rom Splines


188/212

4. Compute a vector from point 1 to point 3.(Vec 1_to_3 = P 3 P 1)

Catmull-Rom Splines


189/212

That will be our tangent for point 2.

Catmull-Rom Splines


190/212

5. Set the velocity for point 2 to be of that.

Catmull-Rom Splines


191/212

Now we have set positions and velocities forpoints 0, 1, and 2. We have a Hermite spline!

Catmull-Rom Splines


192/212

Repeat the process to compute velocity atpoint 3.

Catmull-Rom Splines


193/212

Repeat the process to compute velocity atpoint 3.

Catmull-Rom Splines


194/212

And at point 4.

Catmull-Rom Splines


195/212

And at point 4.

Catmull-Rom Splines


196/212

Compute velocity for point 5.

Catmull-Rom Splines


197/212

Compute velocity for point 5.

Catmull-Rom Splines


198/212

We already set the velocity for point 6 to bezero, so we can close out the spline.

Catmull-Rom Splines


199/212

And voila! A Catmull-Rom (Hermite) spline.

Catmull-Rom Splines


200/212

Heres the math for a Catmull-Rom Spline:

Place knots where you want them ( A, D, etc.) Position at the Nth point is P N

Velocity at the Nth point is V N VN = (P N+1 P N-1) / 2

i.e. Velocity at point P is half of [the vectorpointing from the previous point to the nextpoint].


201/212

Cardinal Splines


202/212

Same as a Catmull-Rom spline, but with anextra parameter: Tension .

Tension can be set from 0 to 1.

A tension of 0 is just a Catmull-Rom spline.

Increasing tension causes the velocities at allpoints in the spline to be scaled down.

Cardinal Splines


203/212

So here is a Cardinal spline with tension=0(same as a Catmull-Rom spline)

Cardinal Splines


204/212

So here is a Cardinal spline with tension=.5(velocities at points are of the Catmull-Rom)

Cardinal Splines


205/212

And here is a Cardinal spline with tension=1(velocities at all points are zero)

Cardinal Splines


206/212

Heres the math for a Cardinal Spline:

Place knots where you want them ( A, D, etc.) Position at the Nth point is P N Velocity at the Nth point is V N VN = (1 tension)(P N+1 P N-1) / 2

i.e. Velocity at point P is some fraction of half of [the vector pointing from the previouspoint to the next point].

i.e. Same as Catmull-Rom, but V N gets scaled

down because of the (1 tension) multiply.


207/212

KochanekBartels Splines


208/212

Same as a Cardinal spline (includes Tension ),but with two extra tweaks (usually set on the

entire spline):

Bias (from -1 to +1): A zero bias leaves the velocity vector alone A positive bias rotates the velocity vector to be morealigned with the point BEFORE this point

A negative bias rotates the velocity vector to be morealigned with the point AFTER this point

Continuity (from -1 to +1): A zero continuity leaves the velocity vector alone A positive continuity poofs out the corners

A negative continuity sucks in / squares off corners

B-Splines


209/212

Stands for basis spline. Just a generalization of Bezier splines. The basic idea:

At any given time, P(t) is a weighted-average blend of 2, 3, 4, or more points inits neighborhood.

Equations are usually given in terms ofthe blend weights for each of thenearby points based on where t is at.

Curved Surfaces


210/212

Way beyond the scope of this talk, butbasically you can criss-cross splines

and form 2d curved surfaces.


211/212

Thanks!

Feel free to contact me:


212/212

Feel free to contact me:

Squirrel EiserlohDirectorTrueThought LLC

03-GDC09 Eiserloh Squirrel Interpolation

Documents

Transcript of 03-GDC09 Eiserloh Squirrel Interpolation