Computer Graphics

OpenGL
 What is OpenGL?
• It is NOT a language.
• It is a Graphics Rendering API (Application Programmer’s
Interface) that is a set of function with well defined interface.
• Whenever we say that a program is OpenGL-based or OpenGL
applications, we mean that it is written in some programming
language (such as C/C++ or Java) that makes calls to one or
more of OpenGL libraries.
• OpenGL is Not Object-Oriented. OpenGL API does not make
use of features such as overloading that are available in
object-oriented languages. -> I will show examples with C
language bindings.

2
 A History of OpenGL
• Was SGI’s Iris GL – basis for “Open”GL
• “Open” standard allowing for wide range hardware
platforms
• OpenGL v1.0 (1992)
• OpenGL v1.1 (1995)
• OpenGL v1.5 (latest)

• Governed by OpenGL Architecture Review Board (ARB)

which has members from such as Silicon Graphics, IBM, and
NVIDIA.

• “Mesa” – an Open source (http://www.mesa3d.org)

 Useful Websites and Books
• Official Site
http://www.opengl.org
• Non official sites
– http://nehe.gamedev.net/
• BOOKS
– OpenGL : A Primer
– OpenGL Red Book &
– OpenGL Blue Book

4
 Useful Links
• Online Reference manual sites

• GL and GLU
http://www.mevis.de/~uwe/opengl/opengl.html
• GLUT
http://pyopengl.sourceforge.net/documentation/manual/reference-
GLUT.html

5
 Three View of OpenGL
• Programmer’s view
– Specifying a set of objects to render
– Describing properties of these objects
– Defining how these objects should be viewed
• State machine
– Keeps states that affects appearances of input ie. States determines
how the inputs are processed.
– Change state (such as color) by using state changing functions
• OpenGL uses Rendering Pipeline Model
– Models -> Transformer -> Clipper -> Projector -> Rasterizer -> Image

6
 OpenGL API Functions
• OpenGL contains over 200 functions
– Primitive functions : define the elements (eg. A point, line,
polygon, etc)
– Attribute functions : control the appearance of primitives
(eg. colors, line types, light source, textures.)
– Viewing functions : determine the properties of camera.
Transformation
– Windowing functions: not part of core OpenGL
– Other functions

7
 Window Management
• OpenGL is meant to be platform independent.
i.e. OpenGL is window and operating system
independent.
• OpenGL does not include any functions for
window management, user interaction, and
file I/O.
• Host environment is responsible for window
management.

8
 Window Management API
• We need additional libraries to handle
window management

• GLX/AGL/WGL - glue between OpenGL and

windowing systems
• GLUT - OpenGL Window Interface/Utility
toolkit
• AUX - OpenGL Utility Toolkit

9
OpenGL API Hierarchy
 `
• GL - “core” library of OpenGL that is platform
independent
• GLU - an auxiliary library that handles a variety
of graphics accessory functions
• GLUT/AUX - utility toolkits that handle window
managements

11
 Libraries and Headers
Library Name Library File Header File Note
OpenGL opengl32.lib (PC) gl.h “core”
-lgl (UNIX) library
Auxiliary library glu32.lib (PC) glu.h handles a
-lglu variety of
accessory
functions
Utility toolkits glut32.lib (PC) glut.h window
-lglut (UNIX) glaux.h managemen
glaux.lib (PC) ts

All are presented in the-lglaux (UNIX)

C language
 Learning OpenGL with GLUT
• GLUT is a Window Manager (handles window
creation, user interaction, callbacks, etc)
• http://www.opengl.org/resources/libraries/glut/spec
3/spec3.html
• Platform Independent
• Makes it easy to learn and write OpenGL programs
without being distracted by your environment
• All of our discussions will be presented in C/C++
language

13
 Include Header files
Include the necessary header files in your code

#include <GL/gl.h> // “core”, the only thing is required

#include <GL/glu.h> // handles accessory functions
#include <GL/glut.h> // handles window managements

void main( int argc, char **argv )

{
…..
}

Only the “core” library (opengl32.lib, gl.h) are required

 Link Libraries
Link the necessary Libraries to your code

• Link GL library
– Link opengl32.lib (PC), or -lgl (UNIX)
• Link GLU library
– Link glu32.lib (PC), or -lglu (UNIX)
• Link GLUT library
– Link glut32.lib (PC), or -lglut (UNIX)
 Programming Convention : OpenGL Data
Types

To make it easier to convert OpenGL code

from one platform to another, OpenGL
defines its own data types that map to
normal C data types

GLshort A[10]; short A[10];

GLdouble B; double B;
 Programming Convention : OpenGL Data
Types

OpenGL Data Type Representation As C Type

GLbyte 8-bit integer signed char
GLshort 16-bit integer short
GLint, GLsizei 32-bit integer long
GLfloat 32-bit float float
GLdouble 64-bit float double
GLubyte, GLboolean 8-bit unsigned integer unsigned char
GLushort 16-bit unsigned short unsigned short
GLunit, GLenum, GLbitfield 32-bit unsigned unsigned long
integer
 Programming Convention : OpenGL
Function Naming

OpenGL functions all follow a naming convention

that tells you which library the function is from,
and how many and what type of arguments that
the function takes

<Library prefix><Root command><Argument count><Argument type>

Programming Convention : OpenGL Function
Naming

glColor3f(…)
gl library Root command, # of arguments, type of arguments

gl means OpenGL f: the argument is float type

glu means GLU i: the argument is integer type
glut means GLUT v: the argument requires a vector
Programming Convention : OpenGL Function
Naming
• Multiple forms of OpenGL functions to
support the variety of data types
– glVertex3i(ix, iy, iz)
– glVertex3f(x, y, z)
– glVertex2i(ix, iy)
– glVertex2f(x, y)
– ..
– We shall use the notation glVertex*() to refer to all
the forms of the vertex function
20
 Basic OpenGL Coding Framework
1. Configure GL (and GLUT) - Open window, Display
mode, ……
2. Initialize OpenGL state - background color, light,
View positions, ……
3. Register callback functions - Render, Interaction
(keyboard, mouse), ……
4. Event processing loop - glutMainLoop()

21
 A Sample Program
void main (int argc, char **argv)
{
glutInit (&argc, argv);
glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize (500, 500);
1
glutCreateWindow (“My First Program");
myinit ();
glutDisplayFunc ( display ); 2
glutReshapeFunc ( resize );
glutKeyboardFunc ( key );
3
glutMainLoop ();
}
4
 1: Initializing & Creating Window

Set up window/display you’re going to use

void main (int argc, char **argv)
{
glutInit (&argc, argv); // GLUT initialization
glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); // display
model
glutInitWindowSize (500, 500); // window size
glutCreateWindow (“My First Program"); // create window
……
}
 GLUT Initializing Functions
• Standard GLUT initialization
void glutInit (int *argc, char ** argv)
• Display model
void glutInitDisplayMode (unsigned int mode)
– Define color model : GLUT_RGB or GLUT_INDEX
– Define buffering: GLUT_SINGLE | GLUT_DOUBLE
• Window size and position
void glutInitWindowSize (int width, int height)
void glutInitWindowPosition(int x, int y)
- top-left corner of the screen in pixel
• Create window
int glutCreateWindow (char *title);
 2: Initializing OpenGL State
Set up whatever state you’re going to use
void myinit(void)
{
glClearColor(1.0, 1.0, 1.0, 1.0); // background color
glColor3f(1.0, 0.0, 0.0); // line color
glMatrixMode(GL_PROJECTION); // followings set up viewing
glLoadIdentity();
gluOrtho2D(0.0, 500.0, 0.0, 500.0);
glMatrixMode(GL_MODELVIEW);
}
Event Loops and Callback Functions

• Interactive programs react to the events such

as mouse or keyboard events and window
events.
• Callback Function - Routine to call when
something happens (eg. window resize, redraw, user
input, etc)

• GLUT uses a callback mechanism to do its

event processing
 GLUT Callback Functions
• Contents of window need to be refreshed
glutDisplayFunc()
• Window is resized or moved
glutReshapeFunc()
• Key action
glutKeyboardFunc()
• Mouse button action
glutMouseFunc()
• Mouse moves while a button is pressed
glutMotionFunc()
• Mouse moves regardless of mouse button state
glutPassiveMouseFunc()
• Called when nothing else is going on
glutIdleFunc()
 3: Register Callback Functions
Set up any callback function you’re going to use
void main (int argc, char **argv)
{
……
glutDisplayFunc ( display ); // display callback
glutReshapeFunc ( resize ); // window resize callback
glutKeyboardFunc ( key ); // keyboard callback

……
}
 Rendering Callback
It’s here that does all of your OpenGL rendering
void display( void )
{
int k;
glClear(GL_COLOR_BUFFER_BIT);
for( k=0; k<5000; k++)
……
}
 Window Resize Callback
It’s called when the window is resized or moved

void resize(int w, int h)

{
……
display();
}
 Keyboard Input Callback
It’s called when a key is struck on the keyboard

void key( char mkey, int x, int y )

{
switch( mkey )
{
case ‘q’ :
exit( EXIT_SUCCESS );
break;
……
}
}
 4. Event Process Loop

This is where your application receives events,

and schedules when callback functions are called
void main (int argc, char **argv)
{
……
glutMainLoop();
}
 2D Geometric Primitives
• Primitives – fundamental entities such as
point and polygons
• Basic types of geometric primitives
– Points
– Line segments
– Polygons

33
 2D Geometric Primitives

GL_POINTS GL_LINES GL_LINE_STRIP GL_LINE_LOOP

GL_POLYGON GL_QUADS GL_TRIANGLES GL_TRIANGLE_FAN

All geometric primitives are specified by vertices

34
 Geometry Commands
• glBegin(GLenum type)
marks the beginning of a vertex-data list that
describes a geometric primitives

• glEnd (void)
marks the end of a vertex-data list

• glVertex*(…)
specifies vertex for describing a geometric object
35
 Specifying Geometric Primitives

glBegin( type );
glVertex*(…);
……
glVertex*(…);
glEnd();
type determines how vertices are combined

36
 Types

GL_POINTS GL_LINES GL_LINE_STRIP GL_LINE_LOOP

GL_POLYGON GL_QUADS GL_TRIANGLES GL_TRIANGLE_FAN

37
 Types
GL_POINTS
GL_LINES : each successive pair for a ling segment
GL_LINE_STRIP: vertices defining a sequence of line
segments
GL_LINE_LOOP: GL_LINE_STRIP + the last vertex connects to
the first
GL_POLYGON : sequence of vertices of polygon, filled
GL_QUADS: each successive group of four vertices for a
quadrilaterals
GL_TRIANGLES: each successive group of three vertices for a
triangle
GL_TRIANGLE_FAN: first three vertices for the first triangle
and each subsequent vertex with the first vertex and the
previous vertex for the next triangle

38
 Attribute : Line
void glLineWidth(GLfloat width)
– Set the width in pixel. Default is 1.0

void glLineStripple(GLint factor, GLushort pattern)

39
 Rectangles
• glRect*() – defines 2D filled rectangle aligned
with the axes.

void glRect{sifd} (TYPE x1, TYPE y1, TYPE x2, TYPE y2);

40
 Example
void drawSquare ()
{
glClear(GL_COLOR_BUFFER_BIT);
glBegin(GL_POLYGON);
glVertex2f ( 0.0, 0.0 );
glVertex2f ( 1.0, 0.0 );
glVertex2f ( 1.1, 1.1 );
glVertex2f ( 0.0, 1.0 );
glEnd();
glFlush(); // force the renderer to output the results
}

41
 OpenGL Color

• There are two color models in OpenGL

– RGB Color (True Color)
– Indexed Color (Color map)

42
 RGB Color Model

• R, G, B components are stored for each pixel

43
RGB Color

Red

Green

Blue
44
 How Many Colors?
color_depth
2
Color number =
For example:
4-bit color
24 = 16 colors
8-bit color
8 = 256 colors
2
24-bit color
2 24= 16.77 million colors
45
 How Much Memory?

Buffer size = width * height *color depth

For example:
If width = 640, height = 480, color depth = 24 bits
Buffer size = (640 * 480 * 2) bytes
If width = 640, height = 480, color depth = 32 bits
Buffer size = (640 * 480 * 4) bytes

46
 Alpha Component

Alpha value
A value indicating the pixels opacity
0 usually represents totally transparent and the 1
represents completely opaque

Alpha buffer
Hold the alpha value for every pixel
Alpha values are commonly represented in 8 bits, in
which case transparent to opaque ranges from 0 to
255
47
 RGB Color Commands
• glColor*(…)
specifies vertex colors

• glClearColor(r, g, b, a)
sets current color for cleaning color buffer

48
 Example
void drawLine (GLfloat *color)
{
glColor3fv ( color );
glBegin(GL_LINE);
glVertex2f ( 0.0, 0.0 );
glVertex2f ( 1.0, 0.0 );
glEnd();
}

49
 Example

void drawLine (GLfloat *color)

{
glBegin(GL_LINE);
glColor3f(1.0,0.0,0.0 );
glVertex2f ( 0.0, 0.0 );
glColor3f(0.0,0.0,1.0);
glVertex2f ( 1.0, 0.0 );
glEnd();
}

50
 Color Interpolation
glShadeModel(GL_SMOOTH);
Or
glShadeModel(GL_FLAT); - the last vertex
color

• Linear interpolation for a line

• Bilinear interpolation for a polygons

51
 2D Viewing
• Where do we draw the 2D object?
– Assume that we draw objects on an infinite sheet
of paper
– Then we need to specify clipping region and
project these 2D objects to the screen

void gluOrtho2D(GLdouble left, GLdouble right,

GLdouble bottom, GLdouble top);

52
 Coordinate Systems and
Transformation
• Identify which matrix we wish to alter
• Set the matrix to an identity matrix
• Alter the matrix to form the desired matrix

glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(-1.0, 1.0, -1.0, 1.0);

53
 Coordinate Systems and
Transformation
glMatrixMode(GLenum mode);
– Identify which matrix we wish to alter – The mode
is usually GL_MODELVIEW, GL_PROJECTION
glLoadIdentity();
– Set the current matrix to an identity matrix

54
 Enabling GL Features
• Features – lighting, hidden-surface removal, texture
mapping, etc…
• Each feature will slow down the rendering process.
• We can enable/disable each feature individually

void glEnable(GLenum feature)

void glDisable(GLenum feature)
Eg. glEnable(GL_LINE_STRIPPLE);

55
 Enabling GL Features
GL_ALPHA_TEST
If enabled, do alpha testing.
GL_AUTO_NORMAL
If enabled, generate normal vectors when either GL_MAP2_VERTEX_3 or GL_MAP2_VERTEX_4 is used to generate
vertices. See glMap2.
GL_BLEND
If enabled, blend the incoming RGBA color values with the values in the color buffers..
GL_CLIP_PLANE i
If enabled, clip geometry against user-defined clipping plane i..
GL_COLOR_LOGIC_OP
If enabled, apply the currently selected logical operation to the incoming RGBA color and color buffer values.
GL_COLOR_MATERIAL
If enabled, have one or more material parameters track the current color.
GL_COLOR_TABLE
If enabled, preform a color table lookup on the incoming RGBA color values.
GL_CONVOLUTION_1D
If enabled, perform a 1D convolution operation on incoming RGBA color values.
GL_CONVOLUTION_2D
If enabled, perform a 2D convolution operation on incoming RGBA color values.
……

56
 Queries
• OpenGL state can be queried by
– void glGet*(GLenum name, Type *value);
– Eg.
GLfloat color_array[4];
glGetFloatv(GL_CURRENT_COLOR,color_array);

• Check if a feature has been enabled by

– GLboolean glIsEnabled(GLenum feature); - returns
GL_TRUE or GL_FALSE

57
 Saving the State
• State changing functions – overwrites the
state variables
• We can store previous state values for later
use
– Matrix stacks
void glPushMatrix()
void glPopMatrix()
– Attribute stacks
void glPishAttrib(GLbitfield mask)
void glPopAttrib()
58
 Saving the State
glMatrix(GL_PROJECTION)
// set projection matrix
// draw scene
glPushMatrix();
// change the project matrix
//draw scene
glPopMatrix();

59
 Callback : Reshape
void glutReshapeFunc(void (*f) (int width, int height));

– invoked whenever the use changes the size of the

window using the mouse. width and height is the
new window size.
– Usually you want to take care of a new aspect
ratio (width-to-height ratio).

60
 Callback : Idle
void glutIdleFunc(void (*)f (void))

– f will be executed whenever there are no other

events to be handled.
– necessary for animation

61
 Callback : Idle
glutIdleFunc(myidle);

void myidle()
{
glutPostRedisplay();
}
: Request the display callback to be
executed after the current callback returns

62
 Double Buffering
• Use two buffers :front buffer and back buffer
to guarantee to display a fully redrawn butter
image

glutSwapBuffers();

– Replace glFlush() by glutSwapBuffer()

in the display callback

63
 Keyboard Interaction
glutKeyboardFunc(void *f (unsigned char key, int x,
int y))
• f is called when any key on the keyboard is pressed. (x, y) is the position of
the mouse in the window given in pixel measured from the upper-left
corner of the window.

glutKeyboardFunc(mykey);

void mykey(unsigned char key, int x, int y)

{
if(key==‘q’)
exit(0);
}

64
 Keyboard Interaction
• Special Keys (defined in glut.h)
glutSpecialFunc(void *f (int key, int x, int y))

glutSpecialFunc(myskey);

void mykey(unsigned char key, int x, int y)

{
if(key== GLIT_KEY_F1)
..
if(key== GLIT_KEY_UP)
…
}

65
 Keyboard Interaction
• int glutGetModifiers() – returns the logical
AND of GLUT_ACTIVE_SHIFT,
GLUT_ACTIVE_CTRL or GLUT_ACTIVE_ALT if
that key is pressed at the time a mouse of
keyboard event is generated.

if(glutGetModifiers() & GLUT_ACTIVE_CTRL) && (key ==

‘c’)) exit(0);

66
 Mouse Interaction
void glutMouseFunc(void (*f) (int button,
int state, int x, int y);
– register mouse callback function
– Button : GLUT_LEFT_BUTTON,
GLUT_RIGHT_BUTTON, GLUT_MIDDLE_BUTTON
– State: GLUT_UP, GLUT_DOWN

67
 Mouse Interaction
void glutMotionFunc(void (*f) (int x, int
y)); -- mouse moved with button down
void glutPassiveMotionFunc(void (*f) (int x, int y);
-- mouse moved without button down
– (x,y) is the current position of the mouse
• void glutEntryFunc(void (*f) (int
state)) ;
– specifies the mouse entry callback
– state : GLUT_ENTERED, GLUT_LEFT

68
 Null Callback
• When we no longer need a callback.
glutIdleFunc(Null);

69
 Camera Analogy

The graphics transformation process is

analogous to taking a photograph with a
camera
- Place objects
- Position camera
- Adjust camera
- Produce photograph

70
 Transformations and Camera Analogy
• Modeling transformation
– Positioning and moving the model.
• Viewing transformation
– Positioning and aiming camera in the world.
• Projection transformation
– Adjusting the lens of the camera.
• Viewport transformation
– Enlarging or reducing the physical photograph.

71
OpenGL Transformation Pipeline

72
 Transformations in OpenGL
• Transformations are specified by matrix
operations. Desired transformation can be
obtained by a sequence of simple
transformations that can be concatenated
together.
• Transformation matrix is usually
represented by 4x4 matrix (homogeneous
coordinates).
• Provides matrix stacks for each type of
supported matrix to store matrices.
73
 Programming Transformations
• In OpenGL, the transformation matrices are part of
the state, they must be defined prior to any vertices
to which they are to apply.
• In modeling, we often have objects specified in their
own coordinate systems and must use
transformations to bring the objects into the scene.
• OpenGL provides matrix stacks for each type of
supported matrix (model-view, projection, texture) to
store matrices.

74
 Steps in Programming

• Define matrices:
– Viewing/modeling, projection, viewport …
• Composite transformations

75
 Transformation Matrix Operation
• Current Transformation Matrix (CTM)
– The matrix that is applied to any vertex that is
defined subsequent to its setting.
• If change the CTM, we change the state of the
system.
• CTM is a 4 x 4 matrix that can be altered by a
set of functions.

76
 Current Transformation Matrix

The CTM can be set/reset/modify (by post-

multiplication) by a matrix
Ex:
C <= M // set to matrix M
C <= CT // post-multiply by T
C <= CS // post-multiply by S
C <= CR // post-multiply by R

77
 Current Transformation Matrix
• Each transformation actually creates a new
matrix that multiplies the CTM; the result,
which becomes the new CTM.
• CTM contains the cumulative product of
multiplying transformation matrices.

Ex: If C <= M; C <= CT; C <= CR; C <= CS

Then C=MTRS 78
 Ways to Specify Transformations

• In OpenGL, we usually have two styles of

specifying transformations:
– Specify matrices ( glLoadMatrix,
glMultMatrix )

– Specify operations ( glRotate, glTranslate )

79
 Specifying Matrix

• Identify current matrix

• Modify current matrix
• Load current matrix
• Multiple current matrix

80
 Specifying Matrix (1)

• Identify current matrix

glMatrixMode (mode)
Specified what transformation matrix is modified.
mode:
GL_MODELVIEW
GL_PROJECTION

81
 Specifying Matrix(2)

• Modify current matrix

glLoadMatrix{fd} ( Type *m )
Set the 16 values of current matrix to those
specified by m.

Note: m is the 1D array of 16 elements arranged by the

columns of the desired matrix

82
 Specifying Matrix(3)

• Modify current matrix

glLoadIdentity ( void )
Set the currently modifiable matrix to the 4x4
identity matrix.

83
 Specifying Matrix(4)

• Modify current matrix

glMultMatrix{fd} ( Type *m )
Multiple the matrix specified by the 16 values
pointed by m by the current matrix, and stores the
result as current matrix.

Note: m is the 1D array of 16 elements arranged by the

columns of the desired matrix
84
 Specifying Operations

• Three OpenGL operation routines for

modeling transformations:
– Translation
– Scale
– Rotation

85
 Recall
• Three elementary 3D transformations

é1 0 0 d xù
ê ú
0 1 0 d yú
T(dx, dy , d z) ê
= ê
Translation: 0 0 1 d zú
ê ú
ë0 0 0 1û

ésx 0 0 0ù
ê ú
0 sy 0 0ú
S (sx , s y , s) = ê
Scale: z
ê0 0 sz 0ú
ê ú
ë0 0 0 1û

86
 Recall
é1 0 0 0ù
ê ú
0 cosq - sin q 0ú
Rotation Rx (q ) Rx (q ) = ê
ê0 sin q cosq 0ú
ê ú
ë0 0 0 1û
é cosq 0 sin q 0ù
ê ú
0 1 0 0ú
Rotation Ry (q ) Ry(q ) = ê
ê- sin q 0 cosq 0ú
ê ú
ë 0 0 0 1û

écosq - sinq 0 0ù
ê ú
Rotation Rz (q ) êsin q cosq 0 0ú
Rz (q ) =
ê 0 0 1 0ú
ê ú
ë 0 0 0 1û

87
 Specifying Operations (1)

• Translation

glTranslate {fd} (TYPE x, TYPE y, TYPE z)

Multiplies the current matrix by a matrix that
translates an object by the given x, y, z.

88
 Specifying Operations (2)

• Scale

glScale {fd} (TYPE x, TYPE y, TYPE z)

Multiplies the current matrix by a matrix that
scales an object by the given x, y, z.

89
 Specifying Operations (3)

• Rotate
glRotate {fd} (TPE angle, TYPE x, TYPE y, TYPE z)
Multiplies the current matrix by a matrix that rotates
an object in a counterclockwise direction about the ray
from origin through the point by the given x, y, z. The
angle parameter specifies the angle of rotation in
degree.

90
 Order of Transformations

• The transformation matrices appear in

reverse order to that in which the
transformations are applied.
• In OpenGL, the transformation specified
most recently is the one applied first.

91
 Order of Transformations
• In each step:
C <= I
C <= CT(4.0, 5.0, 6.0)
C <= CR(45, 1.0, 2.0, 3.0)
C < = CT(-4.0, -5.0, -6.0)
• Finally
C = T(4.0, 5.0, 6.0) CR(45, 1.0, 2.0, 3.0) CT(-4.0, -5.0, -6.0)

Write it

Read it

92
Matrix Multiplication is Not Commutative

First rotate, then translate =>

First translate, then rotate =>

93
Viewing-Modeling Transformation

• If given an object, and I want to render it from

a viewpoint, what information do I have to
have?
– Viewing position
– Which way I am looking at
– Which way is “up”
…..

94
 Viewing Position
y

y R, T
x

z
• Translation
x • Rotation
z Camera

95
 Where I am and Looking at

y
y Loot at
View-up vector (atx, aty, atz)
(upx, upy, upz)

x x
Model
z z
Eyepoint
(eyex, eyey, eyez)

96
 Define Coordinate System

+Y
In the default
position, the
camera is at the
origin, looking
down the +X
negative z-axis
+Z

97
 If we use OpenGL

• Look-At Function

gluLookAt (eyex, eyey, eyez, atx, aty, atz, upx, upy, upz )
Define a viewing matrix and multiplies it to the
right of the current matrix.

98
 Matrix Stacks

• OpenGL uses matrix stacks mechanism to

manage transformation hierarchy.
• OpenGL provides matrix stacks for each
type of supported matrix to store matrices.
– Model-view matrix stack
– Projection matrix stack
– Texture matrix stack

99
 Matrix Stacks

• Current matrix is
always the topmost
matrix of the stack Pushing
• We manipulate the
Popping
current matrix is that Top
we actually
manipulate the
topmost matrix.
• We can control the Bottom
current matrix by
using push and pop
operations.

100
 Manipulating Matrix Stacks (1)

• Remember where you are

glPushMatrix ( void )
Pushes all matrices in the current stack down one
level. The topmost matrix is copied, so its contents
are duplicated in both the top and second-from-the
top matrix.

Note: current stack is determined by glMatrixModel()

101
 Manipulating Matrix Stacks (2)

• Go back to where you were

glPopMatrix ( void )
Pops the top matrix off the stack, destroying the
contents of the popped matrix. What was the
second-from-the top matrix becomes the top
matrix.

Note: current stack is determined by glMatrixModel()

102
 Manipulating Matrix Stacks (3)
• The depth of matrix stacks are implementation-dependent.
• The Modelview matrix stack is guaranteed to be at least 32
matrices deep.
• The Projection matrix stack is guaranteed to be at least 2
matrices deep.

glGetIntegerv ( Glenum pname, Glint *parms )

Pname:
GL_MAX_MODELVIEW_STACT_DEPTH
GL_MAX_PROJECTION_STACT_DEPTH

103
 Projection Transformation
• Projection & Viewing Volume
• Projection Transformation
• Viewpoint Transformation

104
 OpenGL and Windows Screen

Windows Screen Mapping OpenGL Screen Mapping

X Y
(0, 0) Positive
Positive
(50, 50)

(50, 50)
Positive
(0, 0) X
Y Positive

Remember: the Y coordinates of OpenGL screen is the opposite

of Windows screen. But same as in the XWindows system.
105
 Perspective Projection Volume

y
aspect ratio = w/h

w
h
z

fovy
x Far-plane: zNear
Near-plane: zNear

Viewing volume
106
 Perspective Projection Commands

glFrustum( left, right, bottom, top, zNear, zFar )

Creates a matrix for a perspective viewing
frustum and multiplies the current matrix by it.

107
Perspective Projection Commands

gluPerspective( fovy, aspect, zNear, zFar )

Creates a matrix for an perspective viewing
frustum and multiplies the current matrix by it.

Note: fovy is the field of view (fov) between the top and bottom
planes of the clipping volume. aspect is the aspect ratio

108
 Remember to Initialize

glutInitDisplayMode(GLUT_DOUBLE|GLUT_RBG|GLUT_DEPTH);

You can also clear the depth buffer (as we did for color buffer)

glClear(GL_DEPTH_BUFFER_BIT)
Clear z (depth) buffer

109
 Viewing a 3D world

View up

ViewRight
Aspect Ratio =
ViewUp

View right

110
 Viewport
• Viewport
– The region within the window that will be used for
drawing the clipping area
– By default, it is set to the entire rectangle of the
window that is opened
– Measured in the window coordinates, which
reflect the position of pixels on the screen related
to the lower-left corner of the window

111
 Viewport Transformation

h
h
w

A viewpoint is A viewpoint is
defined as half the defined as the same
size of the window size as the window

112
 Aspect Ratio
• The Aspect Ratio of a rectangle is the ratio of
the rectangle’s width to its height:
e.g. Aspect Ratio = width/height

• Viewport aspect ratio should be same as

projection transformation, or resulting image
may be distorted.

113
 Viewport Commands

• glViewport( x, y, width, height )

Defines a pixel rectangle in the window into
which the final image is mapped
(x, y) specifies the lower-left corner of the
viewport
(width, height) specifies the size of the viewport
rectangle

114