Werner Purgathofer · instruction in display list (random scan) entry in frame buffer (raster scan)...
Transcript of Werner Purgathofer · instruction in display list (random scan) entry in frame buffer (raster scan)...
Einführung in Visual Computing186.822
Rasterization
Werner Purgathofer
Rasterization in the Rendering Pipeline
Werner Purgathofer 2raster image in pixel coordinates
clipping + homogenization
object capture/creation
modelingviewing
projection
rasterizationviewport transformation
shading
vertex stage(„vertex shader“)
pixel stage(„fragment shader“)
scene in normalized device coordinates
transformed vertices in clip space
scene objects in object space
Important Graphics Output Primitives
in 2Dpoints, linespolygons, circles, ellipses & other curves (also filled)pixel array operationscharacters
in 3Dtriangles & other polygonsfree form surfaces
+ commands for properties: color, texture, …
Werner Purgathofer / Einf. in Visual Computing 3
Points and Lines
point plottinginstruction in display list (random scan)entry in frame buffer (raster scan)
line drawinginstruction in display list (random scan)intermediate discrete pixel positions calculated (raster scan)
“jaggies”, aliasing
Werner Purgathofer / Einf. in Visual Computing 4
Lines: Staircase Effect
Werner Purgathofer / Einf. in Visual Computing 5
stairstep effect (jaggies) produced when a line is generated as a series of pixel positions
Line-Drawing Algorithms
Werner Purgathofer / Einf. in Visual Computing 6
m =y1 − y0x1 − x0
b = y0 − m.x0
line path between two points:
line equation: y = m.x + b
}bx0
y0
y1
x1
x1 − x0
y1 − y0
DDA Line-Drawing Algorithm
Werner Purgathofer / Einf. in Visual Computing 7
δy = m. δx for |m|<1
line equation: y = m.x + b
x0
y0
y1
x1
δxm. δx
DDA Line-Drawing Algorithm
DDA (digital differential analyzer)
Werner Purgathofer / Einf. in Visual Computing 8
δy = m. δx for |m|<1
( δx = for |m|>1 )δym
for δx=1 , |m|<1 : yk+1 = yk + m
line equation: y = m.x + b sampling points with distance 1
x0
y0
y1
x11
m
DDA – Algorithm Principle
Werner Purgathofer / Einf. in Visual Computing 9
dx = x1 – x0; dy = y1 – y0;m = dy / dx;
x = x0; y = y0;drawPixel (round(x), round(y));
for (k = 0; k < dx; k++){ x += 1; y += m;
drawPixel (round(x), round(y)}
extension to other cases simplefor δx=1 , |m|<1
m =y1 − y0x1 − x0
yk+1 = yk + m
Bresenham’s Line Algorithmfaster than simple DDA
incremental integer calculationsadaptable to circles, other curves
Werner Purgathofer / Einf. in Visual Computing 10
y = m.(xk + 1) + b
decision for every column which of the two candidate pixels is selected
10 11 12 13
10
11
12
13
Bresenham’s Line Algorithm
Werner Purgathofer / Einf. in Visual Computing 11
section of the screen grid showing a pixel in column xk on scan line yk that is to be plotted along the path of a line segment with slope 0 < m < 1
xk xk+1 xk+2 xk+3
yk
yk+1
yk+2
y = mx + b
Bresenham’s Line Algorithm (1/4)
xk xk+1
yk
yk+1 dupper
dlower
y
Bresenham’s Line Algorithm (1/4)
13
dlower = y − yk == m.(xk + 1) + b − yk
dupper = (yk + 1) − y == yk + 1 − m.(xk + 1) − b
dlower − dupper = = 2m.(xk + 1) − 2yk + 2b − 1
y = m.xk+1 + b
xk+1
dupper
dlower
yk
yk+1
y
= m.(xk + 1) + b
Bresenham’s Line Algorithm (2/4)
14
m = ∆y/∆x
dlower − dupper = = 2m.(xk + 1) − 2yk + 2b − 1
pk = ∆x.(dlower − dupper) = 2∆y.xk − 2∆x.yk + c
decision parameter:
(∆x = x1 – x0, ∆y = y1 – y0)
→ same sign as (dlower − dupper)
xk+1
dupper
dlower
yk
yk+1
y
Bresenham’s Line Algorithm (3/4)
Werner Purgathofer / Einf. in Visual Computing 15
+ 0pk+1 = 2∆y.xk+1 − 2∆x.yk+1 + c + + pk – 2∆y.xk + 2∆x.yk – c =
= pk + 2∆y − 2∆x.(yk+1 − yk)
pk = ∆x.(dlower − dupper) = 2∆y.xk − 2∆x.yk + ccurrent decision value:
next decision value:
p0 = 2∆y − ∆x
starting decision value:
Bresenham’s Line Algorithm (4/4)
Werner Purgathofer / Einf. in Visual Computing 16
1. store left line endpoint in (x0,y0)2. draw pixel (x0,y0)3. calculate constants ∆x, ∆y, 2∆y, 2∆y − 2∆x,
and obtain p0 = 2∆y − ∆x4. at each xk along the line, perform test:
if pk<0 then draw pixel (xk+1,yk); pk+1 = pk+ 2∆yelse draw pixel (xk+1,yk+1); pk+1= pk+ 2∆y − 2∆x
5. perform “step 4” (∆x − 1) times.
Bresenham: Example
Werner Purgathofer / Einf. in Visual Computing 17
k pk (xk+1,yk+1)
(20,41)0 -4 (21,41)1 2 (22,42)2 -12 (23,42)3 -6 (24,42)4 0 (25,43)5 -14 (26,43)6 -8 (27,43)7 -2 (28,43)8 4 (29,44)9 -10 (30,44)
p0 = 2∆y − ∆xif pk<0 then draw pixel (xk+1,yk); pk+1 = pk+ 2∆yelse draw pixel (xk+1,yk+1); pk+1= pk+ 2∆y − 2∆x
21 22 23 24 25 26 27 28 29 302040414243444546 ∆x = 10, ∆y = 3
Werner Purgathofer / Einf. in Visual Computing 18
Attributes of Graphics Output Primitives
in 2Dpoints, linescharacters
in 2D and 3Dtrianglesother polygons((filled) ellipses and other curves)
Werner Purgathofer / Einf. in Visual Computing 19
color
type: solid, dashed, dotted,…
width, line caps, corners
pen and brush options
…
Points and Line Attributes
Werner Purgathofer / Einf. in Visual Computing 20
text attributesfont (e.g. Courier, Arial, Times, Roman, …)
proportionally sized vs. fixed space fontsstyles (regular, bold, italic, underline,…)size (32 point, 1 point = 1/72 inch)
string attributesorientationalignment (left, center, right, justify)
Character Attributes
vertical
horizontal
Displayed primitives generated by the raster algorithms discussed in Chapter 3 have a jagged, or stairstep, appearance.
Displayed primitives generated by the raster algorithms
discussed in Chapter 3 have a jagged, or
stairstep, appearance.
Displayed primitives generated by the raster algorithms
discussed in Chapter 3 have a jagged, or
stairstep, appearance.
Displayed primitivesgenerated by theraster algorithmsdiscussed in Chapter 3have a jagged, orstairstep, appearance.
Werner Purgathofer / Einf. in Visual Computing 21
font (typeface)design style for (family of) characters
Courier, Times, Arial, …serif (better readable),sans serif (better legible)
definition modelbitmap font (simple to define and display), needs more space (font cache)outline font (more costly, less space, geometric transformations)
Character Primitives
SfzrnSfzrn
Werner Purgathofer / Einf. in Visual Computing 22
Example: Newspaper
Werner Purgathofer / Einf. in Visual Computing 23
the letter B represented with an 8x8 bilevel bitmap pattern and with an outline shape defined with straight line and curve segments
Character Generation Examples
Werner Purgathofer / Einf. in Visual Computing 24
fill styleshollow, solid fill, pattern fill
fill optionsedge type, width, color
pattern specificationthrough pattern tablestiling (reference point)
Area-Fill Attributes (1)
4 01 2
4 01 2
4 01 2
4 01 2
4 01 2
4 01 2
4 01 2
4 01 2
4 01 2
4 01 2
4 01 2
4 01 2
4 01 2
Werner Purgathofer / Einf. in Visual Computing 25
combination of fill pattern with background colorssoft fill
combination of colorsantialiasing at object borderssemitransparent brush simulationexample: linear soft-fill
F... foreground colorB...background color P = t·F + (1 − t)·B
Area-Fill Attributes (2)
pattern back-ground
and
or
xor
replace
Werner Purgathofer / Einf. in Visual Computing 26
Triangle and Polygon Attributes
colormaterialtransparencytexturesurface detailsreflexion properties, …
→ defined illumination produces effects
Werner Purgathofer / Einf. in Visual Computing 27
General Polygon Fill Algorithms
triangle rasterizationother polygons: what is inside?scan-line fill methodflood fill method
(α, β ,γ)
barycentriccoordinates
clean bordersbetweenadjacent triangles
Werner Purgathofer / Einf. in Visual Computing 28
General Polygon Fill Algorithms
triangle rasterizationother polygons: what is inside?scan-line fill methodflood fill method
“interior”, “exterior” for self-intersecting polygons?
Werner Purgathofer / Einf. in Visual Computing 29
General Polygon Fill Algorithms
triangle rasterizationother polygons: what is inside?scan-line fill methodflood fill method
interior pixels along a scan line passing through a polygon area
Werner Purgathofer / Einf. in Visual Computing 30
General Polygon Fill Algorithms
triangle rasterizationother polygons: what is inside?scan-line fill methodflood fill method
starting from a seed point: fill until you reach a border
Werner Purgathofer / Einf. in Visual Computing 31
Triangles: Barycentric Coordinates
notation: (α, β ,γ)
P0(x0, y0)
P1(x1, y1)
P2(x2, y2)
(1, 0 ,0)
(0, 0, 1)
(0, 1, 0)P = αP0 + βP1 + γP2
triangle = {P| α+β+γ=1, 0<α<1, 0<β<1, 0<γ<1}
( , 0.13, 0.27)0.60P
Werner Purgathofer / Einf. in Visual Computing 32
Barycentric Coordinates in 3D
P0(x0, y0, z0)
P1(x1, y1, z1)
P2(x2, y2, z2)
(1, 0 ,0)
(0, 0, 1)
(0, 1, 0)
( , 0.13, 0.27)0.60
notation: (α, β ,γ)
P = αP0 + βP1 + γP2
triangle = {P| α+β+γ=1, 0<α<1, 0<β<1, 0<γ<1}
P
P = αP0 + βP1 + γP2
triangle = {P| α+β+γ=1, 0<α<1, 0<β<1, 0<γ<1}Werner Purgathofer / Einf. in Visual Computing 33
for all x
for all y /* use a bounding box!*/
{compute (α, β ,γ) for (x,y) ;
if (0<α<1) and (0<β<1) and (0<γ<1)
{c = αc0 + βc1 + γc2 ;
draw pixel (x,y) with color c
}}
Triangle Rasterization Algorithm
<1 <1 <1
c = αc0 + βc1 + γc2 ;
with color c
interpolates corner values (vertices) linearly inside the triangle(and along edges)
Werner Purgathofer / Einf. in Visual Computing 34
Computing (α, β ,γ) for P(x,y)
line through P1, P2: g12(x,y) = a12x+b12y+c12=0then α = g12(xP,yP) / g12(x0,y0)
β,γ analogous
P = αP0 + βP1 + γP2
triangle = {P| α+β+γ=1, 0<α<1, 0<β<1, 0<γ<1}
P0(x0, y0)
P1(x1, y1)
P2(x2, y2)
P(xP, yP)(α, β ,γ) ? g12(x,y)=0
P = αP0 + βP1 + γP2
triangle = {P| α+β+γ=1, 0<α<1, 0<β<1, 0<γ<1}Werner Purgathofer / Einf. in Visual Computing 35
Barycentric Coordinates Example
1.00.00.0
0.80.20.0
0.60.40.0
0.01.00.0
0.40.60.0
0.20.80.0
0.60.20.2
0.40.40.2
0.20.60.2
0.40.20.4
0.20.40.4
0.20.20.6
0.80.00.2
0.60.00.4
0.40.00.6
0.20.00.8
0.00.80.2
0.00.60.4
0.00.40.6
0.00.20.8
0.00.01.0
-0.21.4-0.2
1.2-0.20.0
-0.21.20.0
1.20.0-0.2
1.00.2-0.2
0.80.4-0.2
0.60.6-0.2
0.40.8-0.2
0.21.0-0.2
0.01.2-0.2
1.2-0.40.2
1.0-0.20.2
-0.21.00.2
1.2-0.60.4
1.0-0.40.4
0.8-0.20.4
-0.20.80.4
1.2-0.80.6
1.0-0.60.6
0.8-0.40.6
0.6-0.20.6
-0.20.60.6
1.2-1.00.8
1.0-0.80.8
0.8-0.60.8
0.6-0.40.8
0.4-0.20.8
-0.20.40.8
1.2-1.21.0
1.0-1.01.0
0.8-0.81.0
0.6-0.61.0
0.4-0.41.0
0.2-0.21.0
-0.20.21.0
1.2-1.41.2
1.0-1.21.2
0.8-1.01.2
0.6-0.81.2
0.4-0.61.2
0.2-0.41.2
0.0-0.21.2
-0.20.01.2
Werner Purgathofer / Einf. in Visual Computing 36
Avoiding to Draw Borders Twice
don‘t draw the outline of the triangle!result would depend on rendering order
Werner Purgathofer / Einf. in Visual Computing 37
Avoiding to Draw Borders Twice
don‘t draw the outline of the triangle!result would depend on rendering order
draw only pixels that are inside exact trianglei.e. pixels with α = 0 or β = 0 or γ = 0 are not drawn
clean bordersbetweenadjacent triangles
Werner Purgathofer / Einf. in Visual Computing 38
Pixels exactly on a Border …!?
holes if both triangles leave pixels awaysimplest solution: draw both pixelsbetter: arbitrary choice based on some test
e.g. only right boundaries
Werner Purgathofer / Einf. in Visual Computing 39
odd-even rule nonzero-winding- number rule
What is Inside a Polygon?
???
Werner Purgathofer / Einf. in Visual Computing 40
area-filling algorithms“interior”, “exterior” for self-intersecting polygons?odd-even rulenonzero-winding-number rulesame result for simple polygons
Inside-Outside Tests
Werner Purgathofer / Einf. in Visual Computing 41
inside/outside switches at every edgestraight line to the outside:
even number of edge intersections = outside odd number of edge intersections = inside
What is Inside?: Odd-Even Rule
1234
1234
123
12
1
Werner Purgathofer / Einf. in Visual Computing 42
point is inside if polygon surrounds itstraight line to the outside:
same number of edges up and down = outsidedifferent number of edges up and down = inside
What is Inside?: Nonzero Winding Number
polygon classificationsconvex: no interior angle > 180°concave: not convex
concavity testvector method
all vector cross products have the same sign ⇒ convexrotational method
rotate polygon-edges onto x-axis, always same direction ⇒ convex
Werner Purgathofer / Einf. in Visual Computing 43
Polygon Fill Areas