Interactive Computer Graphics Graphics Programming James Gain and Edwin Blake Department of Computer Science University of Cape Town July 2002 jgain@cs.uct.ac.za Collaborative Visual Computing Laboratory

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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