Drawing and Rasterization

Computer Graphics
Subodh Kumar
Dept of Computer Sc. & Engg.
IIT Delhi

Pixel/Screen Coordinates

Pixel/Screen Coordinates

Pixel/Screen Coordinates
X screen
= 0 1 w-1

Pixel/Screen Coordinates
X screen
= 0 1 w-1
Caution:
In OpenGL this is X = -1, pixel centers are at int + .5

Polygon Rasterization
n Draw pixels “intersected” by polygon
n But one color per pixel..
n And 2D polygon?
n Can iterate over rows (scan lines)
n Find intersection of scan-lines with edges
n All lines and edges?

Polygon Rasterization
n Draw pixels “intersected” by polygon
n But one color per pixel..
n And 2D polygon?
n Can iterate over rows (scan lines)
n Find intersection of scan-lines with edges
n All lines and edges?

Triangle Rasterization Issues
n Sliver
problem

Triangle Rasterization Issues
n Animating
Slivers

Triangle Rasterization Issues
n Shared Edge Ownership

Polygon Rasterization Rules
n Draw pixel, if center inside polygon
n What if it is at an edge?
n Draw on left edge, Skip on right edge
n Unless Horizontal
n Then, draw a bottom edge, skip a top edge
Find lo, hi y (scanline)
For y=lo to hi:
Find left extreme (of span)
Find right extreme (of span)
For left to right, draw pixel

Triangle Rasterization

Triangle Rasterization
n For a scan line: find Left extreme

Triangle Rasterization
n For a scan line: find Left extreme
n Remember from previous line:

Triangle Rasterization
n For a scan line: find Left extreme
n Remember from previous line:
n StartX = StartX previous + 1/m

Triangle Rasterization
n For a scan line: find Left extreme
n Remember from previous line:
n StartX = StartX previous + 1/m
n Similarly find Right extreme

Triangle Rasterization
n For a scan line: find Left extreme
n Remember from previous line:
n StartX = StartX previous + 1/m
n Similarly find Right extreme
n Extrema are on two edges

Triangle Rasterization
n For a scan line: find Left extreme
n Remember from previous line:
n StartX = StartX previous + 1/m
n Similarly find Right extreme
n Extrema are on two edges
n (sometimes at vertices)

Triangle Rasterization
n For a scan line: find Left extreme
n Remember from previous line:
n StartX = StartX previous + 1/m
n Similarly find Right extreme
n Extrema are on two edges
n (sometimes at vertices)
n Which two?

Triangle Rasterization
n For a scan line: find Left extreme
n Remember from previous line:
n StartX = StartX previous + 1/m
n Similarly find Right extreme
n Extrema are on two edges
n (sometimes at vertices)
n Which two?
n Start with two at the lowest vertex

Triangle Rasterization
n For a scan line: find Left extreme
n Remember from previous line:
n StartX = StartX previous + 1/m
n Similarly find Right extreme
n Extrema are on two edges
n (sometimes at vertices)
n Which two?
n Start with two at the lowest vertex
n What if there are two lowest vertices?

Triangle Rasterization
n For a scan line: find Left extreme
n Remember from previous line:
n StartX = StartX previous + 1/m
n Similarly find Right extreme
n Extrema are on two edges
n (sometimes at vertices)
n Which two?
n Start with two at the lowest vertex
n What if there are two lowest vertices?
n When an edge ends (at a vertex), replace edge

Triangle Rasterization
n For a scan line: find Left extreme
n Remember from previous line:
n StartX = StartX previous + 1/m
n Similarly find Right extreme
n Extrema are on two edges
n (sometimes at vertices)
n Which two?
n Start with two at the lowest vertex
n What if there are two lowest vertices?
n When an edge ends (at a vertex), replace edge
n What if both edges end?

General Polygon Rasterization

General Polygon Rasterization
n Multiple spans

General Polygon Rasterization
n Multiple spans
G
F
I
J
A
H
C
B
D
E

General Polygon Rasterization
n Multiple spans
G
F
I
J
A
H
C
B
D
E

General Polygon Rasterization
n Multiple spans
G
F
I
J
A
H
C
B
D
E

General Polygon Rasterization
n Multiple spans
n Count parity
G
F
I
J
H
C
D
E
A
B

General Polygon Rasterization
n Multiple spans
n Count parity
n How do you count
vertex intersections?
G
F
I
J
A
H
C
B
D
E

General Polygon Rasterization
n Multiple spans
n Count parity
n How do you count
vertex intersections?
n Divide into triangles
G
F
I
J
A
H
C
B
D
E

Triangle Rasterization

Triangle Rasterization
n Setup:
n Find inverse of edge slopes
n Find bounding box

Triangle Rasterization
n Setup:
n Find inverse of edge slopes
n Find bounding box
n Rasterize:
n Initialize left, right intersection
n From Bounding Box bottom to Top:
n Update left, right intersection
n Round up or down
n Fill span

Triangle Rasterization
n Setup:
n Find inverse of edge slopes
n Find bounding box
n Rasterize:
n Initialize left, right intersection
n From Bounding Box bottom to Top:
n Update left, right intersection
n Round up or down
n Fill span
n Interpolate Z, Color?
n Do in fragment shader
n Fill span = create fragment

Triangle Rasterization, Really
n Multiple rasterizers?
n Blocked or Strided
n Create tiles of fragments
n In parallel, divide tiles into
sub-tiles
n Each sub-tile shaded
together
n Mask to turn off uncovered
tiles

Triangle Rasterization, Really
n Multiple rasterizers?
n Blocked or Strided
n Create tiles of fragments
n In parallel, divide tiles into
sub-tiles
n Each sub-tile shaded
together
n Mask to turn off uncovered
tiles

Triangle Rasterization, Really
n Multiple rasterizers?
n Blocked or Strided
n Create tiles of fragments
n In parallel, divide tiles into
sub-tiles
n Each sub-tile shaded
together
n Mask to turn off uncovered
tiles

Triangle Rasterization, Really
n Multiple rasterizers?
n Blocked or Strided
n Create tiles of fragments
n In parallel, divide tiles into
sub-tiles
n Each sub-tile shaded
together
n Mask to turn off uncovered
tiles
Fully covered
sub-tile
Partially covered sub-tile

Multi-sampling
n An attempt to increase resolution
n Anti-aliasing: more on this later

Multi-sampling
n An attempt to increase resolution
n Anti-aliasing: more on this later

Multi-sampling
n An attempt to increase resolution
n Anti-aliasing: more on this later

Multi-sampling
n An attempt to increase resolution
n Anti-aliasing: more on this later

n Draw [X 0 , Y 0 ]
Point Drawing

n Draw [X 0 , Y 0 ]
Point Drawing

n Draw [X 0 , Y 0 ]
Point Drawing

Point Drawing
n Draw [X 0 , Y 0 ] of a certain size

Point Drawing
n Draw [X 0 , Y 0 ] of a certain size

Point Drawing
n Draw [X 0 , Y 0 ] of a certain size

Point Drawing
n Draw [X 0 , Y 0 ] of a certain size

Point Drawing
n Draw [X 0 , Y 0 ] of a certain size

Line Drawing
n Draw a line
n Start at [X 0 , Y 0 ]
n End at [X 1 , Y 1 ]

Line Drawing
n Draw a line
n Start at [X 0 , Y 0 ]
n End at [X 1 , Y 1 ]

Line Drawing
n Draw a line
n Start at [X 0 , Y 0 ]
n End at [X 1 , Y 1 ]

Drawing
n Draw a line
n Start at [X 0 , Y 0 ]
n End at [X 1 , Y 1 ]

Drawing
n Draw line: [X 0 , Y 0 ] TO [X 1 , Y 1 ]
n width: t
Endcap?

Drawing
n Draw line: [X 0 , Y 0 ] TO [X 1 , Y 1 ]
n width: t
mitered
rounded
bevelled
Endcap?

Drawing
n Draw line [1, 1] TO [8, 1]
n 7 pixels long
n eliminate last pixel
1 8

Line Drawing
n Which pixels to draw
n How thick is the line
n How long is the line
n How are the ends drawn
n Do you allow overdraw
n Which direction is the line drawn in
n Find color and Z

Line Drawing Simplified

Line Drawing Simplified

Line Drawing Simplified

Line Drawing Simplified

Line Drawing Simplified
n Draw pixel if
n Line is close to it
n ie, lies in the circle
n Or, the diamond
n Draw pixel if:
n Line exits diamond
n What if line does not exit
the diamond?
n What if line straddles or
ends at a diamond edge

Line Drawing Simplified
n Draw pixel if
n Line is close to it
n ie, lies in the circle
n Or, the diamond
n Draw pixel if:
n Line exits diamond
n What if line does not exit
the diamond?
n What if line straddles or
ends at a diamond edge

Efficient Line Drawing
n Proceed in the direction of smaller slope
n DDA: Digital Difference Analyzer
n Y = mX + i
n m(x+1) + i, m(x+2) + i …
n Successively add m to y and round it
n Bresenham’s midpoint algorithm
n Which next pixels are the closest to the line
n aX + bY + c = 0
n Useful for curves as well

Bresenham’s Algorithm
n If slope in [-1:1]
n 3 possibilities

Bresenham’s Algorithm
n If slope in [-1:1]
n 3 possibilities

Bresenham’s Algorithm
n If slope in [-1:1]
n 3 possibilities

Bresenham’s Algorithm

Bresenham’s Algorithm
n If slope in [-1:1]
n 3 possibilities
n If slope in [0:1]?
n On which side of
the next mid-point
does the line lie?

Locate Mid-point
n Y = mX + i
n Y + = m (X+1) + i
n > y+.5?
n Consider:
n F(x,y) = 0
n ie, aX+bY+c = 0
x,y
x+1,y+.5
p

Locate Mid-point
n Y = mX + i
n Y + = m (X+1) + i
n > y+.5?
n Consider:
n F(x,y) = 0
n ie, aX+bY+c = 0
x,y
x+1,y+.5
p
F(p) = 0 => Curve intersects p
F(p) < 0 => Curve passes below p
F(p) > 0 => Curve passes above p

Locate Mid-point
n Y = mX + i
n Y + = m (X+1) + i
n > y+.5?
n Consider:
n F(x,y) = 0
n ie, aX+bY+c = 0
x,y
x+1,y+.5
p
F(p) = 0 => Curve intersects p
F(p) < 0 => Curve passes below p
F(p) > 0 => Curve passes above p
If a > 0

Locate Mid-point
n d = a(x+1) + b(y+.5) + c
n d next =
n ie,
n a(x+2) + b(y+.5) + c
n Or, a(x+2) + b(y+1.5) + c
n d + a
n Or, d + a + b
n How do you initialize?
x,y
x+1,y+.5

Locate Mid-point
n d = a(x+1) + b(y+.5) + c
n d next =
n ie,
n a(x+2) + b(y+.5) + c
n Or, a(x+2) + b(y+1.5) + c
n d + a
n Or, d + a + b
n How do you initialize?
x,y
x+1,y+.5

Locate Mid-point
n d = a(x+1) + b(y+.5) + c
n d next =
n ie,
n a(x+2) + b(y+.5) + c
n Or, a(x+2) + b(y+1.5) + c
n d + a
n Or, d + a + b
n How do you initialize?
x,y
x+1,y+.5

Initialize d
n What if initial vertex coordinates are at
pixel centers?
n d initial = a(x 0 + 1) + b(y 0 +.5) + c
n = ax 0 + by 0 + c + a + b/2
n = a + b/2
n Can we avoid that division?
n Otherwise, can we snap?
(x 0 , y 0 )