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 <GL/gl.h> #include <GL/glu.h> #include <GL/glut.h> #include <glui.h>

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 <GL/glut.h> #include <GL/gl.h> void main(int argc, char** argv) { int mode = GLUT_RGB|GLUT_DOUBLE; glutInitDisplayMode( mode ); glutInitWindowSize( 500,500 ); glutCreateWindow( “Simple” ); init(); glutDisplayFunc( display ); glutKeyboardFunc( key ); glutMainLoop(); }

10. Sample Program #include <GL/glut.h> #include <GL/gl.h> void main(int argc, char** argv) { int mode = GLUT_RGB|GLUT_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 <GL/glut.h> #include <GL/gl.h> void main(int argc, char** argv) { int mode = GLUT_RGB|GLUT_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 <GL/glut.h> #include <GL/gl.h> void main(int argc, char** argv) { int mode = GLUT_RGB|GLUT_DOUBLE; glutInitDisplayMode( mode ); glutInitWindowSize( 500,500 ); glutCreateWindow( “Simple” ); init(); glutDisplayFunc( display ); glutKeyboardFunc( key ); glutMainLoop(); } Your OpenGL initialization code (Optional)

13. Sample Program #include <GL/glut.h> #include <GL/gl.h> void main(int argc, char** argv) { int mode = GLUT_RGB|GLUT_DOUBLE; glutInitDisplayMode( mode ); glutInitWindowSize( 500,500 ); glutCreateWindow( “Simple” ); init(); glutDisplayFunc( display ); glutKeyboardFunc(key); glutMainLoop(); } Register your call back functions

14. glutMainLoop() #include <GL/glut.h> #include <GL/gl.h> int main(int argc, char** argv) { int mode = GLUT_RGB|GLUT_DOUBLE; glutInitDisplayMode(mode); glutInitWindowSize(500,500); glutCreateWindow(“Simple”); init(); glutDisplayFunc(display); glutKeyboardFunc(key); glutMainLoop(); } The program goes into an infinite loop waiting for events

15. OpenGL Initialization • Set up whatever state you’re 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 user’s 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( v[0] ); glVertex3fv( v[1] ); glVertex3fv( v[2] ); 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(); • primTypedetermines how vertices are combined GLfloat red, green, blue; Glfloat coords[3]; glBegin( primType ); for ( i = 0; i < 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->add_checkbox("Click me"); Adds a simple checkbox with the name "Click me" glui->add_checkbox("Click me", &state ); The variable state will now be automatically update to reflect the state of the checkbox (live variable). glui->add_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->add_checkbox( "Lighting", &lighting ); glui->add_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->set_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. What’s 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_book_1.0/ • http://www.cs.rit.edu/~jdb/cg1/openGLIntro.pdf