The Institute for Computer Graphics

1. The Institute for Computer Graphics • An Introduction to • OpenGL Programming • Dongho Kim Institute for Computer Graphics

2. About Today’s Lecture • Based on the material used for Graphics Tools class last year • Schedule of lectures • Introduction to OpenGL (this week) • Introduction to DirectX (next week) • Two weeks later • Stuffs related to Game Programming • Advanced features, such as Vertex / Pixel shader Institute for Computer Graphics

3. Overview • OpenGL Introduction • Elementary Rendering • Display Lists Graphics • Transformations • Lighting • Texture Mapping • Additional Rendering Attributes • Imaging Institute for Computer Graphics

4. What Is OpenGL? • Graphics Rendering API • high-quality color images composed of geometric and image primitives • window system independent • operating system independent Institute for Computer Graphics

5. OpenGL as a Renderer • Geometric primitives • points, lines and polygons • Image Primitives • images and bitmaps • separate pipelines for images and geometry • linked through texture mapping • Rendering depends on state • Colors, materials, light sources, etc. Institute for Computer Graphics

6. Related APIs • AGL, GLX, WGL • glue between OpenGL and windowing systems • GLU (OpenGL Utility Library) • Part of OpenGL • NURBS, tessellators, quadric shapes, etc. • GLUT (OpenGL Utility Toolkit) • Portable windowing API • Not officially part of OpenGL Institute for Computer Graphics

7. OpenGL and Related APIs application program X, Win32, Mac O/S OpenGL Motif widget or similar GLX, AGL Or WGL GLUT GL GLU software and/or hardware Institute for Computer Graphics

8. Preliminaries • Header Files #include <GL/gl.h> #include <GL/glu.h> #include <GL/glut.h> • Libraries • Enumerated Types • OpenGL defines numerous types for compatibility GLfloat, GLint, GLenum, etc. Institute for Computer Graphics

9. GLUT Basics • Application Structure • Configure and open window • Initialize OpenGL state • Register input callback functions • render • resize • input: keyboard, mouse, etc. • Enter event processing loop Institute for Computer Graphics

10. Sample Program void main( int argc, char** argv ) { int mode = GLUT_RGB|GLUT_DOUBLE; GLUTInitDisplayMode( mode ); glutCreateWindow( argv[0] ); init(); glutDisplayFunc( display ); glutReshapeFunc( resize ); glutKeyboardFunc( key ); glutIdleFunc( idle ); glutMainLoop(); } Institute for Computer Graphics

11. OpenGL Initialization • Set up whatever state you’re going to use void init( void ) { glClearColor( 0.0, 0.0, 0.0, 1.0 ); glClearDepth( 1.0 ); glEnable( GL_LIGHT0 ); glEnable( GL_LIGHTING ); glEnable( GL_DEPTH_TEST ); } Institute for Computer Graphics

12. GLUT Callback Functions • Routine to call when something happens • window resize of redraw • user input • animation • “Register” callbacks with GLUT glutDisplayFunc( display ); glutIdleFunc( idle ); glutKeyboardFunc( key ); Institute for Computer Graphics

13. Rendering Callback • Do all of your drawing here glutDisplayFunc( render ); void render( void ) { glClear( GL_COLOR_BUFFER_BIT ); glBegin( GL_TRIANGLE_STRIP ); glVertex3fv( v[0] ); glVertex3fv( v[1] ); glVertex3fv( v[2] ); glVertex3fv( v[3] ); glEnd(); glutSwapBuffers(); } Institute for Computer Graphics

14. Idle Callbacks • Use for animation and continuous update glutIdleFunc( idle ); void idle( void ) { t += dt; glutPostRedisplay(); } Institute for Computer Graphics

15. User Input Callbacks • Process user input glutKeyboardFunc( keyboard ); void keyboard( char key, int x, int y ) { switch( key ) { case ‘q’ : case ‘Q’ : exit( EXIT_SUCCESS ); break; case ‘r’ : case ‘R’ : rotate = GL_TRUE; break; } } Institute for Computer Graphics

16. Elementary Rendering Institute for Computer Graphics

17. Elementary Rendering • Geometric Primitives • Managing OpenGL State • OpenGL Buffers Institute for Computer Graphics

18. OpenGL Geometric Primitives • All geometric primitives are specified by vertices Institute for Computer Graphics

19. Simple Example void drawRhombus( Glfloat color[] ) { glBegin( GL_QUADS ); glColor3fv( color ); glVertex2f( 0.0, 0.0 ); glVertex2f( 1.0, 0.0 ); glVertex2f( 1.5, 1.118 ); glVertex2f( 0.5, 1.118 ); glEnd(); } Institute for Computer Graphics

20. OpenGL Command Formats glVertex3fv( v ) Number of Components Data Type Vector b – byte ub – unsigned byte s – short us – unsigned short i – int ui – unsigned int f – float d - double Omit “v” for Scalar form glVertex2f( x, y ) 2 – (x,y) 3 – (x,y,z) 4 – (x,y,z,w) Institute for Computer Graphics

21. Specifying Geometric Primitives • Primitives are specified using glBegin( primType ); glEnd(); • primType determines how vertices are combined • GLfloat red, green, blue; • GLfloat coords[3]; • glBegin( primType ); • for ( i = 0; i < nVerts; ++i) { • glColor3f( red, green, blue ); • glVertex3f( coords ); • } • glEnd(); Institute for Computer Graphics

22. OpenGL Color Models • RGBA or Color Index • glColor*() • glIndex*() color index mode Frame Buffer Display RGBA mode Institute for Computer Graphics

23. Shapes Tutorial Run shapes tutorial Institute for Computer Graphics

24. Advanced Primitives • Vertex Arrays • Bernstein Polynomial Evaluators • basis for GLU NURBS • NURBS (Non-Uniform Rational B-Spline) • GLU Quadric Objects • sphere • cylinder (or cone) • disk (circle) Institute for Computer Graphics

25. OpenGL’s State Machine • All rendering attributes are encapsulated in the OpenGL State • rendering styles • shading • lighting • texture mapping Institute for Computer Graphics

26. Manipulating OpenGL State • Appearance is controlled by current state for each ( primitive to render ) { update OpenGL state render primitive } • Manipulating vertex attributes is most common way to manipulate state glColor*() / glIndex*() glNormal*() glTexCoord*() Institute for Computer Graphics

27. Controlling current state • Setting State glPointSize( size ); glLineStipple( repeat, pattern ); glShadeModel( GL_SMOOTH ); • Enabling Features glEnable( GL_LIGHTING ); glDisable( GL_TEXTURE_2D ); Institute for Computer Graphics

28. OpenGL Buffers • Color • for double buffering, divided into front and back • Alpha • Depth • Stencil • Accumulation Institute for Computer Graphics

29. Clearing Buffers • Setting clear values glClearColor( r, g, b, a ); glClearDepth( 1.0 ); • Clearing buffers glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT ); Institute for Computer Graphics

30. Animation Using Double Buffering • 1) Request a double buffered color buffer glutInitDisplayMode( GLUT_RGB | GLUT_DOUBLE ); • 2) Clear color buffer glClear( GL_COLOR_BUFFER_BIT ); • 3) Render Scene • 4) Request swap of front and back buffers glutSwapBuffers(); • Repeat steps 2-4 for animation Institute for Computer Graphics

31. Depth Buffering Using OpenGL • 1) Request a double buffered color buffer glutInitDisplayMode( GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH ); • 2) Enable depth buffering glEnable( GL_DEPTH_TEST ); • 3) Clear color buffer glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); • 4) Render Scene • 5) Swap color buffers Institute for Computer Graphics

32. A Program Template void main( int argc, char** argv ) { glutInit( &argc, argv ); glutInitDisplayMode( GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH); glutCreateWindow( “Tetrahedron” ); init(); glutIdleFunc( drawScene ); glutMainLoop(); } Institute for Computer Graphics

33. A Program Template (cont.) void init( void ) { glClearColor( 0.0, 0.0, 1.0, 1.0 ); } Institute for Computer Graphics

34. A Program Template (cont.) void drawScene( void ) { GLfloat vertices[] = { … }; GLfloat colors[] = { … }; glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT ); glBegin( GL_TRIANGLE_STRIP ); /* calls to glColor*() and glVertex*() */ glEnd(); glutSwapBuffers(); } Institute for Computer Graphics

35. Immediate Mode and • Display Lists Graphics Institute for Computer Graphics

36. Immediate vs Retained Mode • Immediate Mode Graphics • Primitive are sent to pipeline and display right away • No memory of graphical entities • Retained Mode Graphics • Primitives placed in display lists • Display lists kept on graphics server • Can be redisplayed with different state • Can be shared among OpenGL graphics contexts Institute for Computer Graphics

37. Display Lists • steps: create it, then call it GLuint id; void init( void ) { id = glGenLists( 1 ); glNewList( id, GL_COMPILE ); /* other OpenGL routines */ glEndList(); } void display( void ) { glCallList( id ); } Institute for Computer Graphics

38. Modeling with Display Lists #define BOX 1 /* or any other integer */ glNewList( BOX, GL_COMPILE ); glBegin( GL_QUADS ); glVertex3d( … ); glVertex3d( … ); … glEnd(); glEndList(); Institute for Computer Graphics

39. Creating Instances glPushMatrix(); glTranslatef( x, y, z ); glRotated( theta, axisx, axisy, axisz ); glScaled( sx, sy, sz ); glCallList( BOX ); glPopMatrix(); Institute for Computer Graphics

40. Display Lists • Not all OpenGL routines can be stored in display lists • State changes persist, even after a display list is finished • Display lists can call other display lists • Display lists are not editable, but you can fake it • make a list (A) which calls other lists (B, C, and D) • delete and replace B, C, and D, as needed Institute for Computer Graphics

41. Display Lists and Hierarchy • Consider model of a car • Create display list for chassis • Create display list for wheel glNewList( CAR, GL_COMPILE ); glCallList( CHASSIS ); glTranslatef( … ); glCallList( WHEEL ); glTranslatef( … ); glCallList( WHEEL ); … glEndList(); Institute for Computer Graphics

42. Transformations Institute for Computer Graphics

43. Transformations • Prior to rendering, view, locate, and orient • eye/camera position • 3D geometry • Manage the matrices • including matrix stack • Combine (composite) transformations Institute for Computer Graphics

44. 3D Mathematics • A vertex is transformed by matrices • each vertex is a column vector v, (x, y, z, w)T where w is usually 1.0 • all operations are matrix multiplications • all matrices are column-major • matrices are always post-multiplied • product of matrix and vector is Mv • Programmer does not have to remember the exact matrices Institute for Computer Graphics

45. Camera Analogy • Projection transformations • adjust the lens of the camera • Viewing transformations • tripod-define position and orientation of the viewing volume in the world • Modeling transformations • moving the model • Viewport transformations • enlarge or reduce the physical photograph Institute for Computer Graphics

46. Transformation Pipeline normalized device object eye clip window Vertex Modelview Matrix Projection Matrix Perspective Division Viewport Transform Modelview Projection Modelview Institute for Computer Graphics

47. Matrix Operations • Specify Current Matrix Stack glMatrixMode(GL_MODELVIEW or GL_PROJECTION) • Other Matrix or Stack Operations glLoadIdentity() glPushMatrix() glPopMatrix() Institute for Computer Graphics

48. Transformation hierarchy example glLoadIdentity() Transformation 1 Draw something (T1) glPushMatrix() Transformation 2 glPushMatrix() Transformation 3 Draw something (T1*T2*T3) glLoadIdentity() Draw something (I) glPopMatrix() Draw something (T1*T2) glPopMatrix() Draw something (T1) Institute for Computer Graphics

49. Viewport Transformation • Viewport • Usually same as window size • Viewport aspect ratio should be same as projection transformation or resulting image may be distorted glViewport( x, y, width, height ); Institute for Computer Graphics

50. Projection Transformation • Shape of viewing frustum • Perspective projection gluPerspective( fovy, aspect, zNear, zFar ) glFrustum( left, right, bottom, top, zNear, zFar ) • Orthographic parallel projection glOrtho( left, right, bottom, top, zNear, zFar ) gluOrtho2D( left, right, bottom, top ) • calls glOrtho with z values near zero Institute for Computer Graphics