Lecture 6: 3D Rendering Pipeline (III)

Prof. Hsien-Hsin Sean LeeSchool of Electrical and Computer

EngineeringGeorgia Institute of Technology

2

Rasterization: Shading a Triangle

• Paint each pixel’s color (by calculating light intensity) on your display (Typically object-based)

• Gouraud Shading: – Intensity Interpolation of vertices

RGB(255,0,0)

RGB(0,255,0)RGB(0,0,255)

3

Gouraud Shading

RGB(255,0,0)

RGB(0,255,0)RGB(0,0,255)

RGB(127,0,127) RGB(127,127,0)

RGB(127,64,64)

• Scan conversion algorithm

Scan line

4

Comparison of Shading Methods

• Phong shading – requires generating per-pixel normals to compute light

intensity for each pixel, not efficient for games– Can be done on GPGPU today using Cg or HLSL

• Gouraud shading is supported by Graphics hardware

Flat shading Gouraud shading Phong shading

Source: Michal Necasek

5

Double Buffering• Display refreshes at 60 75

Hz

• Rendering could be “faster” than the refresh period

• Too fast leads to – Frames not shown

• Too slow leads to– New and old frame mixed– Flickering

• Solution: – Double or multiple

buffering

surface1 surface2

Front Buffer Back Buffer

surface2surface1swap

6

Z-Buffer

• Also called depth buffer• Draw the pixel which is nearest to the viewer• Number of the entries corresponding to the screen

resolution (e.g. 1024x768 should have a 768k-entry Z-buffer)– Some card perform Z-compression

• Perform Z test before drawing a pixel

z1 z2 z3

7

Aliasing

• Jagged line (or staircase)• Can be improved by increasing resolution (i.e. more

pixels)

8

Anti-Aliasing by Multisampling

• GPU samples multiple locations for a pixel• Several different methods

– e.g. grid, random, GeForce’s quincunx• Downside

– Blurry image– Increased memory (e.g. z-buffer) storage for subpixel

information

Actual Screen Pixels

3x3 Virtual Pixels(Bartlett window)

(255, 159, 159)

Example

1 1

1 12

22 24

(255,255,255) (255,0,0)(255,255,255)

(255,255,255)

(255,255,255)

(255,255,255)

(255,0,0) (255,255,255)

(255,0,0)

9

Anti-Aliasing Example

No MSAA

With MSAA

Ideal

10

Visualizing Anti-Aliasing ExampleNo MSAA With MSAA

11

Texture Mapping• Rendering tiny triangles is slow• Players won’t even look at some

certain details– Sky, clouds, walls, terrain, wood patterns,

etc.• Simple way to add details and

enhance realism• Use 2D images to map polygons • Images are composed of 2D “texels”• Can be used to substitute or blend the

lit color of a texture-mapped surface

12

Texture Mapping• Introduce one more component to

geometry – Position coordinates– Normal vector– Color – Texture coordinates

• Texture info– (u, v) coordinates for each vertex– Typically range from 0 to 1

• (0,0) from upper left corner

13

Texture Mapping

Texture: hunk.jpg

(0,0)

(1,1)

v0 v1

v2v3

v7 v8

(0,1)

(1,0)

{v1.x, v0.y, v0.z, …, 1, 0},{v2.x, v1.y, v1.z, …, 1, 1},{v0.x, v2.y, v2.z, …, 0, 0},{v3.x, v3.y, v3.z, …, 0, 1},

u v

14

Texture MappingTexture 2

(0,0)

(1,1)

v0 v1

v2v3

v7 v8(0,0)

(1,1)(0,1)

(1,0)Texture 1

15

Texture Mapping

(0,0)

(1,1)

{v0.x, v0.y, v0.z, …, 0, 0},{v1.x, v1.y, v1.z, …, 5, 0},{v2.x, v2.y, v2.z, …, 5, 3},{v3.x, v3.y, v3.z, …, 0, 3},

u v

(1,0)

(0,1)

16

Texture Mapping

{v0.x, v0.y, v0.z, …, 0, 0},{v1.x, v1.y, v1.z, …, 6, 0},{v2.x, v2.y, v2.z, …, 6, 6},{v3.x, v3.y, v3.z, …, 0, 6},

u v

17

Magnification

• Texel and pixel mapping is rarely 1-to-1• Mapped triangle is very close to the camera• One texel maps to multiple pixels

Pixels on screenTexels

18

Nearest Point Sampling (for Magnification)

• Choose the texel nearest the pixel’s center

Pixels on screenTexels

19

Bi-linear Filtering (for Magnification)

• Average for the 2x2 texels surrounding a given pixel

Texels

R=102G=102B=51

R=255G=204B=102

R=253G=230B=145

R=247G=237B=141

Pixels on screen

R=214G=193B=110

20

Minification

• Texel and pixel mapping is rarely 1-to-1• Multiple texels map to one pixel

Pixels on screenTexels

Color?

21

Nearest Point Sampling (for Minification)

• Choose the texel nearest the pixel’s center

Pixels on screen

22

Bi-linear Filtering (for Minification)

• Average for the 2x2 texels surrounding a given pixel

Pixels on screen

R=135G=119B=23

R=252G=219B=96

R=0G=0B=0

R=234G=189B=0

R=155G=132B=30

23

Mip-mapping• Multiple versions are provided for the same

texture • Different versions have different levels of

details– E.g., 7 LOD maps: 256x256, 128x128, 64x64,

32x32, 16x16, 8x8, 4x4 – Choose the closet maps to render a surface

• Maps can be automatically generated by 3D API

• Accelerate texture mapping for far-away polygons

• More space to store texture maps

24

Mip-mapping

• API or Hardware can– Generate (lower resolution) mip maps automatically– Choose the right one for the viewer

• Good performance for far triangles• Good LOD for close-by objects

– Tri-linearly interpolate

25

Tri-linear Filtering using Mip maps

• Interpolate between mipmaps

Higher Res. Mip MapScreenPixel

R=155G=132B=30

R=229G=208B=119

R=233G=227B=143

R=178G=179B=90

R=199G=187B=96

Lower Res. Mip Map

R=147G=114B=117

R=58G=0B=0

R=66G=0B=0

R=106G=80B=74

R=94G=49B=48

R=147G=118B=72

26

Color Blending and Alpha Blending• Transparency effect (e.g. Water, glasses, etc.)• Source color blended with destination color• Several blending methods

– AdditiveC = SrcPixel (1,1,1,1) + DstPixel (1,1,1,1) = SrcPixel +

DstPixel

– SubtractiveC = SrcPixel (1,1,1,1) ― DstPixel (1,1,1,1) = SrcPixel ―

DstPixel

– MultiplicativeC = DstPixel SrcPixel

– Using Alpha value in the color (Alpha Blending)C = SrcPixel (,,,) + DstPixel (1-,1-,1-,1-)

– And many more in the API …

27

Alpha Blending (Inverse Source form)

No transparency Src=0.2 (triangle)Dest=0.8 (square)

Src=0.5 (triangle)Dest=0.5 (square)

Src=0.8 (triangle)Dest=0.2 (square)

28

Another Example Without Transparency

29

Another Alpha Blending Example

Src=0.3 (rect) Dest=0.7 (checker)

Src=0.5 (orange rect) Dest=0.5 Src=0.6 (Triangle) Dest=0.4

30

Alpha Test

• Reject pixels by checking their alpha values• Model fences, chicken wires, etc.

Texture: bar.jpg

if ( op val) reject pixelelse accept pixel

Straightforward texture mapping

31

Multi-Texturing• Map multiple texture to a

polygon– Common APIs support 8 textures

• Performance will be reduced• Multiple texturing stages in

the pipeline• Texture color will be

calculated by– Multiplication– Addition– Subtraction

Operation 1

Texture1 color

lit color

Operation 2

Texture2 color

Operation 3

Texture3color

Operation N

TextureN color

Final Color

32

Multi-Texturing Example: Light Mapping

Some crumpled paper texture

A spotlight map

Different alpha blending

33

Stenciling• Stencil buffer

– To reject certain pixels to be displayed – To create special effect similar to alpha test

• Mask out part of the screen

– Set together with Z-buffer in 3D API– Perform prior to Z-buffer test

if ((stencil ref & mask) op (pixel val & mask))

accept pixelelse reject pixel

34

Stencil Buffer Example

This window areaIs set to be drawn

by stencil bufferReject pixels

inside this area

35

Apply Fog Effect

• Provide depth cue– Simulate weather condition– Avoid popping effect

• Color blending

startstop

start

vertex

fogfog

fogvertexeyedistf

ColorfColorfcolor

),(

)1( fog

fogstop fogstart

• Calculate distance • Calculate intensity of vertex color

based on distance – Color blending– Linear density, exponential density

• Blending color schemes– Per-vertex (then Interpolate pixels),

less expensive – Per-fragment basis (Nvidia

hardware), better quality