Graphics: Conceptual Model

1. Graphics: Conceptual Model Real Light Human Eye Real Object Synthetic Light Source Synthetic Camera Human Eye Synthetic Model Real Object Display Device Graphics System

2. Image: Pixel maps to color RGB Color Space G Green (1,0,0) Yellow (1,1,0) White (1,1,1) Cyan (0,1,1) Red (1,0,0) R Blk Blue (0,0,1) Magenta (1,0,1) B

3. Color Frame Buffer CRT Red D/A Green D/A Blue D/A Bit n 1 0 1 1 0 0 1 1 0 1 0 1 Bit 4 Bit 3 Bit 2 Bit 1

4. RGB Color Space12 Bit Encoding Example G [111111110000] Green (0, 1, 0) Yellow (1,1,0) White (1,1,1) Cyan (0,1,1) Red (1,0,0) R Blk Blue (0,0,1) [111100000000] [000000001111] Magenta (1,0,1) [111100001111] B

5. 1 0 1 1 0 0 1 1 Bit n Bit 4 Bit 3 Bit 2 Bit 1 Video Look-up Table = 179 CRT Look Up Table Red D/A Green D/A Blue D/A 177 178 1 0 1 1 0 0 1 1 0 1 0 1 179 1 0 1 1 0 0 1 1 0 1 0 1 180

6. Computer GraphicsConceptual Model User Written Provided by System Output Devices Application Program Application Model Graphics System Input Devices

7. Computer GraphicsConceptual Model API Output Devices Application Program Application Model Graphics System Input Devices Function Calls or Protocol Data

8. O I Shared Namespace Model Model Application Function Calls } Run in same process Graphics Lib. OS

9. Client-Server Model: Model Application O Function Calls Graphics Server Graphics Lib. I OS OS Network Protocol

10. How does application programcommunicate with graphics system? ??? 2D Output Image (3D) Model Application Program Graphics System Input Devices

11. Two Fundamental Ways to Approach Graphics: 1. Image-Oriented 2. Object-Oriented 1. For each pixel in the image, compute the color based upon the model of the object(s). 2. For each object, compute the color of all of the pixels in the image resulting from that object.

12. Object-Oriented Approach • For each object model, we must compute: • Which pixels are affected in the resulting image? • What color should they be? • How is this computation divided between the user’s program and the graphics system? • How are the objects represented in the computer? • How is this information communicated to the graphics system (API)?

13. Components of a Graphics API • Primitive functions • What to draw • Primitive attributes • How to draw it • Transformation functions • Rotate, scale, translate objects (where, how big?) • Synthetic camera • Viewing functions (how to look at it?) • Input functions • Handle interactivity • Control functions • Communicate with underlying window system/OS • Initialization, error handling, etc.

14. API Design Considerations Low Level High Level Simple Primitives Complex Primitives Complex State Stateless (Functional)

15. High vs. Low Level API • High level API • API hides detail of actual drawing • API defines objects and relationships among objects • Example: scene-graph API such as JAVA3D • Low level API • API exposes detail of actual drawing • API defines primitives from which objects are built • Example: OpenGL, Direct3D

16. Simple (linear) Point (pixel?} Line Polygon Complex Glyph (bitmap, subimage) Curve Conic section (e.g circle, ellipse) Arbitrary analytic function Simple vs. Complex Primitives:2D Graphics Complex primitives may be built over simple ones. Linear primitives have advantage in pipeline architecture.

17. Purely Functional Approach (no retained state) Application Graphics Subsystem Primitives Attributes Function Calls Graphics Context (State)

18. Graphics Context (State) Retained State Approach Graphics Subsystem Application Function Calls Primitives Attribute Functions

19. OpenGL Command Syntax • Function calls: glXxxxx[type] ( [args] ) • Example: glVertex2f (1.0, 2.0); • Defined constants: GL_XXXXXXXXXX • Example: GL_COLOR_BUFFER_BIT • Type definition: GLxxxxxxx • Example: GLfloat

20. OpenGL Primitive Syntax glBegin ( type ); glVertex* ( . . . ); . . . . glVertex* ( . . . ); glEnd ( );

21. P2 P2 P1 P1 P3 P3 P0 P0 P7 P4 P7 P4 P6 P5 P6 P5 P2 P2 P1 P1 P3 P3 P0 P0 P7 P4 P7 P4 P6 P5 P6 P5 Point and Line Segment Primitives GL_POINTS GL_LINES GL_LINE_STRIP GL_LINE_LOOP

22. Polygons 1. Closed sequence of line segments 2. Has an defined interior 3. Planar Simple: Well defined interior Complex:

23. Polygons: Defining the Interior Simple: Well defined interior Complex: Odd crossings: inside Even crossings: outside

24. Polygons: Convexity Convex Non-Convex P1 P2 Definition extensible to 3D.

25. P2 P1 P3 P0 P7 P4 P6 P5 P2 P2 P1 P1 P3 P3 P0 P0 P7 P4 P7 P4 P6 P5 P6 P5 P2 P1 P3 P0 P7 P4 P6 P5 Polygon Primitives GL_POINTS GL_POLYGON P2 P1 P3 P0 P7 P4 P6 P5 GL_TRIANGLES GL_QUADS

26. Immediate vs. Retained ModeDisplay Lists Creating the Display List: glNewList(Name, GL_COMPILE); Attribute 1; Primitive 1; Primitive 2; . . . Primitive n; glEndList; Executing the list: glCallList(Name);

27. Setting Color Attribute in OpenGLRGB Mode void glColor3{b s i d f d ub ud ui}(TYPE r, TYPE g, TYPE b); glColor3f(0.0, 0.0, 0.0); /*black*/ glColor3f(1.0, 0.0, 0.0); /*red*/ glColor3f(0.0, 1.0, 0.0); /*green*/ glColor3f(0.0, 0.0, 1.0); /*blue*/ glColor3f(1.0, 1.0, 0.0); /*yellow*/ glColor3f(0.0, 1.0, 1.0); /*cyan*/ glColor3f(1.0, 0.0, 1.0); /*magenta*/ glColor3f(1.0, 1.0, 1.0); /*white*/

28. Other Simple OpenGL Attributes • glClearColor(1.0, 1.0, 1.0, 0.0); • Sets background color to white • Fourth argument is transparency; 0.0 is opaque • Sets a state variable • glPointSize(2.0); • Sets point size to be 2 pixels wide • Note that this is not a device-independent attribute • Sets a state variable • glLinewidth (2.0); • glLineStipple(Glint factor, Glushort pattern);

29. y X (x,y,z) Z Xp, Yp, -d d Synthetic Camera

30. Synthetic Camera Projection Geometry Y Projected Point (x’,y’,z’) X x,y,z d Z COP (0,0,0) Projection Plane x’ = x (d/z) y’ = y(d/z) z’ = d

31. x’ = x y’ = y z = d Orthographic Projection x’ = x (d/z) y’ = y(d/z) z’ = d If d = z - D and d w

32. Load Matrix Current Current Stack Stack Transformation Matrices in OpenGL Matrix Mode 3D Model Vertices 2D 3D Vertices Modelview Projection

33. Setting Viewing Matrix in GL:A Simple Case glMatrixMode(GL_PROJECTION); Sets the switch so that loaded matrix goes into the projection stack. glLoadIdentity(); Pushes an identity matrix onto the stack; glOrtho2D(GLdouble left, Gldouble right, Gldouble bottom, Gldouble top); Sets the current view to an orthographic projection with view volume bounded by x = left, x = right, y = bottom, y = top, z = -1.0 and z = 1.0.

34. Viewport TransformationMaps Clipped Projection Plane to Screen MyWindow w Clipping Window h x y void glViewport(Glint x, GLint y, GLsizei w, Glsizei h); Default viewport corresponds to entire window drawable area.

35. GLU GL GLUT OpenGL Library Functions GL library contains all primitive and attribute functions associated with OpenGL GLU library builds on the GL library to include more complex primitives (e.g. spheres) and convenience functions GLUT (GL Utility Toolkit) includes functions to interface with the native window system, including window creation, management of input devices

36. GLU GL Frame buffer GLUT GL Library Organization Under Microsoft Windows OpenGl application program Direct Draw

37. GL Library Organization (under X Windows) GLU GL OpenGL application program Frame buffer GLUT Xlib, Xtk GLX

38. Simple GLUT Window Management Functions glutInit(int *argc, char** argv); Initializes a window session. glutCreateWindow(char *name); Creates a window with title *name. glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB); Sets the display mode to single buffered and RGB color. glutInitWindowSize (GLsizei h, GLsizei w); Sets initial window size to h x w. glutInitWindowPosition(x,y); Sets initial window position to (x, y).

39. Form of Simplestglut/OpenGL program #include <glut.h> /* glut.h includes gl.h and glu.h */ void init (void) { /* Usually contains setting of the viewing transformation*/ } void display (void) { /*This function contains all of the draw/redraw commands }

40. Form of Simplestglut/OpenGL program (slide 2) void reshape (int w, int h) { /* What to do whenever the window is resized. Usually includes resetting the viewport */ } int main (int argc, char ** argv) { glutInit(int *argc, char** argv); /* init glut */ glutCreate Window(char *name); /* create window */ glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB); glutInitWindowSize (GLsizei h, GLsizei w); glutInitWindowPosition(x,y); init ();

41. Form of Simplestglut/OpenGL program (slide 3) gllutDisplayFunc(display); /* register display */ glutReshapeFunc(reshape); /* register reshape */ glutMainLoop(); /* enter event loop */ return 0; }