CS 352: Computer Graphics - PowerPoint Presentation

Slide1

CS 352: Computer Graphics

Chapter 8:

The

Back

EndSlide2

Interactive Computer Graphics

Chapter 8 -

2

Overview

Vertex processing: normalization, transformations, lighting, projection

Clipping and primitive assembly clipping, hidden surface removal, lighting, projection (

front end)Rasterization or scan conversion, including texture mapping, etc. (back end)Fragment processing and displaySlide3

Interactive Computer Graphics

Chapter 8 -

3

Geometric Processing

Front-end

processing steps (3D floating point)

Evaluators (converting curved surfaces to polygons)Normalization (modeling transform, convert to world coordinates)Projection (convert to screen coordinates)Hidden-surface removal (object space)Computing texture coordinatesComputing vertex normalsLighting (assign vertex colors)ClippingPerspective division

Backface

cullingSlide4

Interactive Computer Graphics

Chapter 8 -

4

Back-end processing

Back-end

processing works on 2D objects in screen coordinates

Processing includesScan conversion of primitives including shadingTexture mappingFogScissors testAlpha testStencil testDepth-buffer testOther fragment operations: blending, dithering, logical operationsSlide5

Interactive Computer Graphics

Chapter 8 -

5

Display

Convert frame buffer to video signal

Other considerations:

Color correctionAntialiasingSlide6

Interactive Computer Graphics

Chapter 8 -

6

Geometric Transformations

Six coordinate systems of interest:

Object coordinates

World coordinatesEye coordinates [after modelview]Clip coordinates [after projection]Normalized device coordinates [after ÷w]Window (screen) coordinates [scale to screensize]Slide7

Interactive Computer Graphics

Chapter 8 -

7

Line-Segment Clipping

Clipping may happen in multiple places in the pipeline (e.g. early trivial accept/reject)

After projection, have lines in plane, with rectangle to clip againstSlide8

Interactive Computer Graphics

Chapter 8 -

8

Clipping a Line Against x

min

Given a line segment from (x

1,y1) to (x2,y2), Compute m=(y2–y

1

)/(x

2

–x

1

)

Line equation: y = mx + h

h = y

1

– m x

1

(y intercept)

Plug in x

min

to get y

Check if y is between y

1

and y

2

.

This take a lot of floating-point math. How to minimize?Slide9

Interactive Computer Graphics

Chapter 8 -

9

Cohen-Sutherland Clipping

For both endpoints compute a 4-bit

outcode

(o1, o2) depending on whether coordinate is outside cliprect sideSome situations can be handled easilySlide10

Interactive Computer Graphics

Chapter 8 -

10

Cohen-Sutherland Conditions

Cases

.

1. If o1=o2=0, accept2. If one is zero, one nonzero, compute an intercept. If necessary compute another intercept. Accept.3. If o1 & o2  0. If both outcodes

are nonzero and the bitwise AND is nonzero, two endpoints lie on same outside side.

Reject.

3. If o

1

& o

2

 0. If both

outcodes

are nonzero and the bitwise AND is zero, may or may not have to draw the line. Intersect with one of the window sides and check the result.Slide11

Interactive Computer Graphics

Chapter 8 -

11

Cohen-Sutherland Results

In many cases, a few integer comparisons and Boolean operations suffice.

This algorithm works best when there are many line segments, and most are clipped

But note that the y=mx+h form of equation for a line doesn’t work for vertical lines (need a special case in your code)Slide12

Interactive Computer Graphics

Chapter 8 -

12

Polygon Clipping

Clipping a polygon can result in lots of pieces

Replacing one polygon with many may be a problem in the rendering pipeline

Could treat result as one polygon: but this kind of polygon can cause other difficultiesSome systems allow only convex polygons, which don’t have such problems (OpenGL has triangulate function in

glu

library; OpenGL ES uses triangles only)Slide13

Interactive Computer Graphics

Chapter 8 -

13

Sutherland-Hodgeman

Polygon Clipping

Could clip each edge of polygon individually

Pipelined approach: clip polygon against each side of rectangle in turnTreat clipper as “black box” pipeline stageSlide14

Interactive Computer Graphics

Chapter 8 -

14

Clipping Pipeline

Clip each bound in turnSlide15

Interactive Computer Graphics

Chapter 8 -

15

Clipping in Hardware

Build the pipeline stages in hardware so you can perform four clipping stages at once

[A partial answer to the question of what to do with all that chip area, 1 billion + transistors…]Slide16

Interactive Computer Graphics

Chapter 8 -

16

Clipping complicated objects

Suppose you have many complicated objects, such as models of parts of a person with thousands of polygons each

When and how to clip for maximum efficiency?

How to clip text? Curves?Slide17

Interactive Computer Graphics

Chapter 8 -

17

Clipping Other Primitives

It may help to clip more complex shape early in the pipeline

This may be simpler and

less accurateOne approach: bounding boxes (sometimes called trivial accept-reject)This is so useful that modeling systems often

store bounding boxSlide18

Interactive Computer Graphics

Chapter 8 -

18

Clipping Curves, Text

Some shapes are so

complex that they

are difficult to clip analyticallyCan approximate with line segmentsCan allow the clipping to occur in the frame buffer (pixels outside the screen rectangle aren’t drawn)Called “scissoring

”

How does performance compare?Slide19

Interactive Computer Graphics

Chapter 8 -

19

Scan Conversion

At this point in the pipeline, we have only polygons and line segments. Render!

To render, convert to pixels (

“fragments”) with integer screen coordinates (ix, iy), depth, and colorSend fragments into fragment-processing pipelineSlide20

Interactive Computer Graphics

Chapter 8 -

20

Rendering Line Segments

How to render a line segment from (x

1

, y1) to (x2, y2)?Use the equation y = mx + h

What about horizontal

vs. vertical lines?Slide21

Interactive Computer Graphics

Chapter 8 -

21

DDA Algorithm

DDA: Digital Differential Analyzer

for (x=x

1; x<=x2; x++) y += m;draw_pixel(x, y, color)Handle slopes 0 <= m <= 1; handle others symmetricallyDoes thisneed floating

point math?Slide22

Interactive Computer Graphics

Chapter 8 -

22

Bresenham

’

s Algorithm

The DDA algorithm requires a floating point add and round for each pixel: eliminate?Note that at each step we will go E or NE. How to decide which?

−Slide23

Interactive Computer Graphics

Chapter 8 -

23

Bresenham Decision Variable

Note that at each step we will go E or NE. How to decide which?

Hint: consider d=a-b, where a and b are distances to NE and E pixels

−Slide24

Interactive Computer Graphics

Chapter 8 -

24

Bresenham Decision Variable

Bresenham

algorithm uses decision variable d=a-b, where a and b are distances to NE and E pixels

If d<=0, go NE; if d>0, go ELet dx = x2-x1, d

y

=y

2

-y

1

Use decision variable

d = d

x

(a-b)

[only sign matters]

−Slide25

Interactive Computer Graphics

Chapter 8 -

25

Bresenham Decision Variable

d =(a-b) d

x

Let dk be the value of d at x = k + ½Move E: dk = dx

(a-b) = d

x

((j+3/2–

y

k

) – (

y

k

–(j+1/2)))

d

k+1

= d

x

(a-b) = d

x

((j+3/2–

y

k

–m) – (

y

k

+m

–(j+1/2)))

d

x+1

–

d

k

= d

x

(-2m) = - 2

d

Y

Algorithm:

d

k+1

=

d

k

– 2

d

y

(if

d

k

> 0) (last move was E)

d

k+1

=

d

k

– 2 (

d

y

-d

x

)

(if

d

k

<= 0) (last move was NE)

−Slide26

Interactive Computer Graphics

Chapter 8 -

26

Bresenham

’s

AlgorithmSet up loop computing d at x1, y1for (x=x1; x<=x2; )

x++;

d += 2dy;

if (d >= 0) {

y++;

d –= 2dx; }

drawpoint

(

x,y

);

Pure integer math, and not much of it

So easy that it’s usually implemented in one instruction for several points in parallelSlide27

Interactive Computer Graphics

Chapter 8 -

27

Rasterizing Polygons

Polygons may be or may not be simple, convex, flat. How to render?

Amounts to inside-outside testing: how to tell if a point is in a polygon? Slide28

Interactive Computer Graphics

Chapter 8 -

28

Winding Test

Most common way to tell if a point is in a polygon: the winding test.

Define

“winding number” w for a point: signed number of revolutions around the point when traversing boundary of polygon onceWhen is a point “inside” the polygon?Slide29

Interactive Computer Graphics

Chapter 8 -

29

OpenGL and Complex Polygons

OpenGL guarantees correct rendering only for simple, convex, planar polygons

OpenGL tessellates concave polygons

Tessellation depends on winding rule you tell OpenGL to use: Odd, Nonzero, Pos, Neg, ABS_GEQ_TWO[OpenGL ES only supports triangles]Slide30

Interactive Computer Graphics

Chapter 8 -

30

Winding RulesSlide31

Interactive Computer Graphics

Chapter 8 -

31

Scan-Converting a Polygon

General approach: ideas?

One idea:

flood fillDraw polygon edgesPick a point (x,y) inside and flood fill with DFSflood_fill(x,y) { if (read_pixel(x,y)==white) { write_pixel(x,y,black); flood_fill(x-1,y);

flood_fill(x+1,y);

flood_fill(x,y-1);

flood_fill(x,y+1);

} }Slide32

Interactive Computer Graphics

Chapter 8 -

32

Scan-Line Approach

More efficient: use a scan-line rasterization algorithm

For each y value, compute x

intersections. Fill according to winding ruleHow to compute intersectionpoints?How to handle shading?Some hardware can handle multiple scanlines in parallelSlide33

Interactive Computer Graphics

Chapter 8 -

33

Singularities

If a vertex lies on a scanline,

does that count as 0, 1, or 2

crossings?How to handle singularities?One approach: don’t allow. Perturb vertex coordinatesOpenGL’

s approach: place pixel

centers half way between

integers (e.g. 3.5, 7.5), so

scanlines never hit verticesSlide34

Interactive Computer Graphics

Chapter 8 -

34

Aliasing

How to render the line

with reduced aliasing?

What to do when polygonsshare a pixel?Slide35

Interactive Computer Graphics

Chapter 8 -

35

Anti-Aliasing

Obvious approach: area-based weighting

Fastest approach: averaging nearby pixels

Most common approach: supersampling (compute four values per pixel and avg, e.g.)Best approach: weighting based on distance of pixel from center of line; Gaussian fall-offSlide36

Interactive Computer Graphics

Chapter 8 -

36

Temporal Aliasing

Need

motion blur

for motion that doesn’t flickerCommon approach: temporal supersamplingrender images at several times within frame time intervalaverage resultsSlide37

Interactive Computer Graphics

Chapter 8 -

37

Display Considerations

Color systems

Color quantization

Gamma correctionDithering and HalftoningSlide38

Interactive Computer Graphics

Chapter 8 -

38

Additive and Subtractive ColorSlide39

Interactive Computer Graphics

Chapter 8 -

39

Common Color ModelsSlide40

Interactive Computer Graphics

Chapter 8 -

40

Color Systems

RGB

sRGB

YIQCMYKHSV, HLSChromaticityColor gamutSlide41

Interactive Computer GraphicsChapter 8 - 41Slide42

Interactive Computer Graphics

Chapter 8 -

42

HLS

Hue:

“

direction” of color: red, green, purple, etc.Saturation: intensity. E.g. red vs. pinkLightness: how bright

To the right: original,

H, S, LSlide43

Interactive Computer Graphics

Chapter 8 -

43

YIQ

Used by NTSC TV

Y =

luma, same as black and whiteI = in-phase (blue-orange)Q = quadrature (purple-green)The eye is more sensitive to

blue-orange than purple-green,

so more bandwidth is allotted

Y = 4 MHz, I = 1.3 MHz, Q = 0.4 MHz,

overall bandwidth 4.2 MHz

Linear transformation from RBG:

Y = 0.299 R + 0.587 G + 0.114 B

I = 0.596 R – 0.274 G – 0.321 B

Q = 0.211 R – 0.523 G + 0.311 B Slide44

NTSC color bleeding

Interactive Computer GraphicsChapter 8 - 44Slide45

Interactive Computer Graphics

Chapter 8 -

45

Chromaticity

Color researchers often

prefer chromaticity

coordinates: t1 = T1 / (T1 + T2 + T3) t2 = T2 / (T1 + T2 + T3)t3 = T3 / (T1 + T2 + T3)Thus, t1+t2+t3 = 1.0.Use t1 and t2; t3 can be

computed as 1-t1-t2

Chromaticity diagram uses XYZ color system based on human perception experiments (CIE, 1931)

Y, luminance

X, redness (roughly)

Z, blueness (roughly)Slide46

Interactive Computer Graphics

Chapter 8 -

46

Color temperature

Compute color temperature by comparing chromaticity with that of an ideal black-body radiator

Higher temperatures are

“cooler” colors – more green/blue; warmer colors (yellow-red) have lower temperaturesCIE 1931 chromaticity diagram(wikipedia)Slide47

What’s wrong here?

Interactive Computer GraphicsChapter 8 - 47Slide48

Gamma correctionHuman brightness perception is not linearCompensation is built into monitorsComputer-generated images may look bad

Interactive Computer GraphicsChapter 8 - 48Slide49

Importance of dynamic range?

Interactive Computer GraphicsChapter 8 - 49sRGB: standard for printers, monitors, etc. Limited dynamic rangeFilmic blender: better dynamic rangeSlide50

Dynamic rangeWhat is the dynamic range of visible light?What is the dynamic range of an image?

Interactive Computer GraphicsChapter 8 - 50Slide51

Interactive Computer Graphics

Chapter 8 - 51Slide52

(Pseudo-)HDRInteractive Computer Graphics

Chapter 8 - 52Can we simulate high dynamic range?Slide53

Interactive Computer Graphics

Chapter 8 -

53

Halftoning

How do you render a colored image when colors can only be

on

or off (e.g. inks, for print)?Halftoning: dots of varying sizes1-bit dynamic range!

[But what if only

fixed-sized pixels

are available?]Slide54

Interactive Computer Graphics

Chapter 8 -

54

Dithering

Dithering

(patterns of b/w or colored dots) used for computer screens

OpenGL can ditherBut, patterns can be visible and bothersome. A better approach?Slide55

Interactive Computer Graphics

Chapter 8 -

55

Floyd-Steinberg Error Diffusion Dither

Spread out

“

error term”7/16 right3/16 below left5/16 below1/16 below rightNote that you can also do this for colorimages (dither a color

image onto a fixed

256-color palette, or

onto 24-bit displays)Slide56

Interactive Computer Graphics

Chapter 8 -

56

Color Quantization

Color quantization: modifying a full-color image to render with a 256-color palette

For a fixed palette (e.g. web-safe colors), can use closest available color, possibly with error-diffusion dither

Algorithm for selecting an adaptive palette?E.g. Heckbert Median-Cut algorithmMake a 3-D color histogramRecursively cut the color cube in half at a medianUse average color from each resulting boxSlide57

Interactive Computer Graphics

Chapter 8 -

57

Hardware Implementations

Pipeline architecture for speed

(but what about latency?)

Originally, whole pipeline on CPULater, back-end on graphics cardThen, whole pipeline in hardware on graphics cardThen, parts of pipeline done on GPUsNow, hardware pipeline is gone—done in software on a large number of GPUsSlide58

Interactive Computer Graphics

Chapter 8 -

58

Parallel Architectures

20 years ago, performance of 1 M polygons per second cost millions

Performance limited by memory bandwidth

Main component of price was lots of memory chipsNow an iPhone 5 does 115 million triangles (1.8 billion texels) per secondFastest performance today achieved with many cores on each graphics chip and several chips in parallel?And multiple graphics cards?How to use parallel graphics cores/chips/cards?All vertices go through vertex

shaders

– can do in parallel

All fragments go through fragment

shaders

– can do in parallel

Fragments or images combined into a single image via depth buffering – easy with sufficient memory bandwidth (except for transparency, anti-aliasing)Slide59

NVidia GeForce GTX 590Facts“Most powerful graphics card” (of 2011)

Dual 512-core GTX 500 GPUs (1024 CUDA unified shaders)2 x 16 Streaming Multiprocessor (SM) processor groups, each with 32 Streaming Processors (SPs)PhysX physics engine on the card (used for flowing clothing, smoke, debris, turbulence, etc)Memory bandwidth: 327.7 GB/secTexture fill rate: 77.7 billion/sec4X antialiasing3 billion transistors x 2Real-time ray tracing[2019 fastest: about twice as fast,with 4352 GPU cores]

Interactive Computer Graphics

Chapter 8 -

59