Creating Graphics with

OpenGL
Introduction
• Computer graphics is mostly mastered by practicing; such as by
writing and testing programs that produce a variety of pictures.
• An environment that allows one to write and execute programs is
required.
• The environment should generally include hardware for display of
pictures, and software tools that written programs can use to perform
the actual drawing of pictures.
• This session presents the Application Programming Interface (API) for
use in producing graphics.
Outline
• Definition of OpenGL.
• Description of the fundamental elements of OpenGL.
• Writing programs for making simple graphics in OpenGL.
• Illustration of object’s viewports and perform clipping on
graphics.
OpenGL
• OpenGL is an application programming interface (API) for
creating 2D and 3D graphic images.
• OpenGL specifies a set of commands in which each
command directs a drawing action or causes special effects.
• OpenGL is independent of windowing characteristics of each
operating system.
OpenGL Fundamentals
• OpenGL allows one to draw graphics primitives (lines,
polygons, points, etc.).
• Primitives are specified and other OpenGL operations are
described by issuing commands in the form of function calls.
• Primitives are defined by a group of one or more vertices.
• A vertex defines a point, an endpoint of a line, or a corner of
a polygon where the two edges meet.
• Data consisting of vertex coordinates, colours, texture coordinates,
etc., is associated with a vertex, and each vertex and its associated
data are processed independently, in order and in the same way.
• Commands are always processed in order in which they are received,
although there may be an intermediate delay before a command
takes effect.
• This means that each primitive is drawn completely before any
subsequent command takes effect.
Basic OpenGL Operation
• As shown by the first block in the diagram, rather than having all
commands proceed immediately through the pipeline, some of the
commands can be accumulated in a display list for processing at a
later time.
• The evaluator stage of processing provides an efficient means for
approximating curve and surface geometry by evaluating polynomial
commands of input values.
• During the next stage, per-vertex operations and primitive assembly,
OpenGL processes geometric primitives—points, line segments, and
polygons, all of which are described by vertices.
• Vertices are transformed and lit, and primitives are clipped
to the viewport in preparation for the next stage.
• Rasterization produces a series of frame buffer addresses
and associated values using a two-dimensional description of
a point, line segment, or polygon.
• Each fragment produced is fed into the last stage, per-
fragment operations, which performs the final operations
on the data before it is stored as pixels in the frame buffer.
• Input data can be in the form of pixels rather than vertices.
• Such data, which might describe an image for use in texture
mapping, skips the first stage of processing described above
and instead is processed as pixels, in the pixel operations
stage.
• The result of this stage is either stored as texture memory,
for use in the rasterization stage, or rasterized and the
resulting fragments merged into the frame buffer just as if
they were generated from geometric data.
• All elements of OpenGL state, including the contents of the texture
memory and even of the frame buffer, can be obtained by an OpenGL
application.
• So far, from the definition and fundamentals of OpenGL as an API for
creating graphics; you should be able to answer the following
questions:
- Define OpenGL.
- Describe the way in which drawing simple graphics using OpenGL can be
achieved.
Simple Drawings using OpenGL
• Every graphics program begins with some initializations to establish
the desired display mode and set up a coordinate system for
specifying points, lines, etc.
• Simple graphics drawings use the Cartesian coordinate system with x
and y coordinates representing pixels extending to the right and
downward/upward directions respectively.
Display Layouts
• The Figure above shows the different modes in which simple
graphics can be drawn.
• In part (a) the entire screen is used for drawing: the display is
initialized by switching it into “graphics mode”, and the
coordinate system is established as shown.
• Coordinates x and y are measured in pixels, with x increasing
to the right and y increasing downward.
• In part (b) a more modern "window-based" system is shown.
• It can support a number of different rectangular windows on
the display screen at one time.
• Initialization involves creating and “opening” a new window
(which can be called the screen window) for graphics.
• Graphics commands use a coordinate system that is attached
to the window: usually x increases to the right and y
increases downward.
• Part (c) shows a variation where the initial coordinate system
is “right side up”, with y increasing upward.
Basic Drawing
• Each system normally has some elementary drawing tools that help to
get started.
• The most basic has a name like setPixel(x, y, color): it sets the
individual pixel at location (x, y) to the color specified by color.
• It sometimes goes by different names, such as putPixel(), SetPixel(),
or drawPoint().
• Along with setPixel() there is almost always a tool to draw a straight
line, line(x1, y1, x2, y2), that draws a line between (x1, y1) and (x2,
y2). In other systems it might be called drawLine() or Line().
• The commands:
line(100, 50, 150, 80);
line(150, 80, 0, 290);
• would draw the pictures shown in each system in the
previous Figure.
• Other systems have no line() command, but rather use
moveto(x, y) and lineto(x, y).
• They stem from the analogy of a pen plotter, where the pen
has some current position.
• The notion is that moveto(x, y) moves the pen invisibly to location (x,
y), thereby setting the current position to (x, y); lineto(x, y) draws a
line from the current position to (x, y), then updates the current
position to this (x, y).
• Each command moves the pen from its current position to a new
position. The new position then becomes the current position.
• The pictures in previous Figure would be drawn using the commands:
moveto(100, 50);
lineto(150, 80);
lineto(0, 290);
Event-driven Programming
• Most windows-based programs are event-driven; that is the program
responds to various events, such as a mouse click, the press of a keyboard
key, or the resizing of a screen window.
• The system automatically manages an event queue, which receives
messages that certain events have occurred, and deals with them on a first-
come first-served basis.
• A programmer organizes a program as a collection of callback functions
that are executed when events occur.
• A callback function is created for each type of event that might occur.
• When the system removes an event from the queue it simply executes the
callback function associated with the type of that event.
• OpenGL comes with a Utility Toolkit which provides tools to
assist with event management.
• For instance glutMouseFunc(myMouse) registers the
function myMouse() as the function to be executed when a
mouse event occurs.
• The prefix “glut” indicates it is part of the OpenGL Utility
Toolkit.
• The programmer puts code in myMouse() to handle all of
the possible mouse actions of interest.
A skeleton example of a main() for an event-
driven function
• glutDisplayFunc(myDisplay);
• Whenever the system determines that a screen window
should be redrawn it issues a “redraw” event.
• This happens when the window is first opened, and when
the window is exposed by moving another window off of it.
• Here the function myDisplay() is registered as the callback
function for a redraw event.
• glutReshapeFunc(myReshape);
• Screen windows can be reshaped by the user, usually by dragging
a corner of the window to a new position with the mouse.
• (Simply moving the window does not produce a reshape event.)
Here the function myReshape() is registered with the “reshape”
event.
• As we shall see, myReshape() is automatically passed arguments
that report the new width and height of the reshaped window.
• glutMouseFunc(myMouse);
• When one of the mouse buttons is pressed or released a
mouse event is issued.
• Here myMouse() is registered as the function to be called
when a mouse event occurs.
• myMouse() is automatically passed arguments that describe
the mouse location and the nature of the button action.
• glutKeyboardFunc(myKeyboard);
• This registers the function myKeyboard() with the event of
pressing or releasing some key on the keyboard.
• myKeyboard() is automatically passed arguments that tell
which key was pressed.
• Conveniently, it is also passed data as to the location of the
mouse at the time the key was pressed.
• glutMainLoop();
• When this is executed the program draws the initial picture and
enters an unending loop, in which it simply waits for events to occur.
• (A program is normally terminated by clicking in the “go away” box
that is attached to each window).
Creating Graphics Window
• The first task is to open a screen window for drawing.
• Because OpenGL functions are device independent, they provide no
support for window control on specific systems.
• The Figure below shows a skeleton for the entire main() function for a
program that will draw graphics in a screen window.
• The first five function calls use the toolkit to open a window for
drawing with OpenGL.
• The first five functions initialize and display the screen window in
which the program will produce graphics.
• A brief description of what each one does is as follows:
• glutInit(&argc, argv); This function initializes the toolkit. Its
arguments are the standard ones for passing command line
information.
• glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); This function
specifies how the display should be initialized.
• The built-in constants GLUT_SINGLE and GLUT_RGB, which are OR’d
together, indicate that a single display buffer should be allocated and
that colors are specified using desired amounts of red, green, and
blue.
• glutInitWindowSize(640,480); This function specifies that the screen
window should initially be 640 pixels wide by 480 pixels high.
• When the program is running the user can resize this window as
desired.
• glutInitWindowPosition(100, 150); This function specifies that the
window’s upper left corner should be positioned on the screen 100
pixels from the left edge and 150 pixels down from the top.
• When the program is running the user can move this window
wherever desired.
• glutCreateWindow("Hello IS246 in B307!"); This function actually
opens and displays the screen window, putting the title “Hello IS246
in B307!” in the title bar.
• The remaining functions in main() register the callback functions as
described earlier, perform any initializations specific to the program at
hand, and start the main event loop processing.
• The programmer implements each of the callback functions as well as
myInit().