CS 371 Computer Graphics Spring 2005

Goals Windowing Systems Window Basics OpenGL Event-driven Programming A simple C++ program A (Barely) More Interesting Example A More Interesting Example Still By Popular Demand: (Lame) Animation

Lecture 17: Introduction to OpenGL

Goals

• Basics for manipulating windows and rendering wireframe objects
• OpenGL functions necessary for above.

Windowing Systems

• Best example: X Windows. On Microsoft Windows and MacOS, the WS is integrated into the OS.
• Manage the display/frame buffer; programs request windows from the system.
• Control the placement/manipulation of windows (but not their contents!).
• Programmer tells WS location/size of windows and how to display contents.
• Can be highly configurable. Many window managers exist for X Windows.
• A WS is an application of 2-D graphics.

Window Basics

• A graphics window allows programmer to manipulate at the pixel level.
• A GW has its own local integer coordinate systems, with (usually) upper left corner at (x,y) = (0,0) and lower right corner at (x,y) = (win_width, win_height).
• Provide methods for "simple" operations:
  • Set/get pixel value at (x,y).
  • Move to (x,y).
  • Line to (x,y) from current position.
• Image coordinates may differ from screen coordinates.
  • Example: Graphing y = sin(x)
• Screen window is often called the viewport

OpenGL

• Problem: Want graphics programs to run on Mac/Windows/Unix without modification.
• (Partial) Solution: Separate graphics rendering from windowing operations.
• OpenGL is a device-independent graphics library based on the GL library from Silicon Graphics.
• Some features of OpenGL
  • Allows for creation and manipulation of basic geometric primitives (vertices, segments, triangles, polygons) and arrays of pixels.
  • Associates material properties with geometric primitives
  • Provides facilities for transforming (translation, rotation, scaling) and clipping geometric objects.
  • Includes facilities for lighting, shading, texture mapping.
  • And more....
• Several more complex geometric objects, including quadrics, tesselations and NURBS, are provided by GLU, the OpenGL Utility Library.
• A fair degree of WS independence can be obtained through use of GLUT, the OpenGL Utility Toolkit, which provides facilities for multiple graphics windows with rudimentary window interaction.
• Taken together GL, GLU, and GLUT provide hundreds of procedures and functions for rendering high-quality 3-D images.

Event-driven Programming

• Most graphics programming is event-driven: the WS waits for events, each of which can trigger a programmer-defined action.
• GLUT provides the event loop; the programmer registers (provides) callback functions for particular events (most, but not all, events can be ignored).
• The event loop is is invoked by the function

    glutMainLoop();
  

• There are several callback methods. The most important is the display callback (it needn't be called "display"!), which is registered by the function

    glutDisplayFunc(display_func_name)
  

• Before glutMainLoop() can be called, the callbacks must be registered and other initialization must take place, including the creation of the screen window.

A simple C++ program

• Here is a trivial OpenGL program. It creates a window and paints it purple.

  // basic.cc
  // (C) 2002 Bill Lenhart
  
  // A trivial openGL progam
  #include <GL/glut.h> // this includes GL.h and GLU.h
  #include <iostream.h>
  
  void display(void)
  {
    // All we do is clear the window. (i.e., paint it in the "erase" color
    glClear(GL_COLOR_BUFFER_BIT);
    // For fun, comment out the line above.
    glFlush();
  }
  
  int main(int argc, char** argv)
  {
    // Initialize GLUT library
    glutInit(&argc, argv);
  
    // Size and position the window (otherwise GLUT chooses size and position)
    glutInitWindowSize(300,200);
    glutInitWindowPosition(400,400);
  
    // Create and name the window
    glutCreateWindow("Hello");
  
    // did this succeed?
    cout << glGetError() << endl;
  
    // Set "erase" color to purple (default is black)
    // Such functions should only be called AFTER creating the window
    glClearColor(0.5, 0.0, 0.5, 0.0);
  
    // Function called when window is (re-)displayed.  Needed!
    glutDisplayFunc(display);
  
    // GLUT handles the event loop
    glutMainLoop();
    return 0;
  }
  

• The program above can be entered/edited using emacs and run with the (unpleasantly long command):

  g++  -I/usr/X11R6/include -g basic.cpp  -L/usr/X11R6/lib -lglut -lGLU -lGL -lXmu -lXi -lXext -lX11 -lm -o basic
  

• Note the three new libraries -lglut -lGLU -l GL, and that -lCS371 is gone (but not forgotten).
• Note also the new include: <GL/glut.h>. This header file includes the gl.h and glu.h header files.
• The executable program is then called basic.
• For convenience, a makefile is provided. To compile this program, type make PROG=basic in the same directory as basic.cc.

A (Barely) More Interesting Example

• The following program introduces the reshape callback function, which is called each time the screen window is (re)shaped by the window system.

  // basic.cc
  // (C) 2002 Bill Lenhart
  
  // A trivial openGL progam
  #include <GL/glut.h> // this includes GL.h and GLU.h
  #include <iostream.h>
  
  bool purple = true;
  
  // ALL (!) rendering should be done by this function
  void display(void)
  {
    // All we do is clear the window. (i.e., paint it in the "erase" color
    glClear(GL_COLOR_BUFFER_BIT);
    // For fun, comment out the line above.
    glFlush();
  }
  
  void reshape(int width, int height)
  {
    // Just to show you that it does something---normally you DO NOT
    // render from this function
    if(purple)
      glClearColor(0.0, 0.5, 0.5, 0.0);
    else
      glClearColor(0.5, 0.0, 0.5, 0.0);  
  
    purple = !purple;
  
    glFlush();
  }
  
  int main(int argc, char** argv)
  {
    // Initialize GLUT library
    glutInit(&argc, argv);
  
    // Size and position the window (otherwise GLUT chooses size and position)
    glutInitWindowSize(300,200);
    glutInitWindowPosition(400,400);
  
    // Create and name the window
    glutCreateWindow("Hello");
  
    // did this succeed?
    cout << glGetError() << endl;
  
    // Set "erase" color to purple (default is black)
    // Such functions should only be called AFTER creating the window
    glClearColor(0.5, 0.0, 0.5, 0.0);
  
    // Function called when window is (re-)displayed.  Needed!
    glutDisplayFunc(display);
  
    // Function called when window is (re-)sized.  Needed!
    glutReshapeFunc(reshape);
  
    // GLUT handles the event loop
    glutMainLoop();
    return 0;
  }
  
  

A More Interesting Example Still

• The following program defines a camera and uses it to view a wireframe sphere. This program illustrates the way in which different parts of the OpenGL pipeline are invoked from different parts of the program.

  // basic3D
  //
  // A simple camera setup for 3D viewing
  // 
  // (C) 2002 Bill Lenhart
  
  #include <GL/glut.h>
  #include <iostream>
  
  // Constants for initial values
  // the location of the upper left corner of the frame
  static const int CORNER_X = 200;
  static const int CORNER_Y = 200;
  
  // the viewport bounds
  static const int VIEWPORTWIDTH=200;
  static const int VIEWPORTHEIGHT=200;
  
  // Camera parameters
  double eyeX = 20.0, eyeY = 30.0, eyeZ = 40.0;
  double lookAtX =0.0,  lookAtY = 0.0, lookAtZ = 0.0;
  double upX = 0.0, upY = 1.0, upZ = 0.0;
  
  // View volume parameters (aspect ratio determined by window on screen)
  double vvFieldOfView = 1.5708;
  double vvNear=1.0;
  double vvFar=80.0;
  
  // color info
  float bgRed = 0.5f, bgGreen = 0.0f, bgBlue = 0.5f; // purple
  float fgRed = 1.0f, fgGreen = 1.0f, fgBlue = 0.0f; // yellow
  
  // The GLUT window resizing callback function
  // Notice the "correct" type for width and height parameters
  // Since reshaping changes aspect ratio, we reset the view volume here.
  void reshape(GLsizei scr_w, GLsizei scr_h) {
    // Set the viewport
    glViewport(0,0,scr_w,scr_h);
  
    // Readjust view volume
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity(); // replace current projection matrix
    // fieldOfView (vertical), aspect ratio, near and far
    gluPerspective(vvFieldOfView, double(scr_w)/double(scr_h),
  		 vvNear, vvFar);
  }
  
  // The GLUT window display callback function
  void display(void) {
    // Erase window, then redraw teapot
    glClear(GL_COLOR_BUFFER_BIT);
    // Draw a sphere of radius .5, with 20 longitude lines and 30 latitude lines
    glutWireSphere(0.5,20,30);
    glFlush();
  }
  
  // Set up window info AFTER window is created
  void initWindowInfo(void) {
    // purple background
    glClearColor(bgRed, bgGreen, bgBlue, 0.0);
  
    // Set the drawing color to yellow
    glColor3f(fgRed, fgGreen, fgBlue);
  
    // Set up the camera here, since we never adjust the camera
    glMatrixMode(GL_MODELVIEW);
    glLoadIdentity();
    gluLookAt(eyeX, eyeY, eyeZ,
  	    lookAtX, lookAtY, lookAtZ,
  	    upX, upY, upZ);
  
    // register callbacks
    glutDisplayFunc(display);
    glutReshapeFunc(reshape);
  }
  
  int main(int argc, char** argv) {
    glutInit(&argc, argv);
  
    glutInitWindowSize(VIEWPORTWIDTH, VIEWPORTHEIGHT);
    glutInitWindowPosition(CORNER_X, CORNER_Y);
  
    glutCreateWindow("basic3D");
  
    initWindowInfo();
  
    glutMainLoop();
    return 0;
  }
  

• Note that some parameters now use openGL types such as GLint. C/C++ do not guarantee the sizes of the primitive types. OpenGL compensates for this by having its own family of types with predictable sizes.

By Popular Demand: (Lame) Animation

• The following program (animate3D) animates the sphere from basic3D. This program illustrates the use of the idle callback and double-buffering.

  // animate3D
  //
  // A simple camera setup for 3D viewing
  // 
  // (C) 2002 Bill Lenhart
  
  #include <GL/glut.h>
  #include <iostream>
  
  // Constants
  // the location of the upper left corner of the frame
  static const int CORNER_X = 200;
  static const int CORNER_Y = 200;
  
  // the viewport bounds
  static const int VIEWPORTWIDTH=200;
  static const int VIEWPORTHEIGHT=200;
  
  // Camera parameters
  double eyeX = 20.0, eyeY = 30.0, eyeZ = 40.0;
  double lookAtX =0.0,  lookAtY = 0.0, lookAtZ = 0.0;
  double upX = 0.0, upY = 1.0, upZ = 0.0;
  
  // View volume parameters (aspect ratio determined by window on screen)
  double vvFieldOfView = 1.5708;
  double vvNear=1.0;
  double vvFar=80.0;
  
  // color info
  float bgRed = 0.5f, bgGreen = 0.0f, bgBlue = 0.5f; // purple
  float fgRed = 1.0f, fgGreen = 1.0f, fgBlue = 0.0f; // yellow
  
  // current angle and change in angle
  static const double deltaAngle = 1.0;
  double angle = 0.0;
  
  // The GLUT window idle callback function
  void idle(void) {
    // increment current angle
    angle+=deltaAngle;
    // and reset if too large
    if(angle >= 360.00)
      angle = 0.0;
    // force a redraw!
    glutPostRedisplay();
  }
  
  // The GLUT window resizing callback function
  // Notice the "correct" type for width and height parameters
  // Since reshaping changes aspect ratio, we reset the view volume here.
  void reshape(GLsizei scr_w, GLsizei scr_h) {
    // Set the viewport
    glViewport(0,0,scr_w,scr_h);
  
    // Readjust view volume
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity(); // replace current projection matrix
    // fieldOfView (vertical), aspect ratio, near and far
    gluPerspective(vvFieldOfView, double(scr_w)/double(scr_h),
  		 vvNear, vvFar);
  }
  
  // The GLUT window display callback function
  void display(void) {
    // We will do a local transform to the sphere
    // First, make sure we have the correct matrix stack
    glMatrixMode(GL_MODELVIEW);
    glPushMatrix(); // Now duplicate top of stack
    // add a rotation to the modelview matrix
    glRotated(angle,0.0,0.0,1.0); // Then rotate around z-axis
    // Erase window, then redraw teapot
    glClear(GL_COLOR_BUFFER_BIT);
    // Draw a sphere of radius .5, with 10 longitude lines and 15 latitude lines
    glutWireSphere(0.5,10,15);
    glPopMatrix(); // first get rid of local transform
    glutSwapBuffers();  // swap buffer to screen; no glFlush() necessary
  }
  
  // Set up window info AFTER window is created
  void initWindowInfo(void) {
    // purple background
    glClearColor(bgRed, bgGreen, bgBlue, 0.0);
  
    // Set the drawing color to yellow
    glColor3f(fgRed, fgGreen, fgBlue);
  
    // Set up the camera here, since we never adjust the camera
    glMatrixMode(GL_MODELVIEW);
    glLoadIdentity();
    gluLookAt(eyeX, eyeY, eyeZ,
  	    lookAtX, lookAtY, lookAtZ,
  	    upX, upY, upZ);
  
    // register callbacks
    glutDisplayFunc(display);
    glutReshapeFunc(reshape);
    glutIdleFunc(idle);
  }
  
  int main(int argc, char** argv) {
    glutInit(&argc, argv);
  
    // use double-buffering for smoother animation
    glutInitDisplayMode(GLUT_DOUBLE);
    glutInitWindowSize(VIEWPORTWIDTH, VIEWPORTHEIGHT);
    glutInitWindowPosition(CORNER_X, CORNER_Y);
  
    glutCreateWindow("basic3D");
  
    initWindowInfo();
  
    glutMainLoop();
    return 0;
  }