1

Understanding of OpenGL

TA: Dong Hyun JeongInstructor : Dr. Kalpathi Subramanian

Transformations and Projections

2

Purpose

• Short overview of OpenGL

• Understanding of basic knowledge about OpenGL

• Short discussion on how to use OpenGL including transformations and projections

3

What is OpenGL?

• Software Interface for 3D Graphic Hardware (Instruction sets)• Interactive 2D and 3D graphics application programming

interface (API)• Support high visual quality and performance

– CAD/CAM, entertainment, medical imaging, virtual reality, Etc.

• Developer-driven advantages– Industry standard, stable, reliable and portable, easy to use ……

4

Supports

• Operating systems– Mac OS, OS/2, UNIX, Windows 95/98, NT, 2000, Linu

x, OPENStep, BeOS

• Windowing systems– Win32, MacOS, Presentation Manager, X-Window Sys

tem

• Callable from – C, C++, Ada, Fortran, Python, Perl, Java

5

Flexibility and Extensions

• Has flexibility of defining a particular OpenGL implementation depending on systems

• OpenGL has extensions (API)– GLU, GLX, WGL (defined by vendors)

UNIX APPLICATION WINDOWS APPLICATION

GLU

Xlib GLX OpenGL

GLU

GDU WGL OpenGL

• OpenGL applications use the window system’s window, input, and event mechanism

• GLU supports quadrics (2D curve), NURBS, complex polygons, matrix utilities, and more

6

Several Advanced API• Open Inventor

– Supports cross-platform user interface and flexible scene graph

• IRIS Performer– Visual simulation and virtual sets (demanding high frame

rate)

• OpenGL Optimizer– Real-time interaction, modification, and rendering of

complex surface-based models (CAD/CAM, special effects)

7

Several Advanced API• OpenGL Volumizer

– High-level immediate mode volume rendering API (energy, medical and sciences)

• OpenGL Shader– Realistic visual effects,

bump mapping, multiple textures, etc.

8

Viewport and Viewport Clipping

• Projecting 3D objects onto 2D screen (CG process pipeline)

• Viewport– A two-dimensional (2D) rectangle into which a 3D scene is projec

ted

• Vecterize– Representing 3D objects as line or plane pieces of objects or ele

ments

• Clipping (Clip)– Remove the not interested regions from the vecterized elements

Vectorize ClipTransform

To viewport Draw

9

Viewport and Viewport Clipping

• Clipping Volume– Physical coordinate or Global coordinate to represent t

he 3D objects. glOrtho(), gluPerspective()

• Viewport– Plane regions to map the physical coordinate into wind

ows’ pixel coordinate. glViewport()

• Viewing transform– Changing user’s viewing angle to represent the 3d obj

ects. glTranslated(), glRoated(), glMatrixMode(), gluLookAt()

10

Displaying Objects

11

Drawing a triangle on screen

1. Clear the screen

2. Create a triangle

3. Determine the location and direction of the triangle

4. Change the viewing angle

5. Define a projection method

12

Clear the screen

• Remove the frame buffer– glClearColor(0.0,0.0,0.0,0.0);– glClear(GL_COLOR_BUFFER_BIT);

13

Create a triangle

• A triangle as a geometry object

void DrawTriangle() { glColor3f(1.0f,0.0f,0.0f); glBegin(GL_TRIANGLES); glVertex3f(0.0f,0.0f,0.0f); glVertex3f(1.0f,0.0f,0.0f); glVertex3f(0.0f,1.0f,0.0f); glEnd();}

14

Positioning

• Determine the location and direction of the triangle– glTranslatef(1.0f,1.0f,0.0f);

– glRotatef(45.0f,0.0f,1.0f,0.0f);

– DrawTriangle();

X

Z

Y

Translate

Rotate

15

Viewing angle

• Change the viewing angle

– glMatrixMode(GL_PROJECTION);

– glLoadIdentity();

– glOrtho(-1.0f,1.0f,-1.0f,1.0f,-1.0f,10.0f);

– glMatrixMode(GL_MODELVIEW);

– gluLookAt(1.5f,1.5f,1.0f,1.5f,1.5f,-0.5f, 0.0f,1.0f,0.0f);

X

Z

Y

16

Projection

• Determine the projection– Perspective Projection

• glFrustum(-1.0f,1.0f,-1.0f,1.0f,1.0f,100.0f);

– Orthographic Projection• glOrtho(-1.0f,1.0f,-

1.0f,1.0f,0.0f,100.0f);

X

Z

Y

Perspective Projection

Orthographic Projection

17

• Points – GL_POINTS

• Lines – GL_LINES, GL_LINE_STRIP, GL_LINE_LOO

P

• Triangles – GL_TRIANGLES, GL_TRIANGLES_STRIP, G

L_TRIANGLE_FAN

Geometry elements I

v0

v1 v2v3

v4 v0

v1 v2v3

v4v5

v0

v1 v2v3

v4v5

v0

v1 v2v3

v4v5

v0

v1 v2v3

v4v5

v0

v1v4

v5v3

v2v0

v1 v2v3

v4v5

18

Geometry elements II

• Quadric– GL_QUADS, GL_QUAD_STRIP

• Polygon– GL_POLYGON

v0

v1 v2

v4v5v3

v7

v6 v0

v1

v5v7

v3

v4

v6

v2

v0

v5

v2v1

v4

v3

19

Basic restrictions

• All have to be plane objects

• No halls

• Edges do not have to be crossing

Valid Invalid

20

Creating complex objects

• Complex objects using connected lines

• Complex objects using connected triangles

21

Vertex transformation

22

Viewing• Positioning a object• Change the viewing a

ngle• Projection and transfo

rmation• Viewport and coordina

te determination

23

Modeling Transformation

• Place object and change the viewing angle

• glMatrixMode(GL_MODELVIEW)• glLoadIdentity() – Identify matrix is called

– glTranslatef(x,y,z) – glRotatef(degree,x,y,z)– glScalef(x,y,z)

Translate Rotate Scale

24

Viewing Transformation

• Changes the position and orientation of the viewpoint• Generally it consists of translations and rotations.

– gluLookAt()

25

Projection Transformations

• Defining a viewing volume – determines how an object is projected onto the

screen

– glMatrixMode(GL_PROJECTION);– glLoadIdentity();– glFrustum(left,right, bottom,top, near, far);– glOrtho(left,right, bottom,top, near, far);

26

Perspective Projection I

• glFrustum(left, right, bottom, top, near, far);• (left, right, bottom, top) - near clipping plane• near and far give the distances from the viewpoint to the

near and far clipping planes.• Easy to understand, but not intuitive to use

27

Perspective Projection II

• gluPerspective(fovy, aspect, near, far);• Creates a matrix for a symmetric perspective-vie

w frustum

28

Orthographic Projection

• the viewing volume is a rectangular parallelepiped

• glOrtho(left, right, bottom, top, near, far);

29

Viewport Transformation

• The viewport is the rectangular region of the window where the image is drawn

• Measured in window coordinates, which reflect the position of pixels on the screen relative to the lower left corner of the window.– glViewport(x, y, width, height);

30

Aspect Ratio

• Mapping the Viewing Volume to the Viewport

• Displayed image can be distorted depending on the ratio (w/h)

31

Matrix Stacks

• A stack of matrices is useful for constructing hierarchical models, in which complicated objects are constructed from simpler ones.– glMatrixMode()– glLoadMatrix(), glMultMatrix()– glPushMatrix(), glPopMatrix()– glLoadIdentity()

Pushing and Popping the Matrix Stack

Modelview and Projection Matrix Stacks

32

Matrix Stacks Example

glTranslatef()

glPushMatrix()

CreateTriangle CreateCircleglLoadIdentity()

CreateCircle

(0.0, 0.0, 0.0)

(0.0, 0.0, 0.0)

(0.0, 0.0, 0.0)

CreateCircle

(0.0, 0.0, -5.0)

33

How to program?• Need OpenGL Extensions

– Win32 OS: WGL. Prefix starting with wgl. (brief explanation at MSDN)

– X Windows: GLX– Apple Macintosh: AGL– OS/2: PGL– Each extensions supports making windows-based applications d

epending on operating systems.– But, it has restrictions of broadly using in other operating system

s.

34

What is GLUT?• OpenGL Utility Toolkit

– A window system independent toolkit for writing OpenGL programs.

– Works across all PC and workstation OS platforms – http://www.opengl.org/resources/libraries/glut.html– Better than AUX (Auxiliary) library– Need to locate the header and library files when using Windows

Operating System (not obligation, but useful when making OpenGL applications)

– (*.dll) C:\WINDOWS\system32

• Vs6 : – (*.h) C:\Program Files\Microsoft Visual Studio\VC98\Include\GL– (*.lib) C:\Program Files\Microsoft Visual Studio\VC98\Lib

• .net– (*.h) C:\Program Files\Microsoft Visual Studio .NET 2003\Vc7\PlatformSDK\

Include\gl– (*.lib) C:\Program Files\Microsoft Visual Studio .NET 2003\Vc7\PlatformSDK\Lib

35

How to use GLUT?• Initialization functions

– void glutInit(int *argc, char **argv); • Initialize display mode

– glutInitDisplayMode(unsigned int mode); • GLUT_RGB, GLUT_SINGLE, GLUT_DOUBLE

• Set the initial size of the window – glutInitWindowSize(int width, int height);

• The initial position of the window – glutInitWindowPosition(int x, int y);

• Creates the window – int glutCreateWindow(char *name);

• Specifying the function that needs to be called (callback function)– void glutDisplayFunc(void (*func)(void));

• Redraw the current window– void glutPostRedisplay(void);

• A callback function called when window size is changed– void glutReshapeFunc(void (*func)(int width, int height));

• More info. at “An introduction to GLUT”, http://mindfuck.de-brauwer.be/articles/glut/

36

A simple example#include<gl\glut.h>

void DrawTriangle(){

glBegin(GL_TRIANGLES);glColor3f(1.0f, 0.0f, 0.0f); // redglVertex2f(0.0f, 0.0f);glColor3f(0.0f, 1.0f, 0.0f); // greenglVertex2f(1.0f, 0.0f);glColor3f(0.0f, 0.0f, 1.0f); // blueglVertex2f(0.0f, 1.0f);glEnd();

}void display(){

glClearColor(0.0, 0.0, 0.0, 0.0); // blackglClear(GL_COLOR_BUFFER_BIT);glPushMatrix(); // push modelview matrixglTranslatef(1.0f, 1.0f, 0.0f);glRotatef(45.0f, 0.5f, 1.0f, 0.5f);DrawTriangle();glPopMatrix(); // pop modelview matrixglFlush();

}

void reshape(int w, int h){ glViewport(0,0,w,h); glMatrixMode(GL_PROJECTION); glLoadIdentity(); glOrtho(-1.0, 1.0, -1.0, 1.0, 0.0, 100.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); gluLookAt(1.5f, 1.5f, 1.0f, 1.5f, 1.5f, -0.5f,

0.0f, 1.0f, 0.0f);}void init(){ // Gouraud Shading glShadeModel(GL_SMOOTH); }

void main(int argc, char** argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_RGB | GLUT_SINGLE); glutInitWindowPosition(100,100); glutInitWindowSize(400,400); glutCreateWindow("OpenGL EXAMPLE"); init(); glutReshapeFunc(reshape); glutDisplayFunc(display); glutMainLoop();}

37

Transformation Example I#include "glut.h"

static int year = 0, day = 0;void display(void){

glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);glColor3f (1.0, 1.0, 1.0);glPushMatrix();glColor3f(1.0, 0.0, 0.0);glutSolidSphere(1.0, 10, 10);/* draw sun */glRotatef((GLfloat) year, 0.0, 1.0, 0.0);glTranslatef (2.0, 0.0, 0.0);glRotatef((GLfloat) day, 0.0, 1.0, 0.0);glColor3f(0.0, 0.0, 1.0);glutSolidSphere(0.2, 10, 10);/* draw smaller planet */glPopMatrix();glFlush();

}void myinit(void){

glShadeModel(GL_SMOOTH); glEnable(GL_DEPTH_TEST);

}void myReshape(GLsizei w, GLsizei h){

glViewport(0, 0, w, h);glMatrixMode(GL_PROJECTION);glLoadIdentity();gluPerspective(60.0, (GLfloat) w/(GLfloat) h, 1.0, 20.0);glMatrixMode(GL_MODELVIEW);glLoadIdentity();glTranslatef (0.0, 0.0, -5.0);

}

void Key1(int key, int x, int y) {

switch(key){case GLUT_KEY_LEFT:

year = (year - 5) % 360;break;

case GLUT_KEY_RIGHT: year = (year + 5) % 360;break;

case GLUT_KEY_UP: day = (day + 10) % 360;break;

case GLUT_KEY_DOWN: day = (day - 10) % 360;break;

}glutPostRedisplay();

}void main(int argc, char** argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_RGB | GLUT_SINGLE); glutInitWindowPosition(100,100); glutInitWindowSize(400,400); glutCreateWindow("OpenGL EXAMPLE"); myinit(); glutReshapeFunc(myReshape); glutDisplayFunc(display); glutSpecialFunc(Key1); glutMainLoop();}

38

Display List• OpenGL display lists are

designed to optimize performance

drawCircle(){

GLint i;GLfloat cosine, sine;glBegin(GL_POLYGON);for(i=0;i<100;i++){

cosine=cos(i*2*PI/100.0);sine=sin(i*2*PI/100.0);glVertex2f(cosine,sine);

}glEnd();

}

buildCircle(){

GLint i;GLfloat cosine, sine;glNewList(MY_CIRCLE_LIST,

GL_COMPILE);glBegin(GL_POLYGON);for(i=0;i<100;i++){

cosine=cos(i*2*PI/100.0);sine=sin(i*2*PI/100.0);glVertex2f(cosine,sine);

}glEnd();glEndList();

}

glCallList(MY_CIRCLE_LIST);

39

Transformation Example II#include "glut.h"

GLuint listName = 1;void display(void){

glClear(GL_COLOR_BUFFER_BIT);GLuint i;glColor3f(0.0, 1.0, 0.0);for (i = 0; i < 10; i++)

glCallList (listName);glFlush ();

}void myinit(void){

glShadeModel(GL_SMOOTH); glNewList (listName, GL_COMPILE);glColor3f(1.0, 0.0, 0.0);glBegin (GL_TRIANGLES);glVertex2f (0.0, 0.0);glVertex2f (1.0, 0.0);glVertex2f (0.0, 1.0);glEnd ();glTranslatef (1.2, 0.0, 0.0);glEndList ();

}

void myReshape(GLsizei w, GLsizei h){

glViewport(0, 0, w, h);glMatrixMode(GL_PROJECTION);glLoadIdentity();if (w <= h)

gluOrtho2D (0.0, 2.0, -0.5 * (GLfloat) h/(GLfloat) w,1.5 * (GLfloat) h/(GLfloat) w);else

gluOrtho2D (0.0, 2.0 * (GLfloat) w/(GLfloat) h, -0.5, 1.5);glMatrixMode(GL_MODELVIEW);glLoadIdentity();

}void main(int argc, char** argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_RGB | GLUT_SINGLE); glutInitWindowPosition(100,100); glutInitWindowSize(400,400); glutCreateWindow("OpenGL EXAMPLE 2"); myinit(); glutReshapeFunc(myReshape); glutDisplayFunc(display); glutMainLoop();}

40

Shading model

• Flat shading– glShadeModel(GL_FLAT)

• Smooth (Gouraud) shading– glShadeModel(GL_SMOOTH)

41

Light source• Ambient (GL_AMBIENT)

– The light from that source that's been scattered so much by the environment

• Diffuse (GL_DIFFUSE)– Comes from one direction

• Specular (GL_SPECULAR) – Comes from a particular direction

GLfloat light_ambient[] = { 0.0, 0.0, 0.0, 1.0 };GLfloat light_diffuse[] = { 1.0, 1.0, 1.0, 1.0 };GLfloat light_specular[] = { 1.0, 1.0, 1.0, 1.0 };GLfloat light_position[] = { 1.0, 1.0, 1.0, 0.0 };glLightfv(GL_LIGHT0, GL_AMBIENT, light_ambient);glLightfv(GL_LIGHT0, GL_DIFFUSE, light_diffuse);glLightfv(GL_LIGHT0, GL_SPECULAR, light_specular);glLightfv(GL_LIGHT0, GL_POSITION, light_position);

42

Material Properties

• Define the material properties of the objects in the scene:– GL_AMBIENT, GL_DIFFUSE,

GL_AMBIENT_AND_DIFFUSE, GL_SPECULAR, Etc.

• GLfloat mat_amb_diff[] = { 0.1, 0.5, 0.8, 1.0 };• glMaterialfv(GL_FRONT_AND_BACK,

GL_AMBIENT_AND_DIFFUSE, mat_amb_diff);

43

Light Example I#include "glut.h"

void display(void){

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);glutSolidSphere(1.0, 50, 50);glFlush();

}void myinit(void){

GLfloat mat_specular[] = { 1.0, 1.0, 1.0, 1.0 };GLfloat mat_shininess[] = { 50.0 };GLfloat light_position[] = { 1.0, 1.0, 1.0, 0.0 };glMaterialfv(GL_FRONT, GL_SPECULAR, mat_specular);glMaterialfv(GL_FRONT, GL_SHININESS, mat_shininess);glLightfv(GL_LIGHT0, GL_POSITION, light_position);glEnable(GL_LIGHTING);glEnable(GL_LIGHT0);glEnable(GL_DEPTH_TEST);

}void myReshape(GLsizei w, GLsizei h){

glViewport(0, 0, w, h);glMatrixMode(GL_PROJECTION);glLoadIdentity();if (w <= h)

glOrtho (-1.5, 1.5, -1.5*(GLfloat)h/(GLfloat)w, 1.5*(GLfloat)h/(GLfloat)w, -10.0, 10.0);else

glOrtho (-1.5*(GLfloat)w/(GLfloat)h,1.5*(GLfloat)w/(GLfloat)h, -1.5, 1.5, -10.0, 10.0);glMatrixMode(GL_MODELVIEW);glLoadIdentity();

}

void main(int argc, char** argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_RGB | GLUT_SINGLE); glutInitWindowPosition(100,100); glutInitWindowSize(500,500); glutCreateWindow("OpenGL EXAMPLE 3"); myinit(); glutReshapeFunc(myReshape); glutDisplayFunc(display); glutMainLoop();}

44

Light Example II#include "glut.h"

static int spin = 0;void display(void){

GLfloat position[] = { 0.0, 0.0, 1.5, 1.0 };glClear (GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);glPushMatrix ();glTranslatef (0.0, 0.0, -5.0);glPushMatrix ();glRotated ((GLdouble) spin, 1.0, 0.0, 0.0);glRotated (0.0, 1.0, 0.0, 0.0);glLightfv (GL_LIGHT0, GL_POSITION, position);glTranslated (0.0, 0.0, 1.5);glDisable (GL_LIGHTING);glColor3f (0.0, 1.0, 1.0);glutWireCube(0.1);glEnable (GL_LIGHTING);glPopMatrix ();glutSolidSphere(0.9, 50, 50);glPopMatrix ();glFlush ();

}void myinit(void){

glEnable(GL_LIGHTING);glEnable(GL_LIGHT0);glEnable(GL_DEPTH_TEST);

}void myReshape(GLsizei w, GLsizei h){

glViewport(0, 0, w, h);glMatrixMode(GL_PROJECTION);glLoadIdentity();gluPerspective(40.0, (GLfloat) w/(GLfloat) h, 1.0, 20.0);glMatrixMode(GL_MODELVIEW);}

void Key1(int key, int x, int y) {

switch(key){case GLUT_KEY_LEFT:

spin = (spin + 30) % 360;break;

}glutPostRedisplay();

}void main(int argc, char** argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_RGB | GLUT_SINGLE); glutInitWindowPosition(100,100); glutInitWindowSize(500,500); glutCreateWindow("OpenGL EXAMPLE 4"); myinit(); glutReshapeFunc(myReshape); glutDisplayFunc(display); glutSpecialFunc(Key1); glutMainLoop();}

45

Light Example III#include "glut.h"

GLfloat diffuseMaterial[4] = { 0.5, 0.5, 0.5, 1.0 };void display(void){

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);glutSolidSphere(1.0, 50, 50);glFlush();

}void myinit(void){

GLfloat mat_specular[] = { 1.0, 1.0, 1.0, 1.0 };GLfloat light_position[] = { 1.0, 1.0, 1.0, 0.0 };glMaterialfv(GL_FRONT, GL_DIFFUSE, diffuseMaterial);glMaterialfv(GL_FRONT, GL_SPECULAR, mat_specular);glMaterialf(GL_FRONT, GL_SHININESS, 25.0);glLightfv(GL_LIGHT0, GL_POSITION, light_position);glEnable(GL_LIGHTING);glEnable(GL_LIGHT0);glEnable(GL_DEPTH_TEST);glColorMaterial(GL_FRONT, GL_DIFFUSE);glEnable(GL_COLOR_MATERIAL);

}void myReshape(GLsizei w, GLsizei h){

glViewport(0, 0, w, h);glMatrixMode(GL_PROJECTION);glLoadIdentity();if (w <= h)

glOrtho (-1.5, 1.5, -1.5*(GLfloat)h/(GLfloat)w,1.5*(GLfloat)h/(GLfloat)w, -10.0, 10.0);else

glOrtho (-1.5*(GLfloat)w/(GLfloat)h,1.5*(GLfloat)w/(GLfloat)h, -1.5, 1.5, -10.0, 10.0);glMatrixMode(GL_MODELVIEW);glLoadIdentity();

}

void Mouse(int button, int state, int x, int y) {

if (state == GLUT_DOWN){

switch (button){case GLUT_LEFT_BUTTON :

diffuseMaterial[0] += 0.1;if (diffuseMaterial[0] > 1.0)

diffuseMaterial[0] = 0.0;glColor4fv(diffuseMaterial);break;

case GLUT_RIGHT_BUTTON :diffuseMaterial[1] += 0.1;if (diffuseMaterial[1] > 1.0)

diffuseMaterial[1] = 0.0;glColor4fv(diffuseMaterial);break;

case GLUT_MIDDLE_BUTTON :diffuseMaterial[2] += 0.1;if (diffuseMaterial[2] > 1.0)

diffuseMaterial[2] = 0.0;glColor4fv(diffuseMaterial);break;

}}

glutPostRedisplay();}void main(int argc, char** argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_RGB | GLUT_SINGLE); glutInitWindowPosition(100,100); glutInitWindowSize(500,500); glutCreateWindow("OpenGL EXAMPLE 5"); myinit(); glutReshapeFunc(myReshape); glutDisplayFunc(display); glutMouseFunc(Mouse); glutMainLoop();}

46

Complicated Examples

47

Complex Model I

• Does it look complicated?– Only use simple shape models

such as sphere, rectangle boxes, octagon, etc.

• Configurations– Torso, Hip, Shoulder,

RocketPod, UpperArm, ForeAm, UpperLeg, Foot, VulcanGun, Building models

• Smooth animation– Only transformation functions

48

Complex Model II

• Environment– Loading the tunnel model– Add texture images– For navigation pre-calculated

camera route used

• Text– glfont library used

Environmental map

49

Complex Model III

• Loading models– Use user-defined file

format

• Additional Features– Collision detection– Fog effects (OpenGL

support)

50

Complex Model IV

• Loading models– Importing Wavefront OBJ

file to display– *.obj file includes vertex,

texture coordinate, and face numbers

Rendered using 3DS MAXwithout texture

Rendered using 3DS MAXwith texture

51

Useful Website for OpenGL

• OpenGL Official site: http://www.opengl.org• SGI website: http://www.sgi.com• OpenGL documentations:

– http://www.opengl.org/documentation/• Tutorials

– http://flipcode.com/tutorials/• GLUT

– http://www.opengl.org/resources/libraries/glut.html