Lecture notes
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

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

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

• 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

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

• 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

• 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

• 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

Library Name Library File Header File Note
OpenGL opengl32.lib (PC)
-lgl (UNIX) gl.h
“ core” library
Auxiliary library glu32.lib (PC)
-lglu
Utility toolkits glut32.lib (PC)
-lglut (UNIX) glaux.lib (PC)
-lglaux (UNIX) glu.h
glut.h
glaux.h
handles a variety of accessory functions window managemen ts
All are presented in the C language

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

GLshort A[10]; short A[10];
GLdouble B; double B;

OpenGL Data Type Representation As C Type
GLbyte 8-bit integer signed char
GLshort
GLint, GLsizei
GLfloat
GLdouble
16-bit integer
32-bit integer
32-bit float
64-bit float short long float double
GLubyte, GLboolean
GLushort
8-bit unsigned integer unsigned char
16-bit unsigned short unsigned short
GLunit, GLenum, GLbitfield 32-bit unsigned integer unsigned long

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>

glColor3f(…) gl library Root command, # of arguments, type of arguments gl means OpenGL glu means GLU glut means GLUT f: the argument is float type i: the argument is integer type v: the argument requires a vector

• 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

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

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

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
……
}

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

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

• 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

• 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()

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
}
……

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++)
……
}

It’s called when the window is resized or moved void resize(int w, int h)
{
…… display();
}

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

This is where your application receives events, and schedules when callback functions are called void main (int argc, char **argv)
{
…… glutMainLoop();
}

• Primitives – fundamental entities such as point and polygons
• Basic types of geometric primitives
– Points
– Line segments
– Polygons
33

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

• 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

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

GL_POINTS GL_LINES GL_LINE_STRIP GL_LINE_LOOP
GL_POLYGON GL_QUADS GL_TRIANGLES GL_TRIANGLE_FAN
37

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

void glLineWidth(GLfloat width)
– Set the width in pixel. Default is 1.0
void glLineStripple(GLint factor, GLushort pattern)
39

• glRect*() – defines 2D filled rectangle aligned with the axes.
void glRect{sifd} (TYPE x1, TYPE y1, TYPE x2, TYPE y2);
40

}
{ 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

• There are two color models in
OpenGL
– RGB Color (True Color)
– Indexed Color (Color map)
42

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

Red
Green
Blue
44

Color number = color_dept h
For example:
4-bit color
2
4
= 16 colors
8-bit color
2
8
= 256 colors
24-bit color
2
24
= 16.77 million colors
45

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

• glColor*( … ) specifies vertex colors
glClearColor(r, g, b, a) sets current color for cleaning color buffer
48

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

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

glShadeModel(GL_SMOOTH);
Or glShadeModel(GL_FLAT); - the last vertex color
• Linear interpolation for a line
• Bilinear interpolation for a polygons
51

• 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

• 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

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

• 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

GL_ALPHA_TEST
If enabled, do alpha testing .
GL_AUTO_NORMAL
If enabled, generate normal vectors when either GL_MAP 3
GL_MAP 4 _XETREV_ 2
_XETREV_ 2 is used to generate vertices. See glMap .
2 or
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_ 1 D
If enabled, perform a 1 D convolution operation on incoming RGBA color values .
GL_CONVOLUTION_ 2 D
If enabled, perform a 2 D convolution operation on incoming RGBA color values .
……
56

• 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

• 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

glMatrix(GL_PROJECTION)
// set projection matrix
// draw scene glPushMatrix();
// change the project matrix
//draw scene glPopMatrix();
59

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

void glutIdleFunc(void (*)f (void))
– f will be executed whenever there are no other events to be handled.
– necessary for animation
61

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

• 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

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

• 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

• 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

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

void glutMotionFunc(void (*f) (int x, int y)); down
-- mouse moved with button 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

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

- Place objects
- Position camera
- Adjust camera
- Produce photograph
70

• 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

72

• 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

• 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

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

• 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

The CTM can be set/reset/modify (by postmultiplication) 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

• 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 = M T R S
78

• In OpenGL, we usually have two styles of specifying transformations:
– Specify matrices ( glLoadMatrix,
glMultMatrix )
– Specify operations ( glRotate,
glTranslate )
79

• Identify current matrix
• Modify current matrix
• Load current matrix
• Multiple current matrix
80

• Identify current matrix glMatrixMode (mode)
Specified what transformation matrix is modified.
mode :
GL_MODELVIEW
GL_PROJECTION
81

• 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

• Modify current matrix glLoadIdentity ( void )
Set the currently modifiable matrix to the 4x4 identity matrix.
83

• 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

• Three OpenGL operation routines for modeling transformations:
– Translation
– Scale
– Rotation
85

• Three elementary 3D transformations
Translation:
Scale:
T
( d x
, d y
, d z
)
=

1

 0


0
0
0
0
0
1
1
0
0
0 d d d
1 z

 x
 y


S
( s x
, s y
, s z
)
=
 s




0
0
0 x
0 s y
0
0
0
0 s z
0
0

0


0
1


86

Rotation R x
( q
)
Rotation R y
( q
)
Rotation R z
( q
)
R x
( q
)
=

1

 0


0
0
0 cos sin q q
0
Ry ( q
)
=





cos
0 sin
0 q q
0
1
0
0
0
sin cos q q
0 sin q
0 cos q
0
R z
( q
)
=


 cos

 sin
0
0 q q
sin cos q q
0
0
1
0
0
0
0

0


0


1 
0

0


0


1 
0

0


0


1 
87

• 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

• 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

• 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

• 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

• 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

First rotate, then translate =>
First translate, then rotate =>
93

• 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

y z y
Camera
R, T x z x
• Translation
• Rotation
95

y
View-up vector
(up x
, up y
, up z
) y Loot at
(at z
Eyepoint
(eye x
, eye y
, eye z
) x x
, at y
, at z
) z
Model x
96

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

• Look-At Function gluLookAt ( eye x
, eye y
, eye z
, at x
, at y
, at z
, up x
, up y
, up z
)
Define a viewing matrix and multiplies it to the right of the current matrix.
98

• 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

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

• 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

• 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

• 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 & Viewing Volume
• Projection Transformation
• Viewpoint Transformation
104

Windows Screen Mapping
(0, 0)
(50, 50)
Positive
X
OpenGL Screen Mapping
Y
Positive
(0, 0)
(50, 50)
Positive
X
Y Positive
Remember: the Y coordinates of OpenGL screen is the opposite of Windows screen. But same as in the XWindows system.
105

z x
y aspect ratio = w/h w h fovy
Near-plane: zNear
Far-plane: zNear
Viewing volume
106

glFrustum( left, right, bottom, top, zNear, zFar )
Creates a matrix for a perspective viewing frustum and multiplies the current matrix by it.
107

gl u Perspective( 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

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

View up
Aspect Ratio
= ViewRight
ViewUp
View right
110

• 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

h w
A viewpoint is defined as half the size of the window h w
A viewpoint is defined as the same size as the window
112

• 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

• 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