CSE 494/598

1. CSE 494/598 Intro to Applied Computer Graphics Anshuman Razdan DCST razdan@asu.edu AR's Web Pagehttp://dcst2.east.asu.edu/~razdan

2. Disclaimer • These slides can only be used as study material for the at ASU • The slides cannot be distributed or used for another purpose • The slides may contain errors

3. OpenGL Part 1 Introduction to OpenGL and GLUT: Part I

4. What Is OpenGL? • Graphics rendering API • high-quality color images composed of geometric and image primitives • window system independent • operating system independent • No high-level commands for describing models of three-dimensional objects • The OpenGL Utility Library (GLU) provides many of the modeling features, such as quadric surfaces and NURBS curves and surfaces

5. Some History • Web site: www.opengl.org • OpenGL is a registered trademark, owned by Silicon Graphics (SGI) • OpenGL is controlled by the “ARB: Architecture Review Board”. Members include SGI, Microsoft, HP, IBM, ATI, apple, Intel … • 1977, Jim Clark writes –LDS for E&S Multi Picture System • 1990, OpenGL development begins • 1992, OpenGL 1.0 completed, OpenGL course at SIGGRAPH’92 • OpenGL 1.1(1995); OpenGL 1.2 (1998) … • Today: OpenGL 2.0

6. OpenGL Libraries • OpenGL core library (GL) • OpenGL32 on Windows • GL on most UNIX / LINUX systems (libGL.a) • OpenGL Utility Library (GLU) • #include <GL/gl.h> • #include <GL/glu.h> • Provides functionality in OpenGL core but avoids having to rewrite code • OpenGL Utility Toolkit (GLUT) • #include <GL/glut.h> • Provides functionality common to all window systems • Open a window • Get input from mouse and keyboard • Menus • Event-driven • Code is portable but GLUT lacks the functionality of a good toolkit for a specific platform

7. application program OpenGL Motif widget or similar GLUT GLX, AGLor WGL GLU GL X, Win32, Mac O/S software and/or hardware OpenGL and Related APIs

8. OpenGL as a Render • Geometric primitives • points, lines and polygons • Image Primitives • images and bitmaps • separate pipeline for images and geometry • linked through texture mapping • Rendering depends on state • colors, materials, light sources, etc.

9. OpenGL Syntax • functions have prefix gl and initial capital letters for each word • glClearColor(), glEnable(), glPushMatrix()… • glu for GLU functions • gluLookAt(), gluPerspective()… • constants begin with GL_, use all capital letters • GL_COLOR_BUFFER_BIT, GL_PROJECTION, GL_MODELVIEW … • Extra letters in some commands indicate the number and type of variables • glColor3f(), glVertex3f() … • OpenGL data types • GLfloat, GLdouble, GLint, GLenum, …

10. GL_LINES GL_POLYGON GL_LINE_STRIP GL_LINE_LOOP GL_POINTS GL_TRIANGLES GL_QUADS GL_TRIANGLE_FAN GL_TRIANGLE_STRIP GL_QUAD_STRIP OpenGL Geometric Primitives • All geometric primitives are specified by vertices, and put between the construct glBegin(mode) and glEnd().

11. OpenGL Function Format glVertex3fv( v ) Data Type Vector Number of components 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)

12. OpenGL Drawing Attributes • Besides glVertex() commands, other attributes commands can also be used between glBegin() and glEnd(), e.g. glColor3f(). • There are more drawing attributes than color • Point size: glPointSize() • Line width: glLinewidth() • Dash or dotted line: glLineStipple() • Polygon pattern: glPolygonStipple() • …

13. Simple Example

14. GLUT: OpenGL Utility Toolkit

15. GLUT: OpenGL Utility Toolkit • GLUT provide a portable API for creating window and interacting with I/O devices • Application Structure • Configure and open window • Initialize OpenGL state • Register input callback functions • render • resize • input: keyboard, mouse, etc. • Enter event processing loop

16. Prequisites for GLUT • Glut.h – in your include path • Glut32.lib (for windows) in your library path • Glut32.dll in system path • For OpenGL calls • Gl.h and glu.h (included by glut.h) • Opengl32.lib and glu32.lib • Opengl32.dll and glu32.dll

17. GLUT Window Setup • glutInit (&argc, argv) • Glut initialization • glutCreateWindow (“OpenGL Example”) • Create a display window with a title • glutDisplayFunc ( myDisplay ) • Specify what the display window is to contain • glutMainLoop () • Activate the display window and its graphic content • glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB | …) • Set other initial options for the display window • glutInitWindowPosition (int x, int y) & glutInitWindowSize (int width, int height ) • An Initial display window location (top-left corner) and size

18. Example I (0.5,0.5) 500 (-0.5,-0.5) 500

19. main() Function int main(int argc, char** argv) { // glut init glutInit(&argc, argv); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); // actual window size glutInitWindowSize(500,500); // initial window location, top-left corner glutInitWindowPosition(0,0); // create window with title “simple” glutCreateWindow("simple"); // call mydisplay() function glutDisplayFunc(mydisplay); // call init() function init(); // main event loop, do not use exit() glutMainLoop(); }

20. Init() Function void init() { glClearColor (0.0, 0.0, 0.0, 1.0); // black clear color, opaque window glColor3f(1.0, 1.0, 1.0); // white glMatrixMode (GL_PROJECTION); glLoadIdentity (); glOrtho2D(-1.0, 1.0, -1.0, 1.0); // screen size (-1.0,-1.0) to (1.0,1.0) }

21. display() Function void mydisplay() { glClear(GL_COLOR_BUFFER_BIT); // clear the window glBegin(GL_POLYGON); // fill connected polygon glVertex2f(-0.5, -0.5); // vertices of the square glVertex2f(-0.5, 0.5); glVertex2f(0.5, 0.5); glVertex2f(0.5, -0.5); glEnd(); }

22. Callbacks • Virtually all interactive graphics programs are event driven • Glut uses callbacks to handle events • Windows system invokes a particular procedure when an event of particular type occurs. • MOST IMPORTANT: display event • Signaled when window first displays and whenever portions of the window reveals from blocking window • glutDisplayFunc(void (*func)(void)) registers the display callback function

23. More Callbacks • glutReshapeFunc(void (*func)(int w, int h)) indicates what action should be taken when the window is resized. • glutKeyboardFunc(void (*func)(unsigned char key, int x, int y))glutMouseFunc(void (*func)(int button, int state, int x, int y)) allow you to link a keyboard key or a mouse button with a routine that's invoked when the key or mouse button is pressed or released. • glutMotionFunc(void (*func)(int x, int y)) registers a routine to call back when the mouse is moved while a mouse button is also pressed. • glutIdleFunc(void (*func)(void)) registers a function that's to be executed if no other events are pending – use for animation or continuous update

24. Projection and Viewport

25. Projection and Clipping Window

26. Viewing – The Camera Analogy • Position the camera ( Viewing transformation) • Arrange the scene to a desired composition (Modeling transformation) • Choose the lens and zoom ( Projection transformation) • Determine the size of the photograph (Viewport transformation)

27. Stages of Vertex Transformation

28. Viewing/Modeling Transformation • 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

29. Matrix Stack • Specify Current Matrix Stack glMatrixMode( GL_MODELVIEW or GL_PROJECTION ) • Other Matrix or Stack Operations glLoadIdentity() glPushMatrix() glPopMatrix() • 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 )

30. Viewing/Modeling Transformation • Viewing transformation can be specified using the command • gluLookAt (eyex, eyey, eyez,atx, aty, atz,upx, upy, upz ) • gluLookAt ( ) encapsulates a series of rotation and translation commands and is used. • Modeling transformation can be specified using the commands • glTranslate{f,d} (x, y, z) • glRotate{f,d} (angle, x, y, z) • glScale{f,d} (x, y, z)

31. Translation then rotation Rotation then translation Thinking about Transformations transformations should be specified in the reverse order.

32. Projection Transformations • Perspective projection • Viewing volume is a truncated pyramid. • Farther objects appear small and closer objects appear big. • glFrustum (left, right, bottom, top, near, far) • gluPerspective (fov, aspectratio, near, far) • These commands calculates the projection matrix and multiplies the current projection matrix by it. glFrustum ( ) gluPerspective( )

33. Projection Transformations • Orthographic Projection • Viewing volume is a box. • Objects appear same size irrespective of their distance from the camera. • glOrtho (left, right, bottom, top, near, far) • gluOrtho2D (left, right, bottom, top)