1. On to OpenGL Introduction to Computer Graphics and Animation (Principle of Computer Graphics) Rattapoom Waranusast

2. Programmer’s Interface Programmer sees the graphics system through a software interface: the Application Programmer Interface (API)

3. SGI and GL Silicon Graphics (SGI) revolutionized the graphics workstation by implementing the pipeline in hardware (1982) To use the system, application programmers used a library called GL With GL, it was relatively simple to program three dimensional interactive applications

4. OpenGL The success of GL lead to OpenGL in 1992, a platform- independent API that was –Wide availability and hardware support. –Easy to use –Close enough to the hardware to get excellent performance –Device and language independence (portability) –Multiple programming language support –Stability Backward compatibility is mandated by the ARB. –Scalability. It can be implemented in PCs, workstations, supercomputers, consumer electronics (games), and, recently, even mobile phones. –Powerful 3D graphics.

5. OpenGL History Controlled by an Architectural Review Board (ARB) until 2006 (now Khronos Group) –Members include SGI, Microsoft (left in 2003), Nvidia, AMD/ATI, Adobe, Apple, Intel, Google, IBM, Sony, Samsung, Nokia, Sun/Oracle, Mozilla, EA … –Relatively stable (present version 4.1) Evolution reflects new hardware capabilities –Allows for platform specific features through extensions See http://www.opengl.org for up-to-date infohttp://www.opengl.org

6. OpenGL Libraries OpenGL core library (GL, OpenGL32) –Lowest level: vertex, matrix manipulation glVertex3f(point.x, point.y, point.z) OpenGL Utility Library (GLU) –Provides functionality in OpenGL core but avoids having to rewrite code –Helper functions for shapes, transformations gluPerspective( fovy, aspect, near, far ) OpenGL Utility Toolkit (GLUT) –Highest level: Window and interface management –Portable windowing API –Not officially part of OpenGL glutSwapBuffers() Links with window system –GLX for X window systems –WGL for Windows –AGL for Macintosh

7. OpenGL and Related API GLUT GLU GL GLX, AGL or WGL X, Win32, Mac O/S software and/or hardware application program OpenGL Motif widget or similar

8. Windowing with OpenGL OpenGL is independent of any specific window systems OpenGL can be used with different window systems –X windows (GLX) –MFC –… GLUT provide a portable API for creating window and interacting with I/O devices

9. OpenGL State OpenGL is a state machine OpenGL functions are of two types –Primitive generating Can cause output if primitive is visible How vertices are processed and appearance of primitive are controlled by the state –State changing Transformation functions Attribute functions

10. OpenGL Conventions Functions in OpenGL start with gl –Most functions just gl (e.g., glColor() ) –Functions starting with glu are utility functions (e.g., gluLookAt() ) Note that GLU functions can always be composed entirely from core GL functions –Functions starting with glut are from the GLUT library, built on top of OpenGL and WGL (Windows) or X (Linux) for window management, mouse and keyboard events, etc. Created and distributed as an entirely different library

11. OpenGL Conventions Function names indicate argument type and number –Functions ending with f take floats –Functions ending with i take ints –Functions ending with b take bytes –Functions ending with ub take unsigned bytes –Functions that end with v take an array. Examples –glColor3f() takes 3 floats –glColor4fv() takes an array of 4 floats

12. OpenGL #defines Most constants are defined in the include files gl.h, glu.h and glut.h –Note #include should automatically include the others –Examples –glBegin(GL_POLYGON) –glClear(GL_COLOR_BUFFER_BIT) include files also define OpenGL data types: Glfloat, Gldouble,…

13. Experiment 4.1 Run square.cpp The following 6 statements create the square glBegin(GL_POLYGON); glVertex3f(20.0, 20.0, 0.0); glVertex3f(80.0, 20.0, 0.0); glVertex3f(80.0, 80.0, 0.0); glVertex3f(20.0, 80.0, 0.0); glEnd();

14. Experiment 4.1 Determine which way the x- and y-axes are oriented. One way to do that is by changing the vertex co- ordinates. The last co-ordinate is obviously the z co- ordinate.

15. OpenGL Co-ordinate system x y (0,0) (20,20,0) (80,80,0)

16. Experiment 4.2 What exactly do the vertex coordinate value mean? mm.? cm.? pixels? Change the glutInitWindowSize() parameter values of square.cpp first to glutInitWindowSize(300,300) and then to glutInitWindowSize(500,250).

17. Projection Statement glOrtho(0.0,100.0,0.0,100.0,-1.0, 1.0); In the resize() function, which determine an imaginary view box inside which the programmer draws. Generally glOrtho(left,right,bottom,top,near,far); sets up a viewing box with corners at 8 points.

18. (left, bottom, -far) glOrtho glOrtho(left,right,bottom,top,near,far); z x y (left, top, -near) (left, bottom, -near)(right, bottom, -near) (right, bottom, -far) (right, top, -far) (right, top, -near) (left, top, -far)

19. (0.0, 0.0, -1.0) glOrtho glOrtho(0.0, 100.0, 0.0, 100.0, -1.0, 1.0); z x y (0.0, 100.0, 1.0) (0.0, 0.0, 1.0)(100.0, 0.0, 1.0) (100.0, 0.0, -1.0) (100.0, 100.0, -1.0) (100.0, 100.0, 1.0) (0.0, 100.0, -1.0)

20. Viewing Box glOrtho (left, right, bottom, top, near, far);

21. Viewing Box of square.cpp

22. Rendering Process of glOrtho Shoot –Objects are projected perpendicularly onto the front face of the viewing box. –The front face of the viewing box is called the viewing face and the plane on which is lies the viewing plane. Print –The viewing face is proportionately scaled to fit the rectangular OpenGL window.

23. Right and Left –Handed Systems z x y z x y Right-handed systemLeft-handed system

24. Experiment 4.3 Change only the viewing box of square.cpp by replacing –glOrtho(0.0, 100.0, 0.0, 100.0, -1.0, 1.0) with –glOrtho(-100.0, 100.0, -100.0, 100.0, -1.0, 1.0). The location of the square in the new viewing box is different and, so as well, the result of shoot-and-print.

25. Experiment 4.3 Change the viewing box of square.cpp by replacing –glOrtho(0.0, 100.0, 0.0, 100.0, -1.0, 1.0) successively with the following, in each case trying to predict the output before running: –glOrtho(0.0, 200.0, 0.0, 200.0, -1.0, 1.0) –glOrtho(20.0, 80.0, 20.0, 80.0, -1.0, 1.0) –glOrtho(0.0, 100.0, 0.0, 100.0, -2.0, 5.0)

26. Experiment 4.4 Alter the z coordinates of each vertex of “square” as follows: glBegin(GL_POLYGON); glVertex3f(20.0, 20.0, 0.5); glVertex3f(80.0, 20.0, -0.5); glVertex3f(80.0, 80.0, 0.1); glVertex3f(20.0, 80.0, 0.3); glEnd(); The rendering does not change, why?

27. Experiment 4.5 Add another square by inserting the following right after the code for the original square in square.cpp : glBegin(GL_POLYGON); glVertex3f(120.0, 120.0, 0.0); glVertex3f(180.0, 120.0, 0.0); glVertex3f(180.0, 180.0, 0.0); glVertex3f(120.0, 180.0, 0.0); glEnd();

28. Clipping OpenGL clips the scene to within the viewing box before rendering, so that objects or parts of objects drawn outside are not rendered. In Experiment 4.5, can you redefine the viewing box by changing the parameters of the glOrtho() statement so that both squares are visible?

29. Experiment 4.6 For a more dramatic illustration of clipping, first replace the square in the original square.cpp with a triangle; in particular, replace the polygon code with the following: glBegin(GL_POLYGON); glVertex3f(20.0, 20.0, 0.0); glVertex3f(80.0, 20.0, 0.0); glVertex3f(80.0, 80.0, 0.0); glEnd();

30. Experiment 4.6 Next, lift the first vertex up the z-axis by changing it to glVertex3f(20.0, 20.0, 0.5); lift it further by changing its z-value to 1.5, then 2.5 and, finally, 10.0. Make sure you believe that what you see in the last three cases is indeed a triangle clipped to within the viewing box.

31. Computer Screen Screen Co-ordinates So, careful about this, especially when coding programs where data is read from one system and used in the other. x y (0,0)

32. Experiment 4.7 The color of the square in square.cpp is specified by the three parameters of the glColor3f(0.0, 0.0, 0.0) statement in the drawScene() routine, each of which gives the value of one of the three primary components, blue, green and red. Determine which parameters to glColor3f determine the blue, green, red components. Change parameters in glClearColor()

33. RGB Color Model

34. Experiment 4.8 Add the additional color declaration statement glColor3f(1.0, 0.0, 0.0) just after the existing one glColor3f(0.0, 0.0,0.0) in the drawing routine of square.cpp so that the foreground color block becomes // Set foreground (or drawing) color. glColor3f(0.0, 0.0, 0.0); glColor3f(1.0, 0.0, 0.0);

35. Experiment 4.8 Replace the polygon declaration part of square.cpp with: glBegin(GL_POLYGON); glColor3f(1.0, 0.0, 0.0); glVertex3f(20.0, 20.0, 0.0); glColor3f(0.0, 1.0, 0.0); glVertex3f(80.0, 20.0, 0.0); glColor3f(0.0, 0.0, 1.0); glVertex3f(80.0, 80.0, 0.0); glColor3f(1.0, 1.0, 0.0); glVertex3f(20.0, 80.0, 0.0); glEnd(); Color is a state variable.

36. Interpolation X = cP + (1-c)Q x y (0,0) Q (7,16) P (1,4) R T S

37. Exercise 4.1 1. Modify square.cpp to draw 6 squares (red, green, blue, cyan, magenta, and yellow) on the white background as: (in class)

38. Exercise 4.2 2. Modify square.cpp to draw one Equilateral, one Isosceles, one Scalene, and one Right triangles with different colors. (in class)

39. OpenGL Geometric Primitives

40. Experiment 4.9 Replace glBegin(GL_POLYGON) with glBegin(GL_POINTS) in square.cpp and make the point size bigger by inserting // Set point size glPointSize(5.0); just before glBegin(GL_POINTS) Continue, replacing GL_POINTS with GL_LINES, GL_LINE_STRIP and, GL_LINE_LOOP. The thickness of lines can be set by a glLineWidth (width) call.

41. Experiment 4.10 Replace the polygon declaration part of square.cpp with glBegin(GL_TRIANGLES); glVertex3f(10.0, 90.0, 0.0); glVertex3f(10.0, 10.0, 0.0); glVertex3f(35.0, 75.0, 0.0); glVertex3f(30.0, 20.0, 0.0); glVertex3f(90.0, 90.0, 0.0); glVertex3f(80.0, 40.0, 0.0); glEnd(); Insert glPolygonMode(GL_BACK,GL_LINE); before glBegin(GL_TRIANGLES); Change GL_BACK to GL_FRONT and GL_FRONT_AND_BACK

42. Experiment 4.11 Replace the polygon declaration part of square.cpp with glPolygonMode(GL_FRONT_AND_BACK, GL_LINE); glBegin(GL_TRIANGLE_STRIP); glColor3f(1.0, 0.0, 0.0); glVertex3f(10.0, 90.0, 0.0); glColor3f(0.0, 1.0, 0.0); glVertex3f(10.0, 10.0, 0.0); glColor3f(0.0, 0.0, 1.0); glVertex3f(35.0, 75.0, 0.0); glColor3f(1.0, 1.0, 0.0); glVertex3f(30.0, 20.0, 0.0); glColor3f(1.0, 0.0, 1.0); glVertex3f(90.0, 90.0, 0.0); glColor3f(0.0, 1.0, 1.0); glVertex3f(80.0, 40.0, 0.0); glEnd();

43. Experiment 4.12 Replace GL_FRONT_AND_BACK in the previous experiment with GL_FRONT and GL_BACK Replace the polygon declaration part of square.cpp with glBegin(GL_TRIANGLE_FAN); glVertex3f(10.0, 10.0, 0.0); glVertex3f(15.0, 90.0, 0.0); glVertex3f(55.0, 75.0, 0.0); glVertex3f(80.0, 30.0, 0.0); glVertex3f(90.0, 10.0, 0.0); glEnd(); Apply both the filled and outlined drawing modes.

44. Experiment 4.13 Replace the polygon declaration part of square.cpp with glBegin(GL_QUAD_STRIP); glColor3f(1.0, 0.0, 0.0); glVertex3f(10.0, 90.0, 0.0); glColor3f(0.0, 1.0, 0.0); glVertex3f(10.0, 10.0, 0.0); glColor3f(0.0, 0.0, 1.0); glVertex3f(30.0, 80.0, 0.0); glColor3f(1.0, 1.0, 0.0); glVertex3f(40.0, 15.0, 0.0); glColor3f(1.0, 0.0, 1.0); glVertex3f(60.0, 75.0, 0.0); glColor3f(0.0, 1.0, 1.0); glVertex3f(60.0, 25.0, 0.0); glColor3f(1.0, 0.0, 1.0); glVertex3f(90.0, 90.0, 0.0); glColor3f(1.0, 1.0, 1.0); glVertex3f(85.0, 20.0, 0.0); glEnd(); Apply both the filled and outlined drawing modes.

45. Experiment 4.14 Replace GL_QUAD_STRIP in the previous experiment with GL_QUADS and GL_POLYGON Try to change some vertices, to make the polygon lines not cross to each other. Apply both the filled and outlined drawing modes.

46. (Extremely) Important Note When specifying triangles in OpenGL, ensure that contiguous triangles are consistently oriented. Also ensure when using GL_QUADS, GL_QUAD_STRIP or GL_POLYGON that each polygon is a plane convex figure.

47. Convex 2D Shape Convex Not Convex

48. Experiment 4.15 Replace the polygon declaration part of square.cpp with glBegin(GL_POLYGON); glVertex3f(20.0, 20.0, 0.0); glVertex3f(50.0, 20.0, 0.0); glVertex3f(80.0, 50.0, 0.0); glVertex3f(80.0, 80.0, 0.0); glVertex3f(20.0, 80.0, 0.0); glEnd(); Apply both the filled and outlined drawing modes.

49. Experiment 4.16 Replace the polygon declaration part of square.cpp with glBegin(GL_POLYGON); glVertex3f(20.0, 20.0, 0.0); glVertex3f(80.0, 20.0, 0.0); glVertex3f(40.0, 40.0, 0.0); glVertex3f(20.0, 80.0, 0.0); glEnd(); Apply both the filled and outlined drawing modes.

50. Experiment 4.16 Draw the same shape, but change the sequence, move the first vertex to the last vertex as. glBegin(GL_POLYGON); glVertex3f(80.0, 20.0, 0.0); glVertex3f(40.0, 40.0, 0.0); glVertex3f(20.0, 80.0, 0.0); glVertex3f(20.0, 20.0, 0.0); glEnd(); Apply both the filled and outlined drawing modes. What happened? Why?

51. Approximating Curved Objects There is no OpenGL primitive objects for curves, or circles. Sincerity is a very important human quality. If you don’t have it, you gotta fake it!!” x y (h,k) r t p p = (h + rcos(t), k + rsin(t))

52. Experiment 4.17 Run circle.cpp. Increase the number of vertices on the line loop by pressing ‘+’ till it “becomes” a circle. Press ‘-’ to decrease the number of vertices. Draw a disc (a filled circle) by way of –A polygon –A triangle fan.

53. Experiment 4.18 Run parabola.cpp. Increase the number of vertices on the line strip by pressing ‘+’ and decrease the number of vertices by pressing ‘-’. The parametric equations implemented are x = 50 + 50t, y = 100t 2, -1 <= t <= 1 Try to modify the equation.

54. Assignment 1 1. Modify square.cpp to draw a Pythagoras diagram (the diagram must be accurate).

55. Assignment 1 2. Create a square annulus (a) using a single triangular strip (in class). 3. Create a shape (b) using a single triangular strip. 4. Create a square annulus (a) using two triangle fans. (a)(b)

56. Assignment 1 5. Draw a sine curve between x = -  and x = . 6. Draw an ellipse. Recall the parametric equations for an ellipse with semi-major axis of length A and semi-minor of length B. x y (h,k) r t p = (h + Acos(t), k + Bsin(t)), 0  t   (h + A, k) (h, k + B)

57. Assignment 1 7. Modify square.cpp or circle.cpp to draw a house. Please feel free to use your imagination.