Understanding of OpenGL Transformations and Projections TA: Dong Hyun Jeong Instructor : Dr. Kalpathi Subramanian

Purpose Short overview of OpenGL Understanding of basic knowledge about OpenGL Short discussion on how to use OpenGL including transformations and projections

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

Supports Operating systems Windowing systems Callable from Mac OS, OS/2, UNIX, Windows 95/98, NT, 2000, Linux, OPENStep, BeOS Windowing systems Win32, MacOS, Presentation Manager, X-Window System Callable from C, C++, Ada, Fortran, Python, Perl, Java

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 GLU Xlib GLX OpenGL 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

Several Advanced API Open Inventor IRIS Performer OpenGL Optimizer 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)

Several Advanced API OpenGL Volumizer OpenGL Shader High-level immediate mode volume rendering API (energy, medical and sciences) OpenGL Shader Realistic visual effects, bump mapping, multiple textures, etc.

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 projected Vecterize Representing 3D objects as line or plane pieces of objects or elements Clipping (Clip) Remove the not interested regions from the vecterized elements Vectorize Clip Transform To viewport Draw

Viewport and Viewport Clipping Clipping Volume Physical coordinate or Global coordinate to represent the 3D objects. glOrtho(), gluPerspective() Viewport Plane regions to map the physical coordinate into windows’ pixel coordinate. glViewport() Viewing transform Changing user’s viewing angle to represent the 3d objects. glTranslated(), glRoated(), glMatrixMode(), gluLookAt()

Displaying Objects

Drawing a triangle on screen Clear the screen Create a triangle Determine the location and direction of the triangle Change the viewing angle Define a projection method

Clear the screen Remove the frame buffer glClearColor(0.0,0.0,0.0,0.0); glClear(GL_COLOR_BUFFER_BIT);

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

Positioning Determine the location and direction of the triangle Y glTranslatef(1.0f,1.0f,0.0f); glRotatef(45.0f,0.0f,1.0f,0.0f); DrawTriangle(); X Z Y Translate Rotate

Viewing angle Change the viewing angle Y 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

Projection Determine the projection Perspective Projection X Z Y 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); Perspective Projection Orthographic Projection

Geometry elements I Points Lines Triangles GL_POINTS v0 v1 v2 v3 v4 v5 v0 v1 v2 v3 v4 Points GL_POINTS Lines GL_LINES, GL_LINE_STRIP, GL_LINE_LOOP Triangles GL_TRIANGLES, GL_TRIANGLES_STRIP, GL_TRIANGLE_FAN v0 v1 v2 v3 v4 v5 v0 v1 v2 v3 v4 v5 v0 v1 v2 v3 v4 v5 v0 v1 v2 v3 v4 v5 v0 v1 v4 v5 v3 v2

Geometry elements II Quadric Polygon GL_QUADS, GL_QUAD_STRIP GL_POLYGON v0 v1 v2 v4 v5 v3 v7 v6 v0 v1 v5 v7 v3 v4 v6 v2 v0 v5 v2 v1 v4 v3

Basic restrictions All have to be plane objects No halls Edges do not have to be crossing Valid Invalid

Creating complex objects Complex objects using connected lines Complex objects using connected triangles

Vertex transformation

Viewing Positioning a object Change the viewing angle Projection and transformation Viewport and coordinate determination

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) Rotate Translate Scale

Viewing Transformation Changes the position and orientation of the viewpoint Generally it consists of translations and rotations. gluLookAt()

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

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

Perspective Projection II gluPerspective(fovy, aspect, near, far); Creates a matrix for a symmetric perspective-view frustum

Orthographic Projection the viewing volume is a rectangular parallelepiped glOrtho(left, right, bottom, top, near, far);

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

Aspect Ratio Mapping the Viewing Volume to the Viewport Displayed image can be distorted depending on the ratio (w/h)

Matrix Stacks Pushing and Popping the Matrix Stack Modelview and Projection 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()

Matrix Stacks Example glPushMatrix() CreateTriangle glTranslatef() (0.0, 0.0, 0.0) glPushMatrix() (0.0, 0.0, 0.0) CreateTriangle glTranslatef() CreateCircle glLoadIdentity() (0.0, 0.0, -5.0) (0.0, 0.0, 0.0) CreateCircle CreateCircle

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 depending on operating systems. But, it has restrictions of broadly using in other operating systems.

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

How to use GLUT? Initialization functions Initialize display mode 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/

A simple example #include<gl\glut.h> void DrawTriangle() { glBegin(GL_TRIANGLES); glColor3f(1.0f, 0.0f, 0.0f); // red glVertex2f(0.0f, 0.0f); glColor3f(0.0f, 1.0f, 0.0f); // green glVertex2f(1.0f, 0.0f); glColor3f(0.0f, 0.0f, 1.0f); // blue glVertex2f(0.0f, 1.0f); glEnd(); } void display() glClearColor(0.0, 0.0, 0.0, 0.0); // black glClear(GL_COLOR_BUFFER_BIT); glPushMatrix(); // push modelview matrix glTranslatef(1.0f, 1.0f, 0.0f); glRotatef(45.0f, 0.5f, 1.0f, 0.5f); DrawTriangle(); glPopMatrix(); // pop modelview matrix glFlush(); 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); 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();

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); 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; case GLUT_KEY_UP: day = (day + 10) % 360; case GLUT_KEY_DOWN: day = (day - 10) % 360; } 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();

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

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

Shading model Flat shading Smooth (Gouraud) shading glShadeModel(GL_FLAT) Smooth (Gouraud) shading glShadeModel(GL_SMOOTH)

Light source Ambient (GL_AMBIENT) Diffuse (GL_DIFFUSE) 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);

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

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

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

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); 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; case GLUT_MIDDLE_BUTTON : diffuseMaterial[2] += 0.1; if (diffuseMaterial[2] > 1.0) diffuseMaterial[2] = 0.0; } 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();

Complicated Examples

Complex Model I Does it look complicated? Configurations 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

Complex Model II Environment Text Loading the tunnel model Add texture images For navigation pre-calculated camera route used Text glfont library used Environmental map

Complex Model III Loading models Additional Features Use user-defined file format Additional Features Collision detection Fog effects (OpenGL support)

Complex Model IV Loading models Importing Wavefront OBJ file to display *.obj file includes vertex, texture coordinate, and face numbers Rendered using 3DS MAX without texture Rendered using 3DS MAX with texture

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