Chapter 2Chapter 2

Computer Graphics and VisualizationComputer Graphics and Visualization

Programming oriented approach is used. Minimal application programmer's interface (API) is used

which allow to program many interesting two- and three-dimensional problems, and to familiarize with the basic graphics concepts.

2-D graphics is regarded as a special case of 3-D graphics. Hence the 2-D code will execute without modification on a 3-D system.

A simple but informative problem called: The Sierpinski gasket” is used.

2-D programs that do not require user interaction can be written with knowledge presented here.

The chapter is concluded with an example of a 3-D application.

in slides on Chapter 2Adapted from Angel: Interactive Computer Graphics 5E © Addison-

Wesley 20092

Highlights of the chapter

The Sierpinski gasket is an object that can be

defined recursively and randomly in the limit, however, it has properties that are

not at all random Consider the three vertices in the plane.

Assume that their locations, as specified in some convenient coordinate system, are (Xl, Y1), (X2, Y2), and (X3, Y3). The construction proceeds as follows:

The Sierpinski Gasket Problem

1. Pick an initial point at random inside the triangle. 2. Select one of the three vertices at random. 3. Find the point half way between the initial point

and the randomly selected vertex. 4. Display this new point by putting some sort of

marker, such as a small circle, at its location. . 5. Replace the initial point with this new point. 6. Return to step 2.

Thus, each time a point that is generated, it is displayed on the output device.

In the figure p0 is the initial point, and Pl and P2 are the first two points generated by the algorithm.

Construction of Gasket

main( ){initialize_the_system();for (some_number_of_points){pt = generate_a_point();display_the_point(pt);}cleanup();}

A possible form for our graphics program

To produce the image of a 3-D object on 2-D pad of

pen-plotter model, the positions of 2-D points corresponding to points on 3-D object are to be specified.

These two-dimensional points are the projections of points in three-dimensional space.

The mathematical process of determining projections is an application of trigonometry.

An API allows users to work directly in the domain of their problems, and to use computers to carry out the details of the projection process automatically, without the users having any trigonometric

calculations within the application program

Programming 2-D applications

For 2-D applications, such as the Sierpinski

gasket, discussion is started with a three-dimensional world. Mathematically, a 2-D plane or a simple 2-D

curved surface is viewed as a subspace of a three-dimensional space.

Hence, statements-both practical and abstract -about the bigger 3-D world will hold for the simpler 2-D one.

We can represent a point in the plane z=0 as p = (x, y, 0) in 3-D, or as p = (x, y) in 2-D subspace corresponding to the plane.

Contd…

In OpenGL, internal representation for both 2-D and 3-D

points is same. Hence a 3-D point is represented by a triplet:   regardless of in what coordinate system p is represented. Vertex ( rather than point):

A vertex is a location in space (in Computer Graphics a 2-D, 3-D, 4-D spaces are used).

Vertices are used to define the atomic geometric objects that are recognized by graphics system.

The simplest geometric object is a point in space, which is specified by a single vertex.

Two vertices define a line segment. Three vertices can determine either a triangle or a circle. Four vertices determine a quadrilateral, and so on.

Contd…

OpenGL has multiple forms for many functions. The variety of forms allows the user to select the one

best suited for the problem. General for of the vertex function is

glVertex*where the * can be interpreted as either two or three characters of the form nt or ntv, where -n signifies the number of dimensions (2, 3, or 4); -t denotes the data type, such as integer (i), float (f), or double (d); -v, if present, indicates the variables are specified through a pointer to an array, rather than through an argument list.

Regardless of which form a user chooses, the underlying representation is the same.

Multiple Forms of functions

GLfloat and GLint, are used rather than the C

types, such as float and int. These types are defined in the header files

and usually in the obvious way-for example, #define GLfloat float However, use of the OpenGL types allows

additional flexibility for implementations for example, suppose the floats are to be

changed to doubles without altering existing application programs.

Basic OpenGL types

Returning to the vertex function, if the user

wants to work in 2-D with integers, then the formglVertex2i(GLint xi, GLint yi) is appropriate

glVertex3f(GLfloat x, GLfloat y, GLfloat z) specifies a position in 3-D space using floating-point numbers.

If an array is used to store the information for a 3-D vertex, GLfloat vertex[3] then glVertex3fv(vertex) can be used.

Contd..

Different numbers of vertices are required

depending on the object. Any number of vertices can be grouped using the

functions glBegin and glEnd. The argument of glBegin specifies the geometric

type that the vertices define. Hence, a line segment can be specified by

glBegin(GL_LINES);glVertex2f(xl,yl);glVertex2f(x2,y2);

glEnd();

Geometric primitives

Same data can be used to define a pair of

points, by using the form,glBegin(GL_POINTS);

glVertex2f(xl,yl);glVertex2f(x2,y2);

glEnd();

Contd…

Suppose that all points are to be generated within

a 500 x 500 square whose lower left-hand corner is at (0,0) - a convenient, but easily altered, choice.

How to represent geometric data in program? A two-element array for 2-D points is used: typedef GLfloat point2[2]; A function called display, is created to generate

5000 points each time it is called. Assume that an array of triangle vertices

triangle[3] is defined in display as an array of point2.

Heart of Sierpinski gasket program

void display(void){

point2 triangle[3] = {{0.0, 0.0}, {250.0, 500.0}, {500.0, 0.0}}; /* an arbitrary triangle */

static point2 p = {75.0, 50.0}; /* or set to any desired initial point */

int j, k;int rand(); /* standard random-

number generator*/for(k=0;k<5000;k++){

j = rand()%3; /* pick a random vertex from 0,1, 2 */

display function

p[0] = (p[0] + triangle[j][0])/2; /*

compute new point */p[1] = (p[1] + triangle[j][1])/2;glBegin(GL_POINTS); /*

display new point */glVertex2fv(p) ;

glEnd();}glFlush();

}

Contd…

The function rand is a standard random-number

generator that produces a new random integer each time that it is called.

Modulus operator is used to reduce these random integers to the three integers 0, 1, and 2.

The call to glFlush ensures that points are rendered to the screen as soon as possible. If it is left, the program works correctly, but in a busy or networked environment there may be noticeable delay.

A complete program is not yet written.

Figure below shows the expected output:

1. Color of drawing. 2. Position of the image on the screen. 3. Size of the image. 4. Window (area on the screen) for the image. 5. How much of the infinite pad will appear on the

screen? 6. How long will the image remain on the screen?

The basic code answering these questions and to control the placement and appearance of renderings will not change substantially across programs.

Issues leftwith

Graphics systems allow users to work in any desired

coordinate system. The advent of device independent graphics freed application programmers from worrying about the details of input and output devices.

World coordinate system or the Problem coordinate system: It is the user's coordinate system.

Device Coordinates: Units on the display. E.g. For raster devices, such as most CRT displays, the

term raster coordinates or screen coordinates is used. Raster coordinates are always expressed in some

integer type, because the center of any pixel in the frame buffer must be located on a fixed grid, or, equivalently, because pixels are inherently discrete and they can be addressed using integers.

Coordinate Systems

At some point, the values in world coordinates

must be mapped into device coordinates, as shown in figure

The graphics system, rather than the user, is responsible for this task, and the mapping is performed automatically as part of the rendering process.

To define this mapping, the user needs to specify only a few parameters-such as the area of the world to be seen and the size of the display.

Till now we saw –

Heart of Sierpinski gasket program Need to know how

To gain control over the appearance of the object on display

To control the flow of the program To interact with the window system To specify primitives to be displayed

The OpenGL API

OpenGL’s structure is similar to that of most

modern APIs Java3D and DirectX

Any effort in learning OpenGL will carry over to other software systems

OpenGL is easy to learn, it is nevertheless powerful It supports simple 2-D and 3-D programs as well as

advanced rendering techniques Our primary goal is to study Computer Graphics

We are using OpenGL API to attain that goal So will not mention all OpenGL functions

Why only OpenGL API

Graphics package model can be viewed as a black box Black box - a term that engineers use to denote a

system whose properties are described by only its inputs and outputs; nothing is known about its internal workings.

Hence graphics system can be viewed as a box whose inputs are function calls from a user program (say

measurements from input devices, such as the mouse and keyboard and possibly other input, such as messages from the operating system);

outputs are primarily the graphics sent to the output devices.

Graphics Functions

An API is defined through the functions in its

library. A good API may contain hundreds of functions It is helpful to divide the functions into six groups

by their functionality:1. Primitive functions2. Attribute functions3. Viewing functions4. Transformation functions5. Input functions6. Control functions7. Query functions

Graphics functions contd…

The primitive functions define the low-level objects

or atomic entities that the system can display. Depending on the API, the primitives can include points,

line segments, polygons, pixels, text, and various types of curves and surfaces.

If primitives are what of an API- the objects that can be displayed, then attributes are the how.

That is, the attributes govern the way that a primitive appears on the display.

Attribute functions perform operations ranging from choosing the color, to picking a pattern with which to fill the inside of a polygon, to selecting a type face for the titles on a graph.

Contd…

Synthetic camera must be described to create an

image. Its position and orientation in our world must be

defined, and equivalent of a lens must also be selected.

This process not only will fix the view, but also clip out objects that are too close or too far away. The viewing functions specify various views.

One of the characteristics of a good API is that it provides the user with a set of transformation functions that carry out transformations of objects, such as rotation, translation, and scaling

Contd…

For interactive applications, the API provides a set

of input functions to deal with diverse forms of input that characterize modern graphics systems say functions to deal with devices such as

keyboards, mice, and data tablets

In any real application, the complexities of working in a multiprocessing multi-window environment (usually a network environment) may need to be handled.

The control functions communicate with the window system, to initialize the programs, and to deal with any errors that take place during the execution of programs.

Contd…

Query functions: They provide useful information of API

that can be useful in an application. E.g. Camera parameters or values in the frame buffer.

To write device-independent programs, the implementation of the API need to take care of differences between devices, such as how many colors are supported or the size of the display.

There are applications where some properties of the particular implementation need to be known.

E.g. If the programmer knows in advance the display device at work supports only two colors rather than millions of colors, things the programmer chooses might be different.

A good API provides this information through a set of query functions.

Query functions

GL (Graphics Library): OpenGL function names begin

with the letters gl and are stored in a library usually referred to as GL. There are a few related libraries:

Graphics utility library (GLU): This library uses only GL functions, but contains code for common objects, such as spheres, that users prefer not to have to write repeatedly. This library is available in all OpenGL implementations.

GL Utility Toolkit (GLUT): It addresses the problems of interfacing with the window system. It provides the minimum functionality that should be expected in any modern windowing system. System specific library is required for establishing interaction But instead of using a diff library every time, we use readily

available GLUT – provides min functionality expected in any modern windowing system

The OpenGL Interface

Figure below shows the organization of the

libraries for an X Window system environment. Note that various other libraries are called

from the OpenGL libraries, but that the application program does not need to refer to these libraries directly. A similar organization holds for other environments, such as Microsoft Windows.

Contd…

OpenGL makes heavy use of macros to increase

code readability and to avoid the use of magic numbers. Thus, strings such as GL_FILL and GL_POINTS are defined in header ( . h) files. In most implementations, one of the include lines

#include <GL/glut.h> or #include <glut.h> is sufficient to read in glut.h, gl.h, and glu. h.

Contd..

OpenGL basic library has a small set of primitives

an additional library, GLU, contains a richer set of objects derived from the basic library.

OpenGL supports 2 classes of primitives: Geometric primitives Image or raster primitive

Geometric primitives include points, line segments, polygons, curves and surfaces These primitives pass through a geometric pipeline,

where they are subjected to a series of geometric operations

Raster primitives, such as array of pixels, lack geometric properties and hence cannot be manipulated in same way

Primitives and attributes

The basic OpenGL primitives are specified via

points in space or vertices. Thus, the programmer defines objects with sequences of the form

glBegin(type); glVertex*( . . .); glVertex*(...);glEnd(); The value of type specifies how OpenGL interprets

the vertices to define geometric objects

Primitives and attributes

Other code and OpenGL function calls can occur

between glBegin and glEnd. E.g. Attributes can be changed or calculations can

be performed for the next Vertex between glBegin and glEnd, or between two invocations of glVertex

A major conceptual difference between the basic geometric types is whether or not they have interiors.

Aside from the point type, all the other basic types will be defined either in terms of vertices or by finite pieces of lines, called line segments

Of course, a single line segment is itself specified by a pair of vertices

Contd…

The line segment is of such importance that it

can be considered a basic graphical entity. The use of line segments can be:

To define approximations to curves. To connect data values for a graph. For the edges of closed objects, such as

polygons, that have interiors.

Contd…

Line segments (GL_LINES) The line-segment type

causes successive pairs of vertices to be interpreted as the endpoints of individual segments. Because the interpretation is done on a pair wise basis, successive segments usually are disconnected.

Polylines (GL_LINE_STRIP) It is used if successive vertices (and line segments) are to be connected. Many curves can be approximated via a suitable polyline.

GL_LINE_LOOP: If the polyline need to be closed the final vertex is located in the same place as the first, or GL_LINE_LOOP can be used which will draw a line segment from the final vertex to the first, thus creating a closed path.

Line segments and polylines can model the edges of

objects, but closed objects also may have interiors as shown in figure

Polygon refers to an object that has a border that can be described by a line loop, but has an interior.

Polygons play a special role in computer graphics because they can be displayed rapidly and they can be used to approximate arbitrary or curved surfaces.

The performance of graphics systems is measured by the number of polygons per second that can be displayed.

Polygon Basics

Only its edges be displayed. Its interior be filled with a solid color, or a

pattern Either display or not display the edges.

Outer edges of a polygon can be defined easily by an ordered list of vertices. But if the interior is not well defined, then the

polygon may be rendered incorrectly.

Ways of displaying polygons

Three properties will ensure that a polygon will be

displayed correctly: It must be simple, convex, and flat.

Simple: A 2-D polygon in which no pair of edges cross each

other. They will have well-defined interiors.

Although the locations of the vertices determine whether or not a polygon is simple, the cost of testing is sufficiently high that most graphics systems require that the application program do any necessary testing.

Non-simple: Graphics system must handle by some means if a non-

simple polygon is to be displayed and to define an interior for a non-simple polygon.

Three properties of a polygon

An object is convex if all points on the line segment

between any two points inside the object, or on its boundary, are inside the object regardless of the type of the object and its dimension (whether 2-D or 3-D).

Convex objects include triangles, tetrahedra, rectangles, circles, spheres, and parallelepipeds.

There are various tests for convexity. However, like simplicity testing, convexity testing

is expensive and usually is left to the application program.

Convex

Convex objects

In 3-D, polygons present a few more difficulties,

because, unlike all 2-D objects, they are not necessarily flat i.e., all vertices that define polygon need not lie in the same plane.

One property that most graphics systems exploit, and that can be used, is that any three vertices that are not collinear determine both a triangle and the plane in which that triangle lies.

Hence, the use of only triangles is safe in rendering such objects correctly.

Flat

For objects with interiors, we can specify following types Polygons (GL_POLYGON): Successive vertices define line segments, and a line segment connects the

final vertex to the first. The interior is filled according to the state of the relevant

attributes. Note that a mathematical polygon has an inside and an outside that are

separated by the edge. The edge itself has no width. Consequently, most graphics systems allow to fill the polygon with a

color or pattern or to draw lines around the edges, but not to do both.

In OpenGL, glPolygonMode function can be used to select edges instead of fill (the default).

However, to draw a filled polygon and to display its edges, it must be drawn twice, once in each mode, or a polygon and a line loop with the same vertices must be drawn.

Polygon types in OpenGL

These objects are special cases of

polygons. Successive groups of three and four vertices are interpreted as triangles and quadrilaterals, respectively.

Using these types may lead to a rendering more efficient than that obtained with polygons.

Triangles and Quadrilaterals (GL_TRIANGLES, GL_QUADS)

These objects are based on groups of

triangles or quadrilaterals that share vertices and edges.  

In the triangle_strip, for example, each additional vertex is combined with the previous two vertices to define a new triangle.

Strips and Fans (GLTRIANGLE_STRIP, GL_QUAD_STRIP, GL_TRIANGLE_FAN)

For the quad_strip, two new vertices are

combined with the previous two vertices to define a new quadrilateral.

A triangle fan is based on one fixed point. The next two points determine the first triangle, and subsequent triangles are formed from one new point, the previous point, and the first (fixed) point.

Strips and Fans (GLTRIANGLE_STRIP, GL_QUAD_STRIP, GL_TRIANGLE_FAN)

Many curved surfaces can be approximated using

fans and strips. E.g. To approximate to a sphere, a set of polygons

defined by lines of longitude and latitude as shown can be used. Either quad strips or triangle strips can be used for the purpose.

Consider a unit sphere. It can be described by the following three equations:

x(θ, Ø)= sinθ cosØ ,y(θ, Ø)= cosθ cosØ,z(θ, Ø) = sinØ.

Approximating a Sphere

Circles of constant longitude can be obtained by

fixing θ and varying Ø. Likewise, circles of constant latitude can be

obtained by fixing Ø and varying θ. Quadrilaterals can be defined by generating points

at fixed increments of θ. Degrees must be converted to radians for the

standard trigonometric functions. The code for the quadrilaterals corresponding to

increments of 20 degrees in θ and to 20 degrees in Ø is, given below:

Contd…

for(phi=-80.0; phi<=80.0; phi+=20.0){phir=c*phi;phir20=c*(phi+20);glBegin(GL_QUAD_STRIP);for (theta=-180.0; theta<=180.0; theta+=20.0){thetar=c*theta;x=sin(thetar)*cos(phir);y=cos(thetar)*cos(phir);z=sin(phir);glVertex3d(x,y,z);x=sin(thetar)*cos(phir20);y=cos(thetar)*cos(phir20);z=sin(phir20);glVertex3d(xty,z);}glEnd( );}

code

But strips can not be used at the poles, because all lines of longitude converge there. Instead two triangle fans one at each pole can be used, as follows:

glBegin(GL_TRIANGLE_FAN);glVertex3d(0.0, 0.0, 1.0);c=M_PI/180.0;c80=c*80.0;z=sin(c80);for(thet=-180.0;theta<=180.0;theta += 20.0){thetar=c*theta;x=sin(thetar)*cos(c80);y=cos(thetar)*cos(c80);glVertex3d(x,y,z);}glEnd( ); 

Contd…

glBegin(GL_TRIANGLE_FAN);glVertex3d(0.0, 0.0, -1.0);z = -sin(c80);for(theta=-180.0; theta<=180.0; theta += 20.0){thetar=c*theta;x=sin(thetar)*cos(c80);y=cos(thetar)*cos(c80);glVertex3d(x,y,z);}glEnd( );

Contd..

In computer graphics text may need to be

displayed in a multitude of fashions by controlling type styles, sizes, colors, and other parameters. (Note that in non graphical applications, a simple set of characters, are displayed in the same manner).

Graphics applications must provide a choice of fonts. Fonts are families of type faces of a particular style, such as Times, Computer Modern, or Helvetica.

Text