The Institute for Computer Graphics

1. The Institute for Computer Graphics • An Introduction to • OpenGL Programming • Ge Jin Institute for Computer Graphics

2. About This Lecture • It is an introduction • Based on OpenGL 1.2 • Based on PC with Visual C++ • Resources • Red Book • http://ask.ii.uib.no/ebt-bin/nph-dweb/dynaweb/SGI_Developer/OpenGL_PG/ • http://www.opengl.org/developers/index.html Institute for Computer Graphics

3. Overview • OpenGL Introduction • Elementary Rendering • How to Start with Visual C++ • Display Lists Graphics • Transformations • Lighting • Texture Mapping • 2D Operations • Advanced Topcis 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. 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

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

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

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

10. 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 ); glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT); glEnable( GL_LIGHT0 ); glEnable( GL_LIGHTING ); glEnable( GL_DEPTH_TEST ); } Institute for Computer Graphics

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

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

13. GLUT: Display Callback • Responsible for entire display process • Clear buffers • Set up camera, GL matrix stacks • Draw objects (including multipass rendering) • Swap front/back buffer • Good place to put per-frame world updates • physics, collision, trackers Institute for Computer Graphics

14. GLUT: Idle Callback • Invoked when events not being received from window system • Typical uses: • request redraw (continuous update) • update simulation clock • No guarantee on when it’ll be called! Institute for Computer Graphics

15. Elementary Rendering Institute for Computer Graphics

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

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

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

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

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

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

22. Shapes Tutorial Run shapes tutorial Institute for Computer Graphics

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

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

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

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

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

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

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

30. How to Start • with Visual C++ Institute for Computer Graphics

31. Preparation • Download glutdlls36.zip and extract to temporary directory. • http://www.opengl.org/developers/documentation/glut/glutdlls36.zip • Copy glut.h to include/GL directory under Visual C++. • Copy glut32.lib to lib directory under Visual C++ directory. • Copy glut32.dll to Windows/System (95/98) or Winnt/System (NT/2000) directory. • glut.lib and glut.dll are not used. Institute for Computer Graphics

32. Creating New Project • Select File-New menu item in Visual C++. • Select Project tab and select Win32 Console Application. • Specify Location and Project name. Press OK. • Select Project-Settings menu item. • Select "All configurations" from "Settings for" list box. • Select Link tab. • In the "Object/library modules" field, add the following: opengl32.lib glu32.lib glut32.lib • Add source file by Project-Add to Project-Files (or New) Institute for Computer Graphics

33. Demo • hello.c • double.c Institute for Computer Graphics

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

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

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

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

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

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

40. Transformations Institute for Computer Graphics

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

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

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

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

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

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

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

48. Viewing Transformations • Position the camera/eye in the scene • place the tripod down; aim camera • To “fly through” a scene • change viewing transformation and redraw scene gluLookAt( eyex, eyey, eyez, aimx, aimy, aimz, upx, upy, upz ) • up vector determines unique orientation • careful of degenerate positions Institute for Computer Graphics

49. Projection Tutorial Run projection tutorial Institute for Computer Graphics

50. Modeling Transformations • Move Object glTranslate{fd}( x, y, z ) • Rotate object around arbitrary axis (x, y, z) glRotate{fd}( angle, x, y, z ) • angle in degrees • Dilate (stretch or shrink) or mirror object glScale{fd}( x, y, z ) Institute for Computer Graphics