CG5 (chp4-II) Primitives
CG5 (chp4-II) Primitives
Chapter 4
Graphics Output Primitives
(Part II)
Outline
OpenGL Curve Functions
Fill-Area Primitives
Polygon Fill Areas
OpenGL Polygon Fill-area Functions
Pixel Array Primitives
Character Primitives
OpenGL functions
OpenGL Display Lists
2
Chapter 4
Graphics Output Primitives (Part II)
OpenGL Curve Functions
Fill-Area Primitives and Polygon Fill Areas
3
OpenGL Curve Functions
GLU (OpenGL Utility) functions:
3D Quadrics (Spheres, Cylinders)
Rational B-Splines (circles, ellipse, Bezier curve)
(有理B樣條) gluSphere/gluCylinder/gluDisk…
NURBS (non-uniform rational B-splines)
4
Fill-Area Primitives
Fill (Filled) Area
An area filled with some solid color or pattern
To describe the surfaces of solid objects
Most graphics library routines don’t support arbitrary fill shapes.
A fill area is required to be specified as a polygon.
5
Polygon Fill Areas
Polygon
A plane figure specified by a set
of three or more vertices, that are
connected in sequence by
The interior angle is the angle
straight-line segments (edges).
inside the polygon boundary that
Here refer only to those without is formed by two adjacent edges.
crossing edges: simple (standard)
polygon
Polygon Classifications
Convex Polygon (凸)
All interior angles are less than or
equal to 180o degrees
Concave Polygon (凹) A convex polygon (a) and a concave
polygon (b)
6 Otherwise
Polygon Fill Areas
Implementation consideration
Some graphics packages including OpenGL, only support
convex polygon for the fill algorithms.
Generate a line segment
7
Identifying Concave Polygons
Characteristics
At least one interior angle >180o;
Extension of some edges intersect other;
Line segment of some pair of interior points intersects the
boundary.
Mathematically
The cross products of adjacent edges
Convex: the same sign
Concave: some are positive and
some are negative
(next slide for the detail )
8
Splitting Concave Polygons
A concave polygon with six edges.
Edge vectors for this polygon:
E1 = (1,0,0 ) E 2 = (1,1,0 )
E 3 = (1,−1,0 ) E 4 = (0,3,0 )
E 5 = (− 3,0,0 ) E 6 = (0, −3,0 )
10
Inside-Outside Tests
Odd-Even rule (Odd-Parity Rule, Even-Odd Rule):
1. Draw a line: (the line path doesn’t intersect any line-segment
endpoints)
From any position P to a distant point outside the coordinate extents
of the polygon
2. Counting the number of edge crossing along the line.
3. If the number of polygon edges crossed by this line is odd (奇) then
P is an interior point.
Else
P is an exterior point P1
P2
P2
P1 Self-intersecting
closed polyline
11
(From Wiki)
Inside-Outside Tests
Non-zero Winding (環繞) Number Rule :
Counts the winding number of a point
Non-zero: interior points
Zero: exterior points
Winding number of a closed curve around a given point:
The number of times the curve (polygon edges) wind
counterclockwise around that point.
(Pic. FromWiki)
12
Inside-Outside Tests
Non-zero Winding Number Rule (cont.):
1. Set up vectors along the edges and initialing the winding number
to 0.
2. Imagine a line drawn from any position P to a distant point
beyond the coordinate extents of the object.
3. Count the number of edges that cross the line in each direction.
Add 1 to the winding number:
A polygon edge crosses the line from right to left ( ).
Subtract 1:
An edge crosses from left to right ( ).
4. If the winding number is non-zero, then
P is defined to be an interior point
Else
P is taken to be an exterior point.
13
Example: self-intersecting closed
polyline
: +1
Figure 4-12
: -1
Attribute Tables
Normal; Transparency; Reflectance; Texture Coordinates
15
Polygon Tables
17
OpenGL Polygon Fill-area Functions
In OpenGL, a fill area must be specified as a convex
polygon
A vertex list for a fill polygon must contain at least three
vertices;
No crossing edges;
(From: OpenGL Programming Guide)
All interior angles for the polygon must be less than 180°.
Convex:
all interior angles are less than or
equal to 180°.
Concave:
A convex polygon (a) and a concave
Otherwise.
polygon (b).
18
OpenGL Polygon Fill-area Functions
The figure on the left has a hole
in it.
How do you show such polygon?
19
OpenGL Polygon Fill-area Functions
In OpenGL, specifying fill polygons are similar to those
for describing a point or polyline.
glBegin(SYMBOLIC_CONSTANT) //set red color
glColor3f(1.0, 0.0, 0.0);
glVertex*(…); //specify 2D square
glVertex*(…); glBegin(GL_QUADS);
… glVertex2i(-2, 2);
glVertex2i(2, 2);
glEnd(); glVertex2i(2, -2);
glVertex2i(-2, -2);
glEnd();
glRect* (x1,y1,x2,y2);
② ① (x1,y1)
‘*’: the coordinate data type: i (integer), s (short), f (float), d (double), and v
(vector)
glRecti
? ( 200, 100, 50, 250 ); int vertex1 [ ] = { 200, 100 };
int vertex2 [ ] = { 50, 250 };
?
glRectv ( vertex1, vertex2 );
This function is equivalent to :
glBegin (GL_POLYGON); glBegin (GL_QUADS);
glVertex2* (x1, y1); and glVertex2* (x1, y1);
glVertex2* (x2, y1); glVertex2* (x2, y1);
glVertex2* (x2, y2); glVertex2* (x2, y2);
glVertex2* (x1, y2); glVertex2* (x1, y2);
glEnd ();
glEnd ();
21 glRect* is more efficient than using the above glVertex specifications
Six OpenGL Polygon Fill Primitives
To use the symbolic constant in the glBegin
function, along with a list of glVertex commands.
GL_POLYGON -- closed ploygon
GL_TRIANGLES -- disconnected triangles
GL_TRIANGLE_STRIP -- connected triangles
GL_TRIANGLE_FAN -- triangles sharing
common point
GL_QUADS -- disconnected quadrilaterals
GL_QUAD_STRIP -- connected quadrilaterals
22
OpenGL Polygon Fill-area Functions
GL_POLYGON and GL_TRIANGLES
25
OpenGL Polygon Fill-area Functions
GL_QUADS
glBegin (GL_QUADS);
glVertex2iv (p1);
glVertex2iv (p2);
glVertex2iv (p3);
glVertex2iv (p4);
glVertex2iv (p5);
glVertex2iv (p6);
glVertex2iv (p7);
glVertex2iv (p8);
glEnd ();
The first four points form a quadrilateral, the next four points form the
second, and so on.
At least four points should be listed, otherwise, nothing is displayed.
26
OpenGL Polygon Fill-area Functions
GL_QUAD_STRIP
glBegin (GL_QUAD_STRIP);
glVertex2iv (p1); -> n=1
glVertex2iv (p2); -> n=2
glVertex2iv (p4); -> n=3
glVertex2iv (p3);
glVertex2iv (p5);
glVertex2iv (p6);
glVertex2iv (p8);
glVertex2iv (p7);
glEnd ();
Rearrange the vertex list, we can obtain the set of connected quadrilaterals.
Define each position n in the vertex list in the order n=1, n=2, …, n=(N/2)-1.
The vertices 2n-1, 2n, 2n+2, 2n+1 define nth quadrilateral -> (p1, p2, p3, p4); (p4,
p3, p6, p5)
27
OpenGL Polygon Fill-area Functions
Common use
GL_TRIANGLE_STRIP & GL_QUAD_STRIP
Easy to create solid surfaces.
GL_TRIANGLE_FAN
Conical shapes: a cone is hard with strips, easy with a triangle fan.
28
Spatial Orientation of Polygon Faces
Spatial Orientation of a polygon face
The vertex coordinates values
The equations of the polygon surfaces
The general equation of a plane containing a polygon is
Ax + By + Cz + D = 0 (4-1)
(x,y, z) is any point on the plane;
A, B, C, D: plane parameters giving the spatial properties of
the plane.
A, B, C and D can be calculated by three non-collinear points in the
plane, selected in a strictly counterclockwise order, viewing the
surface along a front-to-back direction.
Please refer to equations (4-3) and (4-4).
29
Plane Equation by 3 Points
30
Orientation of Polygon Surface
Normal vector for the plane containing that polygon
31
Polygon Faces
In graphics, polygon faces are often distinguished between the two
sides of each surface.
Back face: the side that faces into the object interior.
Front face: the side that is visible, or outward.
Each side can have its own rendering style, such as
Filling
Wireframe
Vertex
…
32
Front and Back face of Polygons
In OpenGL, each polygon we specify has two faces: a back face
and a front face.
Fill color and other attributes can be set for each face separately.
glPolygonMode(GL_FRONT, GL_FILL); //filled polygon V3
glPolygonMode(GL_BACK, GL_LINE); //wireframe back front
glBegin(GL_POLYGON);
glVertex2f(…); V4
……
V2
glVertex2f(…);
glEnd(); V1
Define front/back face
Default: the polygon vertices in a counterclockwise order as we view the
polygon from “outside”.
User define:
glFrontFace(GL_CCW); //counterclockwise
glFrontFace(GL_CW); //clockwise
33
Identify Points Position Relative to Faces
A basic task in many graphics algorithms
How to do the test?
Each polygon is contained in an infinite plane that partitions the
place into two regions. Plane equation can be used.
Is the point in front of the plane?
Is the point inside the object?
Behind (inside) all polygon surface planes
If Ax +By + Cz + D < 0, The shaded polygon surface
of the unit cube has plane
the point (x, y, z) is behind (inside) the plane; equation x – 1 = 0.
If Ax +By + Cz + D > 0, Any point outside it satisfies
the point (x, y, z) is in front of (outside) the plane. the inequality x - 1 > 0.
35
Pixel-Array Primitive
Bitmap (mask, 2-color image) is a pixel array with the bit
value 0 or 1 to each element.
width: the no. of columns for the Bitmap in the array bitShape;
height: the no. of rows for the Bitmap in the array bitShape;
Floating
(x0, y0): define the “origin” of the bitmap, which is positioned at the
current raster position (next slide);
-point
xOffset,yOffset: coordinate increments added to the raster position after
the bitmap is displayed;
bitShape: the array of elements assigned either 1 (displayed in the
previously set color) or 0 (unaffected by the bitmap); (example)
Spec.:http://www.opengl.org/documentation/specs/man_pages/hardcopy/GL/html/gl/bitmap.html
37
OpenGL Pixel-Array Functions
OpenGL Bitmap Function (cont.)
38
OpenGL Bitmap Function
bitShape: the rectangular bit array
Each row is stored in multiples of 8 bits, where the binary data is arranged
as a set of 8-bit unsigned characters.
But the arbitrary shape can be defined by any convenient grid
size in a bit pattern.
Fig.4-27
oA bit pattern defined on a 10-row by 9-colume grid.
oThe binary data is specified with 16 bits for each row.
oWhen applied, all bit values beyond the 9th column are ignored.
39
OpenGL Bitmap Function
Apply the bit pattern of Fig. 4-27.
//array values defined row by row
GLubyte bitShape[20] = {
0x1c, 0x00, 0x1c, 0x00, 0x1c, 0x00, 0x1c, 0x00, 0x1c, 0x00, 0xff, 0x80,
0x7f, 0x00, 0x3e, 0x00, 0x1c, 0x00, 0x08, 0x00 };
//set the storage mode for the bitmap The alignment requirements for the start
glPixelStorei (GL_UNPACK_ALIGHMENT, 1); of each pixel row in memory.
//set the current raster position
glRasterPos2i (30, 40);
glBitmap (9, 10, 0.0, 0.0, 20.0, 15.0, bitShape);
width height
40
OpenGL Image (Pixmap) Functions
OpenGL provides three basic commands to manipulate image
data
glDrawPixels(): Writes [a rectangular array of pixels] from data kept in
memory into the framebuffer at the current raster position specified by
glRasterPos*().
41
OpenGL Image Functions
44
(From OpenGL Programming Guide )
Store Pixel Values in Buffer
After defining the shape or pattern by glDrawPixels routine, a
target buffer should be specified.
OpenGL buffers and their uses (store color values and other kinds
of pixel data information)
Color buffer
There are 4 available in OpenGL for screen refreshing.: A left-right pair
of color buffers is for displaying stereoscopic views, a front-back pair for
double-buffered animating displays;
Depth buffer (z buffer)
Store object distances (depths) from the viewing position;
Stencil buffer
Store rendering patterns for a scene;
Accumulation buffer (From:Wiki)
45 Accumulating a series of images into a final, composite image.
Store Pixel Values in Buffer
Operations to clear buffers
Firstly, to set the clearing values for each buffer glClearColor(1.0, 1.0, 1.0, 1.0);
46
(From OpenGL Programming Guide )
Store Pixel Values in Buffer
To select which color buffer will be drawn
glDrawBuffer (buffer);
47
OpenGL Raster Operations
Other operations on a pixel array by OpenGL:
Retrieve a block of values from a buffer into memory;
Copy a block of values between buffers array;
Logic operations to combine the two blocks of pixel values.
48
OpenGL Raster Operations
Retrieving a block of values from a buffer into memory
(array)
Firstly, to select a block of pixel values in a designated buffers
49
OpenGL Raster Operations
Retrieving a block of values from a buffer into memory
(array) (cont.)
Then, to define the source buffer where the block of pixel
values is stored
glReadBuffer (buffer);
50
OpenGL Raster Operations
Copy the block of pixel values from one (source) buffer
into another (destination) buffer (by current raster
position)
glCopyPixels (xmin, ymin, width, height, pixelValues);
roughly = glReadPixels () + glDrawPixels () without mem. array
51
Example
To demonstrate drawing pixels and show the effect of
glDrawPixels(), glCopyPixels(), and glPixelZoom().
file
Moving the mouse while pressing the mouse button will copy the image
in the lower-left corner of the window to the mouse position, using the
current pixel zoom factors.
52
(From OpenGL Programming Guide )
OpenGL Raster Operations
Logic operations to combine the two blocks of pixel
values
glEnable(GL_COLOR_LOGIC_OP);
glLogicOp(logicOp);
logicOp:
GL_AND, CL_OR, GL_XOR,
GL_COPY_INVERTED, GL_INVERT;
GL_CLEAR (0), GL_SET (1);
GL_COPY (by default).
53
Character Primitives
Routines for generating characters are available in most
graphics packages.
Font (Typeface)
The overall design style for a set of characters.
Two kinds of representations for storing computer fonts
bitmap (raster) font
outline (stroke) font
55
Chapter 4
Graphics Output Primitives (Part II)
56
OpenGL Display Lists
Display list (OpenGL 1.1)
A group of OpenGL commands that have been stored ( or
compiled) for later execution.
Once it has been created, we can reference it multiple times
with different display operations.
Code:
Display list
{ …
Display list
…
Display list
…
Display list
…
}
Useful for hierarchical modeling, where a complex object can
be described with a set of simpler subparts.
57
Creating and Naming OpenGL Display List
To form a display list, put a set of OpenGL commands
into glNewList/glEndList pair
glNewList(listID, listMode);
……
glEndList();
listMode: GL_COMPILE or GL_COMPILE_AND_EXECUTE.
glCallList ( listID );
59
OpenGL Display Lists Example (segment)
// draw a red hexagon
const double TWO_PI = 6.281853;
GLuint regHex;
GLdouble theta;
GLint x, y, k;
regHex = glGenLists(1);
glNewList (regHex, GL_COMPILE);
glBegin (GL_POLYGON);
for (k=0; k<6; k++) {
theta = TWO_PI * k / 6.0;
x = 200 + 150 * cos (theta);
y = 200 + 150 * sin (theta);
glVertex2i (x, y);
}
glEnd();
glEndList();
glCallList (regHex);
60
Summary of Chapter 4
Line drawing algorithms
DDA (Digital Differential Analyzer)
Bresenham
Output primitives
Points, straight lines, curves
Filled color areas
Polygons
Pixel-array primitives and characters
OpenGL functions
Read the example programs on P117 in the textbook
61