graphics output primitives ca 302 computer graphics and visual programming aydın Öztürk...

GRAPHİCS OUTPUT PRİMİTİVES

CA 302 Computer Graphics and Visual

Programming

Aydın Öztürk

[email protected]://www.ube.ege.edu.tr/~ozturk

1. Introduction

Output Primitives:

Point positions and line segments are the simplest geometric pirimitives.

Other geometric pirimitives: Circles, conic sections, spline curves and surfaces

2. Coordinate Reference Frame

To describe a picture first we define a world coordinate reference frame (2D or 3D).

Next, we describe the positions of the objects in world coordinates.

These coordinate positions along with other information such as color are stored .

Objects are then displayed by passing the scene information to the viewing routines.


0 1 2 3 4 5

Locations on a video monitor are referenced in integer screen coordinates which correspond to pixel positions in the frame buffer.

5

14

3

1

0

2

1


Once pixel positions have been identified for an object, the appropriate color values must be stored in the frame buffer.

For this purpose we assume that we have the low-level

Procedures

setPixel (x,y)

getPixel (x,y, color)

3. Specifying a 2D World-Coordinate System in OpenGL

The OpenGl commands for setting up a 2D Cartesianreference frame are

glMatrixMode (GL_PROJECTION);glLoadIdentity ();gluOrtho2D (xmin, xmax, ymin, ymax)

We add an identity matrix before the projection matrix to ensure that the coordinate values were not accumulated with any previously computed values.

4. OpenGL Point Functions

We use the following OpenGl function to state the coordinate values of a single point

glBegin (GL_POINTS);glVertex* ( );glEnd;

where (*) indicates that suffix codes are required for this function.

4. OpenGL Point Functions (cont.)

Alternatively we can specify the coordinate values as

int point1 [ ]={50, 100};int point2 [ ]={75, 150};int point3 [ ]={100, 200};

and call the OpenGL function to plot these points as(v is for vector)

glBegin (GL_POINTS);glVertex2iv (point1); glVertex2iv (point2); glVertex2iv (point3);

glEnd;

4. OpenGL Line Functions (cont.)

glBegin (GL_LINES);glVertex2iv (point1); glVertex2iv (point2); glVertex2iv (point3);

glEnd;

p3

p1

p4

GL_LINES

p5

p1

p4p2

p3

p5

p1

p4p2

p3

p2

GL_LINE_STRIP

GL_LINE_LOOP

5. Line Drawing Algorithms

The line equation

For a given interval the corrresponding

y -interval can be computed as

x0 xend

y0

yend

bmxy

,x

xmy

5.1 DDA Algorithm

0 1 2 3 4 5

The Digital Differntial Analyzer(DDA)is scan-conversion algorithm based on calculating either or .

5

4

3

0

2

1

0 1 2 3 4 5

5

4

3

0

2

1

x y

5.1 DDA Algorithm(cont.)

xk

For m<1 :

For m>1 :

yk

mxx kk

11

myy kk 1

5.1 DDA Algorithm(cont.)

Since m is a real number, each calculated x or y values must be rounded to the integer.

DDA is a fast algorithm.

Accumulation of round-off error in successive additions of the increments can couse a serios problem.

5.2 Bresenham’s Line Algorithm

Bresenham’s Line Algorithm uses only inremental integer calculations.

When sampling at unit x intervals, we decide about which of the two pixel positions is closer to the true line path at each step.

xk xk+1 xk+2 xk+3 xk+4

xk+5

yk+3

yk+3

yk+2

yk+1

yk

y=mx+

b

5.2 Bresenham’s Line Algorithm(cont.)

xk+1

yk+1

y

yk

dlower

dupper

bxmy

yyd

ybxm

yyd

bxmy

kk

kupper

kk

klower

k

)1(1

)1(

)1(

)1(


To determine which of the two pixels is closest to the line path, a test is made based on the following quantity:

or equivalently

where

122)1(2 byxmdd kkupperlower

cyxxy

ddxp

kk

upperlowerk

22

)(

).12(2 and/ bxycxym


The sign of pk is the same as the sign since

c is a constant and eliminated in the recursive

calculations.We plot the lower pixel if p <0 otherwise we plot

the upper pixel.

0xupperlower dd


We can calculate pk recursively as follows:

)(22

)(22

)(2)(2

22

22

11

1

111

111

kkkk

kk

kkkkkk

kkk

kkk

yyxypp

yyxy

yyxxxypp

cyxxyp

cyxxyp


Finding the inital value p0

xyp

xxyyxyc

xx

yyb

k

xx

yymxyb

bxyc

cyxxyp

kkkk

kkk

2

222

0For

)12(2

22

0

00

00


The algorithm1. Input the line end poins and store (x0, y0).

2.Set the color for frame-buffer position (x0, y0); (i.e. Plot the firs point).

3. Calculate the constants and find .

4. At each xk starting at k=0, perform the following test:

If , then the next point to plot is

Otherwise the next point to plot is5.Perform step 4 times.

xyyyx 22,2,, xyp 20

0kp yppyx kkkk 2 and),1( 1xyppyx kkkk 22 and)1,1( 1

)1( x

5.3 Line Drawing Using Parametric Line Equations

A parametric line equation in 2D that goes through points P0= (x0, y0) and P1= (x1, y1) can be written as

)()(

formvectorinlyequivalentor

)(

)(

010

010

010

PPPP

uu

yyuy

xxux

y

x

5.3 Line Drawing Using Parametric Line Equations

A nice property of this algorithm is that it works whether or not x1>x2.

An incremental pseudo code for this algorithm is

))(round,(DRAW

)(

)/()(

to

010

010

10

0

yx

yyuyy

xxxxu

xxx

yy

dofor

6. Circle-Generating Algorithms

xc

yc

222 )()(),( ryyxxyxf cc

(x,y)

r

θ

A point (x,y ) on a circle can be expressed by the equation

For a given x, the corresponding y-value can be calculated as

22 )( cc xxryy

6.1. Midpoint Circle Algorithm

To apply the mid-point method we define

Assuming that the point (xk, yk) was plotted, we determine whether the next pixel at position (xk+1, yk) or at position (xk+1, yk).

Midpointyk-1

yk

xk+1xk xk+2

0222 ryx

boundary circle theoutside is ),( if,0

boundary circle theon is ),( if,0

boundary circle theinside is ),( if,0

),(

yx

yx

yx

yxf


The decision function is defined as

A recursive expression for the next position at position xk+1+1= xk+2 is

22212

21

)()1(

),1(

ryx

yxfp

kk

kkk

2221

12

1 )(]1)1[( ryxp kkk


or

where yk+1 is either yk or yk-1 depending on the sign of pk .

1)()()1(2 122

11 kkkkkkk yyyyxpp


The initial decision parameter is obtained as follows:

If r is defined as an integer, p0 can be raunded to

p0=1-r

r

rr

rfp

45

2221

21

0

)(1

),1(


The algorithm:1. Input radius r and circle center ( xc yc) then set the

coordinates for the first point as (( x0 y0)=(0, r).

2. Calculate the initial value of the decision parameter as

3.At each xk position, starting at k=0, perform the following test:

if pk<0, the next point is at ( xk+1, yk) and

otherwise the next point is at ( xk+1, yk-1) and

rp 45

0

12 11 kkk xpp

)2(21)1(2

212 111

kkk

kkkk

yxp

yxpp


The algorithm:4. Determine symmetry points in the other oktants.5. Move each point onto the circle centered at (xc, yc).

6. Repeat steps 3 until x≥y.

7. Fill-Area Primitives

Another useful costruct, besides points, straight-line segments, and curves for describing components of a picture is an area that is filled with some solid color or pattern.

A picture component of this type is referred to as fill area.

Mostly, fill areas are used to describe solid objects.

7.1. Polygon Fill-Areas

Polygon Classification:

Convex polygon: All interior angles are ≤1800. Concave polygon: A polygon that is not convex


Identifying Concave Polygons

A Concave poligon has at least one interior angle greater than 1800 .

Extension of some edges of a concave polygon intersect other edges.

Some pair of interior points in a concave polygon produces a line segment that intesects the polygon boundary

Polygon Fill

Convex Concave

<180o

E1E2

E3

E4

E5

E6

>180o


Splitting Concave Polygons

Once we have identified a concave poligon we can split it into a set of convex polygons.

This can be accomplished using edge vectors and edge cross products.

We first need to form the edge vectors Ek= Vk+1-Vk . Next we calculate cross products of successive edge vectors

in order around the poligon perimeter. If the z-component of some cross products is positive while

other cross products have a negative z-component, the polygon is concave.


(E1× E2)z>0

(E2× E3)z>0(E3× E4)z<0

(E4× E5)z>0

(E5× E6)z>0

E1E2

E3

E4

E5

E6

Splitting A Concave Poligon

jykxkyjxzkj

kykxk

jyjxj

eeeeE

ee

ee

)(

)0,(

)0,,(

E

E

E


Example

)0,2,0(

)0,0,3(

)0,2,0(

)0,1,1(

)0,1,1(

)0,0,1(

6

5

4

3

2

1

E

E

E

E

E

E

)2,0,0(

)6,0,0(

)6,0,0(

)2,0,0(

)2,0,0(

)1,0,0(

16

65

54

43

32

21

EE

EE

EE

EE

EE

EE

jykxkyjxzkj eeee )( EE

E1

E2 E3

E4

E5

E6


Splitting of a Polygon into Triangles OpenGL guarentees correct rendering of

polygons only if they are convex. A triangle is a convex polygon.

But a polygon which has >3 vertices can be concave.

So, we must tesselate a given polygon into triangles.The GLU library has a tesselator.

7.1. Polygon Fill-Areas: Inside-Outside Testing

We want fill inside of a polygon with constant color

Flat and Convex polygons are guarenteed to be rendered correctly by OpenGL.

For non-flat polygons: We can work with their projections. Or we can use first three vertices to determine a flat plane to use

for the interrior.For non-simple flat polygons, we must decide how to

determine whether a given point is inside or outside of the polygon .

Odd-even rule (easy implementation)

crossing, odd parity rule, even-odd rule

Crossed odd edges : inside point Crossed even edges : outside point

Non-zero winding rule Clocwise edges

: +1 Counterclocwise edges

: –1 Don’t fill while total 0


7.2. Polygon Tables

VERTEX TABLE

V1: x1 y1 z1

V2: x2 y2 z2

V3: x3 y3 z3

V4: x4 y4 z4

V5: x5 y5 z5

EDGE TABLE

E1 : V 1, V 2

E2 : V 2, V 3

E3 : V 3, V 1

E4 : V 3, V 4

E5 : V 4, V 5

E6 : V 5, V 1

POLYGON-SURFACE TABLE

S1 : E1, E 2, E3

S2 : E 3, E4, E5, E6

E1

S1S2

V2

V5

V1

V3

V4

E2E4 E5

E6

E3

7.2. Polygon Tables

E1

S1S2

V2V5

V3

V4

E2E4 E5

E6

E3

Edge Table for the surfaces

EDGE TABLE

E1 : V 1, V 2, S1E2 : V 2, V 3, S1E3 : V 3, V 1, S1 , S2E4 : V 3, V 4, S2E5 : V 4, V 5, S2E6 : V 5, V 1, S2

7.3. Planes

(x, y, z)

7.3.1 Plane Equations

(x, y, z)

7.3.2 Front and Back Polygon faces

For any point (x, y, z) on a plane we have

For any point (x, y, z) behind the plane we have

For any point (x, y, z) is infront of the plane we have

0 DCzByAx

0 DCzByAx

0 DCzByAx


Orientation of a polygon surface can be described with the normal vector for the plane.

The cartesian coordinates of the normal is (A, B, C).

0 DCzByAx x

y

z

V2

V1

V3

N


The elements of normal vector can also be obtained using a vector cross product.

In a rigthanded Cartesian system if we select the vertex positions V1, V2 , V3 taken in the counter clockwise order when viewing from outside the object toward the inside we have

)) 1312 V(VV(VN x

y

z

V2

V1

V3

N


For any point P on the plane, the plane equation can be written as

D PN


Example: Find the plane equation for the points V1=(1, 2, 3), V2=( 4, 3, 8), V3=(8, 13, 16)

First, de define the vectors on in the plane as

P1= V2- V1 = ( 3, 1, 5)

P2= V3- V1 = ( 7, 11, 13)

and find the normal vector as N= P1×P2 = (-29, -4, 19)

Next, using one of the points in the plane (e.g. V1),

N•V1 = -D = 20

we obtain the plain equatin as -29X -4Y+19Z-20=0

7.4 OpenGL Polygon Fill-Area Functions

By default, a polygon interior is displayed in a solid color. In OPENGL , a fill area must be specified as a convex polygon.A polygon vertex list must contain at least three vertices.

glBegin (GL_POLYGON);

glvertex2iv (p1);glvertex2iv (p2);glvertex2iv

(p3); glvertex2iv (p4);glvertex2iv (p5);glvertex2iv (p6);

glEnd( )

p1

p2 p3

p4

p5p6


Reordering the vertex list and change the pirimitive constant in the previous code, we obtain different shapes . For example

glBegin (GL_TRIANGLES);

glvertex2iv (p1);glvertex2iv (p2);

glvertex2iv (p6); glvertex2iv (p3);glvertex2iv (p4);glvertex2iv (p5);glEnd ( );

p1

p2 p3

p4

p5p6


Reordering the vertices and changing the primitive constant to GL_TRIANGLE_STRIP results the following shape

glBegin (GL_TRIANGLE_STRIP);


glvertex2iv (p6);

glvertex2iv (p3);glvertex2iv (p5);glvertex2iv (p4);

glEnd ( );

p1

p2 p3

p4

p5p6


glBegin(GL_TRIANGLE_FAN);


glvertex2iv (p3);

glvertex2iv (p4);glvertex2iv (p5);glvertex2iv (p6)

glEnd ( );

p1

p2 p3

p4

p5p6


OpenGL providesfor the specifications of two types of four sided polygons(quadrileterals): GL_QUADS and GL_QUAD_STRIP)

glBegin(GL_QUADS);glvertex2iv (p1);glvertex2iv (p2);

glvertex2iv (p3);

glvertex2iv (p4);glvertex2iv (p5);glvertex2iv (p6);


glEnd ( );

p1

p2

p3

p4p5

p6

p7

p8


glBegin(GL_QUAD_STRIP);


glvertex2iv (p4); glvertex2iv (p3);glvertex2iv (p5);glvertex2iv (p6); glvertex2iv (p8);glvertex2iv (p7);

glEnd ( );

p1

p2p3

p4 p5

p6p7

p8

7.5 OpenGL Vertex Arrays

There are a number of ways for defining the vertex coordinates.

Example : Drawing a cube.

typedef Glint vertex3 [3];Vertex3 pt [8] = {{0, 0,0},

{0, 1, 0},

{1, 0, 0},

{1, 1, 0}, {0, 0,1},

{0, 1, 1},

{1, 0, 1}, {1, 1, 1}}

1

2 3

45

67

0y

x

z

7.5 OpenGL Vertex Arrays

Code for drawing a cube:

void quad (GLint n1, GLint n2,

GLint n3, GLint n4){ glBegin [GL_quads);

glVertex3iv (pt [n1]);



glVertex3iv (pt [n4]); glEnd ( );}

void cube ( ){ quad(6, 2, 3, 7); quad(5, 1, 0, 4); quad(7, 3, 1, 5); quad(4, 0, 2, 6); quad(2, 0, 1, 3); quad(7, 5, 4, 6);}

7.6 OpenGL Pixel-Array Functions

A pattern defined as an array of color values is applied to a block of frame-bufferpi xel positions with the function

glDrawPixels (width, height, dataFormat, dataType, pixMap);

Parameters width and height give the column and row dimensions respectively of the array pixMap.

dataFormat is assigned an OpenGL constant that indicates how thw values are specified for the array(for example: GL_BLUE specify a single blue color for all pixels, GL_BGR specify three color components in the order blue,green, red).

dataType : GL_BYTE, GL_INT, or GL_FLOAT.

Example: Display a pixmap defined in a 128×128 array of RGB colors:glDrawPixels (128, 128, GL_RGB, GL_UNSIGNED_BYTE, colorshape);

7.6 OpenGL Pixel-Array Functions

A single color buffer is selected for storing a pixmap with the command

glDrawBuffer (buffer);

The paprameter buffer can be assigned to one of the following constants:

GL_FRONT_LEFT GL_FRONT_RIGHT GL_BACK_LEFT GL_BACK_RIGHTGL_FRONT (selects both front buffers)

7.7 OpenGL Raster Operations

In addition to storing an array of pixel values in a buffer we can retrieve a block of values from a buffer or copy the block into another buffer area.

Raster operation is used to describe to any function that processes a pixel array in some way.

A raster operation that moves an array of pixel values from one place to another is referred to as block transfer of pixel values.

7.7 OpenGL Raster Operations

To select a rectangular block of pixel values in a designated set of buffers:

glReadPixels (xmin, ymin, width, height, dataFormat, dataType, array)

To copy a rectangular block of pixel data from one location to another :

glCopyPixels (xmin, ymin, width, height, pixel values)

graphics output primitives ca 302 computer graphics and visual programming aydın Öztürk...

Documents