1 / 24

Interactive Computer Graphics Graphics Programming

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. Map of the Lecture. Introduce the OpenGL API Primitives Attributes Viewing Control

hudsonn
Download Presentation

Interactive Computer Graphics Graphics Programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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 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 Interactive Computer Graphics Contents

  4. 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 Interactive Computer Graphics Contents

  5. 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? Interactive Computer Graphics Contents

  6. 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) Interactive Computer Graphics Contents

  7. 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 Interactive Computer Graphics Contents

  8. 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 Interactive Computer Graphics Contents

  9. 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) Interactive Computer Graphics Contents

  10. 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 Interactive Computer Graphics Contents

  11. 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 Interactive Computer Graphics Contents

  12. 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 Interactive Computer Graphics Contents

  13. 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 Interactive Computer Graphics Contents

  14. 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); Interactive Computer Graphics Contents

  15. 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 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 Interactive Computer Graphics Contents

  17. 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 Interactive Computer Graphics Contents

  18. 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 Interactive Computer Graphics Contents

  19. 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 Interactive Computer Graphics Contents

  20. 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) 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 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); • } Interactive Computer Graphics Contents

  23. 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(); • } Interactive Computer Graphics Contents

  24. 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(); Interactive Computer Graphics Contents

More Related