Computer Graphics: 5-The Graphics Pipeline · –Computer Graphics people have deﬁned a workﬂow...

Computer Graphics:5-The Graphics Pipeline

Prof. Dr. Charles A. Wüthrich,Fakultät Medien, MedieninformatikBauhaus-Universität Weimarcaw AT medien.uni-weimar.de

Introduction

• Themes of the this lesson(s) will be:– A trip down the Graphics pipeline– Detailed information on some of its stages

Graphics Pipeline

• What is the graphics pipeline?– Given an idea, we want to

• Model the idea into– Geometry– Surface properties– Maybe model

movement (foranimation)

• Generate pictures out ofthese models

– Computer Graphics peoplehave defined a workflow forgenerating pictures

– Repeat over and over foreach rendered picture one ofa scene or animation

– This process is done instages, just like at a carfactory

Copyr

ight

© 1

968

Toyo

ta M

oto

r Corp

ora

tion

Graphics Pipeline: Overview

• The Graphics Application pipeline

Application Geometry Rasterization

• Supplies geometricdata:

– points,– polygons,– Curves

• Converts into triangles

• Apply transformations• Shading• Clipping

• Fill pixel by pixelsurviving triangles

• Uses interpolation onvertex data

• Let us explain these different stages

Graphics Pipeline: Supply geometric data

Pipeline: ApplicationSupplies geometric data

Geometry Rasterization

Converts into triangles

Apply transformations

Shading

Clipping

Interpolate:lighting+texture

Convert triangles 2 pixels

Cou

rtesy

© R

hino

3D

• Modeling application supplies:– Objects– Lights– Surface properties:

• Colour: basic colour, diffuseand specular reflection

• Textures• Surface characteristics:

bumps, transparency

Graphics Pipeline: Convert into triangles


Geometry RasterizationApply transformations

Shading

Clipping



Cou

rtesy

© c

gal.o

rg

• First thing:– Everything triangles!

• Why?Simple!– They are polygons– They have always the same

number of sides and vertices– This will get us into some

trouble later…

Convert into triangles

Graphics Pipeline: Apply transformations


Rasterization

Shading

Clipping



• Second thing:– Unify coordinate space, from

object to world• Third thing:

– Convert to screen (camera)coordinates


GeometryApply transformations

Cou

rtesy

© W

ikip

edia

2

2

3

Graphics Pipeline: Shading


Rasterization

Clipping



• Shading concerns simulatingthe interaction of light with theobjects.

• The interaction is ruled by theillumination equation, whichdescribes the resulting colourof the object.

• In its simplest form, oneillumination value per triangleis computed

• But how is it computed?– To know this, we have to

digress a bit…



Shading

Cou

rtesy

© b

lend

er.o

rg

Illumination models

• There are two types ofillumination models in ComputerGraphics– Local illumination models:

• Light reflected by a surface (andtherefore its colour) isdependent only on the surfaceitself and the direct light sources

– Global illumination models:• Light reflected by a surface is

dependent only on the surfaceitself, the direct light sources,and light which is reflected bythe other surfaces on theenvironment towards thecurrent surface

Lights

• To illuminate a surface, light isneeded

• Two major models for lightsources– Point light sources

• By putting point light source at∞ one can simulate solar light

• Diffusion cone can be restrictedto simulate spotlights (useadditional filter function fordimming light)

– Area light sources (distributed)

Illumination models

• For any object in the environment, a shading function describinghow its surface reacts to light is necessary

• For the enviroment, an illumination model is used, whichdetermines what parts of the shading functions are used whilerendering the scene

• This illumination model is expressed through an illuminationequation

• Given a surface and an illumination model, through the illuminationequation the color of its projected pixels on the screen can becomputed

• For local illumination, the Illumination Equation is composed ofdifferent terms, each adding realism to the scene

Ambient light

• In local illuminaton models, ambientlight is used to model the light thatdoes not come directly from a lightsource

– i.e. under the table

• This is the basic colour of an object,to which the other components willbe added

• Illumination equation: I=kaIawhere

– ka: says how much of ambient light isreflected by the object(∈ [0,1])

– Ia: Instensity of ambient light, equalfor whole environment

Cop

yrig

ht M

arko

Mei

ster

,B

auha

us-U

nive

rsity

Wei

mar

Diffuse reflection: Lambert Law

• Suppose one has a directed lightsource (point or sunlight)

• Some materials reflect the lightequally in all directions

– Example: chalk

• Lambert observed that the more theincident angle to a surface parts fromthe surface normal, the darker thecolour of the surface

• He also noticed, that objects showthe same intensity even if the vieweris moving around

• The reason is that viewers percievethe same amount of light per angleon the retina, no matter what theirviewing angle

L θ N

• Reflected light intensity musttherefore be dependent from theprojection of the light vector onto thenormal to the surface


• Thus, the total reflected light is given by

Idiff,Lam=IPkdcosθ

where– IP: Intensity of incident light at surface– kd: diffuse reflection coefficient of the material ∈ [0,1]– Θ: angle between normal to surface and direction of incident light

• Or, by using normalized vectors N and L

Idiff,Lam=IPkd(N·L)


Cop

yrig

ht M

arko

Mei

ster

,B

auha

us-U

nive

rsity

Wei

mar

Ambient + Diffuse Illumination

• The two lighting models presented above can be combined

Idiff=Iaka + IPkdcosθ

to obtain an illumination equation that encompasses bothillumination methods presented

Ambient + Diffuse Illumination

Cop

yrig

ht M

arko

Mei

ster

,B

auha

us-U

nive

rsity

Wei

mar

Light source attenuation

• In fact, light does not travelthrough space keeping itsilluminating power at the samelevel.

• Farther objects get less light thancloser ones, because it ispartially absorbed by particles inthe air

• If constant light intensity is used,then one would get a kind ofillumination which is similar to thesunlight

• To solve this problem, anattenuation factor is added to theillumination equation, decreasinglight intensity with distance fromthe light source

• The resulting illuminationequation is

where the attenuation factoris:–

which gives a too hard decayof light

– or

where the coefficients arechosen ad hoc

( )LNkIfkII dpattaa !+=

2

1

Latt df =

)1,(1

322

1 cdcdcMaxf

LLatt

++=

Adding colour

• In order to add colour, the computation of the illumination functionis repeated three times, one for each of the colour componentsRGB.

• The illumination equation is therefore repeated for each one of thethree components, and colur components are computedseparately

• In general, for a wavelength λ in the visible spectrum, we havethat

( )LNOkIfOkII ddpattdaa !+= """""

Specular highlights

• In real life, most surfaces areglossy, and not matte– Think for ex. at an apple

• Gloss is due to the non-plain-ness at the microscopic level ofsurfaces (microfacet theory) , anddo micro reflecting surfaces ofthe material

• Since their distribution isapproximately gaussian, thenmost mirror like reflected light isreflected in direction of thespecular reflection, and some isscattered in other directions

diffuse glossy specular

Specular highlights

• Around the direction of theviewer, reflection rays arescattered and generate ahighlight

• Empirically, scattering decayfrom the direction of the viewercan be seen to behave similarlyas the power of the cosinus ofthe angle α

N

L θ θ RVα

0

1

0° 90°

cos α

0

1

0° 90°0

1

0° 90°

cos8 α cos64 α

Specular light

• Heuristic model proposed by Phong Bui-Tuong• Add term for specular highlight to equation

where– ks= specular reflection constant of surface– (R⋅V)n=cosnα

( ) ( )[ ]nssddpattdaa VROkLNOkIfOkIIii

!+!+= """"""

Specular highlights

• Applying Phong illumination allows to obtain quite convincingimages

• Note: these illumination models are implemented in hardwarenowadays

Specular highlights

Cop

yrig

ht M

arko

Mei

ster

,B

auha

us-U

nive

rsity

Wei

mar

Multiple lights

• Adding multiple light sources to the illumination model in anenvironment is simple:– Just add contributions due to the single lights– This, of course, doubles the comptations in the case of two lights

Graphics Pipeline: Shading


Rasterization

Clipping



• Shading concerns simulatingthe interaction of light with theobjects.

• The interaction is ruled by theillumination equation, whichdescribes the resulting colourof the object.

• In its simplest form, oneillumination value per triangleis computed

• But how is it computed?– To know this, we have to

digress a bit…



Shading

Cou

rtesy

© b

lend

er.o

rg

Graphics Pipeline: Clipping


Rasterization



• Clipping “clips” the scene andeliminates the polygons thatdo not need to be displayed

• There are two clippings beingdone:

• 3D clipping, eliminating allpolygons– Farther than the far plane– Nearer than the near plane



Shading

Clipping

Cou

rtesy

© A

utod

esk

Graphics Pipeline: Clipping


Rasterization



• 2D clipping, eliminating thepolygons and lines I cannotview in the image window andwould therefore eat upcomputing power



Shading

Clipping

Cou

rtesy

Ste

phen

Che

nney

,U

nive

rsity

of W

isco

unsi

n at

Mad

ison

Graphics Pipeline: Triangle Rasterization


Rasterization



• While nature is continuous,screens are made of pixels:– Placed on a square grid– Integer coordinates

• Convert the triangles intopixels is a complex operation:– Find out which pixels have to

be coloured– At the same time, draw only

triangles which are notcovered by other triangles



Shading

Clipping



Rasterization



• First we have to know how todraw a line to draw the borders

• Line through PI=(xI,yI), PF=(xF,yF):

or, more simply: y=mx+q.• Let us find the pixels we need to

switch on to draw the line• Let us start from (0,0), I.e. let us

suppose that Pi=(0,0) and PF=(4,3)• I need to find the intersections of the

line y=3/4x with the lines x=j between0 and 4



Shading

Clipping

IIF

IFI

IF

IF xxxyy

yxxxyy

y!

!!+

!

!=

x=i

y=j

x0

y

Graphics Pipeline: Line Rasterization


Rasterization



• Let‘s compute: y=3/4x

So I draw the pixels obtainedby rounding the intersectionswith the vertical straight lines



Shading

Clipping

x=i

y=j

x0

y

12/4=34

9/4=2.25 round to 23

6/4=1.50 round to 22

3/4=0.75 round to 11

00

yx

IIF

IFI

IF

IF xxxyy

yxxxyy

y!

!!+

!

!=

Graphics Pipeline: Line Rasterization


Rasterization



• And for a generic line? y=mx+q

Hey!Each time I add m!!!

• This is exactly what we do todraw lines: add m each step tillendpoint is reached



Shading

Clipping

x=i

y=j

x0

y

4m+q=m+(3m+q)4

3m+q=m+(2m+q)3

2m+q=m+(m+q)2

m+q1

q0

yx

m q



Rasterization



• And for triangles? How do Irasterize them?

– First draw borders– Then fill one scanline at the

time between border points– For example, from top to

bottom, until triangle isfinished



Shading

Clipping

Flat shading

• And which colour do I draw thepolygons with?

• We saw the problem of flatshading: you saw the faces!

• For each polygon in the mesh,compute illumination equation

• Render the whole polygon withthe obtained colour

• Results are already good forgiving an idea of the shape

• However, all polygonal facets areseeable, and this is mostlyunwanted

• We will come back to this later,and learn the tricks used to avoidvisible facets

Cou

rtesy

Ste

phen

Che

nney

,U

nive

rsity

of W

isco

unsi

n at

Mad

ison

Gouraud shading

• To avoid this problem, Gouraudin 1971 proposed a method tosmooth polygonal surfacerendering

• The idea is to– compute normal vectors at

vertices of each polygon(average adjacent polygonnormalsN=N1+N2+N3+N4)

– compute illumination at vertices– linearly interpolate colour values

along the edges of the polygons– linearly interpolate colour values

between edges to find outcolour at a given point

• Bilinear interpolation

N1N2

N3N4

N

I4

I2

I3

I1 II' I" I'=tI2+(1-t)I1

I"=tI2+(1-t)I3I=tI'+(1-t)I"

Gouraud shading

• Gouraud shading gives smoothsurfaces

• Sometimes highlights are missed

Cou

rtesy

Ste

phen

Che

nney

,U

nive

rsity

of W

isco

unsi

n at

Mad

ison

Phong shading

• Phong proposed animprovement to Gouraud‘s idea

• Phong interpolates betweennormals and not between colourto find the normal at a pointinside the polygon

• Note that both interpolations(Phong, Gouraud) have threecomponents to compute

• Only once known theinterpolation normal at the point,illumination is computed at eachpoint

• Much more computationallyintensive than Gouraud

N1N2

N3N4

N

N4

N2

N3

N1 N

N'N"

N'=tN2+(1-t)N1N"=tN2+(1-t)N3N=tN'+(1-t)N"

Comparing shading methods

Cou

rtesy

Ste

phen

Che

nney

,U

nive

rsity

of W

isco

unsi

n at

Mad

ison

Comparing shading methods

Graphics Pipeline: Z-buffering


Rasterization



• Wait! Some triangles might coverothers: hidden surface removal.

• How do I know which ones to draw?• Simple: I compute the depth (=z

value) of each pixel I am about todraw

• At the start, I enter infinite in a buffer(= table as big as screen) at eachposition of the table

• When I am about to write a pixel, Ilook the z value of what I am drawingis smaller of the current value at thetable



Shading

Clipping

– If it is, then I write the currentpixel in the image and update thevalue of the “parallel” table to thez value of the pixel

– If not, I leave the table untouchedand do NOT write the pixel of thetriangle

Graphics Pipeline: Z-buffering


Rasterization





Shading

Clipping

∞ ∞ ∞ ∞ ∞∞ ∞ ∞ ∞ ∞∞ ∞ ∞ ∞ ∞∞ ∞ ∞ ∞ ∞∞ ∞ ∞ ∞ ∞

∞ ∞ ∞ ∞ ∞∞ ∞ ∞ ∞ ∞∞ ∞ ∞ ∞ ∞∞ ∞ ∞ ∞ ∞∞ ∞ ∞ ∞ ∞z=1

z=5

z=5

54 5

3 4 52 3 4 5

1 2 3 4 5

z=5

z=5z=1

∞ ∞ ∞ ∞∞ ∞ ∞∞ ∞∞

54 5

3 4 52 3 4 5

1 2 3 4 5

∞ ∞ ∞ ∞∞ ∞ ∞∞ ∞∞

54 5

3 4 52 3 4 5

1 2 3 4 5

z=0z=9

z=9

99 6 39

0

∞ ∞ ∞ ∞∞∞∞

54 5

32 3 4 5

1 2 3 4 5

99 3 0

6

6

z=9

z=9

z=0

0: Empty buffer

1: Setup 1st triangle

1: Draw 1st triangle

1: Draw 2nd triangle

Graphics Pipeline: Textures


Rasterization



• So I compute lighting equationalmost at every pixel to interpolateit with Phong shading

• This for drawing solid triangles: ateach point, I take basic coloursand compute illumination eitherby using Gouraud or Phong toobtain the colour

• And what if I want moreinteresting looking objects?

• I could glue wrapping paper onthem!

• But how? With textures!



Shading

Clipping

Textures

• Reality shows much morerichness of surface detail thanthe one obtainable through localillumination: look at the wall!!

• One could model the surfacewith detailed geometry

• However, this would increasegreatly the complexity of themodel.

• A better appproach is thereforeto „paint“ detail on simplegeometry

• The image, called texture, is„glued“ to a simple geometry toobtain detail

• First approaches due to Catmull(74) and Blinn & Newell (76)

Textures

• There are basically two ways oftexture mapping:

– 2D– 3D

• Let us look first at 2D textures• Image data (surface pixel colors) is

stored in a 2D image, the pixels ofwhich are called texels

• Let’s assume the coordinates of theimage are called u,v and that u and vvary in the interval [0,1]

• To compute what colour is reflectedby the sphere, one must find acorrespondence between sphere andthe texture space

• Parametric sphere: x=xc+R cosψsinϑy=yc+R sinψsinϑz=zc+Rcosπ

• ϑ= (z-zc)/R longitudeψ=artan((y-yc)/(x-xc)) +latitude

• u= ψ /2π v=(π-ϑ)/π to texture

• Similarly, for othersimple maps

– Cube– Cylinder– Plane

Textures

• There are deifferent ways ofapplying textures forcomplicated objects:– Surround object to be

textured with a simpleobject: cube, sphere, cilinder

– Choose a center for theobject

– Texture the cube (invisibly)– When one draws pixel of the

object, project this pixel tothe cube, and pick the cubetexture color

Textures

• And what if my object is in meshform?

• Determine texture coordinate foreach vertex of the mesh (byprojection as before)

• Bilinear interpolation betweenvertices– For triangles, use baricentric

coordinates(same as done for normals)

• If texture coordinates are beyondthe image, then texture isrepeated, mirrored, clamped orbordered

Bump maps

• Textures help with the color ofthe pixels to be drawn

• However, the resulting objectsstill look flat

• To improve this, one can store ina texture (bump map) normalvariations, and use it for lightingcomputations while rendering

• This achieves a bumpy surface,because the varying normalschange the shadingcomputations

• However, when bump mappedpolygons are seen from a flatangle they show their flatness

surface bump map+

bumped surface

NP

P’

Displacement maps

• Bump maps do not modifygeometry height, which does notlook good from the profile

• A way to correct this is tointerpret an additional black andwhite texture as displacementoffsets along the normal

• This is called a displacementmap

• Since the displacement map“modifies” the surface to adddetail to it, usual lightingcomputations can be done in theresult

Surface + displacement

Environment maps

• There are many ways to usetextures to obtain special effectsin a picture

• Environment maps are used tosimulate reflections on objects

• In this case, the world issurrounded by a closed surfacehaving a texture

• The colour at the pixel to berendered is looked up on thetexture according to thereflection ray

Environment maps

• There are two different waysof surrounding the world witha surface

• With a sphere: sphericalmaps

• With a cube: cube maps

Shadow maps

• Through textures I can also doshadows

• In this case, you set perspective1 atthe light source, and image1 containsz-buffer values of the scene from thelight source

• When rendering the scene, at eachpixel one is rendering one looks if itsdistance from the light source issmaller or bigger than the z-bufferfrom the light source

• In case it is bigger, then this point isin the shadow of something else

Multi-pass rendering

• To achieve more complexrendering effects, differenttexture rendering passes arerendered to a texture and notdisplayed

• This allows the layering ofdifferent effects, by blending theresults of different renderingpasses

• This is called multi-passrendering

Graphics Pipeline: Wrap up


Rasterization



• What we can do:– Represent a fine variety of

objects with detailed and richsurfaces

– Represent convincingillumination of objects

– “fake” reflections andshadows

• What we have presented here,is state of the art gamingtechnology



Shading

Clipping

• What we cannot do well:– Reflection– Refraction– Surface colour bleeding

+++ Ende - The end - Finis - Fin - Fine +++ Ende - The end - Finis - Fin - Fine +++

End

Computer Graphics: 5-The Graphics Pipeline · –Computer Graphics people have deﬁned a workﬂow...

Documents

Transcript of Computer Graphics: 5-The Graphics Pipeline · –Computer Graphics people have deﬁned a workﬂow...