Introduction to Graphics Programming

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

Raster Image and Output Device

Pixels and Frame Buffer The image is made up of many small cells The image is made up of many small cells The individual cells are called Pixels The individual cells are called Pixels A raster image is stored in a computer as an array of numerical values. The array is called a Pixel Map. If the value is only 0 and one, then it is called a bitmap A raster image is stored in a computer as an array of numerical values. The array is called a Pixel Map. If the value is only 0 and one, then it is called a bitmap The memory that stores the pixels are called Frame buffer. The memory that stores the pixels are called Frame buffer.

5 Figures are extracted from Angel's book (ISBN x) Pixels and Image

Gray-scale Raster Images bi-level: one bit per pixel bi-level: one bit per pixel pixel depth: the number of bits for each pixel pixel depth: the number of bits for each pixel 2 produced 4 gray level, what about n? 2 produced 4 gray level, what about n? Effect of Pixel depth Effect of Pixel depth

Color Raster Image Ordered triple RGB Ordered triple RGB The number of bits used to represent the color of each pixel is called the color depth The number of bits used to represent the color of each pixel is called the color depth 24 bits (true color), memory? 24 bits (true color), memory?

Raster displays Display surface Display surface Frame buffer Frame buffer Scanning Process Scanning Process

Video Monitor Cathode-ray tube CRT Cathode-ray tube CRT RGB each 2 bits, total color? RGB each 2 bits, total color? Refresh rate, flicker Refresh rate, flicker

Indexed Color and Lookup Table

How many colors can a system display Color depth: b bits Color depth: b bits LUT entry: w bits LUT entry: w bits the system can display 2 w colors, 2 b at one time the system can display 2 w colors, 2 b at one time

Graphics API

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

Components of a Graphics API Primitive functions Primitive functions What to draw What to draw Attribute functions Attribute functions How to draw it How to draw it Viewing functions Viewing functions (how to look at it) (how to look at it) Transformation functions Transformation functions Rotate, scale, translate objects (where, how big?) ‏ Rotate, scale, translate objects (where, how big?) ‏ Input functions Input functions Handle interactivity Handle interactivity Control functions Control functions Communicate with window system Communicate with window system Initialization, error handling Initialization, error handling

API Design Considerations Complex Primitives Simple Primitives Stateless (Functional)‏ Complex State

OpenGL and GLUT Overview

What Is OpenGL? Graphics rendering API Graphics rendering API high-quality color images composed of geometric and image primitives high-quality color images composed of geometric and image primitives window system independent window system independent operating system independent operating system independent developed by SGI developed by SGI

Major decisions Simple primitive Simple primitive Retained State Approach Retained State Approach Not interactive with native windows Not interactive with native windows

Major decisions Simple primitive Simple primitive Retained State Approach Retained State Approach Not interactive with native windows Not interactive with native windows

Point and Line Segment Primitives P0 P1 P2 P3 P4 P5P6 P7 P0 P1 P2 P3 P4 P5P6 P7 P0 P1 P2 P3 P4 P5P6 P7 P0 P1 P2 P3 P4 P5P6 P7 GL_POINTSGL_LINES GL_LINE_STRIPGL_LINE_LOOP

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

Polygons Simple: Well defined interiorComplex: 1. Closed 2. Has an interior Simple: No pair of edges of a polygon cross each other OpenGL only supports rendering for simple, convex and flat polygon

Polygons: Convexity Convex Definition extensible to 3D. A convex polygon has the following proerties A convex polygon has the following proerties 1. Every internal angle is <= 180 degrees 2. Every line segment between 2 vertices does not go beyond the exterior of the polygon.

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

Simple Example glBegin( GL_QUADS ); glBegin( GL_QUADS ); glColor3fv( color ); glColor3fv( color ); glVertex2f( 0.0, 0.0 ); glVertex2f( 0.0, 0.0 ); glVertex2f( 1.0, 0.0 ); glVertex2f( 1.0, 0.0 ); glVertex2f( 1.5, ); glVertex2f( 1.5, ); glVertex2f( 0.5, ); glVertex2f( 0.5, );glEnd();

OpenGL Command Formats glVertex3fv( v )‏ Number of components 2 - (x,y) 3 - (x,y,z)‏ 4 - (x,y,z,w)‏ Data Type b - byte ub - unsigned byte s - short us - unsigned short i - int ui - unsigned int f - float d - double Vector omit “v” for scalar form glVertex2f( x, y )‏

Major decisions Simple primitive Simple primitive Retained State Approach Retained State Approach Not interactive with native windows Not interactive with native windows

Setting Color Attribute in OpenGL RGB Mode void glColor3{b s i d f 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); glClearColor(1.0, 1.0, 1.0, 0.0); Sets background color to white Sets background color to white Fourth argument is transparency; 0.0 is opaque Fourth argument is transparency; 0.0 is opaque Sets a state variable Sets a state variable glPointSize(2.0); glPointSize(2.0); Sets point size to be 2 pixels wide Sets point size to be 2 pixels wide Note that this is not a device-independent attribute Note that this is not a device-independent attribute Sets a state variable Sets a state variable glLinewidth (2.0); glLinewidth (2.0);

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

Major decisions Simple primitive Simple primitive Retained State Approach Retained State Approach Not interact with native windows Not interact with native windows

OpenGL Library Functions GLUGLGLUT 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

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

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

Geometry Pipeline

Vertices Vertices in world coordinates Vertices in world coordinates void glVertex3f(GLfloat x, GLfloat y, GLfloat z) ‏ void glVertex3f(GLfloat x, GLfloat y, GLfloat z) ‏ Vertex (x, y, z) sent down the pipeline Vertex (x, y, z) sent down the pipeline

Transformer Transformer in world coordinates Transformer in world coordinates Must be set before object is drawn! Must be set before object is drawn! glRotatef(45.0, 0.0, 0.0, -1.0); glRotatef(45.0, 0.0, 0.0, -1.0); glVertex2f(1.0, 0.0); glVertex2f(1.0, 0.0);

Transformation Matrices in OpenGL Stack Current Stack CurrentLoad Matrix Vertices 3D Model Vertices 3D 2D ModelviewProjection Matrix Mode

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; gluOrtho2D(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.

Clipper

Viewport Transformation MyWindow x y h w void glViewport(Glint x, GLint y, GLsizei w, Glsizei h); Default viewport corresponds to entire window drawable area. Clipping Window

Projector

44 Figures are extracted from Angel's book (ISBN x) The Human Visual System vs The Pinhole camera Human Visual System Visible Spectrum Pinhole camera

45 Figures are extracted from Angel's book (ISBN x) The Synthetic-camera Model

Synthetic Camera y (x,y,z)‏ X Z d X p, Y p, -d

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

Orthographic Projection If d = z -  and d  x’ = x y’ = y z = d x’ = x (d/z)‏ y’ = y(d/z)‏ z’ = d

Rasterizer

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 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 (); glutDisplayFunc(display); /* register display */ glutReshapeFunc(reshape); /* register reshape */ glutMainLoop(); /* enter event loop */ return 0; }

GLUT Callback Functions Routine to call when something happens window resize or redraw user input animation  “Register” callbacks with GLUT glutDisplayFunc( display ); glutIdleFunc( idle ); glutKeyboardFunc( keyboard );

Rendering Callback Do all of your drawing here Do all of your drawing here glutDisplayFunc( display ); void display( void )‏ { glClear( GL_COLOR_BUFFER_BIT ); glClear( GL_COLOR_BUFFER_BIT ); glBegin( GL_QUADS ); glBegin( GL_QUADS ); glVertex3fv( v[0] ); glVertex3fv( v[0] ); glVertex3fv( v[1] ); glVertex3fv( v[1] ); glVertex3fv( v[2] ); glVertex3fv( v[2] ); glVertex3fv( v[3] ); glVertex3fv( v[3] ); glEnd(); glEnd(); glFlush (); glFlush (); }

Idle Callbacks Use for animation and continuous update glutIdleFunc( idle ); void idle( void )‏ { t += dt; glutPostRedisplay(); }

Simple hello world

Include Files: #include #include

Simple hello world void init (void) ‏ { /* select clearing color */ glClearColor (0.0, 0.0, 0.0, 0.0); glClearColor (0.0, 0.0, 0.0, 0.0); /* initialize viewing values */ glMatrixMode(GL_PROJECTION); glMatrixMode(GL_PROJECTION); glLoadIdentity(); glLoadIdentity(); glOrtho(-1.0, 1.0, -1.0, 1.0, -1.0, 1.0); glOrtho(-1.0, 1.0, -1.0, 1.0, -1.0, 1.0);}

Simple hello world void display(void) ‏ { /* clear all pixels */ glClear (GL_COLOR_BUFFER_BIT); glClear (GL_COLOR_BUFFER_BIT); /* draw colored polygon (rectangle) with corners at * (0.25, 0.25, 0.0) and (0.75, 0.75, 0.0) …. * (0.25, 0.25, 0.0) and (0.75, 0.75, 0.0) …. */ */ glColor3f (1.0, 0.0, 0.0); //red glColor3f (1.0, 0.0, 0.0); //red glBegin(GL_QUADS); glBegin(GL_QUADS); glVertex3f (0.25, 0.25, 0.0); glVertex3f (0.25, 0.25, 0.0); glVertex3f (0.75, 0.25, 0.0); glVertex3f (0.75, 0.25, 0.0); glColor3f (0.0, 0.0, 1.0); //blue glColor3f (0.0, 0.0, 1.0); //blue glVertex3f (0.75, 0.75, 0.0); glVertex3f (0.75, 0.75, 0.0); glVertex3f (0.25, 0.75, 0.0); glVertex3f (0.25, 0.75, 0.0); glEnd(); glEnd(); glutSolidSphere(0.15,12,2); //draw a sphere glutSolidSphere(0.15,12,2); //draw a sphere glFlush (); glFlush ();}

Simple hello world int main(int argc, char** argv) ‏ { glutInit(&argc, argv); glutInit(&argc, argv); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); glutInitWindowSize (250, 250); glutInitWindowSize (250, 250); glutInitWindowPosition (100, 100); glutInitWindowPosition (100, 100); glutCreateWindow ("hello"); glutCreateWindow ("hello"); init (); init (); glutDisplayFunc(display); glutDisplayFunc(display); glutMainLoop(); glutMainLoop(); return 0; /* ANSI C requires main to return int. */ return 0; /* ANSI C requires main to return int. */}