Computer Graphics I

1
Computer Graphics I

• Policies and Background

2
Course Information Policies

• Catalog Description
• An introduction to typical computer graphics
  systems and their operation. Supporting software
  will be generally discussed with examples given
  from operational systems. Interactive techniques
  will be introduced as well as representations and
  projections of elementary three-dimensional
  images. Several exercises using graphics
  equipment are assigned.

3
Course Goals

• Understand and be able to demonstrate how
  graphics primitives (line drawing, polygons,
  clipping, antialiasing, etc.) are done.
• Understand the underlying structure in a computer
  graphics API and be able to design and implement
  programs using it.
• Be able to describe and calculate motion using 2D
  and 3D transformations
• Know the limitations and the benefits of
  different shading and rendering techniques and be
  able to demonstrate the process involved.

4
Instructor Information

• Jerry Heuring2008-I Nitschke Hall(419)530-8143j
  heuring_at_eecs.utoledo.edu
• Office Hours
• Monday 10-11 AM, 4-5 PM
• Tuesday 10-11 AM
• Wednesday 10 Noon
• Friday 930-1130
• And by appointment

5
Texts

• Donald Hearn and M. Pauline Baker, Computer
  Graphics using OpenGL, 3rd Edition,
  Prentice-Hall Publishing, 2004, ISBN
  0-13-014390-7
• Mason Woo, et.al., OpenGL Programming Guide,,
  5th Edition, Addison-Wesley Publishing, 2005

6
Web Page

• http//www.eecs.utoledo.edu/jheuring/eecs4530.htm
  l

7
Grading

• 2 Midterms (30)
• 7 Programming Projects (45)
• Final (25)

8
The Laboratory

• There is a laboratory scheduled on Monday nights
  for this course. The time will not be used
  every week we may take advantage of it at
  certain points of the term but usually the time
  will not be used for a specific purpose.

9
Graduate Students

• Graduate students enrolled in this course as EECS
  5530 or EECS 7530 will have additional
  requirements on their projects.

10
A Brief History of Computer Graphics

• Really started in the 1960s with Project
  Whirlwind and the sketchpad application (MIT).
• By the end of the 60s there was a library of
  routines known as Plot 10 to do graphics on a
  variety of devices.
• Most displays were Stroke Refresh or Direct View
  Storage Tubes.

11
Basic Parts of a Stroke Display
Electron Gun
Screen
Deflection Plates
Focus Grid
12
A Brief History of Computer Graphics

• The 70s
• Two new software standards
• Core
• GKS
• Raster Scan Displays become available
• Microprocessors/Graphics Processors appear.
• First GUIs appear Xerox Star, Sun Microsystems

13
A Brief History of Computer Graphics

• The 80s
• Stroke displays all but disappear
• First movies using computer graphics are produced
  (The Last Starfighter, TRON)
• PHIGS and GKS-3D are introduced
• X11 Windowing System developed (MIT)
• GUIs are introduced in common products(Macintosh
  , Windows, AmigaDos)

14
A Brief History of Computer Graphics

• The 90s
• OpenGL and Direct3D become defacto standards for
  graphics
• Video cards incorporate more advanced hardware to
  speed up graphics
• GUIs are expected on most computer systems.
• Full movies are being made using computer
  animation
• Virtual Reality Systems emerge

15
Primitives

• The low level objects that can be displayed may
  be determined by the API or the hardware.
• Lines
• Points
• Text/Characters
• Polygons
• Curves
• Surfaces

16
Attributes

• How the object is displayed the color, is it
  filled or hollow, which font, how thick of a
  line, etc.

17
Event Oriented Systems

• Most graphics systems today are based on an event
  processing model.
• Flow of control is determined by the sequence of
  events (mouse clicks, keystrokes, mouse
  movements, timer alarms, etc.)
• This is true for most windowing systems as well.

18
OpenGL

• OpenGL is an Application Programming Interface or
  API originally developed at Silicon Graphics.
• Routines to control drawing in a buffer or memory
  area.
• Does not directly handle input or windowing
  functions.

19
GLUT

• GLUT GL Users Toolkit
• Supplies a device independent interface to create
  windows and do simple input.
• Based on callback routines (routines that are
  called when certain events occur).
• Versions available for Solaris, Linux, Windows,
  Macs, etc.

20
A VERY Simple GLUT Program

• include ltGL/gl.hgt // Should be able to use just
• include ltGL/glu.hgt // include ltGL/glut.hgt or
• include ltGL/glut.hgt // include ltglut.hgt
• // Prototypes for routines
• void init(void) // Called on to initialize
  settings
• void display(void) // called to redraw the
  screen
• void init(void)
• // Sets the background color for the window
• // 0.0, 0.0, 0.0, 0.0 is black.
• // 1.0, 0.0, 0.0, 0.0 would be red
• // 0.0, 1.0, 0.0, 0.0 would be green
• // 0.0, 0.0, 1.0, 0.0 would be blue
• glClearColor(0.0, 0.0, 0.0, 0.0)

21
Function init (continued)

• // The matrix mode is one of
• // GL_PROJECTION
• // GL_MODELVIEW
• // GL_TEXTURE
• glMatrixMode (GL_PROJECTION)
• glLoadIdentity()
• // An Orthonormal Projection where the
• // bounding values are xmin, xmax,
• // ymin, ymax, zmin, zmax
• glOrtho(0.0, 1.0, 0.0, 1.0, -1.0, 1.0)

22
Function display()

• void display(void)
• // Clear the drawing area
• glClear(GL_COLOR_BUFFER_BIT)
• // Set the color with which to draw
• glColor3f( 1.0, 1.0, 1.0)
• // Describe a polygon
• glBegin (GL_POINTS)
• glVertex3f ( 0.25, 0.25, 0.0)
• glVertex3f ( 0.75, 0.25, 0.0)
• glVertex3f ( 0.75, 0.75, 0.0)
• glVertex3f ( 0.25, 0.75, 0.0)
• glEnd()
• // Force all pending output to the screen
• glFlush()

23
Main()

• int main (int argCount, char argValues)
• // Initialize glut
• glutInit( argCount, argValues)
• // Initialize the display mode to RGB
• glutInitDisplayMode (GLUT_RGBA)
• // Create a window for drawing in -- you can
  have
• // more than one
• glutCreateWindow("your name goes here")
• // Initialize OpenGL Stuff
• init()
• // Hook up the display function
• glutDisplayFunc(display)
• // Let it rip...
• glutMainLoop()

24
What the function names mean

• Functions that start glOrtho, or glMatrixMode are
  OpenGL core functions
• Functions that start glutInit() and
  glutDisplayfunc() are glut functions.
• Functions that start with the letters glu are
  part of the OpenGL Utility routines that are part
  of the OpenGL standard.

25
Compilation of the Example

• On Windows
• Build a Windows CONSOLE application.
• Add the source file to it as well as glut.lib
• Compile and run
• Common Problems
• System cant find the .h files
• System cant find the glut.dll file
• You forget to include the glut.h file

26
Compiling the Example

• On Solaris using gcc
• g -o executableName \ sourceName.cpp
  lglut lGL \ lXmu lX lm

27
How would this be done In X11?

• /
• The different files for inclusion this time.
  The Xm files
• are part of the Motif Widget Set. We will
  build a Frame
• in the window. The X11 are basic X11 routines
  and widgets.
• The X11/GLw includes are the specialized
  routines to
• handle X and OpenGL under X11.
• /
• include ltcstdlibgt
• include ltstdio.hgt
• include ltXm/Frame.hgt
• include ltX11/GLw/GLwMDrawA.hgt
• include ltX11/keysym.hgt
• include ltX11/Xutil.hgt
• include ltGL/glx.hgt
• static int attribs GLX_RGBA, None

28

• /
• In X11 a set of resources are used to set
  default conditions
• for an application. We are setting some
  defaults using these.
• /
• static String fallbackResources
• "useSchemes all", "sgimodeTrue",
• "glxwidgetwidth 300", "glxwidgetheight
  300",
• "frameshadowType SHADOW_IN",
• NULL
• /
• The draw routine will clear the window and
  draw 3 rectangles
• this is a very simple draw routine.
• /

29

• void draw_scene(void)
• glClearColor(0.5, 0.5, 0.5, 1.0)
• glClear(GL_COLOR_BUFFER_BIT)
• glColor3f(1.0,0.0,0.0)
• glRectf(-.5,-.5,.5,.5)
• glColor3f(0.0,1.0,0.0)
• glRectf(-.4,-.4,.4,.4)
• glColor3f(0.0,0.0,1.0)
• glRectf(-.3,-.3,.3,.3)
• glFlush()
• /
• Process input events
• /

30

• static void input(Widget w, XtPointer
  client_data, XtPointer call)
• char buffer31
• KeySym keysym
• XEvent event ((GLwDrawingAreaCallbackStr
  uct ) call)-gtevent
• switch(event-gttype)
• case KeyRelease
• XLookupString(event-gtxkey, buffer, 30,
  keysym, NULL)
• switch(keysym)
• case XK_Escape
• exit(EXIT_SUCCESS)
• break
• default break
• break

31

• /
• Process window resize events
• calling glXWaitX makes sure that all x
  operations like
• XConfigureWindow to resize the window happen
  befor the
• OpenGL glViewport call.
• /
• static void resize(Widget w, XtPointer
  client_data, XtPointer call)
• GLwDrawingAreaCallbackStruct call_data
• call_data (GLwDrawingAreaCallbackStruct )
  call
• glXWaitX()
• glViewport(0, 0, call_data-gtwidth,
  call_data-gtheight)

32

• /
• Process window expose events
• /
• static void expose(Widget w, XtPointer
  client_data, XtPointer call)
• draw_scene()
• /
• /
• main(int argc, char argv)
• Display dpy
• XtAppContext app
• XVisualInfo visinfo
• GLXContext glxcontext
• Widget toplevel, frame, glxwidget

33

• toplevel XtOpenApplication(app, // The
  Application Context
• "simplest", // Name of the application
• NULL, // Pointers to resources
• 0, // Number of Options
• argc, // Argument Count
• argv, // Argument Values
• fallbackResources, // resources (fallback)
• applicationShellWidgetClass, // Widget
  Class
• NULL, // Argument List
• 0) // Number of Arguments
• /
• Create the display
• /
• dpy XtDisplay(toplevel)

34

• frame XmCreateFrame(toplevel, "frame", NULL,
  0)
• XtManageChild(frame)
• /
• specify visual directly -- Really want a
  specific
• type of color mapping (True color).
• /
• if (!(visinfo glXChooseVisual(dpy,
  DefaultScreen(dpy), attribs)))
• XtAppError(app, "no suitable RGB
  visual")
• glxwidget XtVaCreateManagedWidget("glxwidget
  ",
• glwMDrawingAreaWidgetClass, // Widget Class
• frame, // parent widget
• GLwNvisualInfo,
• visinfo,
• NULL)

35

• /
• Set up the call back routines for different
  events that affect
• our window. When the events occur then the
  routine will be
• called.
• /
• XtAddCallback(glxwidget, // The
  widget
• GLwNexposeCallback, // The callback name
• expose, // The routine to call
• NULL) // A pointer to the
  structure to pass
• XtAddCallback(glxwidget, GLwNresizeCallback,
  resize, NULL)
• XtAddCallback(glxwidget, GLwNinputCallback,
  input, NULL)

36

• /
• Actually start running the widget
• /
• XtRealizeWidget(toplevel)
• /
• Create the window and draw it to the
  screen.
• /
• glxcontext glXCreateContext(dpy, visinfo,
  0, GL_TRUE)
• GLwDrawingAreaMakeCurrent(glxwidget,
  glxcontext)
• /
• The main loop -- just starts running and
  will call
• the callback routines as needed.
• /
• XtAppMainLoop(app)

37
How would you do it in Windows?