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 Graphics Pipeline Rendering  Converting geometric/mathematical object descriptions into frame buffer values OpenGL can render:  Geometric primitives  Bitmaps and Images (Raster primitives)

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

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 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. #include 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 Sample Program

11. #include 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 Sample Program

12. #include 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) Sample Program

13. #include 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 Sample Program

14. #include 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(); } 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 Event queue Keyboard Mouse Window …. Mouse_callback() { …. { Keypress_callback() { …. { window_callback() { …. { MainLoop()

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 EventExampleOpenGL Callback Function KeypressKeyDown KeyUp glutKeyboardFunc MouseleftButtonDown leftButtonUp glutMouseFunc MotionWith mouse press Without glutMotionFunc glutPassiveMotionFunc WindowMoving Resizing glutReshapeFunc SystemIdle Timer glutIdleFunc glutTimerFunc SoftwareWhat to draw glutDisplayFunc

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 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 v0 v2 v1 v3 v4 v5 v6 v7

35. Vertices and Primitives Triangle Fan, GL_TRIANGLE_FAN  linked fan of triangles v0 v1 v2 v3 v4 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 v0 v1 v2 v3 v4 v5 v6 v7

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: 1.Add the GLUI library to the link line (e.g., glui32.lib for Windows -lglui in Linux). 2.Include the file "glui.h" in all sources that will use the GLUI library. 3.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" ); 4.Register your GLUT callbacks as usual (except the Idle callback, discussed below).

45. Usage for standalone GLUI windows 5.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 ); 6.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 7.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. 8.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 9.Let each GLUI window you've created know where its main graphics window is: glui->set_main_gfx_window( window_id ); 10.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 1.http://www.opengl.org/documentation/spec.htmlhttp://www.opengl.org/documentation/spec.html 2.The OpenGL Programming Guide - The Redbook http://www.opengl.org/documentation/red_book _1.0/ http://www.opengl.org/documentation/red_book _1.0/ 3.http://www.cs.rit.edu/~jdb/cg1/openGLIntro.pdfhttp://www.cs.rit.edu/~jdb/cg1/openGLIntro.pdf