1. Interactive Computer Graphics Graphics Programming
James Gain and Edwin Blake
Department of Computer Science University of Cape Town
July 2002
Collaborative Visual Computing Laboratory

2. Interactive Computer Graphics Contents
Map of the Lecture
Introduce the OpenGL API
Primitives
Attributes
Viewing
Control
Create a sample 2-D program, which can be easily extended to 3-D
18/01/2019
Interactive Computer Graphics Contents

3. Case Study: The Sierpinski Gasket
Recursive example from Fractal Geometry used to illustrate OpenGL
Algorithm:
Pick a random point P0 inside a triangle
Select a vertex V at random
Find the point P1 halfway between V and P0
Display P1
Let P0 = P1
Return to step 2
Each point has (x,y) coordinates in a suitable coordinatge system
OpenGL is 3-D but can easily implement 2-D as a subset
18/01/2019
Interactive Computer Graphics Contents

4. Interactive Computer Graphics Contents
A First Pass
for(k = 0; k < 5000; k++)
{ // pick a random vertex 0-2
j = rand()%3;
// compute new point
px = (px + vx[j])/2.0;
py = (py + vy[j])/2.0;
// display new point
glBegin(GL_POINTS);
glVertex2f(px, py);
glEnd(); }
glFlush();
px, py, vx[ ], vy[ ] initialized before the loop
OpenGL often uses #defines (GL_POINTS) to aid readability
glVertex* has many forms
* = nt or ntv, where n is dimension (2, 3, 4), t is type (i, f, d) and presence of v indicates that arguments are passed as an array
glFlush() forces immediate display
18/01/2019
Interactive Computer Graphics Contents

5. Interactive Computer Graphics Contents
Outstanding Issues
In what colour are we drawing?
Where on the screen does our image appear?
How large will the image be?
How do we create a demarcated area of the screen (a window) for our image?
How much of the 2-D coordinate system will appear on the screen?
How long will the image remain on the screen?
18/01/2019
Interactive Computer Graphics Contents

6. Interactive Computer Graphics Contents
The OpenGL API
Need the OpenGL API to resolve outstanding issues
A black box between user programs and I/O devices
Classes of functionality:
Primitives (points, line segments, polygons)
Attributes (colour, pattern, type face)
Viewing (synthetic camera control)
Transformation (rotation, translation and scaling of objects)
Input (deal with a variety of input devices)
Control (manage the windowing environment)
18/01/2019
Interactive Computer Graphics Contents

7. Interactive Computer Graphics Contents
Coordinate Systems
Early graphics systems restricted users to the units of the display
Device independent graphics frees the programmer from details of the input and output devices
API handles coordinate mapping
From world (problem) coordinates, usually floating point
To device (screen) coordinates, usually integers
Display device units make little sense if talking about galaxies or atoms
18/01/2019
Interactive Computer Graphics Contents

8. Interactive Computer Graphics Contents
The OpenGL Interface
Native OpenGL functions prefixed by “gl”
Graphics Utility Library (GLU) contains code for common objects (e.g. spheres)
GL Utility Toolkit (GLUT) provides window system management
#include <GL/glut.h> inherits glut.h, gl.h and glu.h
18/01/2019
Interactive Computer Graphics Contents

9. Interactive Computer Graphics Contents
Primitives
There is debate, similar to CISC vs. RISC, over how many primitives to support
OpenGL takes the middle ground
Primitives specified by vertex calls (glVertex*) bracketed by glBegin(type) and glEnd()
Line-based primitives: Line segments (GL_LINES), Polylines (GL_LINE_STRIP)
18/01/2019
Interactive Computer Graphics Contents

10. Interactive Computer Graphics Contents
Polygons
Polygons are objects with a line loop border and an interior
Polygons must be simple (no crossing edges), convex (the line segment between two interior points does not leave the polygon) and flat (planar)
Triangles always obey these properties and are often better supported in hardware
18/01/2019
Interactive Computer Graphics Contents

11. Interactive Computer Graphics Contents
Polygon Types
Polygons (GL_POLYGON) successive vertices define line segments, last vertex connects to first
Triangles and Quadrilaterals (GL_TRIANGLES, GL_QUADS) successive groups of 3 or 4 interpreted as triangles or quads
Strips and Fans (GL_TRIANGLE_STRIP, GL_QUAD_STRIP, GL_TRIANGLE_FAN) joined triangles or quads that share vertices
18/01/2019
Interactive Computer Graphics Contents

12. Interactive Computer Graphics Contents
Text
Stroke text (e.g. postscript fonts):
Constructed from closed curves and line segments
Can be manipulated (scaled, rotated) like any other graphical primitive and still retain detail
Takes up significant memory and processing
Raster text
Characters defined as bit blocks and placed in the frame buffer with a bit block transfer (bitblt)
Does not scale or rotate well
OpenGL text
glutBitmapCharacter(GLUT_BITMAP_8_BY_13, c);
Character with ASCII code c is placed at the current raster pos
glRasterPos* changes the raster position
Bitblt is often implemented as a single efficient operation
Raster Scaling requires pixel duplication
Raster Rotation moves pixels from their grid reference points
18/01/2019
Interactive Computer Graphics Contents

13. Interactive Computer Graphics Contents
Curved Objects
Computer Graphics requires smooth complex objects (e.g. Geri’s face)
Mathematical Definition:
Define an object mathematically with supporting functions for graphical operations (transformation, intersection, rendering, etc.)
Example: a circle can be represented by its centre and a radius
Advanced OpenGL supports some mathematical objects
Tesselation:
Approximating a curved surface by a mesh of convex polygons (often triangles)
Example: a circle can be approximated by a regular polygon with n sides
Rendering with polygon scan conversion ultimately requires tesselation
Polynomial curves and surfaces will be covered later
As the number of circle sides increases the approximation quality improves
Non PSC can use the mathematical definitions more directly
18/01/2019
Interactive Computer Graphics Contents

14. Interactive Computer Graphics Contents
Attributes
An attribute is any property that determines how a primitive will be rendered
Immediate Mode graphics:
Primitives are not retained. Instead they are displayed and then discarded
Attributes are retained. Always uses the last retained attribute for that primitive
Attributes of Primitives
Point (size; colour)
Line Segment (colour; thickness; type - solid, dashed, dotted)
Polygon (colour; fill - solid, pattern, empty)
Text (direction; size; font; style - bold, italic)
Example: glPointSize(2.0);
Examples of attributes, not the complete list
18/01/2019
Interactive Computer Graphics Contents

15. Interactive Computer Graphics Contents
Colour
Computer colour models are a course approximations of the human visual system
RGB Colour Model:
Colour is a combination of Red, Green and Blue primitives in the range 0-1
Conceptually separate frame buffers for each red, green and blue channel
Typically in 24 bit colour each channel is allocated 1 byte ≈ 16M colours
OpenGL RGBA:
A = alpha channel, which encodes transparency (1) / opacity (0)
glClearColor(1.0, 1.0, 1.0, 0.0); clears the window to solid white
glColor4f(1.0, 0.0, 0.0, 0.5); sets the colour to half transparent red
A more complete discussion of colour (physiology and colour models) will be given later
18/01/2019
Interactive Computer Graphics Contents

16. Viewing
The synthetic camera model separates the specification of the objects from the camera
2-D Viewing:
Display a rectangular portion (clipping rectangle) of the 2-D coordinate plane
The size and position of the window on screen are independent of the clipping rectangle
A special case of 3-D orthographic projection
Before Clipping After Clipping
18/01/2019
Interactive Computer Graphics Contents

17. Interactive Computer Graphics Contents
Orthographic View
Points projected onto the viewing plane (z = 0):
(x,y,z)  (x,y,0)
Primitives outside the view volume are cliiped
OpenGL:
void glOrtho(GLdouble left, GLdouble right, GLdouble bottom, GLdouble top, GLdouble near, GLdouble far)
Default: glOrtho(-1.0, 1.0, -1.0, 1.0, -1.0, 1.0);
2-D alternative: void gluOrtho2D(GLdouble left, Gldouble right, GLdouble bottom, Gldouble top) same as glOrtho with near = -1.0 and far = 1.0
Unlike a real camera, points behind the viewing plane (but inside the viewing volume) are displayed
18/01/2019
Interactive Computer Graphics Contents

18. Interactive Computer Graphics Contents
Matrix Modes
Computer Graphics relies on concatenating transformations. This is achieved by multiplying matrices
OpenGL stores Projection (viewing transformation) and ModelView (object transformation) matrices as part of its state
Changing matrices:
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrtho(0.0, 500.0, 0.0, 500.0, -1.0, 1.0);
glMatrixMode(GL_MODELVIEW);
Sets up a 500x500 clipping rectangle with lower left at (0,0)
Always return to a consistent matrix mode
Transformations covered in the next lecture
18/01/2019
Interactive Computer Graphics Contents

19. Interactive Computer Graphics Contents
Control Functions
Need to interact with the windowing environment to display graphics. Our approach: keep complexity to a minimum
Pixel positions in a window are measured in integer window coordinates
Rendering origin at lower left but mouse origin at upper left
OpenGL initialization:
glutInit(int * argcp, char ** argv);
intitiate windows interaction - pass command line arguments
glutCreateWindow(char * title);
create a window with title in the title bar
glutInitDisplayMode(GLUT_RGB | GLUT_DEPTH | GLUT_DOUBLE);
specify RGB colour, hidden surface removal and double buffering
glutInitWindowSize(480, 640); a 480x640 window
glutInitWindowPosition(0, 0); at top left of screen
18/01/2019
Interactive Computer Graphics Contents

20. Interactive Computer Graphics Contents
Aspect Ratio Problems
Aspect ratio is the ratio of a rectangle’s width to its height
Distortion if the aspect ratio of the viewing rectangle (glOrtho) does not match the window (from glutInitWindowSize)
Viewport:
A rectangular area of the display window used to solve aspect ratio distortion
void glViewport(GLint x, GLint y, GLsizei w, GLsizei h)
Lower left (x,y); upper right (x+w, y+h)
Complicated by window resizing
18/01/2019
Interactive Computer Graphics Contents

21. OpenGL Program Structure
display():
A function which contains all the rendering calls
Executed during window init, window moves and window uncovering
glutDisplayFunc(display); sets up the callback function for redisplay
myinit():
Set the OpenGL state variables associated with viewing and attributes
Contains parameters that are set only once, independantly of display
18/01/2019
Interactive Computer Graphics Contents

22. At Last: the Gasket Program I
void myinit()
{ // attributes
glClearColor(1.0, 1.0, 1.0, 0.0); // white background
glColor3f(0.0, 0.0, 0.0);
// draw in black
// set up viewing
glMatrixMode(GL_PROJECTION);
gluLoadIdentity();
glOrtho(0.0, 500.0, 0.0, 500.0, -1.0, 1.0);
glMatrixMode(GL_MODELVIEW); }
18/01/2019
Interactive Computer Graphics Contents

23. Interactive Computer Graphics Contents
Gasket Program II
void display()
{ typedef Glfloat point2[2];
point2 v[3] = {{0.0,0.0},{250.0, 500.0}, {500.0, 0.0}};
int i, j, k;
int rand();
point2 p = {75.0, 50.0}
\\ random point in triangle
glClear(GL_COLOR_BUFFER_BIT);
for(k = 0; k < 5000; k++)
{ j = rand()%3;
// compute new point
p[0] = (p[0] + v[j][0])/2.0;
p[1] = (p[1] v[j][1])/2.0;
// display new point
glBegin(GL_POINTS);
glVertex2fv(p);
glEnd(); }
glFlush();
18/01/2019
Interactive Computer Graphics Contents

24. Interactive Computer Graphics Contents
3-D Sierpinski Gasket
Replace:
Triangle with Tetrahedron
2-D points with 3-D points
Colour the vertices to help with visualization
// compute new point
p[0] = (p[0] + v[j][0]) / 2.0;
p[1] = (p[1] + v[j][1]) / 2.0;
p[2] = (p[2] + v[j][2]) / 2.0
// display new point
glBegin(GL_POINTS);
glColor3f(p[0]/250.0, p[1]/250.0, p[2]/250.0);
glVertex3fv(p);
glEnd();
18/01/2019
Interactive Computer Graphics Contents