CS 445 / 645 Introduction to Computer Graphics Lecture 8 Triangle Rasterization Lecture 8 Triangle Rasterization

CS 445 / 645Introduction to Computer Graphics

Lecture 8Lecture 8

Triangle RasterizationTriangle Rasterization

Lecture 8Lecture 8

Triangle RasterizationTriangle Rasterization

Optimization Techniques

• SymmetrySymmetry• SymmetrySymmetry

Optimization Techniques

Incremental ComputationIncremental Computation

• Compute DifferenceCompute Difference

• Line exampleLine example

Incremental ComputationIncremental Computation

• Compute DifferenceCompute Difference

• Line exampleLine example

Incremental Evaluation

• Noninteger additionNoninteger addition

• ““round” neededround” needed

• Noninteger additionNoninteger addition

• ““round” neededround” needed

Line – Midpoint Evaluation

Credited to BresenhamCredited to Bresenham

• Operate only on integers and avoid roundingOperate only on integers and avoid rounding

• Create discriminator, Create discriminator, d = dd = d11 – d – d22

– If If dd > 0 > 0 yy increases increases

– If If dd <= 0 <= 0 yy stays the same stays the same

• Fast incremental evaluation ofFast incremental evaluation ofdiscriminator is possible withdiscriminator is possible withmidpoint evaluationmidpoint evaluation

Credited to BresenhamCredited to Bresenham

• Operate only on integers and avoid roundingOperate only on integers and avoid rounding

• Create discriminator, Create discriminator, d = dd = d11 – d – d22

– If If dd > 0 > 0 yy increases increases

– If If dd <= 0 <= 0 yy stays the same stays the same

• Fast incremental evaluation ofFast incremental evaluation ofdiscriminator is possible withdiscriminator is possible withmidpoint evaluationmidpoint evaluation

y

yk

yk+1

xk+1

}}

d2

d1


Circles – Midpoint discriminatorCircles – Midpoint discriminator

• Two dimensional discriminatorTwo dimensional discriminator

• Simple outputSimple output

Circles – Midpoint discriminatorCircles – Midpoint discriminator

• Two dimensional discriminatorTwo dimensional discriminator

• Simple outputSimple output


CirclesCircles

• Simple comparisonsSimple comparisons

• We just want to know if incremental change in x requires an We just want to know if incremental change in x requires an incremental change in y to stay in circleincremental change in y to stay in circle

– We evaluate descriminator at f(x+1, y)We evaluate descriminator at f(x+1, y)

– Do it incrementallyDo it incrementally

CirclesCircles

• Simple comparisonsSimple comparisons

• We just want to know if incremental change in x requires an We just want to know if incremental change in x requires an incremental change in y to stay in circleincremental change in y to stay in circle

– We evaluate descriminator at f(x+1, y)We evaluate descriminator at f(x+1, y)

– Do it incrementallyDo it incrementally


Circle DiscriminatorCircle Discriminator

• IfIf

– you must decrement yyou must decrement y

Circle DiscriminatorCircle Discriminator

• IfIf

– you must decrement yyou must decrement y


CircleCircle

Note following correction from slidesNote following correction from slides

• Added inequalitiesAdded inequalities

• Just like previous example with extra ½ thrown in for roundingJust like previous example with extra ½ thrown in for rounding

CircleCircle

Note following correction from slidesNote following correction from slides

• Added inequalitiesAdded inequalities

• Just like previous example with extra ½ thrown in for roundingJust like previous example with extra ½ thrown in for rounding

Assignment 1

Due one week from today at 5:00 p.m.Due one week from today at 5:00 p.m.

Use your directory on Blue.unix for turninUse your directory on Blue.unix for turnin

Due one week from today at 5:00 p.m.Due one week from today at 5:00 p.m.

Use your directory on Blue.unix for turninUse your directory on Blue.unix for turnin

Rasterizing Polygons

In interactive graphics, polygons rule the worldIn interactive graphics, polygons rule the world

Two main reasons:Two main reasons:

• Lowest common denominator for surfacesLowest common denominator for surfaces

– Can represent any surface Can represent any surface with arbitrary accuracywith arbitrary accuracy

– Splines, mathematical functions, volumetric isosurfaces…Splines, mathematical functions, volumetric isosurfaces…

• Mathematical simplicity lends itself to simple, regular rendering Mathematical simplicity lends itself to simple, regular rendering algorithmsalgorithms

– Like those we’re about to discuss… Like those we’re about to discuss…

– Such algorithms embed well in hardwareSuch algorithms embed well in hardware

In interactive graphics, polygons rule the worldIn interactive graphics, polygons rule the world

Two main reasons:Two main reasons:

• Lowest common denominator for surfacesLowest common denominator for surfaces

– Can represent any surface Can represent any surface with arbitrary accuracywith arbitrary accuracy

– Splines, mathematical functions, volumetric isosurfaces…Splines, mathematical functions, volumetric isosurfaces…

• Mathematical simplicity lends itself to simple, regular rendering Mathematical simplicity lends itself to simple, regular rendering algorithmsalgorithms

– Like those we’re about to discuss… Like those we’re about to discuss…

– Such algorithms embed well in hardwareSuch algorithms embed well in hardware

Rasterizing Polygons

Triangle is the Triangle is the minimal unitminimal unit of a polygon of a polygon

• All polygons can be broken up into trianglesAll polygons can be broken up into triangles

• Triangles are guaranteed to be:Triangles are guaranteed to be:

– PlanarPlanar

– ConvexConvex

Triangle is the Triangle is the minimal unitminimal unit of a polygon of a polygon

• All polygons can be broken up into trianglesAll polygons can be broken up into triangles

• Triangles are guaranteed to be:Triangles are guaranteed to be:

– PlanarPlanar

– ConvexConvex

Triangularization

Convex polygons easily Convex polygons easily triangulatedtriangulated

Concave polygons present Concave polygons present a challengea challenge

Convex polygons easily Convex polygons easily triangulatedtriangulated

Concave polygons present Concave polygons present a challengea challenge

Rasterizing Triangles

Interactive graphics hardware commonly uses Interactive graphics hardware commonly uses edge walkingedge walking or or edge equationedge equation techniques for techniques for rasterizing trianglesrasterizing triangles

Interactive graphics hardware commonly uses Interactive graphics hardware commonly uses edge walkingedge walking or or edge equationedge equation techniques for techniques for rasterizing trianglesrasterizing triangles

Edge Walking

Basic idea: Basic idea:

• Draw edges verticallyDraw edges vertically

– Interpolate colors down edgesInterpolate colors down edges

• Fill in horizontal spans for each Fill in horizontal spans for each scanlinescanline

– At each scanline, interpolate At each scanline, interpolate edge colors across spanedge colors across span

Basic idea: Basic idea:

• Draw edges verticallyDraw edges vertically

– Interpolate colors down edgesInterpolate colors down edges

• Fill in horizontal spans for each Fill in horizontal spans for each scanlinescanline

– At each scanline, interpolate At each scanline, interpolate edge colors across spanedge colors across span

Edge Walking: Notes

Order three triangle vertices in x and yOrder three triangle vertices in x and y

• Find middle point in y dimension and compute if it is to the left or right Find middle point in y dimension and compute if it is to the left or right of polygon. Also could be flat top or flat bottom triangleof polygon. Also could be flat top or flat bottom triangle

We know where left and right edges are.We know where left and right edges are.

• Proceed from top scanline downwardsProceed from top scanline downwards

• Fill each spanFill each span

• Until breakpoint or bottom vertex is reachedUntil breakpoint or bottom vertex is reached

Advantage: can be made very fastAdvantage: can be made very fast

Disadvantages: Disadvantages:

• Lots of finicky special casesLots of finicky special cases

Order three triangle vertices in x and yOrder three triangle vertices in x and y

• Find middle point in y dimension and compute if it is to the left or right Find middle point in y dimension and compute if it is to the left or right of polygon. Also could be flat top or flat bottom triangleof polygon. Also could be flat top or flat bottom triangle

We know where left and right edges are.We know where left and right edges are.

• Proceed from top scanline downwardsProceed from top scanline downwards

• Fill each spanFill each span

• Until breakpoint or bottom vertex is reachedUntil breakpoint or bottom vertex is reached

Advantage: can be made very fastAdvantage: can be made very fast

Disadvantages: Disadvantages:

• Lots of finicky special casesLots of finicky special cases

Edge Walking: Disadvantages

Fractional offsets:Fractional offsets:

Be careful when interpolating color values!Be careful when interpolating color values!

Beware of gaps between adjacent edgesBeware of gaps between adjacent edges

Beware of duplicating shared edgesBeware of duplicating shared edges

Fractional offsets:Fractional offsets:

Be careful when interpolating color values!Be careful when interpolating color values!

Beware of gaps between adjacent edgesBeware of gaps between adjacent edges

Beware of duplicating shared edgesBeware of duplicating shared edges

Edge Equations

An edge equation is simply the equation of the line An edge equation is simply the equation of the line defining that edgedefining that edge

• Q: Q: What is the implicit equation of a line?What is the implicit equation of a line?

• A: A: Ax + By + C = 0Ax + By + C = 0

• Q: Q: Given a point (Given a point (xx,,yy), what does plugging ), what does plugging xx & & yy into this equation tell into this equation tell us?us?

• A: Whether the point is:A: Whether the point is:

– On the line: On the line: Ax + By + C = 0 Ax + By + C = 0

– ““Above” the line: Above” the line: Ax + By + C > 0 Ax + By + C > 0

– ““Below” the line: Below” the line: Ax + By + C < 0 Ax + By + C < 0

An edge equation is simply the equation of the line An edge equation is simply the equation of the line defining that edgedefining that edge

• Q: Q: What is the implicit equation of a line?What is the implicit equation of a line?

• A: A: Ax + By + C = 0Ax + By + C = 0

• Q: Q: Given a point (Given a point (xx,,yy), what does plugging ), what does plugging xx & & yy into this equation tell into this equation tell us?us?

• A: Whether the point is:A: Whether the point is:

– On the line: On the line: Ax + By + C = 0 Ax + By + C = 0

– ““Above” the line: Above” the line: Ax + By + C > 0 Ax + By + C > 0

– ““Below” the line: Below” the line: Ax + By + C < 0 Ax + By + C < 0

Edge Equations

Edge equations thus define two Edge equations thus define two half-spaceshalf-spaces::Edge equations thus define two Edge equations thus define two half-spaceshalf-spaces::

Edge Equations

And a triangle can be defined as the intersection And a triangle can be defined as the intersection of three positive half-spaces:of three positive half-spaces:

And a triangle can be defined as the intersection And a triangle can be defined as the intersection of three positive half-spaces:of three positive half-spaces:

A1x + B1y + C1 < 0

A2 x + B

2 y + C2 < 0

A 3x

+ B 3

y +

C 3 <

0

A1x + B1y + C1 > 0

A 3x

+ B 3

y +

C 3 >

0 A2 x + B

2 y + C2 > 0

Edge Equations

So…simply turn on those pixels for which all edge So…simply turn on those pixels for which all edge equations evaluate to > 0:equations evaluate to > 0:

So…simply turn on those pixels for which all edge So…simply turn on those pixels for which all edge equations evaluate to > 0:equations evaluate to > 0:

+++-

--

Using Edge Equations

Which pixels: compute min,max bounding boxWhich pixels: compute min,max bounding box

Edge equations: compute from verticesEdge equations: compute from vertices

Orientation: ensure area is positive (Orientation: ensure area is positive (why?why?))

Which pixels: compute min,max bounding boxWhich pixels: compute min,max bounding box

Edge equations: compute from verticesEdge equations: compute from vertices

Orientation: ensure area is positive (Orientation: ensure area is positive (why?why?))

Computing Edge Equations

Want to calculate A, B, C for each edge from (Want to calculate A, B, C for each edge from (xx11, , yy11) and ) and

((xx22, , yy22))

Treat it as a linear system:Treat it as a linear system:

AxAx11 + By + By11 + C = 0 + C = 0

AxAx22 + By + By22 + C = 0 + C = 0

Notice: two equations, three unknownsNotice: two equations, three unknowns

What can we solve?What can we solve?

Goal: solve for A & B in terms of CGoal: solve for A & B in terms of C

Want to calculate A, B, C for each edge from (Want to calculate A, B, C for each edge from (xx11, , yy11) and ) and

((xx22, , yy22))

Treat it as a linear system:Treat it as a linear system:

AxAx11 + By + By11 + C = 0 + C = 0

AxAx22 + By + By22 + C = 0 + C = 0

Notice: two equations, three unknownsNotice: two equations, three unknowns

What can we solve?What can we solve?

Goal: solve for A & B in terms of CGoal: solve for A & B in terms of C

Computing Edge Equations

Set up the linear system:Set up the linear system:

Multiply both sidesMultiply both sidesby matrix inverse:by matrix inverse:

Let Let C = xC = x0 0 yy11 -- x x1 1 yy00 for convenience for convenience

• Then Then A = yA = y00 - y - y11 and and B = xB = x00 – x – x11

Set up the linear system:Set up the linear system:

Multiply both sidesMultiply both sidesby matrix inverse:by matrix inverse:

Let Let C = xC = x0 0 yy11 -- x x1 1 yy00 for convenience for convenience

• Then Then A = yA = y00 - y - y11 and and B = xB = x00 – x – x11

1

1

11

00C

B

A

yx

yx

01

01

0110 xx

yy

yxyx

C

B

A

Edge Equations

So…we can find edge equation from two verts. So…we can find edge equation from two verts.

Given three corners Given three corners PP00, P, P11, P, P22 of a triangle, what are our of a triangle, what are our

three edges?three edges?

How do we make sure the half-spaces defined by the How do we make sure the half-spaces defined by the edge equations all share the same sign on the edge equations all share the same sign on the interior of the triangle?interior of the triangle?

A: Be consistent (Ex: A: Be consistent (Ex: [P[P0 0 PP11], [P], [P1 1 PP22], [P], [P2 2 PP00]]))

How do we make sure that sign is positive?How do we make sure that sign is positive?

A: Test, and flip if needed (A: Test, and flip if needed (A= -A, B= -B, C= -CA= -A, B= -B, C= -C))

So…we can find edge equation from two verts. So…we can find edge equation from two verts.

Given three corners Given three corners PP00, P, P11, P, P22 of a triangle, what are our of a triangle, what are our

three edges?three edges?

How do we make sure the half-spaces defined by the How do we make sure the half-spaces defined by the edge equations all share the same sign on the edge equations all share the same sign on the interior of the triangle?interior of the triangle?

A: Be consistent (Ex: A: Be consistent (Ex: [P[P0 0 PP11], [P], [P1 1 PP22], [P], [P2 2 PP00]]))

How do we make sure that sign is positive?How do we make sure that sign is positive?

A: Test, and flip if needed (A: Test, and flip if needed (A= -A, B= -B, C= -CA= -A, B= -B, C= -C))

Edge Equations: Code

Basic structure of code:Basic structure of code:

• Setup: compute edge equations, bounding boxSetup: compute edge equations, bounding box

• (Outer loop) For each scanline in bounding box... (Outer loop) For each scanline in bounding box...

• (Inner loop) …check each pixel on scanline, (Inner loop) …check each pixel on scanline, evaluating edge equations and drawing the pixel if all evaluating edge equations and drawing the pixel if all three are positivethree are positive

Basic structure of code:Basic structure of code:

• Setup: compute edge equations, bounding boxSetup: compute edge equations, bounding box

• (Outer loop) For each scanline in bounding box... (Outer loop) For each scanline in bounding box...

• (Inner loop) …check each pixel on scanline, (Inner loop) …check each pixel on scanline, evaluating edge equations and drawing the pixel if all evaluating edge equations and drawing the pixel if all three are positivethree are positive

Optimize This!findBoundingBox(&xmin, &xmax, &ymin, &ymax);findBoundingBox(&xmin, &xmax, &ymin, &ymax);

setupEdges (&a0,&b0,&c0,&a1,&b1,&c1,&a2,&b2,&c2);setupEdges (&a0,&b0,&c0,&a1,&b1,&c1,&a2,&b2,&c2);

/* Optimize this: *//* Optimize this: */

for (int y = yMin; y <= yMax; y++) {for (int y = yMin; y <= yMax; y++) {

for (int x = xMin; x <= xMax; x++) {for (int x = xMin; x <= xMax; x++) {

float e0 = a0*x + b0*y + c0;float e0 = a0*x + b0*y + c0;



if (e0 > 0 && e1 > 0 && e2 > 0)if (e0 > 0 && e1 > 0 && e2 > 0)setPixel(x,y);setPixel(x,y);

}}}}

findBoundingBox(&xmin, &xmax, &ymin, &ymax);findBoundingBox(&xmin, &xmax, &ymin, &ymax);

setupEdges (&a0,&b0,&c0,&a1,&b1,&c1,&a2,&b2,&c2);setupEdges (&a0,&b0,&c0,&a1,&b1,&c1,&a2,&b2,&c2);

/* Optimize this: *//* Optimize this: */

for (int y = yMin; y <= yMax; y++) {for (int y = yMin; y <= yMax; y++) {





if (e0 > 0 && e1 > 0 && e2 > 0)if (e0 > 0 && e1 > 0 && e2 > 0)setPixel(x,y);setPixel(x,y);

}}}}

Edge Equations: Speed HacksSome speed hacks for the inner loop:Some speed hacks for the inner loop:

int xflag = 0;int xflag = 0;


if (e0|e1|e2 > 0) {if (e0|e1|e2 > 0) {

setPixel(x,y);setPixel(x,y);

xflag++;xflag++;

} else if (xflag != 0) break;} else if (xflag != 0) break;

e0 += a0; e1 += a1; e2 += a2;e0 += a0; e1 += a1; e2 += a2;

}}

• Incremental update of edge equation valuesIncremental update of edge equation values (think DDA)(think DDA)

• Early termination (Early termination (why does this work?why does this work?))

• Faster test of equation valuesFaster test of equation values

Some speed hacks for the inner loop:Some speed hacks for the inner loop:

int xflag = 0;int xflag = 0;


if (e0|e1|e2 > 0) {if (e0|e1|e2 > 0) {

setPixel(x,y);setPixel(x,y);

xflag++;xflag++;

} else if (xflag != 0) break;} else if (xflag != 0) break;

e0 += a0; e1 += a1; e2 += a2;e0 += a0; e1 += a1; e2 += a2;

}}

• Incremental update of edge equation valuesIncremental update of edge equation values (think DDA)(think DDA)

• Early termination (Early termination (why does this work?why does this work?))

• Faster test of equation valuesFaster test of equation values

Triangle Rasterization Issues

Exactly which pixels should be lit?Exactly which pixels should be lit?

A: Those pixels inside the triangle edgesA: Those pixels inside the triangle edges

What about pixels exactly on the edge?What about pixels exactly on the edge?

• Draw them: order of triangles matters (it shouldn’t)Draw them: order of triangles matters (it shouldn’t)

• Don’t draw them: gaps possible between trianglesDon’t draw them: gaps possible between triangles

We need a consistent (if arbitrary) rule We need a consistent (if arbitrary) rule

• Example: draw pixels on left or top edge, but not on right or Example: draw pixels on left or top edge, but not on right or bottom edgebottom edge

Exactly which pixels should be lit?Exactly which pixels should be lit?

A: Those pixels inside the triangle edgesA: Those pixels inside the triangle edges

What about pixels exactly on the edge?What about pixels exactly on the edge?

• Draw them: order of triangles matters (it shouldn’t)Draw them: order of triangles matters (it shouldn’t)

• Don’t draw them: gaps possible between trianglesDon’t draw them: gaps possible between triangles

We need a consistent (if arbitrary) rule We need a consistent (if arbitrary) rule

• Example: draw pixels on left or top edge, but not on right or Example: draw pixels on left or top edge, but not on right or bottom edgebottom edge

General Polygon Rasterization

Now that we can rasterize triangles, what about Now that we can rasterize triangles, what about general polygons?general polygons?

We’ll take an edge-walking approachWe’ll take an edge-walking approach

Now that we can rasterize triangles, what about Now that we can rasterize triangles, what about general polygons?general polygons?

We’ll take an edge-walking approachWe’ll take an edge-walking approach


SliverSliverSliverSliver

Moving SliversMoving SliversMoving SliversMoving Slivers



Shared Edge OrderingShared Edge OrderingShared Edge OrderingShared Edge Ordering


Consider the following polygon:Consider the following polygon:

How do we know whether a given pixel on the How do we know whether a given pixel on the scanline is inside or outside the polygon?scanline is inside or outside the polygon?

Consider the following polygon:Consider the following polygon:

How do we know whether a given pixel on the How do we know whether a given pixel on the scanline is inside or outside the polygon?scanline is inside or outside the polygon?

A

B

C

D

E

F

Polygon Rasterization

Inside-Outside PointsInside-Outside PointsInside-Outside PointsInside-Outside Points

Polygon Rasterization

Inside-Outside PointsInside-Outside PointsInside-Outside PointsInside-Outside Points


Basic idea: use a Basic idea: use a parity testparity test

for each scanlinefor each scanline

edgeCnt = 0;edgeCnt = 0;

for each pixel on scanline (l to r)for each pixel on scanline (l to r)

if (oldpixel->newpixel crosses edge) if (oldpixel->newpixel crosses edge)

edgeCnt ++;edgeCnt ++;

// draw the pixel if edgeCnt odd// draw the pixel if edgeCnt odd

if (edgeCnt % 2)if (edgeCnt % 2)

setPixel(pixel);setPixel(pixel);

Basic idea: use a Basic idea: use a parity testparity test










Count your vertices carefullyCount your vertices carefully

• If exactly on pixel boundary?If exactly on pixel boundary?

• Shared vertices?Shared vertices?

• Vertices defining horizontalVertices defining horizontaledge?edge?

– Consider A-B versus I-HConsider A-B versus I-H

Count your vertices carefullyCount your vertices carefully

• If exactly on pixel boundary?If exactly on pixel boundary?

• Shared vertices?Shared vertices?

• Vertices defining horizontalVertices defining horizontaledge?edge?

– Consider A-B versus I-HConsider A-B versus I-H

B

CD

E

FG

I H

J

A

Faster Polygon RasterizationHow can we optimize the code?How can we optimize the code?









Big cost: testing pixels against each edgeBig cost: testing pixels against each edge

Solution: Solution: active edge table (AET)active edge table (AET)

How can we optimize the code?How can we optimize the code?for each scanlinefor each scanline








Big cost: testing pixels against each edgeBig cost: testing pixels against each edge

Solution: Solution: active edge table (AET)active edge table (AET)

Active Edge Table

Idea: Idea:

• Edges intersecting a given scanline are likely to intersect Edges intersecting a given scanline are likely to intersect the next scanlinethe next scanline

• The order of edge intersections doesn’t change much from The order of edge intersections doesn’t change much from scanline to scanlinescanline to scanline

Idea: Idea:

• Edges intersecting a given scanline are likely to intersect Edges intersecting a given scanline are likely to intersect the next scanlinethe next scanline

• The order of edge intersections doesn’t change much from The order of edge intersections doesn’t change much from scanline to scanlinescanline to scanline

Active Edge TableAlgorithm: Algorithm: scanline from bottom to top…scanline from bottom to top…

• Sort all edges by their minimum y coordSort all edges by their minimum y coord

• Starting at bottom, add edges with YStarting at bottom, add edges with Yminmin= 0 to AET= 0 to AET

• For each scanline:For each scanline:

– Sort edges in AET by x intersectionSort edges in AET by x intersection

– Walk from left to right, setting pixels by parity ruleWalk from left to right, setting pixels by parity rule

– Increment scanlineIncrement scanline

– Retire edges with YRetire edges with Ymaxmax < Y < Y

– Add edges with YAdd edges with Yminmin << Y Y

– Recalculate edge intersections (Recalculate edge intersections (how?how?))

• Stop when Y > YStop when Y > Ymaxmax for last edges for last edges

Algorithm: Algorithm: scanline from bottom to top…scanline from bottom to top…

• Sort all edges by their minimum y coordSort all edges by their minimum y coord

• Starting at bottom, add edges with YStarting at bottom, add edges with Yminmin= 0 to AET= 0 to AET

• For each scanline:For each scanline:

– Sort edges in AET by x intersectionSort edges in AET by x intersection

– Walk from left to right, setting pixels by parity ruleWalk from left to right, setting pixels by parity rule

– Increment scanlineIncrement scanline

– Retire edges with YRetire edges with Ymaxmax < Y < Y

– Add edges with YAdd edges with Yminmin << Y Y

– Recalculate edge intersections (Recalculate edge intersections (how?how?))

• Stop when Y > YStop when Y > Ymaxmax for last edges for last edges

Documents

CS 445 / 645 Introduction to Computer Graphics Lecture 8 Triangle Rasterization Lecture 8 Triangle Rasterization