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

2. Anshuman Razdan based on Peter Wonka's Slides 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. Anshuman Razdan based on Peter Wonka's Slides 4 What Is OpenGL? 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 Graphics rendering API

5. Anshuman Razdan based on Peter Wonka's Slides 5 Some History Web site: www.opengl.orgwww.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. Anshuman Razdan based on Peter Wonka's Slides 6 OpenGL Libraries OpenGL core library (GL) OpenGL32 on Windows GL on most UNIX / LINUX systems (libGL.a) OpenGL Utility Library (GLU) #include Provides functionality in OpenGL core but avoids having to rewrite code OpenGL Utility Toolkit (GLUT) #include 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. Anshuman Razdan based on Peter Wonka's Slides 7 OpenGL and Related APIs GLUT GLU GL GLX, AGL or WGL X, Win32, Mac O/S software and/or hardware application program OpenGL Motif widget or similar

8. Anshuman Razdan based on Peter Wonka's Slides 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. Anshuman Razdan based on Peter Wonka's Slides 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. Anshuman Razdan based on Peter Wonka's Slides 10 OpenGL Geometric Primitives All geometric primitives are specified by vertices, and put between the construct glBegin(mode) and glEnd(). GL_QUAD_STRIP GL_POLYGON GL_TRIANGLE_STRIP GL_TRIANGLE_FAN GL_POINTS GL_LINES GL_LINE_LOOP GL_LINE_STRIP GL_TRIANGLES GL_QUADS

11. Anshuman Razdan based on Peter Wonka's Slides 11 OpenGL Function Format glVertex3fv( v ) Number of components 2 - (x,y) 3 - (x,y,z) 4 - (x,y,z,w) Data Type b - byte ub - unsigned byte s - short us - unsigned short i - int ui - unsigned int f - float d - double Vector omit “v” for scalar form glVertex2f( x, y )

12. Anshuman Razdan based on Peter Wonka's Slides 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. Anshuman Razdan based on Peter Wonka's Slides 13 Simple Example

14. GLUT: OpenGL Utility Toolkit

15. Anshuman Razdan based on Peter Wonka's Slides 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. Anshuman Razdan based on Peter Wonka's Slides 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. Anshuman Razdan based on Peter Wonka's Slides 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. Anshuman Razdan based on Peter Wonka's Slides 18 Example I 500 (0.5,0.5) (-0.5,-0.5)

19. Anshuman Razdan based on Peter Wonka's Slides 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. Anshuman Razdan based on Peter Wonka's Slides 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. Anshuman Razdan based on Peter Wonka's Slides 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. Anshuman Razdan based on Peter Wonka's Slides 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. Anshuman Razdan based on Peter Wonka's Slides 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. Anshuman Razdan based on Peter Wonka's Slides 25 Projection and Clipping Window

26. Anshuman Razdan based on Peter Wonka's Slides 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. Anshuman Razdan based on Peter Wonka's Slides 27 Stages of Vertex Transformation

28. Anshuman Razdan based on Peter Wonka's Slides 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. Anshuman Razdan based on Peter Wonka's Slides 29 Matrix Stack Specify Current Matrix Stack glMatrixMode( GL_MODELVIEW or GL_PROJECTION ) Other Matrix or Stack OperationsglLoadIdentity()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. Anshuman Razdan based on Peter Wonka's Slides 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. Anshuman Razdan based on Peter Wonka's Slides 31 Thinking about Transformations Translation then rotationRotation then translation transformations should be specified in the reverse order.

32. Anshuman Razdan based on Peter Wonka's Slides 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. Anshuman Razdan based on Peter Wonka's Slides 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)