CG OpenGL line & area-course 3

Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室

National Taiwan Normal University

Line & Area Chen Jing-Fung (2006/10/24)

Assistant Research Fellow, Digital Media Center,


Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

2

Coordinate representations

1 1

1

Plotter

Other Output

Device Coordinates

Video Monitor Modeling (local or master)

Coordinates World

(Cartesian) Coordinates

Normalized Coordinates

Viewing & Projection Coordinates



3

Reshape function



4

Monitor

http://groups.csail.mit.edu/graphics/classes/6.837/F04/calendar.html

monitor

http://groups.csail.mit.edu/graphics/classes/6.837/F04/calendar.html



5

2D graph

• Plot figure in 2D coordinate – X-coordinate indicated horizontal

– Y-coordinate indicated vertical

– Z-coordinate indicated depth

simple

nonsimple



6

Coordinate Reference • A set of coordinate extents

– Bounding box (3D), bounding rectangle (2D) – Max & Min (x, y, z), (x, y)

• Screen coordinates – Scan line number: y – Column number: x

• A low-level procedure of the pixel position – setPixel(x, y);

• Retrieve the current frame-buffer setting for a pixel location – getPixel(x, y, color);

x

y

0 1 2 3 4 5

5 3

1 4

2

0

Combine RGB bit codes



7

Coordinate specifications

• Absolute coordinate & Relative coordinate – Last position (current position): (3, 8)

– => Some graph packages is used relative coordinate: (2, -1) -> Absolute position: (5, 7)



8

2D world-coordinate in OpenGL

• An orthogonal projection function – gluOrtho2D

Display window

ymax

ymin xmin

xmax

glMatrixMode (GL_PROJECTION);

glLoadIdentity ();

gluOrtho2D (xmin, xmax, ymin, ymax); World coordinate range

Assign the identity matrix



How to a parameter drawing line?



10

Bresenham’s line algorithm

• Bresenham’s line is an accurate and efficient raster line-generating algorithm

• Use only incremental integer calculations.

• Determine at next sample point whether to plot. – The positive-slope line:

if start point (50, 50), next point? • (51, 50) or (51, 51)



11

Parallel Bresenham line algorithm

• Drawing parallel processing – Two different line on the same plane and

along a line path simultaneously.

xk+1

yk

yk+1

P. 99-101



How to buffer value by the structure?



13

Setting frame-buffer values • Since scan-conversion algorithms generate

pixel positions which are labeled from (0, 0) to (xmax, ymax), the frame-buffer bit address is calculated as – (x, y)

• addr(x, y) = addr(0, 0) + y(xmax + 1)+x

– (x+1, y) • addr(x+1, y) = addr(x, y) + 1

– (x+1, y+1) • addr(x+1, y+1) = addr(x, y) + xmax + 2

(0, 0) (1, 0) (2, 0)

(xmax, 0)

(0, 1) (x, y)

(xmax, ymax) addr(0, 0) addr(x, y)

Frame buffer:

Screen

x0 xend

y0

yend

(x, y)



Another drawing line method

Use Midpoint



15

Circle-generating algorithms

• A circle is defined as the set of points – Radius = r, center position (xc, yc)

(x-xc)2+(y-yc)2=r2

– X axis in unit steps from xc- r to xc+ r and calculating the corresponding y values at each position as

– using polar coordinates r and θ

22 )( xxryy cc

p.103-104



16

Symmetry of a circle

• Eight octants – Calculation if a circle point (x, y) in one octant

yields the circle points shown for the other seven octants

• More efficient circle algorithm are based on incremental calculation of decision parameters, which involves only simple integer operations. (as in the Bresenham line algorithm)



17

Midpoint circle algorithm (1)

• The basic idea is to test the halfway position between two pixels – Determine inside or outside the circle

boundary.

• Midpoint method = Bresenham line algorithm – Integer circle radius

– A straight-line segment



18

Midpoint circle algorithm (2) • To apply the midpoint method, we define a

circle function as: – fcirc(x, y) = x2+y2-r2

– Decision parameter (each xk, k=0 & pk<0) • pk= fcirc(xk+1, yk-1/2)

• pk+1=pk+2(xk+1) + (yk+12-yk

2) - (yk+1-yk)+1

– Increment?

Midpoint

xk

yk

xk+1 xk+2

yk-1

yk-2

x2 + y2 - r2 = 0

fcirc(x,y)

<0, if (x,y) is inside the circle boundary

=0, if (x,y) is on the circle boundary

>0, if (x,y) is outside the circle boundary

What is different between midpoint and line- based?

p.105-109



19

Other curves • Various curve functions are useful in object

modeling, animation path specification and other graphics applications.

• Commonly encountered curves include conics, general polynomials and spline functions. – Conic sections: Ax2+ By2+Cxy+Dx+Ey+F=0 – Parabolic

• trajectory: y=y0+a(x-x0)2+b(x-x0)

• Projection point: x=x0+vx0t; y=y0+vy0t-1/2gt2

– Hyperbola: (x/rx)2-(y/ry)2=1 x0

y0

v0 g

rx

ry Spline curve formed with individual cubic polynomial sections between specified coordinate positions



Fill-Area



21

Fill-Area Primitives

• Polygon area (solid-color, patterned) – scan-line to fill polygon

• Intersection points located and sorted

• Consecutive pairs define interior span

• Attention with vertex intersections

• Exploit coherence (incremental calculations)

– flood fill algorithm



22

Fill-area primitives

• Describing components of a picture is an area that is filled with some solid color – Polygon is a plane figure specified by

• Vertices: three or more coordinate positions

• Edges or sides: straight-line segments

• Area….

<1800

>1800

concave convey



23

Concave polygons

• The direction of surface is “z’’ axle

• Given two consecutive vertex (V) positions, Vk and Vk+1, we define the edge vector (E) as Ek = Vk+1 - Vk

V1 V2

V3

V4

V5 V6 (E1 x E2)z > 0

(E2 x E3)z > 0

(E3 x E4)z < 0

x

y

E1

E2

E3

E4

Where is “z”

(Cross product)

convex

concave

Test!!



24

Splitting concave polygons

• Vector method – All vector cross products have the same

sign => convex

• Rotational method – rotate polygon-edges onto x-axis, always

same direction => convex – Each vertex vk

• Origin: translate Vk • Rotate clockwise Vk+1 on x-axis • If vertex below x-axis => split

V1

V2 V3

V4

Area 2

Area 1



25

Inside-Outside Tests

• Testing interior vs. exterior object boundaries – Odd-even (parity) rule or nonzero winding

parity rule • Odd-even rule

– number of segments crossed by the line drawn from P to distant point outside the coordinate extents

• bounding rectangle or box is odd it is interior point • else it is exterior point

– use the rule for color filling of rings, 2 concentric polygons



26

Nonzero winding parity rule

• Nonzero winding parity rule may yield different interior and exterior regions – Setup vectors along object edges and the

reference line. – Compute cross product of vector u along the

line from P to a distant point, with object vector E for each edge that crosses the line.

– With 2 D object in XY plane direction of cross product will be + z direction or –z direction.

• if z component for a crossing is +ve that segment crosses from left to right, add 1 to winding number

• else if it is left to right subtract 1 from winding number simpler



27

3D inside-outside • Consider a sphere, x2 + y2 + z2 = 1.

– Interior: the set of all points that satisfy x2 + y2 + z2 < 1

– The solid's surface: x2 + y2 + z2 <= 1. – Exterior: x2 + y2 + z2 > 1.

http://www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/model/closure.html

Interior point A

Exterior point B

boundary

Boundary point C



28

Polygon Surfaces (1)

• Set of surface polygons enclose object interior = Boundary Representation (“B-rep”)

wireframe representation of a cylinder with back (hidden) lines removed



29

Polygon Surfaces (2)

• Polygon tables (B-rep lists) – Geometric and attribute tables

– Vertex, edge, polygon tables

– Consistency, completeness checks



30

Two polygon surfaces

• Geometric data-table representation for two adjacent polygon surface facets, formed with six edges and five vertices

V1

V2

V3

V4

V5

E1

E2

E3

E4 E5

E6

S1 S2

V1: x1, y1, z1

V2: x2, y2, z2

V3

V4

V5

VERTEX TABLE

E1: V1, V2

E2: V2, V3

E3

E4

E5

E6

EDGE TABLE

S1: E1, E2,E3

S2: E3, E4, E5, E6

SURFACE-FACET TABLE



31

http://www.icg.tu-graz.ac.at/courses/bacgvis/slides






32

Plane equations

• Ax+By+Cz+D=0 – Plane parameter: A, B, C and D

• Normal vector (N) the plane equation: x − 1 = 0.

The normal vector: N=( A, B, C ) Plane equation Ax + By + Cz + D = 0



33

3D cartesian coordinate

x axis

y axis

z axis

Right-handed cartesian

x axis

y axis

Left-handed cartesian

z axis



34

Front and Back Polygon Faces (1)

• Back face = polygon side that faces into the object interior

• Front face = polygon side that faces outward

• Behind a polygon plane = visible to the polygon back face

• In front of a polygon plane = visible to the polygon front face



35

Front and Back Polygon Faces (2)

• Ax + By + Cz + D = 0 for points on the surface

< 0 for points behind > 0 for points in front

– right-handed coordinate system – polygon points in counterclockwise order

• V1, V2, V3 counterclockwise => normal vector N = (V2 - V1) x (V3 - V1)



36

What is Cross product (x) ?

• A mathematical joke asks, – "What do you get when you cross a

mountain-climber with a mosquito? "

• On the television sitcom, Head of the Class asks, – "What do you get when you cross an

elephant and a grape?"

http://mathworld.wolfram.com/CrossProduct.html

http://www.amazon.com/exec/obidos/ASIN/B00005JO2W/ref=nosim/weisstein-20

http://www.amazon.com/exec/obidos/ASIN/B00005JO2W/ref=nosim/weisstein-20




37

Cross product (x)

• The orientation determined by the right-hand rule


http://mathworld.wolfram.com/Right-HandRule.html






38

OpenGL polygon fill-area functions

• OpenGL provides a special rectangle function – glRect*(x1, y1, x2, y2);

• *: i (integer), s (short), f (float), d (double) and v (vector) • plRectiv(vertex1, vertex2);

• Fill rectangle use “glVertex” • glBegin (GL_POLYGON);

– glVertex2iv (p1); – glVertex2iv (p2); – glVertex2iv (p3); – glVertex2iv (p4); – glVertex2iv (p5); – glVertex2iv (p6);

• glEnd ();

p1

p2 p3

p4

p5 p6



How to design “font”?

A complete set of type of one size and face.



40

South China Morning Post, 13 Sep., 2005



41

Texture

• Graphics displays often include textural information : – labels on graphs and charts

– signs on buildings or vehicles

– General identifying information for simulation and visualization applications.



42

Typeface (1)

• Letters, numbers and other characters can be displayed in a variety of sizes and styles. – The overall design style for a set of characters – Routines for generating character primitives

• 20-point Courier Italic or 28-point Palatino Bold

• font : – 14 points, a total character height is about 0.5 cm. A

– 72 points is about 2.54 cm (1 inch) B



43

Typeface (2)

the letter B represented with an 8x8 bilevel bitmap pattern and with an outline shape defined with straight line and curve segments



44

Homework (1) • Select 6 points and try to draw primitive

constant – (a) GL_POLYGON (b) GL_TRIANGLES (c)

GL_TRIANGLE_STRIP (d) GL_TRIANGLE_FAN

• Select 8 points and try to draw primitive constant – (a) GL_QUADS (b) GL_QUAD_STRIP

• Draw

100

200

100

50



45

Homework (2)

• Draw switch – (1) parabolic

• x = y2

(-10≦y ≦10)

– (2) 2D curve path • 2D : Set (x0, y0) & step (relate to θ),

m:integer – r=sin (mθ)

r=A+Bcos(mθ) r=e-mθ

r=mθ



46

Reference

• http://www.icg.tu-graz.ac.at/courses/bacgvis/slides

• South China Morning Post, 13 Sep., 2005

• Computer Graphics with OpenGL 3/e, Hearn Baker, Third edition, ISBN：0131202383




CG OpenGL line & area-course 3

Design

Transcript of CG OpenGL line & area-course 3