1. TOPIC 3 INTRODUCTION TO OPENGL CGMB214: Introduction to Computer Graphics

2. Objectives To demonstrate the basic usage of OpenGL To write a simple OpenGL program in C

3. Introduction A basic library of functions is provided in OpenGL  It helps to specify  Graphics primitives  Attributes  Geometric transformation  Viewing transformation  Etc OpenGL is designed to be hardware independent, therefore many operations, such as input and output routines are not included in the basic library

4. Basic OpenGL Syntax

5. Function names in the OpenGL basic library are prefixed with gl Each component word within a function name has its first letter capitalised. E.g. glBegin, glClear, glCopyPixels, glPolygonMode

6. Basic OpenGL Syntax Arguments, for example parameter name, a value for a parameter or a particular mode begin with uppercase letter GL. The component name comprise of uppercase letter and underscore. E.g. GL_2D, GL_RGB, GL_CCW, GL_POLYGON, GL_AMBIENT_AND_DIFFUSE

7. Basic OpenGL Syntax Data type in OpenGL starts with capital letters and the remainder is written in lower case. E.g. GLbyte, GLshort, GLint, GLfloat, GLdouble, GLboolean

8. Related Libraries

9. OpenGL Utility (GLU)  Provide routines for  Setting up viewing and projection matrices  Describing complex object with lines and polygon approximations  Displaying quadrics and B-splines using linear approximations  Processing the surface rendering operations  Function names start with glu prefix Open Inventor  Object oriented toolkit written in C++ for interactive 3D applications OpenGL Extension to the X Window System (GLX)  provides a set of routines that are prefixed with the letter glX

10. Related Libraries Apple GL (AGL)  Interface for window-management operations in Apple systems (prefix agl) Windows-to-OpenGL (WGL)  Prefixed with letter wgl Presentation Manager to OpenGL (PGL)  An interface for IBM OS/2 OpenGL Utility Toolkit (GLUT)  Provides library of functions for interacting with any screen- windowing system  Prefixed with letter glut

11. Header Files

12. In our graphic program we will need to include the header file for the OpenGL core library For most application we will also need GLU We will also need to include the header file for window system  The header file that accesses WGL routines is windows.h  This header file must be listed before the OpenGL and GLU header files because it contains macros needed by the Microsoft Windows version of OpenGL libraries  So the code should look like below # include

13. Header Files However if we use GLUT to handle the window- managing operation we don’t need the gl.h and glu.h This is because GLUT will ensure that these header files will be included correctly So the code should look something like below # include

14. Header Files Other than that we also need to include the header files required by C/C++ E.g. # include

15. Display-Window Management Using GLUT

16. Initialise GLUT glutInit(&argc, argv); Initialising function Can be substitute with command line argument, but as for now, just leave it as it is glutInit will initialize the GLUT library and negotiate a session with the window system. During this process, glutInit may cause the termination of the GLUT program with an error message to the user if GLUT cannot be properly initialized. glutInit must be called before others.

17. Display-Window Management Using GLUT Initialise OpenGL on how to set up its frame buffer and colour glutInitDisplayMode(GL_SINGLE|GL_RGB); Initialising display mode function Built in constant which are OR-ed together. Can be changed based on table below  Frame buffer is a special 2-dimensional array in main memory where the graphical image is stored. OpenGL maintains an enhanced version of the frame buffer with additional information  The system also needs to know how we are representing colors of our general needs in order to determine the depth (number of bits) to assign for each pixel in the frame buffer  The argument to glutInitDisplayMode() is a logical-or (using the operator “|”) of a number of possible options

18. Display-Window Management Using GLUT Display ModeMeaning Colour Representation GLUT_RGBUse RGB colour (default). 24-bit colour. GLUT_RGBA Use RGB colour including α (for transparency) The α component indicates the opaqueness of the color (1 = fully opaque, 0 = fully transparent) GLUT_INDEXFor colourmapped colours (not recommended)

19. Display-Window Management Using GLUT Display ModeMeaning Buffering GLUT_SINGLE Use single buffering(default) GLUT_DOUBLE Use double buffering two separates frame buffers front buffer and back buffer. front buffer for displaying back buffer for drawing swapping to update the image GLUT_DEPTH Use depth buffer Is needed in 3-dimensional graphics for hidden surface removal. Use a special array called depth buffer. It is a 2-dimensional array that stores the distance (or depth) of each pixel from the viewer. This makes it possible to determine which surfaces are closest, thus visible, which are farther and thus hidden To understand the difference between these two options, we need to know how frame buffer works. In raster graphics systems, whatever is written to the frame buffer is immediately transferred to the display. This process is repeated frequently (30 – 60 times a second). To do this a typical approach is to first erase the old contents by setting all the pixels to some background color, i.e. black. After this, the new contents are drawn However, even though these processes might happen very fast, the process of setting the image to black and then redrawing everything produces a noticeable flicker in the image

20. Display-Window Management Using GLUT Set the initial location of the window glutInitWindowPosition(int x, int y); Initialising Window Position function Setting the position of the window from upper left corner of the screen

21. Display-Window Management Using GLUT Initialise the size of the window glutInitWindowSize(int width, int height); Initialising window size function Setting the size of the window

22. Display-Window Management Using GLUT Open and display a window glutCreateWindow(“string”); Function that open and display a window A character string that will appear on the title bar

23. Display-Window Management Using GLUT Specify what the display window should contain glutDisplayFunc(function name); Function to specify what to be displayed on the window The name of the function that contains the lines to be executed

24. Display-Window Management Using GLUT Make sure the window continue running. Should be at the last line glutMainLoop(); Function to specify what to be displayed on the window This should be the last function in the program. It will display the initial graphics and puts the program into an infinite loop that checks for input from devices such as mouse. If the program is not an interactive program, this function will make sure the window is being displayed all the time until the user close the window.

25. Display-Window Management Using GLUT 300 px 400 px

26. Display-Window Management Using GLUT To set the background color of the window glClearColor(Red, Green, Blue, Opacity); Function to specify the background color of the window The first 3 parameters determine the value of Red, Green and Blue, respectively. The last parameter is for opaqueness

27. Display-Window Management Using GLUT To set the color of the primitives glColor3i(Red, Green, Blue); Function to specify the background color of the window The 3 parameters determine the value of Red, Green and Blue, respectively. The number 3 is for the number of color component, Red, Green and Blue. The letter ‘i’ is for the data type. ‘i’ is for integer

28. Display-Window Management Using GLUT To display 2D picture (because 2D is a special case of 3D) glMatrixMode(Glenum mode); Function to specify the current matrix Can be set to either to define camera, perspective, measuring system etc. glOrtho2D(start x, end x, start y, end y); Function to defines the coordinate reference frame Specify the range of x and y

29. Event-Driven Programming & Callbacks (Function Call) Virtually all interactive graphics programs are event driven. Therefore, a graphics program must be prepared at any time for input from any number of sources, including the mouse, or keyboard, or other graphics devices such as trackballs and joysticks. In OpenGL, this is done through the use of callbacks.

30. Callbacks The callbacks are used when the graphics program instructs the system to invoke a particular procedure or functions whenever an event of interest occurs, say, the mouse button is clicked. The graphics program indicates its interest, or registers, for various events. This involves telling the window system which event type we are interested in, and passing it the name of a procedure we have written to handle the event.

31. Types of callback Callbacks are used for two purposes: User input events System events User input events: include things such as mouse clicks, the motion of the mouse (without clicking) that is also called passive motion and keyboard hits. Note: The program is only signaled about events that happen to its window. For example, entering text into another window’s dialogue box will not generate a keyboard event for the program.

32. Types of callback System event: There are a number of different events that are generated by the system such as display event, reshape event, idle event and timer event. display event : a special event that every OpenGL program must handle. A display event is invoked when the system senses that the contents of the window need to be redisplayed, either because:  the graphics window has completed its initial creation  an obscuring window has moved away, thus revealing all or part of the graphics window  the program explicitly requests redrawing, by calling  glutPostRedisplay() procedure.

33. Types of callback Reshape event: Happens whenever the window shape is altered.  The callback provides information on the new size of the window. Idle event: Happens every time the system has nothing to do Timer event: Happens when after the waiting period is over

34. Callbacks Input Event Callback RequestUser callback function prototype (return void) Mouse button glutMouseFuncmyMouse(int a, int s, int x, int y) Mouse motion glutPassiveMotionFuncmyMotion(int x, int y) Keyboard keyglutKeyboardFuncmyKeyboard(unsigned char c, int x, int y) System EventCallback RequestUser callback function prototype (return void) (Re)displayglutDisplayFuncmyDisplay() (Re)size window glutReshapeFuncmyReshape(int w, int h) Timer eventglutTimerFuncmyTimer(int id) Idle eventglutIdleFuncmyIdle() Table: Common callbacks and the associated registration functions

35. Callback Setup int main(int argc, char** argv) {... glutDisplayFunc(myDraw); // set up the callbacks glutReshapeFunc(myReshape); glutMouseFunc(myMouse); glutKeyboardFunc(myKeyboard); glutTimerFunc(20, myTimeOut, 0);... }

36. Callback Functions Callback functions depend on the function definition that we create.

37. Examples of Callback Functions System Event void myDraw() { // called to display window //...insert your drawing code here... } void myReshape(int w, int h) { // called if reshaped windowWidth = w; // save new window size windowHeight = h; //...may need to update the projection... glutPostRedisplay(); // request window redisplay } void myTimeOut(int id) { // called if timer event //...advance the state of animation incrementally... glutPostRedisplay(); // request redisplay glutTimerFunc(20, myTimeOut, 0); // request next timer event }

38. Callback Function for System Event From the example, both the timer and reshape callback invoke the function glutPostRedisplay(). This function informs OpenGL that the state of the scene has changed and should be redrawn

39. Example of Callback Functions for User Input Events void myMouse(int b, int s, int x, int y) { switch (b) { // b indicates the button case GLUT_LEFT_BUTTON: if (s == GLUT_DOWN) // button pressed //... else if (s == GLUT_UP) // button released //... break; //... // other button events }

40. GLUT Parameters GLUT parameter names associated with mouse events

41. Example of Callback Functions for User Input Events // called if keyboard key hit void myKeyboard(unsigned char c, int x, int y) { switch (c) { // c is the key that is hit case ’q’: // ’q’ means quit exit(0); break; //... // other keyboard events }