Interactive Computer Graphics

Lecture 2: The programming approach to building graphical

applications using OpenGL API.

Outline.

1. The implementation of the drawing in Graphics library.

• Set of Primitives.• The operations defined on this set.

1. The pen-plotted model approach.1. Pen-plotted drawing.2. Example: draw the square rotated 45

degrees in clockwise direction.

1. The Synthetic-camera model approach.1. Synthetic-camera model drawing.

2. Example: draw the square rotated by an arbitrary angle.

2. The primitives of the OpenGL library.• The value types in OpenGL.• The function naming convention. • The list of primitives.• The definitions of object in OpenGL.

1. Different primitives:o Point.

o Attributes.o Implementation. How to adjust the

attributes.o Line Segment.

o Attributes.o Implementation. How to adjust the

attributes.o Polygon.

o Attributes.o Implementation. How to adjust the

attributes.

Implementation of the drawing in Graphics library.

• To draw some picture we should define the object (s).

• Any object is a combination of some sub objects, sub object – of sub sub objects, etc. Thus, we need to start from some “minimal” object – atomic object.

• Therefore, each library should have a set of objects which it knows to draw.

• This means that any object from the set can be drawn by a well-defined sequence of call(s) to Library API (this may be a single function or some set of calls).

• This set of the library’s minimal objects is denoted as the set of “library’s primitives”

• The set of operations on the primitives is defined to build composite objects and / or change the state of existing object.

• As a result any group of objects (scene) can be built by applying the operations to primitives.

1. Pen-plotted model approach.

• Depending on the {primitive, operations} definition we can separate two principally different approaches to the computer drawing.

• To understand this distinction we compare the drawing in pen-plotted model and in synthetic-camera model.

• Toward this end we’ll consider the example: draw a square and rotate it to an angle of 45 degrees.

• Drawing in the pen-plotted model:

– The only primitive is “line”

– The operations:

• MoveTo (x0, y0) – set the pen in the point with coordinates (x0, y0)

• LineTo (x1, y1) – draw the line from the point (x0, y0) up to point (x1, y1).

• We draw directly in the window, so the Window Coordinate System is used.

• Window, its parts, and Window Coordinate System. Title Bar Menu Bar

Tool Bars

Status Bars

Scroll Bars

(if needed)

Client area place for drawing our paper

X

Y

(0,0)

(0,0)

Window Coordinate System Client Coordinate System

X X

Y Y

We can draw only in the Client area.

Therefore, in Graphics we use the Client Coordinate System

• Example 1. – Let us draw a square with a side of length 50

with the left-upper corner in the point (300, 300)

• MoveTo(300, 300);• LineTo (350, 300);• LineTo (350, 350);• LineTo (300, 350);• LineTo (300, 300);

– To draw rotated square we must know the coordinates of all vertices, therefore using some trigonometry...

• Evaluation.

• AD = 50 AO = AD * cos(450) = 35.36• Point O: (325, 325), and after rotation:

– A = (325, 360.36); B = (360.36, 325);– C = (325, 289.64); D = (289.64, 325).

A B

CD

D

A

B

C

OO

• Program code• MoveTo(325, 360.36);• LineTo (360.36, 325);• LineTo (325, 289.64);• LineTo (289.64, 325);• LineTo (325, 360.36);

• Obviously, this way of drawing has disadvantages:– In the real world we have the same object in a

modified state; but in the graphics model it is a new object.

– To display the new state of the object we should perform hard computations.

2. The Synthetic-camera model approach.

1. Synthetic-camera model drawing.• In this model we intend to obviate the

difficulties of the pen-plotted model.• The drawing process includes the two parts:

– Build the object using the most appropriate coordinate system.

– Any state of this object may be implemented as transformations of the coordinate system.

• Therefore, we should build the object only once and display its state using the operations implemented in the graphics library (OpenGL in our course)

• Example 1. – Let us draw a square with a side of length 50 which

upper-left corner is in (300, 300)• Void GetSquare(GLfloat side)

{

GLfloat x = 300, y = 300;

glBegin(GL_POLYGON);

glVertex2f(x, y);

glVertex2f(x + side, y);

glVertex2f(x + side, y - side);

glVertex2f(x, y - side);

glEnd();

}

– The function builds the polygon connecting in series the given vertices. (We’ll study the details later)

• Pay an attention to the coordinate system we use here. It differs a little from the window coordinates:

• To rotate our square by 450 (or any other angle) in the square’s plane it is enough to use a very simple code:

Y

X

• void RotateSquare(GLfloat angle, GLfloat side){

glRotatef(angle, 0, 0, 1);GetSquare(side);

}• Now as response on WM_PAINT event, i.e. in the

display-callback function, we write:void display-call()

{glClear(GL_COLORBUFFER_BIT);RotateSquare(45, 50);glFlush();

} • This code is implemented in the SCMDemo program.

3. The primitives of the OpenGL library.

1. The value types in OpenGL• Any library uses data (values) and, hence, the

size of the memory to store a single value should be defined. This size in conjunction with the allowed operations define the type. Each value is defined as a value of some type.

• It is possible to use the types defined in Win32 API. OpenGL, however, defines its own types to be independent from the software installed on the host machine.

• These type names are defined in gl.h.

• For example: typedef unsigned char GLboolean;

Thus, we can use Boolean type variables even if the type “bool” is not defined in the current version of compier.

If we’ll want to use int64 type, it is enough modify

typedef int GLint;

in current gl.h (in one place only!) to

typedef int64 GLint;

• For each type OpenGL holds up as a correspondence a prefix that is used in names of functions which use values of this types.

• Cite as examples some types defined in OpenGL:

GLenumunsigned int32ui

GLbooleanunsigned char8ub

GLdoubledouble64 (real)d

GLfloatfloat32 (real)f

Glintint32 (integer)i

GLshortshort 16s

GLbytesigned char6b

Open GLC++ typeSize (bits)Prefix

2. The function naming convention• The names of the functions in OpenGL are built

in accordance to some rules.• A function name is built as:

– the prefix: ‘gl’– a human-readable name– a digit 2, 3, or 4 to set the dimensionless of the world

space; we’ll use the 2 0r 3 only.– a suffix to point out the type of variables, asi – Glint; f – GLfloat; d – GLdouble; s – GLshort.Some functions use the ‘v’ as a suffix to use the vector

as the input argument.

3. The list of primitives.

• The OpenGl library defines as primitives three types of an object:

• Point• Line segment• Polygon

• Any object in any program is built from components of these types.

• Note, that no 3D primitive is defined in the library.

• Frequently, it is convenient to use the ready (library) functions providing the drawing of more complex objects by a single call to the function. The extension of the set of the OpenGL primitives can be found in the GLU library. For example:

• gluCilinder• gluDisk

• Some 3D objects can be built by GLUT functions like

• glutWireSphere• glutSolidCube

4. The definition of an object in OpenGL.• Now we start to study the technique of the

primitives building.• Each object in OpenGL is defined by its

vertices included in the correct order into operator parentheses:

glBegin(<connection mode>); //TODO: set the vertices in

needed order

glEnd();• Connection mode is a constant defined in gl.h,

defining the type of the primitive. Note, that there are few different modes for line segment and polygon definitions.

• To define a vertex, OpenGL uses the following functions:– glVertex2f (GLfloat x, GLfloat y) to define a

vertex in 2D space; the coordinates are GLfloat type values.

– In a similar manner, there are glVertex2i, glVertex2d, glVertex2s, where i – Glint, d – GLdouble, s – GLshort.

– In a similar manner, there areglVertex3f(GLfloat x, GLfloat y, GLfloat z), …Note, that glVertex2f is essentially the glVertex3f

with z = 0. In a similar manner, there are glVertex3i, glVertex3d, glVertex3s

• There are the rarely used glVertex4f, … functions with arguments x, y, z, w. Note, that glVertex3f is the glVertex4f with w = 1.

• In each family of glVertex functions there is one like

glVertex3fv(GLfloat * pPoint)

• In this type functions we define the point by a vector as

GLfloat Point[] = {1.0, 2.0, 3.0};

glVertex3f(Point);

5. Different primitives.Now we’ll discuss the use of all of the primitives defining in OpenGL.It is required to define what are the attributes of each primitive. After that, we can select the needed tools from the library (OpenGL in our case) or to add a custom tool.

• Point.• AttributesEach point is defined by its

– color– coordinates– size

• Implementation. How to adjust the attributes.– Color.It can be defined in a call to the OpenGL APIfunction glColor3f, glColor4f and similar.glColor3f(GLfloat red, GLfloat green,

GLfloat blue)where red, green, and blue are the RGB –

components, measured in the range0.0 – 1.0, so that

(0.0, 0.0, 0.0) – black color (1.0, 1.0, 1.0) – white color (0.0, 1.0, 0.0) – green color, etc

– Coordinates The coordinates are specified by glVertexFunction. The connection mode is GL_POINTS.– Size

We can set the minimal size of point in pixels,i.e. on screen, using the function glPointSize(GLfloat

size). Default size = 1 pixel.

• Very important (!).The functions glColor and glPointSize are

examples of functions changing the state in the pipeline. This means that all the objects drawn after a call to this function type have the same attributes, until another function of this type is called with another argument.

• Therefore, to draw the two red points, which size is 2 pixels:

glColor3f(1.0, 0.0, 0.0);glPointSize(2.0);glBegin(GL_POINTS);

glVertex2i(2, 4);glVertex2f(12.5, 4.2);

glEnd();

• Draw the last point as magenta with size 4 pixels.

glColor3f(1.0, 0.0, 0.0);glPointSize(2.0);glBegin(GL_POINTS);

glVertex2i(2, 4); glColor3f(0.0, 1.0, 1.0); glPointSize(4.0);

glVertex2f(12.5, 4.2);glEnd();

• Example: GreatBear

• Note, that the pipeline diagram is defined by a sequence of execution operations, rather then by continuous code. In our example GreatBear the default pipeline is

• In interactive mode we haveSet Color Size = 1 First point … Size = 1

Set Color First point … Size = 1

Mouse Click

Change the point size

• Note, however, that the drawing in memory is performed only as a response to the WM_PAINT message, i.e. in the display-callback. Therefore, we should provide the following:

• All desired states must be set before the initializing of the call to Display callback.

• It is very undesirable to call this function directly.• The OS has to perform this call (to send WM_PAINT

event).• User can do this by minimize / maximize operations.• To do this from the program we need to call the

function glutPostRedisplay(), providing the redrawing of the window.

• The Primitive Line Segment.• Attributes.

– Color– Size (thickness)– Connection mode.

• Implementation.– Color glColor pipeline state– Size glLineWidth (GLfloat thickness)

• We see that any primitive in OpenGL API is defined by – Operator parenthesis glBegin – glEnd– Well-ordered set of points – vertices– Connection mode given by the argument of

the glBegin function.

• There are 3 constants to define connection modes for the line segment primitive:– GL_LINE_STRIP

• Connect all points sequentially in the numeration order

• Blue: the number of a point – upper digit,• Magenta: the number of a point – lower digit

1 2

4

3

4

2

5

– GL_LINE_LOOP

This is the same but the contour is closed:

– GL_LINES• If we have the n points then the result is set of two-

point line segments pt1-pt2, pt3-pt4, …, ptn-1 – ptn.

• If n is an odd number, then the last point ptn is displayed as isolated point. ..

1

2

3

45

12

5

4

1

6

13

7

8

9

GL_LINES

• The program LinePrimitives demonstrate these connection modes.

• We define the 10 points which connection depends on the set mode.

• Since the vertices are the necessary part of any object we can change the primitive type on the same set of the points. (GL_POINTS – the primitive “point”, others – line segment primitive).

• The operation regards only to the “custom” primitive. In this example we set the point size = 5 pixels as the fixed state. But this have no effect on the thickness of the line segment.

• In the library with only one primitive “point”, the line segment would be considered as a complex object built from “points”, and, as a result, its thickness would be equal to the size of a point.

• Therefore, the primitives are defined as independent objects with own set of operations (glPointSize for point, but glLineWidth for line segment).

• Thus the 3D objects from GLU and GLUT libraries are not the primitives in the true sense of this word.

• Creating menu.– To see the effect of the different connection

modes using, the program uses the context menu.

– This is the only type of a menu can be created by GLUT library tools (poor choice!)

– To create this type menu in the GLUT – based program:

• Design of the menu: how many items do we want.• Supply the menu handler function that is the

callback with predefined prototype and developer-defined name

• Create the menu. The proper (but not mandatory) place for this is the main function after glutCreateWindow and glutDisplayFunc.

– glutCreateMenu ( menu ); //argument is the name of the handler function.

• After that, we need to add all the items to the created menu. To this end, GLUT API defines the function

• In the sample program the definition is– void menu( int id)– glutAddMenuEntry( char *itemTitle, int itemID);

Obviously, the itemID must be unique in the scope of the same menu.

• On the final step of the menu creating we must define the User Interface control to work with the menu interactively.

• GLUT API gives to developer only one control to work with context menu. This is a mouse. Therefore, we can connect with the menu or left mouse button, or right, or middle once.

• To connect a menu to a mouse we call the function

– glutAttachMenu(<mouse - button>);Where <mouse - button> is

GLUT_RIGHT_BUTTON, orGLUT_LEFT_BUTTON, or

GLUT_MIDDLE_BUTTON.These constants are defined in the glut.h

• The callback

• Using of the menu.– When the user clicks on a menu item, the

inner implementation of the GLUT library provides the call to the menu-callback.

– As a result of the click, the OS creates an event and places it in the message queue of our window. After that, the message is retrieved in the message loop, and is sent to Window Procedure and, as a final stage, to the message handler, that is (in this case) the menu callback function.

– A windows OS defines the message as a structure, which contains message–related information.

– In this case the only information we can receive is the identifier of the clicked item.

– This fact essentially affects on the definition of the callback function prototype:

void <MenuCallBackName> (int itemID)

– We receive the pressed menu item identifier as the argument of the menu callback function.

– We see from this that the item identifier must be unique in the given menu only, but no more than this.

– In contrast to the event processing callback, the menu item does not contain any information. It only determines the task that application will perform as response.

• The Polygons.– The polygon (פוליגון או מצולע) is the object

having the bounded interior.– The building of the polygon includes:

• Determination of the vertices as the ordered set of the point – primitives.

• Determination of the boundary as the line primitive built as GL_LINE_LOOP.

• Determination the way the polygon will be rasterized.

• The polygon is the base building block to create the 3D objects, because we can use them to approximate curved surfaces bounding a 3D object.

• Polygons play a special role in computer graphics because we can display them rapidly. The performance of graphics systems is measured by the number of polygons per second that can be displayed.

• OpenGL is guaranteed to work properly if only the convex (מצולע מקומר) polygons are used.

• An object is convex, if all the points on a line segment between any two points inside the object, or on its boundary, are inside the object.

• Examples:– Convex:

– No convex

– What about these?

• Problem 1. How define whether the given point lays into a polygon?

• The method is very simple. We go from the point in question in arbitrary direction and calculate the number of the polygon boundary crossings, N. – if N = 2k, then it is the outer point– if N = 2k + 1, then this is the inner point

A

B

• The Primitive Polygon.• Attributes.

– Color– Rasterization mode– Connection mode.

• Implementation.– Color glColor pipeline state– Rasterization mode glPolygonMode(GLenum face, GLenum mode)

Where ‘face’ is an one from constants:GL_FRONT, GL_BACK, and

GL_FRONT_AND_BACKThe meaning of these flags will discuss later.

‘mode’ flag can be one from• GL_PONTS; Polygon vertices that are marked

as the start of a boundary edge are drawn as points. Point attribute GL_POINT_SIZE control the rasterization of the points.

• GL_LINE; Boundary edges of the polygon are drawn as line segments. As result, we can draw the contour of a polygon. How? • Hint: use in drawing of the one polygon the

both GL_LINE and GL_FILL flags (but GL_LINE | GL_FILL is not allowed).

• GL_FILL; The interior of the polygon is filled.

• Connection modes:– GL_POLYGON

Connect successive vertices by line segments as GL_LINE_LOOP

– GL_TRIANGLESSuccessive groups of three vertices are interpreted as triangles. The rendering of these special groups is more effective the rendering of general polygons

(pt1, pt2, pt3), (pt4, pt5, pt6), …if N <> 3k, then line segment and / or isolated points may appear

– GL_QUADSAs triangles but in groups of four vertices.

The rest may appear as triangle, line segment, and point.

– GL_TRIANGLE_STRIPBuild the triangles as(pt1, pt2, pt3), (pt2, pt3, pt4), (pt3, pt4, pt5), …– GL_TRIANGLE_FANThe triangles with the first point as the common

one. (pt1, pt2, pt3), (pt1, pt3, pt4), (pt1, pt4, pt5), …

• GL_QUAD_STRIPBuild the quadrilaterals as(pt1, pt2, pt3, pt4), (pt3, pt4, pt5, pt6), (pt5, pt6,

pt7, pt8), …

i.e. for k-quadrilateral: (pt2k, pt2k, pt2k+1, pt2k+2, )

• Example 1. Write the display-part program to draw the next picture:

• Solution– Number the points from 1 to 9 as on the

picture (the order of the numeration is not the part of the problem description)

– Define the 2D array of float values as the type.

typedef GLfloat point2[2];

1

2 4 6 8

3 5 7 9

– Define the array of vertices

point2 pt[] = {{x1, y1}, {x2, y2}, … {x9, y9}}

– Code

glBegin( GL_TRIANGLE_STRIP);

for(int I = 0; I < 9; I ++)

{

glVertex2fv(pt[i]);

}

glEnd();

• Example 2. Write the display-part program to draw the next picture:

• SolutionglBegin( GL_TRIANGLE_FAN);

for(int I = 0; I < 7; I ++) {

glVertex2fv(pt[i]); } glEnd();

1

2

3 45

6

57

• Example 3. Write the display-part program to draw the next picture:

1 35

7

2 242

• Solution

glBegin( GL_QUAD_STRIP);

for(int I = 0; I < 8; I ++)

{

glVertex2fv(pt[i]);

}

glEnd();

6

8

• The demonstration programs– PolygonPrimitives builds all types on the

same set of points as in the LinePrimitives program.Pay attention to the using of the GL_FILL (press on ‘f’) and GL_LINE (press on ‘l’) styles

– MouseMotion • glutMouseFunc• glutMotionFunc• GL_TRIANGLE_FAN

– Sierpinski gasket as example of the fractal.

• We’ll consider these programs in details in the next lecture.