Drawing in OpenGL

1. CSC 341 Introduction to Computer Graphics Drawing in OpenGL

2. GLUT • Basic elements of how to create a window • OpenGL is intentionally designed to be independent of any specific windowing system: window operations are not provided • A separate library, GLUT is created to provide functionality common to all windowing systems • Open a window • Get input from mouse and keyboard • Menus • Event-driven • GLUT links with the specific window system • GLX for X window systems • WGL for Windows • AGL for Macintosh

3. MyFirstOpenGLProgram.cpp Components of a typical main function: • glutInit(): • must be called before others • General initialization of GLUT and OpenGL • Pass the command line arguments to it

4. glutInitDisplayMode(): • Initializations related to the frame buffer • OpenGL maintains an enhance version of frame buffer with additional information • Arguments: Logical-OR of following possible options • Color: tell the system how colors will be represented • GLUT_RGB: 24-bit color • GLUT_RGBA: fourth component indicates opaqueness (1=fully opaque, 0 = fully transparent) • Enabling the Depth buffer (we will need later in 3D for hidden surface removal, do not display objects not visible to viewer) • GLUT_DEPTH • Single or double buffering • GLUT_DOUBLE • GLUT_SINGLE

5. Single Buffering • Recall: whatever is written to frame buffer is immediately transferred to display • Repeated 50-85 times a second (refresh rate) • What if the contents of the frame buffer is changed (e.g. animation) • Typically • First erase the old contents by setting all pixels to some background color • Draw the new contents • Not fast enough: noticeable flicker • Change could happen during refreshing (parts of the object could appear later!!)

6. Double Buffering • System maintains two buffers • The front buffer is the one that is being displayed • Drawing is done to the back buffer • To update the image system swaps the two buffers • Swapping is fast (no flicker) • Twice the buffer space needed

7. glutInitWindowSize(int width, int height) • specifies desired width and height in pixels • glutInitWindowPosition(int x, int y): • Specifies the upper-left corner of the graphics window • x and y are given relative to the upper-left corner of the display: (0,0) • glutCreateWindow(char *title): • Specifies the title and creates the window (0,0) (x,y)

8. Event-driven Programming and Callbacks • All interactive graphics programs are event-driven • Program must be prepared at any time for input from a number of sources: mouse, keyboard, etc • In OpenGL, this is done through callbacks • Program instructs the system to invoke a particular function whenever an event of interest occurs: a key is hit • That is, the graphics program registers various events: involves telling the window system which event type you are interested in and passing it the name of the function you have written to handle that event

9. Types of callbacks • User input events: keyboard hit, mouse click, motion of a mouse (without clicking), also called passive motion. • Note that, your program is only signaled about events that happen to your window. • System events: • Display event: 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 • The program explicitly requests redrawing by calling glutPostRedisplay()

10. System events cont’d • Reshape event: • When window size is changed • Callback provides information on the new size of the window • For a newly created window as well, first a reshape event then a display event is generated. • Timer event: • There may not be any user input, but it might be necessary to update the image, e.g. plane keeps moving forward in a flight simulator • Request a timer event: your program goes to sleep for some period and it is awakened by an event sometime later to draw the next image. • Idle event: • generated every time system has nothing else to do. Too many events.

11. Callback registration functions

12. glutTimerFunc • arguments • Number of milliseconds to wait (unsigned int) • Name of user’s callback function • An integer identifier to be passed to the callback function (in case of multiple timers, to know which one is generating the event) e.g. glutTimerFunc(20, myTimeOut, 0)

13. Information associated with each event Information provided to user’s callback function by the event • Reshape event passes new window width and height • Mouse event (mouse click) passes • Which button was hit: b • GLUT_LEFT_BUTTON, GLUT_RIGHT_BUTTON, GLUT_MIDDLE_BUTTON • Button’s new state: s • GLUT_DOWN, GLUT_UP • x and y coordinates of the mouse when it was clicked (in pixels)

14. Information associated with each event • Keyboard hit passes • The character hit • Current coordinates of the mouse • Timer event passes the integer id specified in registration

15. glutPostRedisplay() • Reshape callback and timer callback both invoke glutPostRedisplay() • inform OpenGL that the state of the scene has changed and request redrawing by calling user’s display function. • If need be other callbacks can request redrawing as well.

16. glutMainLoop() • After registering the callback functions, enter main event loop by calling glutMainLoop() • OpenGL will start handling events now.

17. What to draw? • Geometric primitives • Points • Line Segments • Polygons • OpenGL has a small set of primitives • GLU contains a richer set of objects derived from the basic OpenGL library

18. OpenGL State • OpenGL is a state machine • OpenGL functions are of two types • Primitive generating • How vertices are processed and appearance of primitive are controlled by the state • State changing • Transformation functions • Attribute functions

19. Lack of Object Orientation • OpenGL is not object oriented so that there are multiple functions for a given logical function • glVertex3f • glVertex2i • glVertex3dv • Underlying storage mode is the same

20. Simplest geometric object in space: vertex function name dimensions glVertex3f(x,y,z) x,y,zare floats belongs to GL library glVertex3fv(p) pis a pointer to an array

21. glVertex* • *: nt or ntv • n: 2,3,4 (number of parameters) • t: i,f,d (int, float or double parameters) • v: variables are specified through a pointer to an array • GLfloat vertex[3]; glVertex3fv(vertex); • GLfloat, GLint instead of float, int

22. Group vertices to define other primitives • OpenGL is based on drawing objects with straight sides, so it suffices to specify vertices of the object glBegin(<type>) glVertex*(..); glVertex*(..); : glVertex*(..); glEnd(); • Calculations can appear within glBegin() and glEnd()

23. Object type • The value of type specifies how OpenGL interprets vertices • Points: GL_POINTS • Line segments: GL_LINES • Polylines: GL_LINE_STRIP, GL_LINE_LOOP

24. simple closed Polylines • Finite sequence of line segments joined end to end • closed: ends where it starts • simple: it does not self intersect • Curves can be approximated by breaking them into large number of small polylines

25. More primitives: Polygon • GL_POLYGON • border described as a line loop • Has an interior: filled object • Variety of ways to display: • Only edges • Fill with solid color or fill pattern (without edges) • To fill with edges, polygon has to be drawn twice • Fill is default

26. Polygon Issues • OpenGL will only display polygons correctly that are • Simple: edges cannot cross • Convex: All points on line segment between two points in a polygon are also in the polygon (all interior angles < 180) • Flat: all vertices are in the same plane • User program can check if above true • OpenGL will produce output if these conditions are violated but it may not be what is desired • Triangles satisfy all conditions • 3 points define a plane nonconvex polygon nonsimple polygon

27. Convex, noncovex You must subdivide nonconvex polygons into convex pieces and draw each convex piece separately for correctness.

28. Polygon types • GL_QUADS: successive 4 vertices are treated as quadrilaterals • GL_TRIANGLES: successive 3 vertices are treated as triangles

29. Polygon types • Triangles and quads sharing vertices • GL_TRIANGLE_STRIP: each additional vertex is combined with previous two vertices to define a triangle • GL_QUAD_STRIP • GL_TRIANGLE_FAN

30. Simplest polygon • glRectf(x_ll, y_ll, x_ur, y_ur) • Lower left and upper right corners specified • Draws a filled rectangle • Always on z=0 plane (2D) • OpenGL does not distinguish 2D and 3D representations, everything is represented in 3D internally • (x,y) (x,y,0)

31. Text and Curved Objects: LATER • Curved objects: we can use mathematical definitions and create our own approximations OR use GLU functions

32. Attributes • Attributes are part of the OpenGL state and determine the appearance of objects • Color (points, lines, polygons) • Size and width (points, lines) • Stipple pattern (lines, polygons) • Polygon mode • Display as filled: solid color or stipple pattern • Display edges • Display vertices • Once set the attribute applies to all subsequently defined objects, until set to some other value

33. RGB color • Each color component is stored separately in the frame buffer • Usually 8 bits per component in buffer glColor3f(): 3 float parameters glColor3d(): 3 double parameters glColor3ui(): 3 unsigned int glColor3dv(): color stored in array parameter • Note in glColor3f the color values range from 0.0 (none) to 1.0 (all), whereas in glColor3ui the values range from 0 to 255 • glColor3f(1.0, 0.0, 0.0): pure red

34. Other major colors • Cyan: green and blue fully on • Magenta: red and blue fully on • Yellow: red and green fully on • White: red, green and blue fully on • If R,G, B components are equal: shades of gray • Additive color: we think of color as being formed from three primary color (Red, Blue, Green) that are mixed to form desired color

35. RGBA System • The fourth components (A) is called alpha channel • Indicates opaqueness of color • 1: fully opaque • 0: fully transparent • Now, we use glColor4d(..) and 4-argument forms for all the other types • Useful for creating transparent effects • Recall: • Opaque object passes no light through • Fully transparent object: passes all light through

36. Color and State • The color as set by glColor becomes part of the state and will be used until changed • Colors and other attributes are not part of the object but are assigned when the object is rendered • We can create conceptual vertex colors by code such as glColor glVertex glColor glVertex

37. Smooth Color • Default is smooth shading • OpenGL interpolates vertex colors across visible polygons • Alternative is flat shading • Color of first vertex determines fill color • glShadeModel(GL_SMOOTH) or GL_FLAT • See smooth.c

38. Some other attributes • glPointSize(2.0): points are drawn 2 pixels wide • glLineWidth(..) • glLineStipple(..): create dashed or dotted lines

39. CSC 341 Introduction to Computer Graphics Drawing in OpenGL: Viewing and Viewports

40. Let’s look at myDisplay() function • Display callback function, where the drawing is done. • Clear window • Do our drawing • SWAP buffers so that what we have drawn becomes visible (double buffering) glutSwapBuffers(); • glFlush(): forces OpenGL to render as soon as possible. Avoids any delay.

41. myDisplay() void myDisplay(){ glClear(GL_COLOR_BUFFER_BIT); glColor3f(1.0, 0.0, 0.0); // set color to red glBegin(GL_POLYGON); // list the vertices to draw a diamond glVertex2f(0.90, 0.50); glVertex2f(0.50, 0.90); glVertex2f(0.10, 0.50); glVertex2f(0.50, 0.10); glEnd(); glColor3f(0.0, 0.0, 1.0); // set color to blue glRectf(0.25, 0.25, 0.75, 0.75); // draw a rectangle glFlush(); // force OpenGL to render glutSwapBuffers(); // swap buffers }

42. Clearing the window • glClear(…): clears the window by overwriting it with the background color • How to set the background color? • glClearColor(GLfloat Red, GLfloat Green, GLfloat Blue, GLfloat Alpha) • E.g. to set it to blue, and opaque: glClearColor(0.0,0.0,1.0,1.0); • Where to set the background color ? • it is independent of drawing • Typically set in your initialization functions, not in display callback function

43. glClear(…) cont’d • Involves clearing frame buffer • Frame buffer might store different types of information • Color, depth • glClear() allows user to select what to clear • Logical OR of options can be given glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT)

44. Where are we drawing? • Next we have to specify the geometry of the objects we want to draw. • But, how do we specify the coordinates? Relative to what? • To understand this, it would be helpful to learn about orthographic viewing in general, because 2D viewing is a special case of 3D orthographic viewing

45. Viewing • Orthographic Viewing (Projection) • simplest, default • Camera (of synthetic-camera model) infinitely far from objects • Leave image plane fixed and move camera far from the plane • All projectors become parallel in the limit • Center of projection is replaced by a direction of projection

46. Orthographic Viewing cont’d • Suppose that • Projectors parallel to z-axis • Projection plane at z= 0 • Projectors perpendicular (orthogonal) to projection plane • We can slide the projection plane along z-axis without changing where the projectors intersect this plane

47. Default OpenGL Camera • OpenGL places a camera on the projection plane at the origin pointing in the negative z direction • Sees only objects in the viewing volume • The default viewing volume is a box centered at the origin with a side of length 2 • We can change the viewing volume by specifying left, right, bottom, top, near, far

48. z=0 Orthographic Viewing In the default orthographic view, points are projected forward along the z axis onto the plane z=0 Orthographic projection takes (x,y,z) and projects to (x,y,0)

49. 2D viewing is a special case of 3D orthographic viewing • We could consider 2D viewing directly by taking a rectangular area of our 2D world. • In 2D, all vertices are on z=0, so, point and projection are the same • All we need is to specify a viewing (clipping) rectangle (on z=0 ) • Any drawing outside this region is clipped away.

50. 2D viewing is a special case of 3D orthographic viewing • It is a good idea to think of this in terms of drawing on a rectangular idealized drawing window • We will specify coordinates relative to this window • We will then inform OpenGL of our idealized drawing window and OpenGL will scale the image drawn in our idealized drawing window to fit within the actual graphics window (the viewport in fact) • Why are we doing this?? Because we do not have complete control on actual graphics window size. • We do not want to explicitly scale all of our coordinates when the user resizes the window