12/22/2015Jarek Rossignac, CoC, GT, ©Copyright 2003OpemnGL, slide 1 OpenGL: Introduction 3D Modeling, Graphics, and Animation Prof. Jarek Rossignac College

04/21/23 Jarek Rossignac, CoC, GT, ©Copyright 2003 OpemnGL, slide 1

OpenGL: Introduction

3D Modeling, Graphics, and AnimationProf. Jarek Rossignac

College of Computing

Georgia Institute of Technology

Inspired by slides from Mitch Parryand from David Luebke


Outline

• Historical perspective on hardware, standards, markets• Resources: Web sites and books• API, library, and hardware: Map geometry to pixels and colors• Pipeline: Transform, Clip, Project, Rasterize• Geometric primitives: vertices, polygons, cubes, cylinders...• Attributes: color, material, drawing mode• Viewing: camera position, lens, object position• Control and flow• Programming conventions: glu- & gl- calls, types, -.h files


History of the 3D graphics industry• 1960s:

– Line drawings, hidden lines, parametric surfaces (B-splines…) – Automated drafting & machining for car, airplane, and ships manufacturers

• 1970’s: – Mainframes, Vector tubes (HP…)– Software: Solids, (CSG), Ray Tracing, Z-buffer for hidden lines

• 1980s: – Graphics workstations ($50K-$1M): Frame buffers, rasterizers , GL, Phigs– VR: CAVEs and head-mounted displays– CAD/CAM & GIS: CATIA, SDRC, PTC– Sun, HP, IBM, SGI, E&S, DEC

• 1990s: – PCs ($2K): Graphics boards, OpenGL, Java3D– CAD+Videogames+Animations: AutoCAD, SolidWorks…, Alias-Wavefront– Intel, many board vendors

• 2000s:– Laptops, PDAs, Cell Phones: Parallel graphic chips– Everything will be graphics, 3D, animated, interactive– Nvidia, Sony, Nokia


Resources for OpenGL

• OpenGL Primer by E. Angel• OpenGL user’s guide and programming manual• Lots of online documentation and examples

http://www.gvu.gatech.edu/~jarek/courses/4451http://www.cc.gatech.edu/classes/AY2003/cs4451b_fall/

http://www.cc.gatech.edu/classes/AY2003/cs4451b_fall/p1examples.htm

http://www.gvu.gatech.edu/~jarek/courses/4451



OpenGL

• Open Standard (controlled by multi-company board)• Used as common API for portable applications• Maps geometry to libraries that exploit graphics hardware

• Function: – Take 3D geometry, attributes, user actions– Produce images/animations

• OpenGL Pipeline:– States (colors, rendering modes, view parameters, local frame)– Geometry (vertices, connectivity) flows in and gets:

• Transformed and clipped to the viewing frustum• Colored and textured• Projected and painted on the pixels of the window (frame buffer)• Hidden parts removed by hardware (z-buffer stores depth to visible surface)


Utilities and programming conventions

• OpenGL• GLUT


GLUT components– Main() // Init window– Init() // set state vars– Display() // draw model– Reshape() // adjust w/h– Mouse() // mouse events– Keyboard() // keyboard events


GLUT: Mainint Main(int argc, char** argv)

glutInit(); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);glutInitWindowSize (Vx_max-Vx_min, Vy_max-Vy_min);glutInitWindowPosition (100, 100);glutCreateWindow (argv[0]); init ();glutDisplayFunc(display);glutReshapeFunc(reshape);glutMouseFunc(mouse);glutKeyboardFunc(keyboard);glutMainLoop();

return 0;


GLUT: Init

void init(void) { glClearColor (0.0, 0.0, 0.0, 0.0);glEnable(…);

}


GLUT: Display

void display(void) { glClear (GL_COLOR_BUFFER_BIT);glColor3f(1.0,1.0,1.0); glBegin(GL_LINES); glVertex2d(100.0, 100.0); glVertex2d(400.0, 100.0); …glEnd(); glFlush ();

}


GLUT: Reshape

void reshape (int w, int h) { glViewport (0, 0, (GLsizei) w, (GLsizei) h);glMatrixMode (GL_PROJECTION);glLoadIdentity (); gluOrtho2D(Vx_min, Vx_max, Vy_min, Vy_max);glMatrixMode (GL_MODELVIEW);

}


GLUT: Mouse

void mouse(int button, int state, int x, int y) {switch (button) {

case GLUT_LEFT_BUTTON: if (state == GLUT_DOWN) {

printf("left mouse click\n");}break;

default: break;

} }


GLUT: Keyboard

void keyboard(unsigned char key, int x, int y) { switch (key) {

case ‘r’: glutPostRedisplay(); break;

case 27: /* Escape key */ exit(0); break;

default: break;

} }


OpenGL: Conventions

• Functions in OpenGL start with gl– Functions starting with glu are utility functions (i.e., gluLookAt())– Functions starting with glx are for interfacing with the X Windows system

• Function names indicate argument type/#– Functions ending with f take Floats– Functions ending with i take Ints, functions that end with v take an array, with b

take byte, etc.– Ex: glColor3f() takes 3 floats, but glColor4fv() takes an array of 4 floats


OpenGL: Specifying Geometry

Geometry in OpenGL consists of a list of vertices in between calls to glBegin() and glEnd()

– A simple example: telling GL to render a triangleglBegin(GL_POLYGON);glVertex3f(x1, y1, z1);glVertex3f(x2, y2, z2);glVertex3f(x3, y3, z3);glEnd();

– Usage: glBegin(geomtype) where geomtype is:• Points, lines, polygons, triangles, quadrilaterals, etc...


OpenGL: More Examples

• Example: GL supports quadrilaterals:glBegin(GL_QUADS);glVertex3f(-1, 1, 0); glVertex3f(-1, -1, 0);glVertex3f(1, -1, 0);glVertex3f(1, 1, 0);glEnd();

– This type of operation is called immediate-mode rendering; • each command happens immediately• Although you may not see the result if you use double buffering

– Things get drawn into the back buffer – Then buffers are swapped


OpenGL: Front/Back Rendering

• Each polygon has two sides, front and back• OpenGL can render the two differently• The ordering of vertices in the list determines which is the front side:

– When looking at the front side, the vertices go counterclockwise• This is basically the right-hand rule• Note that this still holds after perspective projection


OpenGL: Drawing Triangles

• You can draw multiple triangles between glBegin(GL_TRIANGLES) and glEnd():

float v1[3], v2[3], v3[3], v4[3];...glBegin(GL_TRIANGLES);glVertex3fv(v1); glVertex3fv(v2); glVertex3fv(v3);glVertex3fv(v1); glVertex3fv(v3); glVertex3fv(v4);glEnd();

The same vertex is used (transformed, colored) many time (6 on average)


OpenGL: Triangle Strips

• An OpenGL triangle strip primitive reduces this redundancy by sharing vertices:

glBegin(GL_TRIANGLE_STRIP);glVertex3fv(v0);glVertex3fv(v1);glVertex3fv(v2);glVertex3fv(v3);glVertex3fv(v4);glVertex3fv(v5);glEnd();

– triangle 0 is v0, v1, v2– triangle 1 is v2, v1, v3 (why not v1, v2, v3?)– triangle 2 is v2, v3, v4– triangle 3 is v4, v3, v5 (again, not v3, v4, v5)

v0

v2

v1v3

v4

v5


OpenGL: Triangle Fan• The GL_TRIANGLE_FAN primitive is another way to reduce vertex redundancy:

v0

v1

v2

v3v4

v5

v6


OpenGL: Drawing Other Primitives• You can draw other primitives using:

– GL_POINTS– GL_LINES– GL_LINE_STRIP– GL_LINE_LOOP– GL_QUADS– …


OpenGL: Specifying Color

• Can specify other properties such as color

– To produce a single aqua-colored triangle:glColor3f(0.1, 0.5, 1.0); glVertex3fv(v0); glVertex3fv(v1); glVertex3fv(v2);

– To produce a smoothly Gouraud-shaded triangle:glColor3f(1, 0, 0); glVertex3fv(v0);glColor3f(0, 1, 0); glVertex3fv(v1);glColor3f(0, 0, 1); glVertex3fv(v2);

– In OpenGL, colors can also have a fourth component (transparency)• Generally want = 1.0 (opaque);


OpenGL: Modeling Transforms

• Some OpenGL commands generate transformation matrices:glTranslatef(Tx, Ty, Tz);glRotatef(angleDegrees, Ax, Ay, Az);glScalef(Sx, Sy, Sz);

• Example of rotations around x, y, and z axesglRotatef(xangle,1,0,0); glRotatef(yangle,0,1,0); glRotatef(zangle,0,0,1);


OpenGL: Modeling Transforms

• Example:glMatrixMode(GL_MODELVIEW);glLoadIdentity();glTranslatef(…);glRotatef(…);

• Result: the modelview matrix is set to:I • T • R == T • R

which then is used to transform all subsequent vertices


OpenGL: Viewing Transforms

• Ex: gluLookAt() computes a lookat matrix : gluLookAt(eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ);Use it after loading the identity.


OpenGL: Projection

• The projection matrix is generally used for the perspective projection matrix

• gluOrtho2D() creates a matrix for projecting 2D coordinates onto the screen without perspective,

gluOrtho2D(double left, double right,double bottom, double top);


Selecting a Polygon w/Mouse

• Use gluUnProject() to find world coordinates for mouse click on near and far clipping planes (pnear and pfar).

• Intersect every triangle in the scene with the line that passes through pnear and pfar.


Example 1 (Brooks van Horn)• #include <glut.h> • #include <GL/gl.h> • #include <GL/glu.h> • #include <stdlib.h>• void mouse( int, int, int, int ); • void display( void ); • void reshape( int, int ); • void keyboard( unsigned char, int, int ); • void Idle( void );• void InitializeVariables( void ); // forwarding functions• int xdim, ydim; // screen dimensions• struct vPoint { inline float & operator [] ( int index ) { return

element[ index ]; } float element[ 3 ]; }; • const float X_STEP = 0.005; const float Y_STEP = 0.020; const float

Z_STEP = 0.025; • bool flag; // flag to tell us if there is anything to draw yet• vPoint rotation; // current rotation


Example 1 of a mainint main( int argc, char *argv[] ) {InitializeVariables(); // My function that zeroes variables and such stuff. xdim = ( argc > 1 ) ? atoi( argv[ 1 ] ) : 500; ydim = ( argc > 2 ) ? atoi( argv[ 2 ] ) : 500; glutInit( &argc, argv ); /* Initialization function */ glutInitDisplayMode( GLUT_DOUBLE | GLUT_RGB ); // double buffer and GRB modes glutInitWindowSize( xdim, ydim ); // Set the screen size glutCreateWindow( "This is the title of the window."); glClearColor( 0.0, 0.0, 0.0, 0.0 ); // clear color and alpha at each pixel glShadeModel( GL_FLAT ); // set shading mode to flat (constant color for each polygon) glutDisplayFunc( display ); // tells OpenGL what to call when it needs to redraw glutReshapeFunc( reshape ); // tells OpenGL what to call when window is reshaped glutMouseFunc( mouse ); // tells OpenGL what to call when a mouse button is pressed glutKeyboardFunc( keyboard ); // tells OpenGL what to call upon keyboard events glutIdleFunc( Idle ); // Says what to call when nothings is happening glutMainLoop(); // important call to include after the above 3 return 0; }


Example 1 of a display functionvoid display( void ){glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT ); if ( flag ) { glutSwapBuffers(); return ; } glPushMatrix(); // push matrix on stack glColor3f( 1.0, 1.0, 1.0 ); // specify a color by giving R-G-B values from 0 to 1. glTranslatef( 0.0, 0.0, -3.0 ); // move the dots so that we can see them glRotatef(rotation[0],1,0,0); glRotatef(rotation[1],0,1,0); glRotatef(rotation[2],0,0,1); glBegin( GL_POINTS ); for ( int i = 0; i < MAX_DOTS; i++ ) glVertex3f(dots[i][0],dots[i][1],dots[i]

[2]); glEnd(); glPopMatrix(); glutSwapBuffers();} // This says: "DRAW WHAT YOU'VE GOT!"


Example 1 of a reshape function

void reshape( int new_width, int new_height ){xdim = new_width; ydim = new_height; glViewport(0,0,(GLsizei) new_width, (GLsizei) new_height );

// This resets the viewing port glMatrixMode( GL_PROJECTION );

// This resets the use of Matrices based upon the new view glLoadIdentity(); gluPerspective( 60.0, (GLfloat) xdim / (GLfloat) ydim, 0.1, 20.0 );

// reset the viewing projection glMatrixMode( GL_MODELVIEW ); }


Example 1 of a mouse function

void mouse( int button, int state, int x, int y ) { /* button: GLUT_LEFT_BUTTON or GLUT_MIDDLE_BUTTON or GLUT_RIGHT_BUTTON,

state: (pressed GLUT_DOWN or not GLUT_UP) (x, y): position of mouse */

if ( state == GLUT_UP ) return ; // do nothing when buttons up// otherwise generate dotsfor (int i = 0; i<MAX_DOTS; i++) for (int j = 0; j<3; j++) dots[i]

[j] = (float) rand() / (float) RAND_MAX; glutPostRedisplay();} // will invoke display again so that a new thing is put on the screen


Example 2 (Peter Lindstrom)/* Simple geometry viewer: Left mouse: rotate; Middle mouse: zoom; Right mouse: menu; ESC to quit The function InitGeometry() initializes the geometry that will be displayed. */

#include <assert.h>#include <math.h>#include <stdlib.h>#include <GL/glut.h>#define MAX_TRIANGLES (10)struct Point {float x[3]; float n[3]; };struct Triangle { Point v[3]; };Triangle triangleList[MAX_TRIANGLES];int triangleCount = 0;void InitGeometry();


Example 2 Initialization/* Viewer state */float sphi=90.0, stheta=45.0;float sdepth = 10;float zNear=1.0, zFar=100.0;float aspect = 5.0/4.0;float xcam = 0, ycam = 0;long xsize, ysize;int downX, downY;bool leftButton = false, middleButton = false;int i,j;GLfloat light0Position[] = { 0, 1, 0, 1.0}; int displayMenu, mainMenu;enum {WIREFRAME, HIDDENLINE, FLATSHADED, SMOOTHSHADED};int displayMode = WIREFRAME; void MyIdleFunc(void) { glutPostRedisplay();} /* things to do while idle */void RunIdleFunc(void) { glutIdleFunc(MyIdleFunc); }void PauseIdleFunc(void) { glutIdleFunc(NULL); }


Example 2 Flat shading of triangles

void DrawFlatShaded(void) { int i; glEnable(GL_POLYGON_OFFSET_FILL); glColor3f(0.8f, 0.2f, 0.8f); glBegin ( GL_TRIANGLES ) ; for ( i = 0; i < triangleCount; ++i ) { glVertex3fv( triangleList[i].v[0].x ); glVertex3fv( triangleList[i].v[1].x ); glVertex3fv( triangleList[i].v[2].x ); } glEnd ( ) ; glDisable(GL_POLYGON_OFFSET_FILL);}


Example 2 Smooth shading of triangles

void DrawSmoothShaded(void) { int i; assert( triangleCount < MAX_TRIANGLES ); glColor3f(0.8f, 0.2f, 0.8f); glBegin ( GL_TRIANGLES ) ; for ( i = 0; i < triangleCount; ++i ) { glNormal3fv( triangleList[i].v[0].n ); glVertex3fv( triangleList[i].v[0].x ); glNormal3fv( triangleList[i].v[1].n ); glVertex3fv( triangleList[i].v[1].x ); glNormal3fv( triangleList[i].v[2].n ); glVertex3fv( triangleList[i].v[2].x ); } glEnd ( ) ; }


Example 2 Drawing edges of triangles

void DrawWireframe(void) { int i; glColor3f(1.0, 1.0, 1.0); for ( i = 0; i < triangleCount; ++i ) { glBegin(GL_LINE_STRIP); glVertex3fv( triangleList[i].v[0].x ); glVertex3fv( triangleList[i].v[1].x ); glVertex3fv( triangleList[i].v[2].x ); glVertex3fv( triangleList[i].v[0].x ); glEnd(); } }


Example 2 Hidden linesvoid DrawHiddenLine(void) { glEnable(GL_POLYGON_OFFSET_FILL); glColor3f(0,0,0); glBegin ( GL_TRIANGLES ) ; for ( i = 0; i < triangleCount; ++i ) { glVertex3fv( triangleList[i].v[0].x ); glVertex3fv( triangleList[i].v[1].x ); glVertex3fv( triangleList[i].v[2].x ); } glEnd ( ) ; glDisable(GL_POLYGON_OFFSET_FILL); glColor3f(1.0,1.0,1.0); glPolygonMode(GL_FRONT_AND_BACK, GL_LINE); glBegin ( GL_TRIANGLES ) ; for ( i = 0; i < triangleCount; ++i ) { glVertex3fv( triangleList[i].v[0].x ); glVertex3fv( triangleList[i].v[1].x ); glVertex3fv( triangleList[i].v[2].x ); } glEnd ( ) ; glPolygonMode(GL_FRONT_AND_BACK, GL_FILL); }


Example 2 Reshape

void ReshapeCallback(int width, int height) { xsize = width; ysize = height; aspect = (float)xsize/(float)ysize; glViewport(0, 0, xsize, ysize); glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glutPostRedisplay();}


Example 2 Menu

void SetDisplayMenu(int value) { displayMode = value; switch(value) { case WIREFRAME: glShadeModel(GL_FLAT); glDisable(GL_LIGHTING); break; case HIDDENLINE: glShadeModel(GL_FLAT); glDisable(GL_LIGHTING); break; case FLATSHADED: glShadeModel(GL_FLAT); glEnable(GL_LIGHTING); break; case SMOOTHSHADED: glShadeModel(GL_SMOOTH); (GL_LIGHTING); break;

} glutPostRedisplay();} void SetMainMenu(int value) {switch(value) {case 99: exit(0); break;}}


Example 2 Display Callbackvoid DisplayCallback(void) { glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(64.0, aspect, zNear, zFar); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glTranslatef(0.0,0.0,-sdepth); glRotatef(-stheta, 1.0, 0.0, 0.0); glRotatef(sphi, 0.0, 0.0, 1.0); switch (displayMode) { case WIREFRAME: DrawWireframe(); break; case HIDDENLINE: DrawHiddenLine(); break; case FLATSHADED: DrawFlatShaded(); break; case SMOOTHSHADED: DrawSmoothShaded(); break; } glutSwapBuffers(); glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); }


Example 2 Keyboard and mouse

void KeyboardCallback(unsigned char ch, int x, int y) { switch (ch) {case 27: exit(0);break; } glutPostRedisplay(); } void MouseCallback(int button, int state, int x, int y) { downX = x; downY = y; leftButton = ((button == GLUT_LEFT_BUTTON) && (state == GLUT_DOWN)); middleButton = ((button == GLUT_MIDDLE_BUTTON) && (state ==

GLUT_DOWN)); glutPostRedisplay();} void MotionCallback(int x, int y) { if (leftButton){sphi+=(float)(x-downX)/4.0;stheta+=(float)(downY-y)/4.0;} // rotate if (middleButton){sdepth += (float)(downY - y) / 10.0; } // scale downX = x; downY = y; glutPostRedisplay();}


Example 2 InitGLvoid InitGL() { glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH); glutInitWindowSize(500, 500); glutCreateWindow("cs175 Triangle Viewer"); glEnable(GL_DEPTH_TEST); glDepthFunc(GL_LEQUAL); glClearColor(0.0, 0.0, 0.0, 0.0); glPolygonOffset(1.0, 1.0); glDisable(GL_CULL_FACE); glHint(GL_LINE_SMOOTH_HINT, GL_NICEST); glHint(GL_POLYGON_SMOOTH_HINT, GL_NICEST); glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST); glEnable(GL_COLOR_MATERIAL); glColorMaterial(GL_FRONT, GL_DIFFUSE); glLightfv (GL_LIGHT0, GL_POSITION, light0Position); glEnable(GL_LIGHT0); glutReshapeFunc(ReshapeCallback); glutDisplayFunc(DisplayCallback); glutKeyboardFunc(KeyboardCallback); glutMouseFunc(MouseCallback); glutMotionFunc(MotionCallback); }


Example 2 Init Menu

void InitMenu() { displayMenu = glutCreateMenu(SetDisplayMenu); glutAddMenuEntry("Wireframe", WIREFRAME); glutAddMenuEntry("Hidden Line", HIDDENLINE); glutAddMenuEntry("Flat Shaded", FLATSHADED); glutAddMenuEntry("Smooth Shaded", SMOOTHSHADED); mainMenu = glutCreateMenu(SetMainMenu); glutAddSubMenu("Display", displayMenu); glutAddMenuEntry("Exit", 99); glutAttachMenu(GLUT_RIGHT_BUTTON); }


Example 2 Init Geometryvoid InitGeometry() { triangleCount = 2; /* coordinates */ triangleList[0].v[0].x[0] = 0; triangleList[0].v[0].x[1] = 0; triangleList[0].v[0].x[2] = 0; triangleList[0].v[1].x[0] = 0; triangleList[0].v[1].x[1] = 1; triangleList[0].v[1].x[2] = 0; triangleList[0].v[2].x[0] = 1; triangleList[0].v[2].x[1] = 0; triangleList[0].v[2].x[2] = 0; triangleList[1].v[0].x[0] = 0; triangleList[1].v[0].x[1] = 0; triangleList[1].v[0].x[2] = 0; triangleList[1].v[1].x[0] = 0; triangleList[1].v[1].x[1] = 0; triangleList[1].v[1].x[2] = 1; triangleList[1].v[2].x[0] = 0; triangleList[1].v[2].x[1] = 1; triangleList[1].v[2].x[2] = 0; /* normals */ triangleList[0].v[0].n[0] = 0.7; triangleList[0].v[0].n[1] = 0; triangleList[0].v[0].n[2] = 0.7; triangleList[0].v[1].n[0] = 0.7; triangleList[0].v[1].n[1] = 0; triangleList[0].v[1].n[2] = 0.7; triangleList[0].v[2].n[0] = 0; triangleList[0].v[2].n[1] = 0; triangleList[0].v[2].n[2] = 1; triangleList[1].v[0].n[0] = 0.7; triangleList[1].v[0].n[1] = 0; triangleList[1].v[0].n[2] = 0.7; triangleList[1].v[1].n[0] = 1; triangleList[1].v[1].n[1] = 0; triangleList[1].v[1].n[2] = 0; triangleList[1].v[2].n[0] = 0.7; triangleList[1].v[2].n[1] = 0; triangleList[1].v[2].n[2] = 0.7; }


Example 2 Main

void main(int argc, char **argv) { glutInit(&argc, argv); InitGL(); InitMenu(); InitGeometry(); glutMainLoop(); }


lPaying with examples of OpenGL

• Go to http://www.gvu.gatech.edu/~jarek/courses/4451• Download 6 files: 3d.c, light.c, unproject.c, spinner.htm, viewer.htm,

cubes.htm, and texture.htm• Edit as needed, compile, and run • Change some of their parameters and check that you understand what the

code does• Use





Practice questions

• When did commercial graphics workstation become available?• How are the visible surfaces selected by the graphics hardware?• What is OpenGL?• OpenGL code fragment that draws a line in 2D from point (a,b) to

point (b,c). • When would you call gluOrtho2D and what are the parameters.

Documents

12/22/2015Jarek Rossignac, CoC, GT, ©Copyright 2003OpemnGL, slide 1 OpenGL: Introduction 3D Modeling, Graphics, and Animation Prof. Jarek Rossignac College