Introduction to Introduction to Graphics ProgrammingGraphics Programming

Graphics APIGraphics API

Computer GraphicsComputer GraphicsConceptual ModelConceptual Model

ApplicationModel

ApplicationProgram Graphics

System

OutputDevices

InputDevices

API

Function Callsor Protocol

Data

Components of a Components of a Graphics APIGraphics API

Primitive functionsPrimitive functions What to drawWhat to draw

Attribute functionsAttribute functions How to draw itHow to draw it

Viewing functionsViewing functions (how to look at it) (how to look at it)

Transformation functionsTransformation functions Rotate, scale, translate objects (where, how big?)Rotate, scale, translate objects (where, how big?)

Input functionsInput functions Handle interactivityHandle interactivity

Control functionsControl functions Communicate with window systemCommunicate with window system Initialization, error handlingInitialization, error handling

API Design API Design ConsiderationsConsiderations

ComplexPrimitives

SimplePrimitives

Stateless(Functional)

ComplexState

OpenGL and OpenGL and GLUT OverviewGLUT Overview

What Is OpenGL?What Is OpenGL?

Graphics rendering APIGraphics rendering API high-quality color images composed of high-quality color images composed of

geometric and image primitivesgeometric and image primitives window system independentwindow system independent operating system independentoperating system independent developed by SGIdeveloped by SGI

Major decisionsMajor decisions

Simple primitiveSimple primitive Retained State ApproachRetained State Approach Not interactive with native windowsNot interactive with native windows

Major decisionsMajor decisions

Simple primitiveSimple primitive Retained State ApproachRetained State Approach Not interactive with native windowsNot interactive with native windows

Point and Line Segment Point and Line Segment PrimitivesPrimitives

P0

P1P2

P3

P4

P5P6

P7

P0

P1P2

P3

P4

P5P6

P7

P0

P1P2

P3

P4

P5P6

P7

P0

P1P2

P3

P4

P5P6

P7

GL_POINTS GL_LINES

GL_LINE_STRIP GL_LINE_LOOP

Polygon PrimitivesPolygon Primitives

P0

P1P2

P3

P4

P5P6

P7

P0

P1P2

P3

P4

P5P6

P7

P0

P1P2

P3

P4

P5P6

P7

P0

P1P2

P3

P4

P5P6

P7

GL_POINTS GL_POLYGON

GL_QUADS GL_TRIANGLES

PolygonsPolygons

Simple: Well defined interior Complex:

1. Closed2. 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: ConvexityPolygons: Convexity

P1

P2

Convex Non-Convex

Definition extensible to 3D.

OpenGL Primitive SyntaxOpenGL Primitive Syntax

glBegin ( type );glVertex* ( . . . );

.

.

.

.

glVertex* ( . . . );glEnd ( );

Simple ExampleSimple 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, 1.118 );glVertex2f( 1.5, 1.118 ); glVertex2f( 0.5, 1.118 );glVertex2f( 0.5, 1.118 );glEnd();glEnd();

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, 1.118 );glVertex2f( 1.5, 1.118 ); glVertex2f( 0.5, 1.118 );glVertex2f( 0.5, 1.118 );glEnd();glEnd();

OpenGL Command OpenGL Command FormatsFormats

glVertex3fv( glVertex3fv( vv ) )

Number ofNumber ofcomponentscomponents

2 - (x,y) 2 - (x,y) 3 - (x,y,z)3 - (x,y,z)4 - (x,y,z,w)4 - (x,y,z,w)

Data TypeData Typeb - byteb - byteub - unsigned byteub - unsigned bytes - shorts - shortus - unsigned shortus - unsigned shorti - inti - intui - unsigned intui - unsigned intf - floatf - floatd - doubled - double

VectorVector

omit “v” foromit “v” forscalar formscalar form

glVertex2f( x, y )glVertex2f( x, y )

Major decisionsMajor decisions

Simple primitiveSimple primitive Retained State ApproachRetained State Approach Not interactive with native windowsNot interactive with native windows

Setting Color Attribute in Setting Color Attribute in OpenGLOpenGL

RGB ModeRGB Modevoid 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 Other Simple OpenGL AttributesAttributes

glClearColor(1.0, 1.0, 1.0, glClearColor(1.0, 1.0, 1.0, 0.0);0.0); Sets background color to whiteSets background color to white Fourth argument is transparency; 0.0 is Fourth argument is transparency; 0.0 is

opaqueopaque Sets a state variableSets a state variable

glPointSize(2.0);glPointSize(2.0); Sets point size to be 2 pixels wideSets point size to be 2 pixels wide Note that this is not a device-Note that this is not a device-

independent attributeindependent attribute Sets a state variableSets a state variable

glLinewidth (2.0);glLinewidth (2.0);

Immediate vs. Retained Immediate vs. Retained ModeMode

Display ListsDisplay ListsCreating the Display List:

glNewList(Name, GL_COMPILE);Attribute 1; Primitive 1;Primitive 2;

. . .Primitive n;

glEndList;

Executing the list:

glCallList(Name);

Major decisionsMajor decisions

Simple primitiveSimple primitive Retained State ApproachRetained State Approach Not interact with native windowsNot interact with native windows

OpenGL Library OpenGL Library FunctionsFunctions

GLU

GL

GLUT

GL library contains all primitive and attribute functionsassociated with OpenGL

GLU library builds on the GL library to include morecomplex primitives (e.g. spheres) and convenience functions

GLUT (GL Utility Toolkit) includes functions to interfacewith the native window system, including window creation,management of input devices

GL Library Organization GL Library Organization Under Microsoft Under Microsoft

WindowsWindows

OpenGlapplication

program

GLU

GL

GLUT Direct DrawFramebuffer

GL Library Organization GL Library Organization (under X Windows)(under X Windows)

OpenGLapplication

program

GLU

GL

GLUT

GLX

Xlib, Xtk

Framebuffer

Geometry PipelineGeometry Pipeline

VerticesVertices

Vertices in world coordinatesVertices in world coordinates void glVertex3f(GLfloat x, void glVertex3f(GLfloat x,

GLfloat y, GLfloat z)GLfloat y, GLfloat z) Vertex (x, y, z) sent down the Vertex (x, y, z) sent down the

pipelinepipeline

TransformerTransformer

Transformer in world coordinatesTransformer 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);

Complex [Angel Ch. 4]Complex [Angel Ch. 4]

Transformation Matrices Transformation Matrices in OpenGLin OpenGL

Stack

Current

Stack

Current

Load Matrix

Vertices

3DModel

Vertices3D

2D

Modelview Projection

Matrix Mode

Setting Viewing Matrix in Setting Viewing Matrix in GL:GL:

A Simple CaseA Simple CaseglMatrixMode(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 viewvolume bounded by x = left, x = right, y = bottom, y = top,z = -1.0 and z = 1.0.

ClipperClipper

Viewport TransformationViewport TransformationMyWindow

x

y

h

w

void glViewport(Glint x, GLint y, GLsizei w, Glsizei h);

Default viewport corresponds to entire window drawable area.

ClippingWindow

ProjectorProjector

Orthographic ProjectionOrthographic Projection

If d = z - and d

x’ = xy’ = y z = d

x’ = x (d/z)y’ = y(d/z)z’ = d

RasterizerRasterizer

Simple GLUT Window Simple GLUT Window Management FunctionsManagement FunctionsglutInit(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 SimplestForm of Simplestglut/OpenGL programglut/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 SimplestForm of Simplestglut/OpenGL program glut/OpenGL program

(slide 2)(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 FunctionsGLUT Callback Functions

Routine to call when something happens window resize or redraw user input animation

“Register” callbacks with GLUTglutDisplayFunc( display );glutIdleFunc( idle );glutKeyboardFunc( keyboard );

Rendering CallbackRendering Callback

Do all of your drawing hereDo all of your drawing hereglutDisplayFunc( display );glutDisplayFunc( display );

void display( void )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 CallbacksIdle Callbacks

Use for animation and continuous update

glutIdleFunc( idle );

void idle( void ){ t += dt; glutPostRedisplay();}

Simple hello worldSimple hello world

Simple hello worldSimple hello world

Include Files:Include Files:

#include <windows.h>#include <windows.h>#include <glut.h>#include <glut.h>

Simple hello worldSimple hello world

void init (void)void init (void){{/* select clearing color *//* select clearing color */ glClearColor (0.0, 0.0, 0.0, 0.0);glClearColor (0.0, 0.0, 0.0, 0.0);

/* initialize viewing values *//* 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 worldSimple hello worldvoid display(void)void display(void){{/* clear all pixels *//* clear all pixels */ glClear (GL_COLOR_BUFFER_BIT);glClear (GL_COLOR_BUFFER_BIT);

/* draw colored polygon (rectangle) with corners at/* 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); //redglColor3f (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); //blueglColor3f (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 sphereglutSolidSphere(0.15,12,2); //draw a sphere glFlush ();glFlush ();}}

Simple hello worldSimple hello worldint main(int argc, char** argv)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. */}}