1. C O M P U T E R G R A P H I C S Jie chen Computer graphic -- Programming with OpenGL I

2. C O M P U T E R G R A P H I C S Jie chen 2 What is new Website: http://www.ee.oulu.fi/~jiechen/Course.htm Lecture slides for 3 rd are online now

3. C O M P U T E R G R A P H I C S Jie chen 3 A Good news about VS2008

4. C O M P U T E R G R A P H I C S Jie chen 4 VS2008 student freeA student of University of Oulu (Oulun Yliopisto) can download her/his own free copies of MS Visual Studio 2008 Professional Edition (and other software) here: https://www.dreamspark.com/ https://www.dreamspark.com/ –This is a Microsoft's site where user requires an MS Live account (free) and that needs to be verified to be a student account from our university. This is done using the authentication service that our university provides and can be done with an account to Paju. Also our IT department also links to the site as one of the software sources for students (in Finnish only) http://www.oulu.fi/tietohallinto/opiskelijoille/ohjelmistot.ht ml http://www.oulu.fi/tietohallinto/opiskelijoille/ohjelmistot.ht ml

5. C O M P U T E R G R A P H I C S Jie chen 5 Setup for VS2008 Run Visual C++ 2008. Go to Tools -> Options, then Projects and Solutions -> VC++ Directories ->"Show directories for". –adding "include files” for the folder where you installed GLUT lib and include folder. –adding “library files” for the folder where you installed gult32.lib.

6. C O M P U T E R G R A P H I C S Jie chen 6 Setup for VS2008 Go to Project -> Properties. Click on Configuration Properties. Click the "Configuration Manager" button in the upper-right corner. Change the "Active solution configuration" from "Debug" to "Release". Click close, then click OK. In Project -> Properties, go to Configuration Properties -> General. Where it shows the output directory as "Release", backspace the word "Release", and click OK. –This makes Visual C++ put the executable in the same directory as the source code, so when our program needs to open a file, it looks for it in that directory. –In this case, the program will have to load in an image file called "vtr.bmp". Go to Build -> Build project_name to build your project. Run the program by going to Debug -> Start Without Debugging. If all goes well, the test program should run.

7. C O M P U T E R G R A P H I C S Jie chen 7 A simple example using OpenGL

8. C O M P U T E R G R A P H I C S Jie chen 8 A simple example using OpenGL Download the "basic shapes" program, and compile and run it (details on how to do that can be found in Lecture 3)."basic shapes" Take a look at it, and hit ESC when you're done. It should look like the following image:

9. C O M P U T E R G R A P H I C S Jie chen 9 Overview of How the Program Works How does the program work? –The basic idea is that we tell OpenGL the 3D coordinates of all of the vertices of our shapes. –OpenGL uses the standard x and y axes, with the positive x direction pointing toward the right and the positive y direction pointing upward. –However, in 3D we need another dimension, the z dimension. The positive z direction points out of the screen.

10. C O M P U T E R G R A P H I C S Jie chen 10 Overview of How the Program Works How does OpenGL use these 3D coordinates? It simulates the way that our eyes work. eyes 3D points

11. C O M P U T E R G R A P H I C S Jie chen 11 Overview of How the Program Works OpenGL converts all of the 3D points to pixel coordinates before it draws anything. To do this, it draws a line from each point in the scene to your eye and takes the intersection of the lines and the screen rectangle, as in the above picture. So, when OpenGL wants to draw a triangle, it converts the three vertices into pixel coordinates and draws a "2D" triangle using those coordinates. 3D points pixel coordinates

12. C O M P U T E R G R A P H I C S Jie chen 12 Overview of How the Program Works The user's "eye" is always at the origin and looking in the negative z direction. Of course, OpenGL doesn't draw anything that is behind the "eye". –After all, it isn't the all-seeing eye of Sauron. The eye of Sauron, The Lord of the Rings

13. C O M P U T E R G R A P H I C S Jie chen 13 Overview of How the Program Works How far away is the screen rectangle from your eye? It doesn't matter. –No matter how far away the screen rectangle is, a given 3D point will map to the same pixel coordinates. –All that matters is the angle that your eye can see.

14. C O M P U T E R G R A P H I C S Jie chen 14 Going Through the Source Code All of this stuff about pixel coordinates is great and all, but as researcher or programmer, we want to see some code. Take a look at main.cpp. –Let's go through the file and see if we can understand what it's doing.

15. C O M P U T E R G R A P H I C S Jie chen 15 Going Through the Source Code First, we include our header files. –Pretty standard stuff for C++. –If we're using a Mac, we want our program to include GLUT/glut.h and OpenGL/OpenGL.h; –otherwise, we include GL/glut.h.

16. C O M P U T E R G R A P H I C S Jie chen 16 Going Through the Source Code It just makes it so that we don't have to type std:: a lot; – for example, so we can use cout instead of std::cout.

17. C O M P U T E R G R A P H I C S Jie chen 17 Going Through the Source Code This function handles any keys pressed by the user. For now, all that it does is quit the program when the user presses ESC, by calling exit. The function is passed the x and y coordinates of the mouse, but we don't need them.

18. C O M P U T E R G R A P H I C S Jie chen 18 Going Through the Source Code The initRendering function initializes our rendering parameters. –The call makes sure that an object (O2) shows up behind an object (O1). –Note that glEnable, like every OpenGL function, begins with "gl".

19. C O M P U T E R G R A P H I C S Jie chen 19 Going Through the Source Code The handleResize function is called whenever the window is resized. –w and h are the new width and height of the window.

20. C O M P U T E R G R A P H I C S Jie chen 20 Going Through the Source Code void gluPerspective(GLdouble fovy, GLdouble aspect,GLdouble near, GLdouble far);. –fovy =Θ= 45.0: telling OpenGL the angle that user's eye can see. –Near=1.0: indicates not to draw anything with a z coordinate of smaller than 1. This is so that when something is right next to our eye, it doesn't fill up the whole screen. –Far= 200.0 tells OpenGL not to draw anything with a z coordinate larger than 200. We don't care very much about stuff that's really far away. viewing volume

21. C O M P U T E R G R A P H I C S Jie chen 21 Going Through the Source Code So, why does gluPerspective begin with "glu" instead of "gl"? –gl: a OpenGL function –glu: a GLU (GL Utility) function –glut: a GLUT (GL Utility Toolkit) function –For examples: glRectf(-25.0, -25.0, 25.0, 25.0); gluOrtho2D (0.0, w, 0.0, h); glutSwapBuffers(); –We won't really worry about the difference among OpenGL, GLU, and GLUT. Just include “glut.h”, that is enough for Windows.

22. C O M P U T E R G R A P H I C S Jie chen 22 Going Through the Source Code The drawScene function is where the 3D drawing actually occurs. –call glClear to clear information from the last time we drew. –In most every OpenGL program, you'll want to do this.

23. C O M P U T E R G R A P H I C S Jie chen 23 Going Through the Source Code GL_COLOR_BUFFER_BIT: Color Buffer –OpenGL defined constants begin with GL_, use all capital letters, and use underscores to separate words –The Color Buffer store the color for each pixels of the current frame. –The color is in RGBA mode i.e., Red, Green, Blue and Alpha. –The first 3 components (RGB) can be considered as color of a pixel. –Alpha value can be considered as the opacity or transparency of a pixel.

24. C O M P U T E R G R A P H I C S Jie chen 24 Going Through the Source Code GL_DEPTH_BUFFER_BIT: Depth Buffer –Depth Buffer holds the depth of each pixels of a frame. –It is also called z buffer. –Depth buffer is associated with Depth Test. –For each pixel drawn, Depth Test compare the current depth stored in the depth buffer with the depth of the new pixel to draw. –a pixel is drawn or not depending on result of depth test. –We usually use the depth buffer to draw nearest pixels (p 1 ), pixels behind are not drawn (p 2 ). viewing volume p1p1 p2p2

25. C O M P U T E R G R A P H I C S Jie chen 25 Going Through the Source Code More about Buffer? –http://jerome.jouvie.free.fr/OpenGl/Lesson s/Lesson5.phphttp://jerome.jouvie.free.fr/OpenGl/Lesson s/Lesson5.php

26. C O M P U T E R G R A P H I C S Jie chen 26 Going Through the Source Code For now, we'll ignore this. It'll make sense after the next lesson.

27. C O M P U T E R G R A P H I C S Jie chen 27 Going Through the Source Code Draw the trapezoid (Begin the substance of our program). –Call glBegin(GL_QUADS) to tell OpenGL that we want to start drawing quadrilaterals. –Specify the four 3D coordinates of the vertices of the trapezoid, in order, using calls to glVertex3f. –When call glVertex3f, specifying three float coordinates. –After drawing quadrilaterals, call glEnd(). Note that every call to glBegin must have a matching call to glEnd. (-0.7f, -1.5f, -5.0f)(0.7f, -1.5f, -5.0f) (0.4f, -0.5f, -5.0f) (-0.4f, -0.5f, -5.0f)

28. C O M P U T E R G R A P H I C S Jie chen 28 Going Through the Source Code Draw the pentagon. –To draw it, we split it up into three triangles, which is pretty standard for OpenGL. –Calling glBegin(GL_TRIANGLES) to tell OpenGL that let us begin to draw triangles. –Specify coordinates of the vertices. –OpenGL automatically puts the coordinates together in groups of three. – Each group of three coordinates represents one triangle.

29. C O M P U T E R G R A P H I C S Jie chen 29 Going Through the Source Code Finally, we draw the triangle. We haven't called glEnd() to tell OpenGL that we're done drawing triangles yet, so it knows that we're still giving it triangle coordinates.

30. C O M P U T E R G R A P H I C S Jie chen 30 Going Through the Source Code Finish drawing triangles -> call glEnd(). Note that we could have drawn the four triangles using four calls to glBegin(GL_TRIANGLES) and four accompanying calls to glEnd(). However, this makes the program slower, and you shouldn't do it. There are other things we can pass to glBegin in addition to GL_TRIANGLES and GL_QUADS, but triangles and quadrilaterals are the most common things to draw.

31. C O M P U T E R G R A P H I C S Jie chen 31 Going Through the Source Code This line makes OpenGL actually move the scene to the window. We'll call it whenever we're done drawing a scene.

32. C O M P U T E R G R A P H I C S Jie chen 32 Going Through the Source Code main function. –start by initializing GLUT. –In the call to glutInitWindowSize and set the window to be 400x400. –Call glutCreateWindow to tell OpenGL what title we want for the window. –Call initRendering to initialize OpenGL rendering.

33. C O M P U T E R G R A P H I C S Jie chen 33 Going Through the Source Code Point GLUT to the functions to handle keypresses and drawing and resizing the window. One important thing: –we're not allowed to draw anything except inside the drawScene function that we explicitly give to GLUT

34. C O M P U T E R G R A P H I C S Jie chen 34 Going Through the Source Code Call glutMainLoop, which tells GLUT to do its thing. –capture key and mouse input –draw the scene by calling our drawScene function – do some other stuff glutMainLoop like a defective boomerang, never returns. –GLUT just takes care of the rest of our program's execution. After the call, return 0 so that the compiler doesn't complain about the main function not returning anything, but the program will never get to that line. And that's how our first OpenGL program works.

35. C O M P U T E R G R A P H I C S Jie chen 35 More details about this example

36. C O M P U T E R G R A P H I C S Jie chen 36 OpenGL function format glVertex3f(x,y,z,w) belongs to GL library function name x,y,z,w are floats glVertex3fv(p) p is a pointer to an array dimensions gl: a OpenGL function glu: a GLU (GL Utility) function glut: a GLUT (GL Utility Toolkit) function

37. C O M P U T E R G R A P H I C S Jie chen 37 OpenGL function format glVertex3f(x,y,z,w) x,y and z are coordinates and w is a factor, so the coordinates is equivalent to (x/w, y/w, z/w). The default values of z and w are z =0 and w=1. For examples: glVertex3f(1, 2, 3, 3) -> glVertex3f(1/3, 2/3, 1, 1) glVertex3f(1, 2) -> glVertex3f(1, 2, 0, 1) glVertex3f(1, 2, 3) -> glVertex3f(1, 2, 3, 1) i.e., z =0 and w=1 i.e., w=1

38. C O M P U T E R G R A P H I C S Jie chen 38 OpenGL function format glVertex3 f (x,y,z)

39. C O M P U T E R G R A P H I C S Jie chen 39 OpenGL Primitives GL_POINTSGL_LINES GL_LINE_LOOP GL_LINE_STRIP

40. C O M P U T E R G R A P H I C S Jie chen 40 OpenGL Primitives GL_QUAD_STRIP GL_POLYGON GL_TRIANGLE_STRIPGL_TRIANGLE_FAN GL_TRIANGLES

41. C O M P U T E R G R A P H I C S Jie chen 41 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 –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 nonsimple polygon nonconvex polygon p1p1 p2p2

42. C O M P U T E R G R A P H I C S Jie chen 42 Polygon Issues How can we plot those polygons which do not satisfy these conditions? –nonsimple polygon: edges DO cross –nonconvex polygon : There are points on line segment between two points in a polygon are NOT in the polygon –Flat: all vertices are NOT in the same plane Solution: divide them using Triangles because triangles satisfy all conditions or quadrangle nonsimple polygon nonconvex polygon

43. C O M P U T E R G R A P H I C S Jie chen 43 Polygon Issues Subdividing –to Improve a Polygonal Approximation to a Surface using approximating triangles 20 triangles 80 triangles320 triangles

44. C O M P U T E R G R A P H I C S Jie chen 44 Polygon Issues Do something huge! Demo

45. C O M P U T E R G R A P H I C S Jie chen 45 Polygon Issues Do something huge!

46. C O M P U T E R G R A P H I C S Jie chen 46 Hints for polygonizing surfaces Keep polygon orientations consistent – all clockwise or all counterclockwise –important for polygon culling and two-sided lighting Watch out for any nontriangular polygons – three vertices of a triangle are always on a plane; any polygon with four or more vertices might not

47. C O M P U T E R G R A P H I C S Jie chen 47 Hints for polygonizing surfaces There's a trade-off between the display speed and the image quality – few polygons render quickly but might have a jagged appearance; millions of tiny polygons probably look good but might take a long time to render – use large polygons where the surface is relatively flat, and small polygons in regions of high curvature Avoid T-intersections in our models –there's no guarantee that the line segments AB and BC lie on exactly the same pixels as the segment AC – this can cause cracks to appear in the surface

48. C O M P U T E R G R A P H I C S Jie chen 48 Some terms Rendering: the process by which a computer creates images from models. model, or object: constructed from geometric primitives - points, lines, and polygons - that are specified by their vertices. pixel: the smallest visible element that the display hardware can put on the screen. The final rendered image consists of pixels drawn on the screen. Bitplane: an area of memory that holds one bit of information (for instance, what color it is supposed to be) for every pixel on the screen. framebuffer : Organized by the bitplanes. It holds all the information that the graphics display needs to control the color and intensity of all the pixels on the screen. pixel

49. C O M P U T E R G R A P H I C S Jie chen 49 24-bit true color pixel Bitplane DAC: digital-to-analog converter 0 1 0 0 1 0 1 1 1 0 1 0 1 1 0 0 0 0 0 0 1 0 1 0 8 bit DAC registers Blue 75 Green 172 Red 10 Color Guns Frame Buffer CRT Raster 8 8 8

50. C O M P U T E R G R A P H I C S Jie chen 50 OpenGL rendering pipeline ---Order of Operations

51. C O M P U T E R G R A P H I C S Jie chen 51 Order of Operations OpenGL rendering pipeline has a similar order of operations, a series of processing stages. This ordering is not a strict rule of how OpenGL is implemented but provides a reliable guide for predicting what OpenGL will do.

52. C O M P U T E R G R A P H I C S Jie chen 52 Order of Operations How does OpenGL take to processing data? –Geometric data (vertices, lines, and polygons) follow the path through the row of boxes that includes evaluators and per-vertex operations, while pixel data (pixels, images, and bitmaps) are treated differently for part of the process. –Both types of data undergo the same final steps (rasterization and per-fragment operations) before the final pixel data is written into the framebuffer.

53. C O M P U T E R G R A P H I C S Jie chen 53 Display Lists All data, whether it describes geometry or pixels, can be saved in a display list for current or later use. –The alternative to retaining data in a display list is processing the data immediately - also known as immediate mode. When a display list is executed, the retained data is sent from the display list just as if it were sent by the application in immediate mode.

54. C O M P U T E R G R A P H I C S Jie chen 54 Evaluators All geometric primitives (e.g., point, line or polygon ) are eventually described by vertices. Parametric curves and surfaces may be initially described by control points and polynomial functions called basis functions. –Evaluators provide a method to derive the vertices used to represent the surface from the control points. –The method is a polynomial mapping, which can produce surface normal, texture coordinates, colors, and spatial coordinate values from the control points.

55. C O M P U T E R G R A P H I C S Jie chen 55 Per-Vertex Operations Converting the vertex data into primitives (e.g., point, line or polygon ). If advanced features are enabled, this stage is even busier. –Generate and transform texture coordinates. –Perform the lighting calculations using the transformed vertex, surface normal, light source position, material properties, and other lighting information to produce a color value.

56. C O M P U T E R G R A P H I C S Jie chen 56 Primitive Assembly Primitive assembly differs, depending on whether the primitive is a point, a line, or a polygon. –If flat shading is enabled, the colors or indices of all the vertices in a line or polygon are set to the same value. –If special clipping planes are defined and enabled, they're used to clip primitives of all three types (point, line, or polygon). Finally, points, lines, and polygons are rasterized to fragments.

57. C O M P U T E R G R A P H I C S Jie chen 57 Pixel Operations Pixels from host memory are first unpacked into the proper number of components. Next, the data is scaled, biased, and processed using a pixel map. Pixel-transfer operations (scale, bias, mapping, and clamping) are performed If pixel data is read from the framebuffer. The pixel copy operation is similar to a combination of the unpacking and transfer operations, and only a single pass is made through the transfer operations.

58. C O M P U T E R G R A P H I C S Jie chen 58 Texture Memory Texture image data can be specified from framebuffer memory, as well as processor memory. All or a portion of a texture image may be replaced. Texture data may be stored in texture objects, which can be loaded into texture memory. If there are too many texture objects to fit into texture memory at the same time, the textures that have the highest priorities remain in the texture memory.

59. C O M P U T E R G R A P H I C S Jie chen 59 Fragment Operations Operations –Generating a texel (texture element, also texture pixel) ) –Performing the fog calculations –Antialiasing. –Scissoring, the alpha test, the stencil test, and the depth-buffer test. –performing blending test if in RGBA mode. –Dithering and logical operation. The fragment is then masked by a color mask or an index mask, and drawn into the appropriate buffer.

60. C O M P U T E R G R A P H I C S Jie chen 60 From buffer to image Bitplane DAC: digital-to-analog converter 0 1 0 0 1 0 1 1 1 0 1 0 1 1 0 0 0 0 0 0 1 0 1 0 8 bit DAC registers Blue 75 Green 172 Red 10 Color Guns Frame Buffer 8 8 8

61. C O M P U T E R G R A P H I C S Jie chen 61 Basics of GLUT

62. C O M P U T E R G R A P H I C S Jie chen 62 Basics of GLUT Why GLUT? –GLUT has become a popular library for OpenGL programmers, because it standardizes and simplifies window and event management. –GLUT has been ported atop a variety of OpenGL implementations, including both the X Window System and Microsoft Windows NT.

63. C O M P U T E R G R A P H I C S Jie chen 63 Initializing and Creating a Window Before you can open a window, you must specify its characteristics: –Should it be single-buffered or double-buffered? –Should it store colors as RGBA values or as color indices? –Where should it appear on your display? To specify the answers to these questions, call –glutInit(), –glutInitDisplayMode(), –glutInitWindowSize(), –glutInitWindowPosition(), –glutCreateWindow().

64. C O M P U T E R G R A P H I C S Jie chen 64 glutInit() void glutInit (int argc, char **argv); –glutInit() should be called before any other GLUT routine, because it initializes the GLUT library. –glutInit() will also process command line options, but the specific options are window system dependent. –The parameters to the glutInit() should be the same as those to main().

65. C O M P U T E R G R A P H I C S Jie chen 65 glutInitDisplayMode() void glutInitDisplayMode(unsigned int mode); Specifies a display mode (such as RGBA or color-index, or single- or double-buffered). You can also specify that the window have an associated depth, stencil, and/or accumulation buffer. –The mask argument is a bitwise ORed combination GLUT_RGBA or GLUT_INDEX, GLUT_SINGLE or GLUT_DOUBLE, –and any of the buffer-enabling flags: GLUT_DEPTH, GLUT_STENCIL, or GLUT_ACCUM. For example, for a double-buffered, RGBA- mode window with a depth and stencil buffer, use GLUT_DOUBLE | GLUT_RGBA | GLUT_DEPTH | GLUT_STENCIL. The default value is GLUT_RGBA | GLUT_SINGLE (an RGBA, single-buffered window).

66. C O M P U T E R G R A P H I C S Jie chen 66 glutInitWindowSize() void glutInitWindowSize(int width, int height); width height

67. C O M P U T E R G R A P H I C S Jie chen 67 glutInitWindowPosition() void glutInitWindowPosition(int x, int y); Requests windows to have an initial size and position. The arguments (x, y) indicate the location of a corner of the window, relative to the entire display.

68. C O M P U T E R G R A P H I C S Jie chen 68 glutCreateWindow() int glutCreateWindow(char *name); Opens a window with previously set characteristics (display mode, width, height, and so on). The string name appear in title bar. The window is not initially displayed until glutMainLoop() is entered. The value returned is a unique integer identifier for the window. This identifier can be used for controlling and rendering to multiple windows (each with an OpenGL rendering context) from the same application.

69. C O M P U T E R G R A P H I C S Jie chen 69 glutDisplayFunc() void glutDisplayFunc(void (*func)(void)) Call the Specified the function whenever the contents of the window need to be redrawn. The contents of the window may need to be redrawn when the window is –initially opened, –popped and window damage is exposed

70. C O M P U T E R G R A P H I C S Jie chen 70 glutReshapeFunc() void glutReshapeFunc (void (*func)(int width, int height)); Call this function whenever the window is resized or moved. The argument func is a pointer to a function that expects two arguments, the new width and height of a window.

71. C O M P U T E R G R A P H I C S Jie chen 71 glutKeyboardFunc() void glutKeyboardFunc(void (*func)(unsigned int key, int x, int y); Call the function, func, when a key that generates an ASCII character is pressed. The key callback parameter is the generated ASCII value. The x and y callback parameters indicate the location of the mouse (in window- relative coordinates) when the key was pressed.

72. C O M P U T E R G R A P H I C S Jie chen 72 glutMouseFunc() void glutMouseFunc(void (*func)(int button, int state, int x, int y)); Call the function, func, when a mouse button is pressed or released. The button callback parameter is one of GLUT_LEFT_BUTTON, GLUT_MIDDLE_BUTTON, or GLUT_RIGHT_BUTTON. The state callback parameter is either GLUT_UP or GLUT_DOWN, depending upon whether the mouse has been released or pressed. The x and y callback parameters indicate the location (in window- relative coordinates) of the mouse when the event occurred.

73. C O M P U T E R G R A P H I C S Jie chen 73 glutMotionFunc() void glutMotionFunc(void (*func)(int x, int y)); Call the function, func, when the mouse pointer moves within the window while one or more mouse buttons is pressed. The x and y callback parameters indicate the location (in window-relative coordinates) of the mouse when the event occurred.

74. C O M P U T E R G R A P H I C S Jie chen 74 glutPostRedisplay() void glutPostRedisplay(void); –Marks the current window as needing to be redrawn.

75. C O M P U T E R G R A P H I C S Jie chen 75 glutSetColor() void glutSetColor(GLint index, GLfloat red, GLfloat green, GLfloat blue); Loads the index in the color map –Index: with the given red, green, and blue values. –These values for RGB are normalized to lie in the range [0.0,1.0].

76. C O M P U T E R G R A P H I C S Jie chen 76 glutIdleFunc() void glutIdleFunc(void (*func)(void)); Call the function, func, if no other events are pending. –For example, when the event loop would otherwise be idle. –This is particularly useful for continuous animation or other background processing. –If NULL (zero) is passed in, execution of func is disabled.

77. C O M P U T E R G R A P H I C S Jie chen 77 glutMainLoop() void glutMainLoop(void); After all the setup is completed, GLUT programs enter an event processing loop, never to return. Registered callback functions will be called when the corresponding events instigate them.

78. C O M P U T E R G R A P H I C S Jie chen 78 The end of this lecture!