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

RGB Color Space G R B Green (1,0,0) Yellow (1,1,0) White (1,1,1) Cyan Image: Pixel maps to color 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

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

RGB Color Space 12 Bit Encoding Example [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

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

Computer Graphics Conceptual Model User Written Provided by System Output Devices Application Program Application Model Graphics System Input Devices

Computer Graphics Conceptual Model API Output Devices Application Program Application Model Graphics System Input Devices Function Calls or Protocol Data

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

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

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

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.

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)?

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

Setting Color Attribute in OpenGL RGB 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*/

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 glLinewidth (2.0); glLineStipple(Glint factor, Glushort pattern);

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

Synthetic Camera Projection Geometry 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

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

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

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.

Viewport Transformation Maps 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.

OpenGL Library Functions GL library contains all primitive and attribute functions associated with OpenGL GLU 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 GLUT

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

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

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).

Form of Simplest glut/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

Form of Simplest glut/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 ();

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