2D Rasterization

Christoph Garth
Scientific Visualization Lab
 Most computer graphics are presented on raster displays:

• rectangular array or matrix of pixels (“picture element”)

Examples:

• Flat-panel screens in computer monitors, TVs, and cell phones consist are
rectangular arrays of light-emitting cells (e.g. diodes).
• Printers form an image by depositing ink or toner at selected points on a
grid, usually line-by-line.
• Digital cameras use a grid of light-sensitive sensors that record light color
and intensity.
• Scanners read intensity on a grid, line-by-line.

Computer Graphics – 2D Rasterization 3–1

 Hence, raster images are a common and easy way to store and process images.

• A raster image is simply a 2D array that stores the pixel value for each pixel.
• Each pixel stores color/intensity, represented in some color space (e.g. RGB).

RGB RGB RGB RGB RGB (0, 3) (1, 3) (2, 3) (3, 3) (4, 3)

RGB RGB RGB RGB RGB y

(0, 2) (1, 2) (2, 2) (3, 2) (4, 2)

RGB RGB RGB RGB RGB (0, 1) (1, 1) (2, 1) (3, 1) (4, 1)

RGB RGB RGB RGB RGB (0, 0) (1, 0) (2, 0) (3, 0) (4, 0)

• Pixels are denoted with two-dimensional integer coordinates (i, j).

The i-direction is read horizontally (x-axis)left to right; the j-direction is vertical
(y-axis) but may increase upward (OpenGL) or downward (most GUIs).

Computer Graphics – 2D Rasterization 3–2

 Aside: Raster images are not the only way to represent images.
Vector images are comprised of the description of shapes.

Example: SVG file (.svg)

<svg height="200" width="200">

<!-- a triangle -->
<polygon
points="10,10 100,50 30,150"
stroke="blue"
fill="gray" />
<!-- a circle -->
<circle cx="150" cy="100" r="40"
stroke="red"
stroke-width="3"
fill="orange" />
</svg>

Computer Graphics – 2D Rasterization 3–3

 Rasterization or scan conversion:
How to turn a vector image into a raster image?

• Vector images contain descriptions of (two-dimensional) objects or

primitives: lines, circles, triangles, etc.
• How can these primitives be represented in a raster image?
Or: which pixels are relevant for a given primitive?
We will look at some fundamental algorithms in the following.

Computer Graphics – 2D Rasterization 3–4

Line Rasterization
 Line rasterization variant 1: all pixels touched by a line

The line appears non-uniformly thick.

Computer Graphics – 2D Rasterization – Line Rasterization 3–5

 Line rasterization variant 2: force line to thickness 1 along y-axis

The line may not be connected nor symmetric.

Computer Graphics – 2D Rasterization – Line Rasterization 3–6

 What properties should an ideal algorithm have?

Let’s formulate some requirements for rasterizing lines.

• A line should appear straight (d’oh).

• A line should appear uniformly bright, independent of direction.
• Lines should appear uniformly thick, also independent of direction.
• Reversing the two defining points should also not change the appearance.
• Line rasterization should be fast.

Computer Graphics – 2D Rasterization – Line Rasterization 3–7

 Math Review: Line Representation

Given two points

p1
p0 = (x0 , y0 )
p1 = (x1 , y1 ) y

in the plane and a line segment defined by

them, how can we describe the equation of
the line? p0

Computer Graphics – 2D Rasterization – Line Rasterization 3–8

 Math Review: Functional Line Representation (explicit)

Functional form:

y = f (x) = mx + b p1

Determine via
y ∆y
∆y y1 − y0
m = =
∆x x1 − x0
p0 ∆x
b = y0 − mx0

Computer Graphics – 2D Rasterization – Line Rasterization 3–9

 Math Review: Parametric Line Representation

Parametric form:

l(u) = (x(u), y(u)), u ∈ [0, 1] p1

where a parameter u (often also t) determines

the value of x and y for each point. y ∆y

Specifically:
p0 ∆x
x(u) = x0 + u(x1 − x0 ) = (1 − u)x0 + ux1
y(u) = y0 + u(y1 − y0 ) = (1 − u)y0 + uy1
x
This is also often called linear interpolation.

Computer Graphics – 2D Rasterization – Line Rasterization 3–10

 Math Review: Implicit Line Equation

The line defined by p0 and p1 is implicitly

described as the zero set of

l(p) = hn, pi − d = 0

where n = (−∆y, ∆x) and d = hn, p0 i. l(p) = 0

p1

Geometrically: y
p0 ∆y
n p hn, pi = 0
• n is orthogonal to (p1 − p0 ), i.e. ∆x

rotated counterclockwise by 90◦ . d

• A point p is on the line if it has

x
distance d = hn, pi from the origin
along direction n.

Computer Graphics – 2D Rasterization – Line Rasterization 3–11

 Naïve algorithm using the functional form: given p0 and p1 in integer coordinates:

• compute m and b such that l(x) = mx + b

• iterate x from x0 to x1
• fill in the pixel at (x, l(x)) using the plot function;
round l(y) to nearest pixel (using rint)

float m = (y1-y0) / (x1-x0), b = y0 - m*x0;

for( int x=x0; x<=x1; ++x )

{
float y = m*x + b;
plot(x, rint(y));
}

Computer Graphics – 2D Rasterization – Line Rasterization 3–12

 Result:

Not ideal, in terms of the formulated requirements.

Computer Graphics – 2D Rasterization – Line Rasterization 3–13
 Digital Differential Analyzer (DDA)

The Digital Differential Analyzer (DDA) uses the equation of a line

y = mx + c

where m = ∆y
∆x is the slope and c = y0 − mx0 is the offset.

∆y

∆x

Computer Graphics – 2D Rasterization – Line Rasterization 3–14

 DDA algorithm:
Determine maximum length as L = max{∆x, ∆y}, and set x = x0 , y = y0 .

Iterate i = 0, . . . , L − 1:
• plot the pixel at (x, y), rounded towards nearest integer
• step along the line using x = x + ∆x/L, y = y + ∆y/L

y
i=3
i=2
i=1 ∆y/L

i=0 ∆x/L

Computer Graphics – 2D Rasterization – Line Rasterization 3–15

 Example:
p0 = (1, 1), p1 = (4, 3) ∆y = 2, ∆x = 3, L = 3

i=3 i x y plot
i=2 0 1 1 (1, 1)
(4, 3)
i=1 1 2 5/3 (2, 2)
i=0 2 3 7/3 (3, 2)
3 4 3 (4, 3)
(1, 1)

This algorithm is simple, but requires floating-point arithmetic ( overhead) and

is subject to rounding errors.

Computer Graphics – 2D Rasterization – Line Rasterization 3–16

 Bresenham’s line algorithm (a.k.a. Midpoint line algorithm)

Focus on lines in the first octant (0 ≤ m ≤ 1):

• The x-coordinate is always incremented y
by one.
3 2
• The y-coordinate is incremented only if p1
the distance to the line to the current 4 1
y-coordinate becomes too large. x
p0
5 8
All other octants can be treated by using
symmetries (swapping points / mirroring 6 7
axes).

Computer Graphics – 2D Rasterization – Line Rasterization 3–17

 Incremental formulation: assume the currently pixel is P.
The line continues with either pixel E or pixel NE.

To determine whether the line should continue at E or

NE, we can determine the distance of both pixels to the
line, using the line’s implicit form.
NE
This is F(x, y) = ax + by + c, where F (N
E)

)
F (E
a = −∆y = y0 − y1
b = ∆x = x1 − x0 P E
c = ∆x · b.

F(x, y) gives the (signed!) distance to the line.

Choose as next pixel the one that is closer to the line.

Computer Graphics – 2D Rasterization – Line Rasterization 3–18

 Incremental formulation: assume the currently pixel is P.

Alternatively, we can ask: is the midpoint

M = (x + 1, y + 1/2)
NE d>0

above or below the line? d<0

M
Consider d = F(M) = F(x + 1, y + 1/2) to decide:
P E
d = F(M) < 0 → NE is the next pixel
d = F(M) ≥ 0 → E is the next pixel

d = F(M) can be incrementally computed, since F is linear:

F(x + dx, y + dy) = F(x, y) + a dx + b dy

Computer Graphics – 2D Rasterization – Line Rasterization 3–19

 Case 1 Case 2
NE is next pixel, E is next pixel,
M1 is next midpoint M2 is next midpoint

F(M1 ) = F(M) + a + b F(M2 ) = F(M) + a

d ← d − ∆y + ∆x d ← d − ∆y
= d + ∆NE = d + ∆E

M1
NE
M
M M2
P P E

Computer Graphics – 2D Rasterization – Line Rasterization 3–20

 How is d initialized?

p0 is on the line, hence, F(x0 , y0 ) = 0, and for the first midpoint M we find

d = F(M) = F(x0 + 1, y0 + 1/2) = F(x0 , y0 ) + a + b/2 = a + b/2

| {z }
=0

Rounding errors can occur in incrementally updating d;

a and b are integer, but a − b/2 is not.

However, we are only interested in the sign of d multiply all computations by a

factor of 2 to eliminate the fraction.

Computer Graphics – 2D Rasterization – Line Rasterization 3–21

 This leads to the (unoptimized) // calculate constants
int dx = x1 - x0, dy = y1 - y0;
algorithm on the right, in int delta_NE = 2*(dx - dy);
pseudocode. int delta_E = -2*dy;

// initialize variables
Observe that Bresenham’s int x = x0, y = y0, d = dx - 2*dy;
algorithm uses only integer plot(x, y);

arithmetic, no divisions, and only

// iterate over x
multiplication by two. while( x < x1 ) {
if(d < 0) // NE case
Thus, it is easy to implement in x++, y++, d += delta_NE;
hardware, and was used in early else // E case
x++, d += delta_E;
graphics hardware.
plot(x, y);
}

Computer Graphics – 2D Rasterization – Line Rasterization 3–22

 Remember, this algorithm can only draw lines in y
the first octant, but it is easily generalized to other
octants: 3 2
p1
• dx < 0 swap p0 and p1 . 4 1
• dy < 0 decrease y instead of increasing it x
p0
• |dy| > |dx| swap the roles of x and y 5 8

This still allows a compact and fast 6 7

implementation.

Computer Graphics – 2D Rasterization – Line Rasterization 3–23

 Example: p0 = (1, 1), p1 = (6, 5).

dx = 5, dy = 4 ⇒ ∆NE = −2, ∆E = 8

x y d setPixel
p1
1 1 3 (1, 1)
2 2 1 (2, 2)
3 3 −1 (3, 3)
4 3 7 (4, 3)
5 4 5 (5, 4)
p0 6 5 3 (6, 5)

Computer Graphics – 2D Rasterization – Line Rasterization 3–24

 Enhancement: While drawing lines, we can use a DDA to interpolate additional
quantities, such as e.g. RGB colors, between p0 and p1 .

(We can arithmetically treat RGB colors as vectors.)

p1

p0

C(p0 ) = (0, 1, 0) C(p1 ) = (0, 0, 1)

Computer Graphics – 2D Rasterization – Line Rasterization 3–25

Circle Rasterization
 Circle Rasterization: approximate a circle with
center pc = (xc , yc ) and radius r in a pixel image.

A circle is given either implicitly θ

r sin θ

r cos θ
F(x, y) = (x − xc )2 + (y − yc )2 − r2 = 0

or explicitly

p(θ) = (xc + r cos θ, yc = r sin θ).

y

r
Both representations require complex θ

mathematical operations. Can we reuse x

Bresenham’s midpoint principle?

Computer Graphics – 2D Rasterization – Circle Rasterization 3–26

 We can again observe symmetry in
the problem: computing one point on
the circle gives seven other points. y
(−x, y) (x, y)

Technically, we need to only draw an 3 2

eighth of a circle; formulate an

4 1
algorithm for one (second) octant.
(−y, x) (y, x)

(−y, −x) (y, −x)

x is again increasing every step, 5 8

y may decrease or not. 6 7

(−x, −y) (x, −y)

Let’s simplify again: (xc , yc ) = 0 and r
is a positive integer.

Computer Graphics – 2D Rasterization – Circle Rasterization 3–27

 Incremental formulation: assume current pixel is P.

Next pixel: E or SE? Consider distance to circle.

Easier: Is M above or below the line?
P E
Use d = F(M) = F(x + 1, y + 1/2) to decide, with M1
M
F(M) = (x + 1)2 + (y − 1/2)2 − r2
SE
M2
d = F(M) < 0 → E is next pixel
d = F(M) ≥ 0 → SE is next pixel

F(M) can again be updated incrementally.

Computer Graphics – 2D Rasterization – Circle Rasterization 3–28

 Case 1 Case 2

E is next pixel, SE is next pixel,

M1 is next midpoint M2 is next midpoint

F(M1 ) = (x + 2)2 + (y − 1/2)2 − r2 F(M2 ) = (x + 2)2 + (y − 3/2)2 − r2

= F(M) + 2x + 3 = F(M) + 2x − 2y + 5

d ← d + 2x + 3 = d + ∆E d ← d + 2x − 2y + 5 = d + ∆SE

P E P
M1 M

M
M2
SE

Difference to Bresenham’s algorithm: ∆E and ∆SE depend on x and y.

Computer Graphics – 2D Rasterization – Circle Rasterization 3–29

 int x = 0, y = r;
Initalization: the first pixel is at int d = 5-4*r;
(0, r), hence plot8(x, y); // with symmetry

while( y > x )
d = F(1, r − 1/2) = 5/4 − r {
if( d >= 0 ) {
Termination: when x = y. // SE
d += 8*(x-y) + 20;

Again, only the sign of d is

x++;
y--;
significant; multiplying all terms } else {

by 4 removes the fraction. // E

d += 8*x + 12;
x++;
Note: multiplying integers by 4 or }

8 only requires bit shifts.

plot8(x, y);
}

Computer Graphics – 2D Rasterization – Circle Rasterization 3–30

Polygon Rasterization
 Beyond lines and circles, polygons play an important role in graphics.
The come in various forms:

p6 p3
self-intersection
edge
p5 p4

bounding box
p7 p2
vertex
p8 p1

p9 p0

convex1 non-convex / concave complex

Notation: P = (p0 , . . . , pn−1 ) with vertices pi = (xi , yi ) and edges ei = (pi , p(i+1) mod n ).
1
(1 − a)p + aq ∈ P ∀p, q ∈ P, a ∈ [0, 1]
Computer Graphics – 2D Rasterization – Polygon Rasterization 3–31
 Simplest polygon rasterization or simply polygon scan conversion:
• Compute polygon bounding box by finding min/max of xi and yi .
• Iterate over all pixels of polygon’s bounding box [xmin , xmax] × [ymin , ymax ].
• Plot pixel if it is inside() the polygon.

for( int y=ymin; y<=ymax; ++y )

for( int x=xmin; x<=xmax; ++x )
if( inside(poly, x, y) )
plot(x, y);

The inside() function is complex in the general case, leading to a slow algorithm.
(Do note however that this is embarrasingly parallel.)

Computer Graphics – 2D Rasterization – Polygon Rasterization 3–32

 How to define inside() for a self-intersecting polygon?

Odd parity rule:

The point p is inside the polygon
P if any ray from p to infinity
crosses an odd number of P’s
edges, i.e. has odd parity.

The blue point’s rays have one and three (both

odd) intersections with P’s edges, hence, the
point is inside. For the red point, both rays
have two intersections, hence it is outside.

Computer Graphics – 2D Rasterization – Polygon Rasterization 3–33

 Sweep line polygon rasterization:
• Rasterize polygon one (horizontal) pixel line at a time (sweep line / scan line)
• Along each line, inside changes its result only where a polygon edge intersects the
scan line, i.e. where parity changes.
• Hence, pixels between two consecutive intersection points are inside / outside.

Example:
• y = 2: intersections at x ∈ {1, 8}.
Pixels for x ∈ [1, 8] are inside, all
y=4
others outside.
• y = 4: intersections at x ∈ {1, 4, 6, 8}. y=2

Pixels for x ∈ [1, 4] and [6, 8] are inside, (1, 1)

all others outside. 1 2 3 4 5 6 7 8

Computer Graphics – 2D Rasterization – Polygon Rasterization 3–34

 Special cases:

intersection at vertex intersection at vertex horizontal

regular extremum edge

• Intersection at vertex: if the intersection is a local y-extremum, then it is

counted twice (parity does not change, middle image).
• Otherwise, it is counted only once (left image).
• Intersections with horizontal edges are ignored.

Computer Graphics – 2D Rasterization – Polygon Rasterization 3–35

 Simple algorithm

For each scan line:

1. Find the intersections of the scan line with all edges of the polygon.
2. Sort the intersections by increasing x-coordinate.
3. Fill all pixels between pairs of intersections.

Calculating intersections is slow.

But, we can use coherence between scan lines: neighboring scan lines are likely
to intersect the same edges.

Computer Graphics – 2D Rasterization – Polygon Rasterization 3–36

 Active edge list algorithm: maintain a list A of active edges

Polygon edges are sorted by minimum y-coordinate;

horizontal edges are ignored.

Move scan line in from ymin to ymax :

• When the scan line reaches the lower endpoint of
an edge it becomes active; insert it into A sorted
by ymax .
• When the scan line reaches the upper endpoint of
an edge it becomes inactive; remove it from A.
• Update intersections of edges in A an scan line
(using e.g. DDA algorithm); sort intersections by x;
fill pixels between consecutive pairs of edges in A.

Computer Graphics – 2D Rasterization – Polygon Rasterization 3–37

 Notes:

• All edges are kept in a linked list, ordered by ymin

Active edges are kept in a linked list, ordered by ymax .
• x-sorting of intersections at every position of the scan line is needed since
edges may cross (and hence x-order of intersection points can change).

d
b

a
c

Edge (a, b) will be placed in the active list before edge (c, d) because it has smaller ymax ; hence, the
right intersection point would be found before the one.

Computer Graphics – 2D Rasterization – Polygon Rasterization 3–38

 Notes (cont’d):

• Implementation is slightly tedious, getting the details right is tricky.

E.g. regular vertex intersections: handle by “shortening” one of the edges.
• This algorithm is very general but not suited very well to hardware processing.

Not considered here: fill rules

How to avoid double-drawing of pixels when polygons share an edge or vertex?
rasterization rules

Let’s look at

Triangle scan conversion: much simpler than for arbitrary polygons.

Computer Graphics – 2D Rasterization – Polygon Rasterization 3–39

 Barycentric coordinates

Assume a non-degenerate triangle T with vertices p0 , p1 , p2 .

The vectors p1 − p0 and p2 − p0 are linearly independent and form a basis of the
plane. Any point p in the plane can be uniquely written in terms of this basis as

p = p0 + β1 (p1 − p0 ) + β2 (p2 − p0 )

We can reorder this slightly to obtain

p = (1 − β1 − β2 )p0 + β1 p1 + β2 p2 := β0 p0 + β1 p1 + β2 p2

where β0 + β1 + β2 = 1.

The βi are called the barycentric coordinates of p with respect to T.

Computer Graphics – 2D Rasterization – Polygon Rasterization 3–40

 Barycentric coordinates describe a point as a affine combination2 of T’s vertices.

They can be interpreted in a geometrically elegant manner as relative areas:

p2

Ai (p)
βi (p) =
A

Ai (p) is the area of the triangle A1 p A0

formed by p and two vertices of T
opposite pi , and A is the area of T. A2
p0
p1

2
an affine combination is a linear combination in which the coefficients sum up to one
Computer Graphics – 2D Rasterization – Polygon Rasterization 3–41
 Math recap: If p and q are two arbitrary vectors, then

xp xq
A = p × q = det(p, q) = = kpkkqk sin θ
yp yq

is the signed area of the parallelogram spanned by p and q.

q p
θ θ
p q

If θ ∈ (0, 180◦ ) then the area is positive, otherwise negative.

(This can be obtained by treating p and q as 3D vectors and computing 3D cross product. If p and q form a
right-hand system, then it points along the z-axis, giving positive area; otherwise the area is negative.)

Computer Graphics – 2D Rasterization – Polygon Rasterization 3–42

 Hence, for triangle T, the barycentric coordinates of p can be computed as follows:

= A−1 (x − x1 )(y2 − y1 ) − (y − y1 )(x2 − x1 ) area of A0

 
β0 (p)
β1 (p) = A−1 (x − x2 )(y0 − y2 ) − (y − y2 )(x0 − x2 ) area of A1
 

β2 (p) = A−1 (x − x0 )(y1 − y0 ) − (y − y0 )(x1 − x0 ) area of A2

 

where A is the area of T:

A = (x2 − x0 )(y1 − y0 ) − (x1 − x0 )(y2 − y0 )

Important: if p is inside the triangle, then β0 (p), β1 (p), β2 (p) ≥ 0!

This allows an efficient inside() function.

Computer Graphics – 2D Rasterization – Polygon Rasterization 3–43

 Let’s multiply A2 out to obtain

A2 (p) = xy1 − xy0 − x0 y1 + x0 y0 − yx1 + yx0 + y0 x1 − y0 x0

= (y1 − y0 )x + (x0 − x1 )y + x0 (y0 − y1 ) + y0 (x1 − x0 )

which we recognize as an implicit representation

l2 (p) = hn2 , pi − d

of the line spanned by p0 and p1 . n2 is simply p1 − p0 rotated 90◦

counterclockwise.

Computer Graphics – 2D Rasterization – Polygon Rasterization 3–44

 Hence, barycentric coordinates are also signed distances to the edge lines.

A2 is computed as

A2 = hn2 , pi − d
p2
A2 and h are positive if the p is on
the same side that n2 points to.
p
A2 does not change as p moves on
the dashed line, since the distance h h n2
to l2 stays the same.
h>0 A2
h<0
p0
l2
The maximum distance inside the p1
triangle is obtained for p2 , which
gives A2 = A. If p is on l2 , then A2 = 0.

Computer Graphics – 2D Rasterization – Polygon Rasterization 3–45

 Summing up:

For a triangle T = (p0 , p1 , p2 ), we can formulate three barycentric coordinates β0,1,2 (p)
such that

• β0 (p) + β1 (p) + β2 (p) = 1

• β0 (p), β1 (p), β2 (p) ≥ 0 if p is inside T

Furthermore:

• βi (p) = 0 if p is on the edge (pj , pk )

• βi (p) = βj (p) = 0 if p is equal to pk

Hence, the βi provide a “perfect” coordinate system for T. They are often called edge
functions (e.g. β0 = F12 ) in rasterization.

Computer Graphics – 2D Rasterization – Polygon Rasterization 3–46

 Back to triangle rasterization: if edge() computes the edge functions, then

for( int y=ymin; y<ymax; ++y )

for( int x=xmin; x<xmax; ++x )
{
if( edge(x, y, x1, y1, x2, y2) > 0 &&
edge(x, y, x2, y2, x0, y0) > 0 &&
edge(x, y, x0, y0, x1, y1) > 0 )
plot( x, y );
}

is pseudo-code to rasterize a triangle.

This code is embarrassingly parallel, i.e. the computation can be done

independently for each pixel and thus easily parallelized; this is ideal for fast
hardware implementations.

Computer Graphics – 2D Rasterization – Polygon Rasterization 3–47

 There is ample potential for optimizations:
• To tell whether pixel p is inside T, we only need to
look at the sign of the edge functions.
• The edge functions are linear, e.g.

β2 (x + 1, y) = βi (x, y) + (y1 − y0 )

and can be updated incrementally.

However, “skinny” triangles (right image) may cause

much unneeded computation; many pixels in the
bounding box are evaluated, but only few are actually
bounding box
inside the triangle.

Computer Graphics – 2D Rasterization – Polygon Rasterization 3–48

 Polygon rasterization in modern hardware:

• Decompose polygon into triangles

(triangulation Computational Geometry),
• render triangles very fast.

Not straightforward for non-simple polygons.

Computer Graphics – 2D Rasterization – Polygon Rasterization 3–49

 One more – quite important – reason barycentric coordinates are used in triangle
rasterization: barycentric interpolation.

Assume we have three colors at the three corners C(p0 ), C(p1 ), C(p2 ); how can we
smoothly blend them across a triangle?

Using barycentric coordinates:

2
X
C(p) = βi (p)C(pi )
i=0

This generalizes linear interpolation (along line

segments) to triangles; since edge functions are
computed anyway, this is rather cheap.

This can also be used for other per-vertex quanities ( Pipelines + Mapping chapters).

Computer Graphics – 2D Rasterization – Polygon Rasterization 3–50

Clipping
 It is not unusual that rasterization should be limited to a section of an image or
screen.

Two terms are used to describe this:

window defines the viewing window in the scene; or, which part of a scene
should be represented,
viewport defines the area of the target image or screen in which the window
contents should be drawn.

Typically, but not always, both window and viewport are axis-aligned rectangles.

Computer Graphics – 2D Rasterization – Clipping 3–51

 Illustration:
scene image/screen image/screen

viewport

viewport
window

same window, different viewports

window

viewport
viewport

window

window
window

window

same viewport, different windows

Computer Graphics – 2D Rasterization – Clipping 3–52

 While it is straightforward to translate shapes from window to viewport through
shifting and scaling (more later in the Transformations chapter), we need some
way in which to discard the parts of shapes outside the viewport.

This is called clipping.

It may appear at first glance that we can simply limit plot() to the bounds of the
viewport, but that is not ideal:

• The viewport could be non-rectangular (e.g. an arbitrary polygon).

• We might consider many primitives that are not visible at all because they
are entirely outside the window.

Let’s consider briefly how to clip lines and arbitrary polygons.

Computer Graphics – 2D Rasterization – Clipping 3–53

 Line Clipping

For an axis-aligned viewport (xmin , ymin , xmax , ymax ), there are three cases:

1. Both endpoints are inside the viewport → draw entire line.

2. Both endpoints are above / below / left / right of the viewport → skip line.
3. Otherwise, compute intersection(s) between line and viewport to determine the
visible part of the line and draw it.

case 1 case 2 case 3

Computer Graphics – 2D Rasterization – Clipping 3–54

 Cohen-Sutherland Line Clipping Algorithm: classify case and edges to intersect

The plane is divided in nine regions by the lines corresponding to the viewport edges.
Each region receives a unique 4-bit code.

1001 1000 1010

bit 0 left of viewport x < xmin
bit 1 right of viewport x > xmax
0001 0000 0010
bit 2 below viewport y < ymin
bit 3 above viewport y > ymax 0101 0100 0110

Computer Graphics – 2D Rasterization – Clipping 3–55

 For both line endpoints, the codes are determined. Then:

1. Completely inside: both codes are / logical OR of codes is zero.

2. Completely outside: logical AND of both codes is non-zero.
3. In all other cases, the line is successively split into two by the viewport axes; the
outside part is discarded.

1001 1000

0000

0000 0001
0001
case 1 case 2 case 3

Computer Graphics – 2D Rasterization – Clipping 3–56

 Polygon Clipping: not quite as simple – the clipped polygon may contain parts of the
viewport polygon.

unclipped correct incorrect

Simply clipping the polygon edges gives an incorrect result (right image).

Clearly, some intersections need to connect to others, but which ones?

Computer Graphics – 2D Rasterization – Clipping 3–57

 Sutherland-Hodgman Polygon Clipping Algorithm:
simplify by successively clipping against each edge of the (axis-aligned) viewport.

unclipped clip at xmin clip at xmax clip at ymin clip at ymax

Consecutive intersections (exit → entry) can be safely connected in this case. However,
the intermediate results – partially clipped polygons – must be stored.

For arbitrary polygons, an extension is possible ( Weiler-Atherton algorithm).

Computer Graphics – 2D Rasterization – Clipping 3–58