CS482: Interactive Computer Graphicsvclab.kaist.ac.kr/cs482/slide11-rasterization.pdf · 2019. 11....

Min H. Kim (KAIST) CS482: Interactive Computer Graphics

CS482: Interactive Computer Graphics

Min H. KimKAIST School of Computing


RASTERIZATIONChapter 12

2


Backface culling• When drawing a closed solid object, we will only

ever see one ‘front’ side of each triangle.• For efficiency we can drop these from the

processing.

3


Without backface culling

4


With backface culling

5


Backface culling• To do this, in OpenGL, we use the convention of

ordering the three vertices in the draw call of index buffer object/vertex buffer object (IBO/VBO) so that they are counterclockwise(CCW) when looking at its front side.

• During setup, we call glEnable(GL_CULL_FACE)• To implement culling, OpenGL does the

following…

6


• Let be the three vertices of the triangle projected down to the plane.

• Define the vector • Next compute the cross

product• If the three vertices are

counterclockwise in theplane, then will be in the direction.

Math of Backface Culling

7

p1, p2, and p3(xn , yn ,0)

!a = "p3 − "p2 and !b = "p1 − "p2

!c = !a ×!b

!c+zn


Cross product• Input: two vectors• Output: a vector

• where is a unit vector that is orthogonal to the plane spanned by and

• forms a right-handed basis

8

[v,w,n]

n

v

w

v!×w"!:= v!w"!sinθn!,


Cross product• In a right-handed orthogonal basis

• We can compute a cross-product as

9

(b tc)× (b

td) =

c2d3 − c3d2c3d1 − c1d3c1d2 − c2d1

⎡

⎣

⎢⎢⎢

⎤

⎦

⎥⎥⎥

b t


• So the area of the triangle is: • Taking account of the direction,

we could calculate the direction of the cross product of these two vectors.

• If this is negative, the polygonlooks backward.

Math of Backface Culling

10

Area = 12!a ×!b

(xn3 − xn

2 )(yn1 − yn

2 )− (yn3 − yn

2 )(xn1 − xn

2 )

NB There are typos at page 114 in our textbook.The negative and positive were flipped around in the textbook.These slides are typo-corrected.


Viewport• Now we want to position the vertices in the

window. So it is time to move the NDCs to window coordinates.– in NDCs, lower left corner is [-1, -1]t and upper right

corner is [1,1]t.• Each pixel center has an integer coordinate.– This will make subsequent pixel computations more

natural.• We want the lower left pixel center to have 2D

window coordinates of and the upper right pixel center to have coordinates

11

[0,0]t[W −1,H −1]t


NDC�

(0,0)(-1,-1)

(1,1)(-1,1)

(1,-1)

Viewport• We think of each pixel as owning the real estate

which extends 0.5 pixel units in the positive and negative, horizontal and vertical directions from the pixel center.

12


Quantization• sRGB coordinates are in the real range [0…1]• A fixed point representation is used with values

[0…255] (8-bit color) à unsigned char in C

13

byteR = round(realR * 255);realR = byteR/255.0;

byteR = round(f>=1.0 ? 255 : (realR * 256) – 0.5);realR = (byteR+0.5)/256.0;


NDC�

(0,0)(-1,-1)

(1,1)(-1,1)

(1,-1)

Viewport• Thus the extent of 2D window rectangle covered

by the union of all our pixels is the rectangle in window coordinates with lower left corner

and upper right corner

14

[−0.5,−0.5]t [W − 0.5,H − 0.5]t


Viewport matrix

15

• We need a transform that maps the lower left corner to and upper right corner to

• The appropriate scale and shift can be done using the viewport matrix:

[−0.5,−0.5]t

[W − 0.5,H − 0.5]t

xwywzw1

⎡

⎣

⎢⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥⎥

=

W / 2 0 0 (W −1) / 20 H / 2 0 (H −1) / 20 0 1/ 2 1 / 20 0 0 1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

xnynzn1

⎡

⎣

⎢⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥⎥

−1< xn <1−1< yn <1−1< zn <1


Viewport matrix• This does a scale and shift in both x and y• You can verify that it maps the corners

appropriately• In OpenGL, we set up this viewport matrix with

the call glViewport(0,0,W,H)• The third row of this matrix is used to map the

range of values to the more convenient range.

• So now (in our conventions), is far andis near.

16

[−1,−1] zn[0...1]

zw = 0zw = 1


Viewport matrix• So we must also tell OpenGL that when we clear

the z-buffer, we should set it to 0 (i.e., 0=far); we do this with the call glClearDepth(0.0)

17


Texture Viewport• The abstract domain for textures is not the

canonical square, but instead is the unit square.• Its lower left corner is [0,0]t and upper right

corner is [1,1]t.• In this case the coordinate transformation

matrix is:

18

xwyw−1

⎡

⎣

⎢⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥⎥

=

W 0 0 −1/ 20 H 0 −1/ 2− − − −0 0 0 1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

xtyt−1

⎡

⎣

⎢⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥⎥


The origin in 2D coordinate systems

19

NDC�

(0,0)

(-1,-1)

(1,1)(-1,1)

(1,-1)

GLUT & Image

Coordinates

(0,1)

(1,0)(0,0)

(1,1)

OpenGLWindow/texture

Coordinates

(0,0)

(1,1)(0,1)

(1,0)


Rasterization• Starting from the window coordinates for the

three vertices, the rasterizer needs to figure out which pixel centers are inside of the triangle.

• Each triangle on the screen can be defined as the intersection of three half-spaces.

20


Rasterization• Starting from the window coordinates for the

three vertices, the rasterizer needs to figure out which pixel centers are inside of the triangle.

• Each triangle on the screen can be defined as the intersection of three half-spaces.

21


Math of rasterization• Each such halfspace is defined by a line that

coincides with one of the edges of the triangle, and can be tested using an ‘edge function’ of the form:

where the are constants thatdepend on thegeometry of the edge.

22

edge = axw + byw + c

(a,b,c)

← yw = − abxw −

cb

posit

ive


Math of rasterization• A positive value of this function at a pixel with

coordinates means that the pixel is inside the specified halfspace (on the left-hand side).

• If all three tests pass, then the pixel is inside the triangle.

23

[xw , yw ]t

posit

ive


Speed up• Only look at every pixel in the bounding box of

the triangle• Test if a pixel block is entirely outside of triangle• Use incremental calculations along a scanline.

24


Interpolation• As input to rasterization, each vertex also has

some auxiliary data associated with it.– This data includes a value,– As well as other data that is related, but not identical

to the varying variables.

• It is also the job of the rasterizer to linearly interpolate this dataover the triangle.

25

zw


Math of interpolation• Each such value to be linearly interpolated

can be represented as an affine function over screen space with the form:

• An affine function can be easily evaluated at each pixel by the rasterizer.

• Indeed, this is no different from evaluating the edge test functions just described.

26

v

v = axw + byw + c


1D Linear Interpolation

• Linear interpolation (1D):

• Interpolation error: pc(x) = p(x0 )+ [(x − x0 ) / (x1 − x0 )][ p(x1)− p(x0 )].

e = p(x)− pc(x)

[Kang 1997]


2D Bilinear Interpolation

• Bilinear interpolation (2D):

p0(x) = p00 + [(x − x0 ) / (x1 − x0 )]( p10 − p00 ).

p1(x) = p01 + [(x − x0 ) / (x1 − x0 )]( p11 − p01).

p(x, y) = p0 + [( y − y0 ) / ( y1 − y0 )]( p1 − p0 ).

[Kang 1997]


2D Bilinear Interpolation

• Bilinear interpolation (2D):

p(x, y) = p00 + [(x − x0 ) / (x1 − x0 )]( p10 − p00 )+ [( y − y0 ) / ( y1 − y0 )]( p01 − p00 )+ [(x − x0 ) / (x1 − x0 )][( y − y0 ) / ( y1 − y0 )]+ ( p11 − p01 − p10 + p00 )

[Kang 1997]

How do you interpolate values defined at vertices across the entire triangle?

Barycentric Interpolation


Solve a simpler problem first:

x1

x2


x2


Solve a simpler problem first:

0

x1t

Want to define a value for every t ε [0,1]:

0

1

1t


How do we come up with this equation? Look at the picture!

t


The further t is from the red point, the more blue we want.

t


The further t is from the red point, the more blue we want. The further t is from the blue point, the more red we want.

t


t


Percent blue = (length of blue segment)/(total length)



Percent blue = (length of blue segment)/(total length) Percent red = (length of red segment)/(total length)

t



Percent blue = (length of blue segment)/(total length) Percent red = (length of red segment)/(total length)

Value at t = (% blue)(value at blue) + (% red)(value at red)

t



Percent blue = tPercent red = 1-tValue at t = tx + (1-t)x

1 2

x1

x2

0t 1


Now what about triangles?



Just consider the geometry:

What’s the interpolated value at the point p?

p

x3

x1

x2


p

x1

x2

Last time (in 1D) we used ratios of lengths.

t

x3




What about ratios of areas (2D)?

p




p

If we color the areas carefully, the red area (for example) covers more of the triangle as p approaches the red point.


p

Just like before:percent red = area of red triangle

total area

percent green = area of green triangletotal area

percent blue = area of blue triangletotal area


p

Just like before:percent red

Value at p:

(% red)(value at red) +(% green)(value at green) + (% blue)(value at blue)

= area of red triangletotal area

percent green = area of green triangletotal area

percent blue = area of blue triangletotal area


p

x3

A3

A1

A1

A2

x1

x2 “barycentric interpolation”

a.k.a.“convex combination” a.k.a.“affine linear extension”

Just like before:percent red =

Σ λ =1i i

Why? Look at the picture!

“barycentriccoordinates”

= λ1

= λ2

= λ3

Value at p:(A x + A x + A x )/A

1 1 2 2 3 3

AA2AA3A

percent green =

percent blue =

Now convert this to a bunch of ugly symbols if you want... just don’t think about it that way!

Barycentric InterpolationArea = 1

2!a ×!b


Boundaries• For pixel on edge or vertex it should be rendered

exactly once.• Need special care in the implementation to

avoid duty edge representation.

48


Interpolation of varying variables• In between the vertex and fragment shader, we

need to interpolate the values of the varying variables.

• What is the desired interpolant, and how should we compute it.

• This is surprisingly subtle.

49

CS482: Interactive Computer Graphicsvclab.kaist.ac.kr/cs482/slide11-rasterization.pdf · 2019. 11....

Documents

Transcript of CS482: Interactive Computer Graphicsvclab.kaist.ac.kr/cs482/slide11-rasterization.pdf · 2019. 11....