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

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 4 rd are online now

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

4. C O M P U T E R G R A P H I C S Jie chen 4 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.

5. C O M P U T E R G R A P H I C S Jie chen 5 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.

6. C O M P U T E R G R A P H I C S Jie chen 6 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.

7. C O M P U T E R G R A P H I C S Jie chen 7 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.

8. C O M P U T E R G R A P H I C S Jie chen 8 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.

9. C O M P U T E R G R A P H I C S Jie chen 9 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.

10. C O M P U T E R G R A P H I C S Jie chen 10 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.

11. C O M P U T E R G R A P H I C S Jie chen 11 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.

12. C O M P U T E R G R A P H I C S Jie chen 12 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.

13. C O M P U T E R G R A P H I C S Jie chen 13 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

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

15. C O M P U T E R G R A P H I C S Jie chen 15 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.

16. C O M P U T E R G R A P H I C S Jie chen 16 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().

17. C O M P U T E R G R A P H I C S Jie chen 17 glutInit() void glutInit (int argc, char **argv); –glutInit() should be called before any other GLUT routine, because it initializes the GLUT library.

18. C O M P U T E R G R A P H I C S Jie chen 18 glutInitDisplayMode() void glutInitDisplayMode(unsigned int mode); Specifies a display mode –RGBA or color-index –single- or double-buffered specify that the window have an associated depth, stencil, and/or accumulation buffer. –mask argument GLUT_RGBA or GLUT_INDEX, GLUT_SINGLE or GLUT_DOUBLE, –buffer-enabling flags: GLUT_DEPTH, GLUT_STENCIL, or GLUT_ACCUM.

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

20. C O M P U T E R G R A P H I C S Jie chen 20 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.

21. C O M P U T E R G R A P H I C S Jie chen 21 glutCreateWindow() int glutCreateWindow(char *name); –Opens a window with previously set characteristics display mode, width, height –The string name appear in title bar.

22. C O M P U T E R G R A P H I C S Jie chen 22 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

23. C O M P U T E R G R A P H I C S Jie chen 23 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.

24. C O M P U T E R G R A P H I C S Jie chen 24 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.

25. C O M P U T E R G R A P H I C S Jie chen 25 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.

26. C O M P U T E R G R A P H I C S Jie chen 26 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.

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

28. C O M P U T E R G R A P H I C S Jie chen 28 glutSetColor() void glutSetColor(GLint index, GLfloat red, GLfloat green, GLfloat blue); Loads the index in the color map –Index: red, green, and blue. –normalized to [0.0,1.0].

29. C O M P U T E R G R A P H I C S Jie chen 29 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.

30. C O M P U T E R G R A P H I C S Jie chen 30 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.

31. C O M P U T E R G R A P H I C S Jie chen 31 Transformations and Timers Demo

32. C O M P U T E R G R A P H I C S Jie chen 32 Transformations and Timers Transformations: View a geometric model in any orientation in three-dimensional space –glTranslatef(0.0f, 0.0f, -5.0f); //Move forward 5 units –glRotatef 30.0f, 0.0f, 0.0f, 1.0f); //Rotate about the z-axis –glPushMatrix(); //Save the transformations performed thus far –glPopMatrix(); //Undo the move to the center of the trapezoid –glMatrixMode(GL_MODELVIEW); //Switch to the drawing perspective –glutTimerFunc(25, update, 0); //Add a timer Model ScalingModel Rotation

33. C O M P U T E R G R A P H I C S Jie chen 33 Color Demo

34. C O M P U T E R G R A P H I C S Jie chen 34 Color glColor3f(0.5f, 0.0f, 0.8f); Color cube Color palette Color map

35. C O M P U T E R G R A P H I C S Jie chen 35 Lighting Lighting is 5% of light setup and 95% of revisions and adjustments. Jeremy Birn Digital Lighting and Rendering Demo

36. C O M P U T E R G R A P H I C S Jie chen 36 Lighting Imaging function –I=f(ρ, n, s) I: radiosity ρ: albedo N: unit normal S: source vector –magnitude proportional to intensity of the source Lambertian model –I=ρ × n × s N S x

37. C O M P U T E R G R A P H I C S Jie chen 37 Lighting Light source –Diffuse Light –Ambient light –Specular Light N S x

38. C O M P U T E R G R A P H I C S Jie chen 38 Lighting- source Diffuse Light: shines upon an object indirectly. –affected by the distance and angle between the surface and the light, –unaffected by the viewers position or view angle. Add spotlight by OpenGL –GLfloat lightColor0[] = {0.5f, 0.5f, 0.5f, 1.0f}; //Color (0.5, 0.5, 0.5) –GLfloat lightPos0[] = {4.0f, 0.0f, 8.0f, 1.0f}; // Positioned at (4, 0, 8) –glLightfv(GL_LIGHT0, GL_DIFFUSE, lightColor0); –glLightfv(GL_LIGHT0, GL_POSITION, lightPos0);

39. C O M P U T E R G R A P H I C S Jie chen 39 Lighting- source Ambient light: light that is considered to be everywhere. no source, Numerous large light sources are generally positioned in such a way Add ambient light by OpenGL –GLfloat ambientColor[] = {0.2f, 0.2f, 0.2f, 1.0f}; –glLightModelfv(GL_LIGHT_MODEL_AMBIENT, ambientColor); Diffuse and Ambient Lighting Diffuse Light

40. C O M P U T E R G R A P H I C S Jie chen 40 Lighting- source Specular Light: refered to as Specular Highlight, it highlights an object with a reflective color. Add ambient light by OpenGL –GLfloat specular0[] = {1.0, 1.0, 1.0, 1.0}; –glLightfv(GL_LIGHT0, GL_SPECULAR, specular0); Diffuse and Ambient Lighting Diffuse Light Diffuse, Ambient and Specular Lighting

41. C O M P U T E R G R A P H I C S Jie chen 41 Lighting- Attenuation Attenuation with distance generates a softer and more realistic image: d is the distance computed by OpenGL a = GL_CONSTANT_ATTENUATION (default 1.0) b = GL_LINEAR_ATTENUATION (default 0.0) c = GL_QUADRATIC_ATTENUATION (default 0.0) Default is no attenuation: a=1, b=0, c=0

42. C O M P U T E R G R A P H I C S Jie chen 42 Lighting-Function specifying light source parameters

43. C O M P U T E R G R A P H I C S Jie chen 43 Lighting-Source example specifying light source parameters –GLfloat position0[] = {1.0, 1.0, 1.0, 0.0}; –GLfloat diffuse0[] = {1.0, 0.0, 0.0, 1.0}; // I d term - Red –GLfloat specular0[] = {1.0, 1.0, 1.0, 1.0}; // I s term - White –GLfloat ambient0[] = {0.1, 0.1, 0.1, 1.0}; // I a term - Gray –glEnable(GL_LIGHTING); –glEnable(GL_LIGHT0); –glLightfv(GL_LIGHT0, GL_POSITION, position0); –glLightfv(GL_LIGHT0, GL_DIFFUSE, diffuse0); –glLightfv(GL_LIGHT0, GL_SPECULAR, specular0); –glLightfv(GL_LIGHT0, GL_AMBIENT, ambient0); I = I amb +I diff +I spec = I a K a + I d K d N ⋅ L + I s K s (R ⋅ V) n

44. C O M P U T E R G R A P H I C S Jie chen 44 Lighting- Normal Normal : A face's normal is a vector that is perpendicular to the face. glNormal3f(1.0f, 0.0f, 0.0f); –telling OpenGL the "normals" of the different shapes in our scene. –OpenGL Programming Guide or ‘The Red Book’: http://unreal.srk.fer.hr/theredbook/http://unreal.srk.fer.hr/theredbook/ Appendix E : Calculating Normal Vectors N S x

45. C O M P U T E R G R A P H I C S Jie chen 45 Lighting - Material Once lighting is enabled, colors are no longer used N S x

46. C O M P U T E R G R A P H I C S Jie chen 46 Lighting - Material Main functions for OpenGL:

47. C O M P U T E R G R A P H I C S Jie chen 47 Lighting-source example specifying a Material –param: GL_AMBIENT // K a term GL_DIFFUSE // K d term GL_SPECULAR // K s term GL_SHININESS // exponent n GL_AMBIENT_AND_DIFFUSE // K a = K d GL_EMISSION // No light calculations // simulates sources I = I amb +I diff +I spec = I a K a + I d K d N ⋅ L + I s K s (R ⋅ V) n

48. C O M P U T E R G R A P H I C S Jie chen 48 Lighting - Material

49. C O M P U T E R G R A P H I C S Jie chen 49 Homework link

50. C O M P U T E R G R A P H I C S Jie chen 50 Homework Tips GL_LINE_STRIP (x1, y1) (x2, y2) (x3, y3) (x4, y4) (x5, y5) (x6, y6) (x7, y7) (x8, y8)(x9, y9) (x10, y10)(x11, y11) (x12, y12)

51. C O M P U T E R G R A P H I C S Jie chen 51 Homework Tips GL_TRIANGLESGL_TRIANGLES (x1, y1) (x2, y2) (x3, y3) (x4, y4) (x5, y5) (x6, y6) (x7, y7) (x8, y8) (x9, y9) (x10, y10)

52. C O M P U T E R G R A P H I C S Jie chen 52 Homework Tips (x1, y1) (x2, y2) (x3, y3) (x4, y4) void glutBitMapCharacter( void *font, int char) void glutStrokeCharacter( void *font, int character)

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