1

Computer Graphics

Rendering Geometric PrimitivesReading: HB4, HB8-1 to HB8-6, HK9.7, 11

Last updated on 06-02-2012

2

Rendering

Goalo transform computer models into imageso may or may not be photo-realistic

interactive renderingo fast, but limited qualityo roughly follows a fixed patterns of operations

rendering pipelineoffline rendering

o ray tracingo global illumination

3

Rendering

Tasks that need to be performed

project all 3D geometry onto the image plane geometric transformations

o determine which primitives or parts of primitives are visible hidden surface removal

o determine which pixels a geometric primitive covers scan conversion

o compute the color of every visible surface point lighting, shading, texture mapping

4

Rendering Pipeline

What is the pipeline?o abstract model for sequence of operations to transform

geometric model into digital imageo abstraction of the way graphics hardware workso underlying model for application programming interfaces

(APIs) that allow programming of graphics hardware OpenGL Direct 3D

Actual implementation details of rendering pipeline will vary

5

Rendering Pipeline

GeometryDatabase

Model/ViewTransform. Lighting Perspective

Transform. Clipping

ScanConversion

DepthTest

Texturing BlendingFrame-Buffer

6

Geometry Database

Geometry databaseo Application-specific data structure for holding

geometric informationo Depends on specific needs of application

triangle, points, mesh with connectivity information, curved surface

GeometryDatabase

7

Model/View Transformation

Modeling Transformationo Map all geometric objects from local coordinate system into

world coordinates Viewing transformationo Map all geometry from world coordinates into camera

coordinates

GeometryDatabase

Model/ViewTransform.

8

Lighting

Lightingo Compute brightness based on property of material and

light position(s)o Computation is performed per-vertex

GeometryDatabase

Model/ViewTransform. Lighting

9

Perspective Transformation

Perspective Transformationo Projecting the geometry onto the image planeo Projective transformations and model/view

transformations can all be expressed with 4x4 matrix operations

GeometryDatabase

Model/ViewTransform. Lighting Perspective

Transform.

10

Clipping

Clippingo Removal of parts of the geometry that fall outside the

visible screen or window regiono May require re-tessellation of geometry

GeometryDatabase

Model/ViewTransform. Lighting Perspective

Transform. Clipping

11

Scan Conversion

Scan Conversiono Turn 2D drawing primitives (lines, polygons

etc.) into individual pixelso Interpolate color across primitiveoGenerate discrete fragments

GeometryDatabase

Model/ViewTransform. Lighting Perspective

Transform. Clipping

ScanConversion

12

Texture Mapping

Texture Mappingo “Gluing images onto geometry”o Color of every fragment is altered by looking up a

new color value from an image

GeometryDatabase

Model/ViewTransform. Lighting Perspective

Transform. Clipping

ScanConversion Texturing

13

Depth Test

GeometryDatabase

Model/ViewTransform. Lighting Perspective

Transform. Clipping

ScanConversion

DepthTest

Texturing

Depth Testo Remove parts of geometry hidden behind other

geometric objectso Perform on every individual fragment

14

Blending

GeometryDatabase

Model/ViewTransform. Lighting Perspective

Transform. Clipping

ScanConversion

DepthTest

Texturing Blending

Blendingo Final image: write fragments to pixelso Draw from farthest to nearesto No blending – replace previous coloro Blending: combine new & old values with arithmetic

operations

15

Frame Buffer

GeometryDatabase

Model/ViewTransform. Lighting Perspective

Transform. Clipping

ScanConversion

DepthTest

Texturing BlendingFrame-Buffer

Frame Buffer• Video memory on graphics board that

holds image• Double-buffering: two separate buffers

Draw into one while displaying other, then swap to avoid flicker

255 255 255

255 255 255

0 255 255

0 255 255

0 255 255

255 155 0

255 155 0

155 255 155

0 255 255

0 255 255

255 155 0

255 155 0

155 255 155

0 255 255

0 255 255

16

Pipeline Advantages Modularity: logical separation of different components Easy to parallelize

Earlier stages can already work on new data while later stages still work with previous data

Similar to pipelining in modern CPUs But much more aggressive parallelization possible (special

purpose hardware!) Important for hardware implementations

Only local knowledge of the scene is necessary

17

Pipeline Disadvantages

o Limited flexibilityo Some algorithms would require different ordering

of pipeline stages hard to achieve while still preserving compatibility

o Only local knowledge of scene is available shadows, global illumination difficult

18

3D Scene Representation

Scene is usually approximated by 3D primitiveso Pointo Line segmento Polygono Polyhedrono Cylindero Curved surfaceo Solid object o etc.

19

OpenGL

Attributes of Graphics Primitives

Color, antialiasing, …

Point attributes,

Line attributes,

Curve attributes,

Character attributes

20

• Attributes are any parameters that affect the way graphic primitives are displayed.

• Basic attributes– Color– Size– Style– Fill patterns

OpenGL

Attributes of Graphics Primitives

21

OpenGL

Attributes of Graphics Primitives

Attribute parameterA parameter that affects the way a primitive is to be displayed, ex: color, size.

State system / State machineA graphics system that maintains a list for the current values of attributes

22

OpenGL

State Variables

All OpenGL state parameters have default values.

Set the state once, remains until overwritten Changing the attribute settings

Only affects those primitives that are specified after the OpenGL state is changed Lines: blue or orange, dotted or dashed, and fat

or thin. State parameters can have more than two

states, e.g., colors, styles, etc.

23

OpenGL

Color & Gray Scale

Color is a common attribute for all primitives Color information can be stored in two ways

1. RGB color codes2. Color table

Stored Color Values in Frame Buffer

01234567

00001111

00110011

01010101

BlackBlueGreenCyanRedMagentaYellowWhite

Red GREEN Blue Displayed Color

24

OpenGL

Color & Gray Scale

Color is a common attribute for all primitives Color information can be stored in two ways

1. RGB color codes2. Color table

25

OpenGL

Color Functions

Set color display mode

1. OpenGL RGB and RGBA mode

2. OpenGL Color-Index Mode

glutInitDisplayMode ( GLUT_SINGLE | GLUT_RGB )GLUT_RGBA

GLUT_INDEX

glColor* (colorComponents);

glIndexi(196);glutSetColor (index, red, green, blue);

// Select current color

// Select current color

// Specify color into a table

26

OpenGL

Color Functions

OpenGL color blending• Combining the color of overlapping objects• Blending an object with the background

Color-blending function

Destination object: Current object in the frame bufferSource object: Other object in the frame buffer

glEnable(GL_BLEND);

Blending methods can be performed only in RGB or RGBA mode.

glDisable(GL_BLEND);Source

Destination

27

OpenGL

Color Functions

Blending FactorsglColor4f(R, G, B, A), A is a blending factorSource color components are (Rs, Gs, Bs, As)

Destination color components are (Rd, Gd, Bd, Ad)

Source blending factors are (Sr, Sg, Sb, Sa)

Destination blending factors are (Dr, Dg, Db, Da)

The new blending color that is then loaded into the frame buffer is calculated as:(SrRs+DrRd, SrGs+DgGd, SbBs+DbBd, SaAs+DaAd)

Source

Destination

28

OpenGL

Color Functions

Source

Destination

Ex. glBlendFunc(GL_SRC_ALPHA,GL_ONE);

Ex: implement it by using glColor4f (0.8, 0.2, 0.2, 0.4);

glBlendFunc (sFactor, dFactor);Default: GL_ONE GL_ZERO (1.0, 1.0, 1.0, 1.0) (0.0, 0.0, 0.0, 0.0)

29

OpenGL

Example: Blending 1/3

#include <GL/glut.h>

void init (void)

{

glEnable(GL_BLEND);

glBlendFunc (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

// (sFactor, dFactor)

glClearColor (1.0, 1.0, 1.0, 0.0); //(red, green, blue, alpha)

}

30

OpenGL

Example: Blending 2/3

void display(void){

glClear (GL_COLOR_BUFFER_BIT);glBegin(GL_TRIANGLES); // Draw triangle

glColor4f(1.0, 0.0, 0.0, 0.75);glVertex3f(0, -0.5, 0.0);glVertex3f(0.5, -0.5, 0.0);glVertex3f(0, 1, 0.0);

glEnd();glBegin(GL_POLYGON); // Draw rectangle

glColor4f(0.0, 0.0, 1.0, 0.75);glVertex3f (-0.6, -0.6, 0);glVertex3f (0.6, -0.6, 0);glVertex3f (0.6, 0.6, 0);glVertex3f (-0.6, 0.6, 0);

glEnd(); glFlush ();

}

31

OpenGL

Example: Blending 3/3

int main(int argc, char** argv)

{

glutInit(&argc, argv);

glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);

glutInitWindowSize (600, 400);

glutInitWindowPosition (200, 100);

glutCreateWindow ("Hello Students");

init();

glutDisplayFunc(display);

glutMainLoop();

return 0;

}

32

OpenGL

Home Work

Plot red, green & blue circles overlapping as shown in figure.

Reading: HB4, RB

33

OpenGL

Point Attributes & Functions

Basic attributes– Color– Size

A multiple of the pixel size (a square)glPointSize (size); // size is the number of pixels

34

OpenGL

Line Attributes & Functions

Basic attributes– Color– Width

glLineWidth(width);– Style

glEnable(GL_LINE_STIPPLE);glLineStippel(repeatFactor, pattern);

Other attributes– Shade

glShadeModel(GL_SMOOTH);

How many times each bit is to be

repeat

16-bit integerDefault: 0xFFFF Solid line

Lower-order bits are applied first

35

OpenGL

Line Attributes & Functions

Pixel mask• A pattern of binary digits• For example, 11111000

dashed line Inter-dashspacing

36

OpenGL

Fill-Area Attribute Functions

• OpenGL fill-area routines for convex polygons only.

• Four steps:– Define a fill pattern– Invoke the polygon-fill routine– Activate the polygon-fill feature – Describe the polygons to be filled.

37

OpenGL

Example

void init(void) {

glClearColor (0.0, 0.0, 0.0, 0.0); glShadeModel (GL_SMOOTH)}

void triangle(void) {

glBegin (GL_TRIANGLES); glColor3f (1.0, 0.0, 0.0); glVertex2f (5.0, 5.0); glColor3f (0.0, 1.0, 0.0); glVertex2f (25.0, 5.0); glColor3f (0.0, 0.0, 1.0); glVertex2f (5.0, 25.0);

glEnd(); }

38

OpenGLPolygon Stippling

39

OpenGLPolygon Stippling

byte fly[] = { (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x03, (byte) 0x80, (byte) 0x01, (byte) 0xC0, (byte) 0x06, (byte) 0xC0, (byte) 0x03, (byte) 0x60, (byte) 0x04, (byte) 0x60, (byte) 0x06, (byte) 0x20, (byte) 0x04, (byte) 0x30, (byte) 0x0C, (byte) 0x20, (byte) 0x04, (byte) 0x18, (byte) 0x18, (byte) 0x20, (byte) 0x04, (byte) 0x0C, (byte) 0x30, (byte) 0x20, (byte) 0x04, (byte) 0x06, (byte) 0x60, (byte) 0x20, (byte) 0x44, (byte) 0x03, (byte) 0xC0, (byte) 0x22, (byte) 0x44, (byte) 0x01, (byte) 0x80, (byte) 0x22, (byte) 0x44, (byte) 0x01, (byte) 0x80, (byte) 0x22, (byte) 0x44, (byte) 0x01, (byte) 0x80, (byte) 0x22, (byte) 0x44, (byte) 0x01, (byte) 0x80, (byte) 0x22, (byte) 0x44, (byte) 0x01, (byte) 0x80, (byte) 0x22, (byte) 0x44, (byte) 0x01, (byte) 0x80, (byte) 0x22, (byte) 0x66, (byte) 0x01, (byte) 0x80, (byte) 0x66, (byte) 0x33, (byte) 0x01, (byte) 0x80, (byte) 0xCC, (byte) 0x19, (byte) 0x81, (byte) 0x81, (byte) 0x98, (byte) 0x0C, (byte) 0xC1, (byte) 0x83, (byte) 0x30, (byte) 0x07, (byte) 0xe1, (byte) 0x87, (byte) 0xe0, (byte) 0x03, (byte) 0x3f, (byte) 0xfc, (byte) 0xc0, (byte) 0x03, (byte) 0x31, (byte) 0x8c, (byte) 0xc0, (byte) 0x03, (byte) 0x33, (byte) 0xcc, (byte) 0xc0, (byte) 0x06, (byte) 0x64, (byte) 0x26, (byte) 0x60, (byte) 0x0c, (byte) 0xcc, (byte) 0x33, (byte) 0x30, (byte) 0x18, (byte) 0xcc, (byte) 0x33, (byte) 0x18, (byte) 0x10, (byte) 0xc4, (byte) 0x23, (byte) 0x08, (byte) 0x10, (byte) 0x63, (byte) 0xC6, (byte) 0x08, (byte) 0x10, (byte) 0x30, (byte) 0x0c, (byte) 0x08, (byte) 0x10, (byte) 0x18, (byte) 0x18, (byte) 0x08, (byte) 0x10, (byte) 0x00, (byte) 0x00, (byte) 0x08

};

40

3D Geometric Primitives

41

Rendering

Generate an image from geometric primitives

Rendering

Geometric Primitives

Raster Image

42

3D Rendering Example

What issues must be addressed by a 3D rendering system?

43

3D Object Representation

Polyhedra

44

OpenGL

3D Primitives (GLUT Support)

45

OpenGL

3D Primitives

CubeglutWireCube(GLdouble size)

size = length of a side Sphere

glutWireSphere(GLdouble radius, GLint nSlices, GLint nStacks)

Approximated by polygonal facesnSlices = # of polygons around z-axisnStacks = # of bands along z-axis

There are solid counterparts of the wire objects

46

OpenGL

3D Primitives

Regular Polyhedron Tetrahedron (4 sided)

glutWireTetrahedron() Hexahedron (6 sided)

glutWireHexahedron() Octahedron (8 sided)

glutWireOctahedron() Dodecahedron (12 sided)

glutWireDodecahedron() Icosahedron (20 sided)

glutWireIcosahedron()

Display with center at the origin and with radius (distance from the center of polyhedron to any vertex) equal to Sqrt(3)

47

OpenGL

3D Primitives

ConeglutWireCone(GLdouble baseRad, GLdouble height, GLint nSlices, GLint nStacks)

Axis coincides with the z-axisBase rests on xy-plane and extends to +ve z = heightbaseRad: radius at z = 0nSlices: The number of subdivisions around the z axis. nStacks: The number of subdivisions along the z axis.

48

OpenGL

3D Primitives

TorusglutWireTorus(GLdouble inRad, GLdouble outRad, GLint nSlices, GLint nStacks)

Approximated by polygonal faces

TeapotsglutWireTeapot(GLdouble size)

49

OpenGL practice: HB 2.9

Things to do

50

References1. http://www.ugrad.cs.ubc.ca/~cs314/2. http://faculty.cs.tamu.edu/schaefer/teaching/441_Spring2012/index.html3. http://faculty.cs.tamu.edu/schaefer/teaching/441_Spring2012/index.html4. http://www.ugrad.cs.ubc.ca/~cs314/Vjan2007/