Interactive Computer Graphics Graphics Programming

1
Interactive Computer GraphicsGraphics Programming

• James Gain and Edwin Blake
• Department of Computer ScienceUniversity of Cape
  Town
• July 2002jgain_at_cs.uct.ac.za

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

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

4
A First Pass

• for(k 0 k lt 5000 k)
• // pick a random vertex 0-2
• j rand()3
• // compute new point
• px (px vxj)/2.0
• py (py vyj)/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

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?

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)

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

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 ltGL/glut.hgt inherits glut.h, gl.h and
  glu.h

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)

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

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

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

13
Curved Objects

• Computer Graphics requires smooth complex objects
  (e.g. Geris 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

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)

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

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
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

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

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

20
Aspect Ratio Problems

• Aspect ratio is the ratio of a rectangles 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 (xw, yh)

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

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)

23
Gasket Program II
void display() typedef Glfloat point22
point2 v3 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 lt
5000 k) j rand()3
// compute new point p0 (p0
vj0)/2.0 p1 (p1
vj1)/2.0 // display new point
glBegin(GL_POINTS) glVertex2fv(p)
glEnd() glFlush()
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 p0 (p0 vj0) /
2.0 p1 (p1 vj1) / 2.0 p2 (p2
vj2) / 2.0 // display new
point glBegin(GL_POINTS) glColor3f(p0/250.0,
p1/250.0, p2/250.0) glVertex3fv(p) glEnd()