CENG477 Introduction to Computer Graphics

1
CENG477 Introduction to Computer Graphics

• Introduction to OpenGL, GLUT and GLUI

2
What is OpenGL?

• A software interface to graphics hardware
• (Low Level) Graphics rendering API
• high-quality color images composed of geometric
  and image primitives
• window system independent
• operating system independent

3
OpenGL/GLUT/GLU/GLUI

• OpenGL is the core library that is platform
  independent.
• GLUT is an auxiliary library that handles window
  creation, OS system calls (mouse buttons,
  movement, keyboard, etc), callbacks.
• GLU is an auxiliary library that handles a
  variety of graphics accessory functions such as
  setting up matrices for specific viewing
  orientations and projections, etc.
• GLUI is a GUI manager for GLUT.

4
OpenGL Basics

• Rendering
• Converting geometric/mathematical object
  descriptions into frame buffer values
• OpenGL can render
• Geometric primitives
• Bitmaps and Images (Raster primitives)

Graphics Pipeline
5
Graphics Pipeline

• OpenGL commands specify how each step is
  performed
• The graphics pipeline is modeled as a state
  machine
• Each pipeline step has parameters (attributes) to
  be set

6
OpenGL as a Renderer

• Geometric primitives
• points, lines and polygons
• Image Primitives
• images and bitmaps
• separate pipeline for images and geometry
• linked through texture mapping
• Rendering depends on state
• colors, materials, light sources, etc.

7
Preliminaries

• Header Files
• include ltGL/gl.hgt
• include ltGL/glu.hgt
• include ltGL/glut.hgt
• include ltglui.hgt

8
GLUT Basics

• Application Structure
• Configure and open window
• Initialize OpenGL state
• Register input callback functions
• render
• resize
• input keyboard, mouse, etc.
• Enter event processing loop

9
Sample Program
include ltGL/glut.hgt include ltGL/gl.hgt void
main(int argc, char argv) int mode
GLUT_RGBGLUT_DOUBLE glutInitDisplayMode(
mode ) glutInitWindowSize( 500,500 )
glutCreateWindow( Simple ) init()
glutDisplayFunc( display )
glutKeyboardFunc( key ) glutMainLoop()
10
Sample Program
include ltGL/glut.hgt include ltGL/gl.hgt void
main(int argc, char argv) int mode
GLUT_RGBGLUT_DOUBLE glutInitDisplayMode(
mode ) glutInitWindowSize( 500,500 )
glutCreateWindow( Simple ) init()
glutDisplayFunc( display )
glutKeyboardFunc( key ) glutMainLoop()
Specify the display Mode RGB or color Index,
single or double Buffer
11
Sample Program
include ltGL/glut.hgt include ltGL/gl.hgt void
main(int argc, char argv) int mode
GLUT_RGBGLUT_DOUBLE glutInitDisplayMode(
mode ) glutInitWindowSize( 500,500 )
glutCreateWindow( Simple ) init()
glutDisplayFunc( display )
glutKeyboardFunc( key ) glutMainLoop()
Create a window Named simple with resolution
500 x 500
12
Sample Program
include ltGL/glut.hgt include ltGL/gl.hgt void
main(int argc, char argv) int mode
GLUT_RGBGLUT_DOUBLE glutInitDisplayMode(
mode ) glutInitWindowSize( 500,500 )
glutCreateWindow( Simple ) init()
glutDisplayFunc( display )
glutKeyboardFunc( key ) glutMainLoop()
Your OpenGL initialization code (Optional)
13
Sample Program
include ltGL/glut.hgt include ltGL/gl.hgt void
main(int argc, char argv) int mode
GLUT_RGBGLUT_DOUBLE glutInitDisplayMode(
mode ) glutInitWindowSize( 500,500 )
glutCreateWindow( Simple ) init()
glutDisplayFunc( display )
glutKeyboardFunc(key) glutMainLoop()
Register your call back functions
14
glutMainLoop()
include ltGL/glut.hgt include ltGL/gl.hgt int
main(int argc, char argv) int mode
GLUT_RGBGLUT_DOUBLE glutInitDisplayMode(mod
e) glutInitWindowSize(500,500)
glutCreateWindow(Simple) init()
glutDisplayFunc(display) glutKeyboardFunc(ke
y) glutMainLoop()
The program goes into an infinite loop waiting
for events
15
OpenGL Initialization

• Set up whatever state youre going to use
• void init( void )
• glViewport(0, 0, width, height)
• glMatrixMode(GL_PROJECTION)
• glLoadIdentity()
• glOrtho(-10, 10, -10, 10, -10, 20)
• glMatrixMode(GL_MODELVIEW)
• glLoadIdentity()
• /glEnable( GL_LIGHT0 )
• glEnable( GL_LIGHTING )
• glEnable( GL_DEPTH_TEST )/

16
GLUT Callback functions

• Event-driven Programs that use windows
• Input/Output
• Wait until an event happens and then execute some
  pre-defined functions according to the users
  input
• Events key press, mouse button press and
  release, window resize, etc.

17
GLUT Callback Functions

• Callback function Routine to call when an event
  happens
• Window resize or redraw
• User input (mouse, keyboard)
• Animation (render many frames)
• Register callbacks with GLUT
• glutDisplayFunc( my_display )
• glutIdleFunc( my_idle_func )
• glutKeyboardFunc( my_key_events )
• glutMouseFunc ( my_mouse )

18
Event Queue
Keyboard
.
Event queue
Mouse
MainLoop()
Window
Keypress_callback() .
Mouse_callback() .
window_callback() .
19
Rendering Callback

• Callback function where all our drawing is done
• glutDisplayFunc( my_display )
• void my_display (void )
• glClear( GL_COLOR_BUFFER_BIT )
• glBegin( GL_TRIANGLE )
• glVertex3fv( v0 )
• glVertex3fv( v1 )
• glVertex3fv( v2 )
• glEnd()

20
Idle Callback

• Use for animation and continuous update
• glutIdleFunc( idle )
• void idle( void )
• t dt
• glutPostRedisplay()

21
User Input Callbacks

• Process user input
• glutKeyboardFunc( my_key_events )
• void my_key_events (char key, int x, int y )
• switch ( key )
• case q case Q
• exit ( EXIT_SUCCESS)
• break
• case r case R
• rotate GL_TRUE
• break

22
Mouse Callback

• Captures mouse press and release events
• glutMouseFunc( my_mouse )
• void myMouse(int button, int state, int x, int y)
  
• if (button GLUT_LEFT_BUTTON state
  GLUT_DOWN)

23
Events in OpenGL
24
OpenGL Geometric Primitives

• The geometry is specified by vertices.
• There are ten primitive types

25
OpenGL Command Format
26
Vertices and Primitives

• Primitives are specified using
• glBegin( primType )
• glEnd()
• primType determines how vertices are combined
• GLfloat red, green, blue
• Glfloat coords3
• glBegin( primType )
• for ( i 0 i lt nVerts i )
• glColor3f( red, green, blue )
• glVertex3fv( coords )
• glEnd()

27
An Example

• void drawParallelogram( GLfloat color )
• glBegin( GL_QUADS )
• glColor3fv( color )
• glVertex2f( 0.0, 0.0 )
• glVertex2f( 1.0, 0.0 )
• glVertex2f( 1.5, 1.118 )
• glVertex2f( 0.5, 1.118 )
• glEnd()

28
Vertices and Primitives

• Points, GL_POINTS
• individual points

29
Vertices and Primitives

• Lines, GL_LINES
• pairs of vertices interpreted as individual line
  segments

30
Vertices and Primitives

• Line Strip, GL_LINE_STRIP
• series of connected line segments

31
Vertices and Primitives

• Line Loop, GL_LINE_LOOP
• Line strip with a segment added between last and
  first vertices

32
Vertices and Primitives

• Polygon , GL_POLYGON
• boundary of a simple, convex polygon

33
Vertices and Primitives

• Triangles , GL_TRIANGLES
• triples of vertices interpreted as triangles

34
Vertices and Primitives

• Triangle Strip , GL_TRIANGLE_STRIP
• linked strip of triangles

v1
v0
v3
v2
v4
v5
v7
v6
35
Vertices and Primitives

• Triangle Fan , GL_TRIANGLE_FAN
• linked fan of triangles

v2
v1
v3
v4
v0
v5
36
Vertices and Primitives

• Quads , GL_QUADS
• quadruples of vertices interpreted as four-sided
  polygons

37
Vertices and Primitives

• Quad Strip , GL_QUAD_STRIP
• linked strip of quadrilaterals

v1
v0
v3
v2
v4
v5
v7
v6
38
Vertices and Primitives

• Vertices may be specified in 2D, 3D, or 4D.
• 2D coordinates are promoted to 3D by assigning a
  Z value of zero.
• 4D homogeneous coordinates are reduced to 3D by
  dividing x, y, and z by the w coordinate (if
  non-zero).

39
Vertices and Primitives

• Between glBegin/ glEnd, those opengl commands are
  allowed
• glVertex() set vertex coordinates
• glColor() set current color
• glIndex() set current color index
• glNormal() set normal vector coordinates
• glTexCoord() set texture coordinates

40
Vertices and Primitives

• glMultiTexCoord() set texture coordinates for
  multitexturing
• glEdgeFlag() control drawing of edges
• glMaterial() set material properties
• glArrayElement() Extract array element data
• glCallList(), glCallLists() execute display list

41
GLUI

• GLUI is a GLUT-based C user interface library
  which provides controls such as
• buttons,
• checkboxes,
• radio buttons,
• spinners, etc.
• It is window-system independent, relying on GLUT
  to handle all system-dependent issues, such as
  window and mouse management.

42
GLUI Controls
43
GLUI - Simple Programming Interface

• GLUI provides default values for many parameters
  in the API and there are several ways to create a
  control
• GLUI glui
• ...
• glui-gtadd_checkbox("Click me") Adds a simple
  checkbox with
• the name "Click me"
• glui-gtadd_checkbox("Click me", state )
• The variable state will now be
• 
  automatically update to reflect the state of
• 
  the checkbox (live variable).
• glui-gtadd_checkbox( "Click me", state, 17,
  callback_fn )
• Now we have a live variable, plus a callback
  function
• will be invoked (and passed the value '17')
  whenever
• the checkbox changes state.

44
Usage for standalone GLUI windows

• Integrating GLUI with a new or existing GLUT
  application is very
• straightforward. The steps are
• Add the GLUI library to the link line (e.g.,
  glui32.lib for Windows -lglui in
  Linux).
• Include the file "glui.h" in all sources that
  will use the GLUI library.
• Create your regular GLUT windows as usual. Make
  sure to store the window id of your main graphics
  window, so GLUI windows can later send it
  redisplay events
• int window_id glutCreateWindow( "Main gfx
  window" )
• Register your GLUT callbacks as usual (except the
  Idle callback, discussed below).

45
Usage for standalone GLUI windows

• Register your GLUT idle callback (if any) with
  GLUI_Master (a global object which is already
  declared), to enable GLUI windows to take
  advantage of idle events without interfering with
  your application's idle events. If you do not
  have an idle callback, pass in NULL.
• GLUI_Master.set_glutIdleFunc( myGlutIdle )
• or
• GLUI_Master.set_glutIdleFunc( NULL )
• In your idle callback, explicitly set the current
  GLUT window before rendering or posting a
  redisplay event. Otherwise the redisplay may
  accidently be sent to a GLUI window.
• void myGlutIdle( void )
• glutSetWindow(main_window)
• glutPostRedisplay()

46
Usage for standalone GLUI windows

• Create a new GLUI window using
• GLUI glui GLUI_Master.create_glui( "name",
  flags, x, y )
• Note that flags, x, and y are optional
  arguments. If they are not specified, default
  values will be used. GLUI provides default values
  for arguments whenever possible.
• Add controls to the GLUI window. For example, we
  can add a checkbox and a quit button with
• glui-gtadd_checkbox( "Lighting", lighting )
• glui-gtadd_button( "Quit", QUIT_ID, callback_func
  )

47
Usage for standalone GLUI windows

• Let each GLUI window you've created know where
  its main graphics window is
• glui-gtset_main_gfx_window( window_id )
• Invoke the standard GLUT main event loop, just as
  in any GLUT application
• glutMainLoop()
• Refer GLUI Manual on the usage for GLUI
  subwindows

48
Whats Next

• Display Lists
• Viewing
• Lighting
• Texture Mapping

49
References

• http//www.opengl.org/documentation/spec.html
• The OpenGL Programming Guide - The
  Redbookhttp//www.opengl.org/documentation/red_bo
  ok_1.0/
• http//www.cs.rit.edu/jdb/cg1/openGLIntro.pdf