Computer Graphics

CSC 830
Lecture notes 2
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. -> 2
I will show examples with C language bindings.
 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/refer
ence-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
OpenGL Division of Labor
• 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/spec3/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
void drawSquare ()
Example
{
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
-- mouse moved without button
y);
down
– (x,y) is the current position of the
mouse
• void glutEntryFunc(void (*f) (int
state)) ;
– specifies the mouse entry callback
68
– state : GLUT_ENTERED, GLUT_LEFT
 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