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

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

4. RGB Color Space 12 Bit Encoding Example
[ ]
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)
[ ]
[ ]
Magenta
(1,0,1)
[ ] B

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

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

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

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

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

10. How does application program communicate 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 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.

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

18. Retained State Approach
Graphics
Subsystem
Application
Function
Calls
Primitives
Graphics
Context
(State)
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* ( ); .
glEnd ( );

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

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 P1 P2 Definition extensible to 3D. Convex
Non-Convex P1 P2
Definition extensible to 3D.

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

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

27. 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*/

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

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

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

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

32. Transformation Matrices in OpenGL
Load Matrix
Matrix Mode 3D
Model
Vertices
Stack
Current
Stack
Current 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 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.

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

36. GL Library Organization Under Microsoft Windows
GLU GL
OpenGl
application
program
Frame
buffer
GLUT
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 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

40. 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 ();

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