1. March 1, 2009Dr. Muhammed Al-Mulhem1 ICS 415 Computer Graphics OpenGL Dr. Muhammed Al-Mulhem March 1, 2009 Dr. Muhammed Al-Mulhem March 1, 2009

2. Dr. Muhammed Al-Mulhem2 Intro to OpenGL OpenGL operates as an infinite loop Put things in the scene (points, colored lines, textured polys)Put things in the scene (points, colored lines, textured polys) Describe the camera (location, orientation, field of view)Describe the camera (location, orientation, field of view) Listen for keyboard eventsListen for keyboard events Render – draw the sceneRender – draw the scene OpenGL operates as an infinite loop Put things in the scene (points, colored lines, textured polys)Put things in the scene (points, colored lines, textured polys) Describe the camera (location, orientation, field of view)Describe the camera (location, orientation, field of view) Listen for keyboard eventsListen for keyboard events Render – draw the sceneRender – draw the scene

3. March 1, 2009Dr. Muhammed Al-Mulhem3 Intro to OpenGL OpenGL uses matrices Matrix describes camera typeMatrix describes camera type Matrix describes current configuration of the 3D spaceMatrix describes current configuration of the 3D space OpenGL uses matrices Matrix describes camera typeMatrix describes camera type Matrix describes current configuration of the 3D spaceMatrix describes current configuration of the 3D space

4. March 1, 2009Dr. Muhammed Al-Mulhem4 Intro to OpenGL OpenGL coordinate system Right-handedRight-handed –Hold out your right hand and hold your thumb, index, and middle fingers orthogonal to one another. –Call your thumb the x-axis, index = y-axis, and middle z- axis –This is the OpenGL coordinate system OpenGL coordinate system Right-handedRight-handed –Hold out your right hand and hold your thumb, index, and middle fingers orthogonal to one another. –Call your thumb the x-axis, index = y-axis, and middle z- axis –This is the OpenGL coordinate system

5. March 1, 2009Dr. Muhammed Al-Mulhem5 Basic OpenGL Syntax Functions are prefixed with gl, and each component word has its first letter capitalizedFunctions are prefixed with gl, and each component word has its first letter capitalized –glBegin –glCopyPixel Constants begin with uppercase letter GL.Constants begin with uppercase letter GL. Component word within constants are written in capital letters, and the underscore (_) is used as a separator between all component wordsComponent word within constants are written in capital letters, and the underscore (_) is used as a separator between all component words –GL_RGB, –GL_AMBIENT_AND_DIFFUSE Functions are prefixed with gl, and each component word has its first letter capitalizedFunctions are prefixed with gl, and each component word has its first letter capitalized –glBegin –glCopyPixel Constants begin with uppercase letter GL.Constants begin with uppercase letter GL. Component word within constants are written in capital letters, and the underscore (_) is used as a separator between all component wordsComponent word within constants are written in capital letters, and the underscore (_) is used as a separator between all component words –GL_RGB, –GL_AMBIENT_AND_DIFFUSE

6. March 1, 2009Dr. Muhammed Al-Mulhem6 Data Types Data types use special built-in data type names. Each name begins with GL and the remainder of the name is a standard data type name, written in small letters.Data types use special built-in data type names. Each name begins with GL and the remainder of the name is a standard data type name, written in small letters. –GLbyte –GLint –GLfloat –GLdouble –GLboolean Data types use special built-in data type names. Each name begins with GL and the remainder of the name is a standard data type name, written in small letters.Data types use special built-in data type names. Each name begins with GL and the remainder of the name is a standard data type name, written in small letters. –GLbyte –GLint –GLfloat –GLdouble –GLboolean

7. March 1, 2009Dr. Muhammed Al-Mulhem7 Related Libraries In addition to the OpenGl basic (core) library, there are a number of associated libraries for handling special operations, such as GLU.In addition to the OpenGl basic (core) library, there are a number of associated libraries for handling special operations, such as GLU. GLU provides routines for setting up viewing and projection matrices, describing complex objects with lines and polygon approximations, etc.GLU provides routines for setting up viewing and projection matrices, describing complex objects with lines and polygon approximations, etc. OpenGL implementation include GLU library and all GLU function names start with the prefix glu.OpenGL implementation include GLU library and all GLU function names start with the prefix glu. In addition to the OpenGl basic (core) library, there are a number of associated libraries for handling special operations, such as GLU.In addition to the OpenGl basic (core) library, there are a number of associated libraries for handling special operations, such as GLU. GLU provides routines for setting up viewing and projection matrices, describing complex objects with lines and polygon approximations, etc.GLU provides routines for setting up viewing and projection matrices, describing complex objects with lines and polygon approximations, etc. OpenGL implementation include GLU library and all GLU function names start with the prefix glu.OpenGL implementation include GLU library and all GLU function names start with the prefix glu.

8. March 1, 2009Dr. Muhammed Al-Mulhem8 Heder Files For all graphics programs, we need to include header files for the following libraries:For all graphics programs, we need to include header files for the following libraries: –OpenGL core library # include –OpenGL core library # include –GLU library # include –GLU library # include –Windows library # include –Windows library # include For all graphics programs, we need to include header files for the following libraries:For all graphics programs, we need to include header files for the following libraries: –OpenGL core library # include –OpenGL core library # include –GLU library # include –GLU library # include –Windows library # include –Windows library # include

9. March 1, 2009Dr. Muhammed Al-Mulhem9 Heder Files If we use GLUT to handle the window – managing operation, we do not need the above header files, we need only the glut.h file.If we use GLUT to handle the window – managing operation, we do not need the above header files, we need only the glut.h file. # include # include If we use GLUT to handle the window – managing operation, we do not need the above header files, we need only the glut.h file.If we use GLUT to handle the window – managing operation, we do not need the above header files, we need only the glut.h file. # include # include

10. March 1, 2009Dr. Muhammed Al-Mulhem10 Heder Files Also, we will often need to include the following header files that are required by the C++ code.Also, we will often need to include the following header files that are required by the C++ code. # include # include Also, we will often need to include the following header files that are required by the C++ code.Also, we will often need to include the following header files that are required by the C++ code. # include # include

11. March 1, 2009Dr. Muhammed Al-Mulhem11 Display Window Management using GLUT First you need to initialize GLUTFirst you need to initialize GLUT glutInit (&argc, argv); Next, we can state that a display window is to be created on the screen with a given caption for the title bar.Next, we can state that a display window is to be created on the screen with a given caption for the title bar. glutCreateWindow (An Example OpenGL Program); First you need to initialize GLUTFirst you need to initialize GLUT glutInit (&argc, argv); Next, we can state that a display window is to be created on the screen with a given caption for the title bar.Next, we can state that a display window is to be created on the screen with a given caption for the title bar. glutCreateWindow (An Example OpenGL Program);

12. March 1, 2009Dr. Muhammed Al-Mulhem12 Display Window Management using GLUT Then we need to specify what the display window is to contain.Then we need to specify what the display window is to contain. For this, we create a picture using OpenGL functions and pass the picture definition to the GLUT routine glutDisplayFunc, which assigns our picture to the display window.For this, we create a picture using OpenGL functions and pass the picture definition to the GLUT routine glutDisplayFunc, which assigns our picture to the display window. For example, an OpenGL code for describing a line segment in a procedure called lineSegment.For example, an OpenGL code for describing a line segment in a procedure called lineSegment. glutDisplayFunc (lineSegment); Then we need to specify what the display window is to contain.Then we need to specify what the display window is to contain. For this, we create a picture using OpenGL functions and pass the picture definition to the GLUT routine glutDisplayFunc, which assigns our picture to the display window.For this, we create a picture using OpenGL functions and pass the picture definition to the GLUT routine glutDisplayFunc, which assigns our picture to the display window. For example, an OpenGL code for describing a line segment in a procedure called lineSegment.For example, an OpenGL code for describing a line segment in a procedure called lineSegment. glutDisplayFunc (lineSegment);

13. March 1, 2009Dr. Muhammed Al-Mulhem13 Display Window Management using GLUT Next, we need one more GLUT function to complete the window processing operation..Next, we need one more GLUT function to complete the window processing operation.. After execution of the following statement, all display windows that we have created, including their grphic content, are now activatedAfter execution of the following statement, all display windows that we have created, including their grphic content, are now activated glutMainLoop (); Next, we need one more GLUT function to complete the window processing operation..Next, we need one more GLUT function to complete the window processing operation.. After execution of the following statement, all display windows that we have created, including their grphic content, are now activatedAfter execution of the following statement, all display windows that we have created, including their grphic content, are now activated glutMainLoop ();

14. March 1, 2009Dr. Muhammed Al-Mulhem14 Display Window Management using GLUT The glutMainLoop (); do the following:The glutMainLoop (); do the following: –Displays the initial graphics –Puts the program into an infinite loop that checks for input from devices such as a mouse or keyboard. The glutMainLoop (); do the following:The glutMainLoop (); do the following: –Displays the initial graphics –Puts the program into an infinite loop that checks for input from devices such as a mouse or keyboard.

15. March 1, 2009Dr. Muhammed Al-Mulhem15 Display Window Management using GLUT We use a GLUT function to give the an initial location for the top left corner of the display window.We use a GLUT function to give the an initial location for the top left corner of the display window. For example, the following statement specifies that the top-left corner of the display window is 50 pixels to the right of the left edge and 100 pixels from the top edge of the screen.For example, the following statement specifies that the top-left corner of the display window is 50 pixels to the right of the left edge and 100 pixels from the top edge of the screen. glutInitWindowPosition (50, 100); We use a GLUT function to give the an initial location for the top left corner of the display window.We use a GLUT function to give the an initial location for the top left corner of the display window. For example, the following statement specifies that the top-left corner of the display window is 50 pixels to the right of the left edge and 100 pixels from the top edge of the screen.For example, the following statement specifies that the top-left corner of the display window is 50 pixels to the right of the left edge and 100 pixels from the top edge of the screen. glutInitWindowPosition (50, 100);

16. March 1, 2009Dr. Muhammed Al-Mulhem16 Display Window Management using GLUT Similarly, the GLUT size function is used to set the initial pixel width and height of the display window.Similarly, the GLUT size function is used to set the initial pixel width and height of the display window. For example, A window with width of 400 pixels and height of 300 pixelsFor example, A window with width of 400 pixels and height of 300 pixels glutInitDisplaySize (400, 300); After the display window on the screen, we can reposion and resize it.After the display window on the screen, we can reposion and resize it. Similarly, the GLUT size function is used to set the initial pixel width and height of the display window.Similarly, the GLUT size function is used to set the initial pixel width and height of the display window. For example, A window with width of 400 pixels and height of 300 pixelsFor example, A window with width of 400 pixels and height of 300 pixels glutInitDisplaySize (400, 300); After the display window on the screen, we can reposion and resize it.After the display window on the screen, we can reposion and resize it.

17. March 1, 2009Dr. Muhammed Al-Mulhem17

18. March 1, 2009Dr. Muhammed Al-Mulhem18 Modeling Transformations glTranslate (x, y, z) Multiplies the current matrix by a matrix that moves (translates) an object by the given x, y, and z values. glTranslate (x, y, z) Multiplies the current matrix by a matrix that moves (translates) an object by the given x, y, and z values.

19. March 1, 2009Dr. Muhammed Al-Mulhem19 Modeling Transformations glRotate (angle, x, y, z) Multiplies the current matrix by a matrix that rotates an object in a counterclockwise direction about the ray from the origin through the point (x, y, z). The angle parameter specifies the angle of rotation in degrees. For example: glRotatef(45.0, 0.0, 0.0, 1.0). glRotate (angle, x, y, z) Multiplies the current matrix by a matrix that rotates an object in a counterclockwise direction about the ray from the origin through the point (x, y, z). The angle parameter specifies the angle of rotation in degrees. For example: glRotatef(45.0, 0.0, 0.0, 1.0).

20. March 1, 2009Dr. Muhammed Al-Mulhem20 Modeling Transformations glScale (x, y, z) Multiplies the current matrix by a matrix that stretches, shrinks, or reflects an object along the axes. Each x, y, and z coordinate of every point in the object is multiplied by the corresponding argument x, y, or z. For example: glScalef(2.0, -0.5, 1.0). glScale (x, y, z) Multiplies the current matrix by a matrix that stretches, shrinks, or reflects an object along the axes. Each x, y, and z coordinate of every point in the object is multiplied by the corresponding argument x, y, or z. For example: glScalef(2.0, -0.5, 1.0).

21. March 1, 2009Dr. Muhammed Al-Mulhem21 OpenGL: Conventions Functions in OpenGL start with gl Most functions just gl (e.g., glColor() )Most functions just gl (e.g., glColor() ) Functions starting with glu are utility functions (e.g., gluLookAt() )Functions starting with glu are utility functions (e.g., gluLookAt() ) Functions starting with glx are for interfacing with the X Windows system (e.g., in gfx.c)Functions starting with glx are for interfacing with the X Windows system (e.g., in gfx.c) Constants are written in CAPITAL letters Example: GLUT_SINGLE, GLUT_RGBExample: GLUT_SINGLE, GLUT_RGB Functions in OpenGL start with gl Most functions just gl (e.g., glColor() )Most functions just gl (e.g., glColor() ) Functions starting with glu are utility functions (e.g., gluLookAt() )Functions starting with glu are utility functions (e.g., gluLookAt() ) Functions starting with glx are for interfacing with the X Windows system (e.g., in gfx.c)Functions starting with glx are for interfacing with the X Windows system (e.g., in gfx.c) Constants are written in CAPITAL letters Example: GLUT_SINGLE, GLUT_RGBExample: GLUT_SINGLE, GLUT_RGB

22. March 1, 2009Dr. Muhammed Al-Mulhem22 OpenGL: Conventions Function names indicate argument type and number Functions ending with f take floatsFunctions ending with f take floats Functions ending with i take intsFunctions ending with i take ints Functions ending with b take bytesFunctions ending with b take bytes Functions ending with ub take unsigned bytesFunctions ending with ub take unsigned bytes Functions that end with v take an array.Functions that end with v take an array.Examples glColor3f() takes 3 floatsglColor3f() takes 3 floats glColor4fv() takes an array of 4 floatsglColor4fv() takes an array of 4 floats Function names indicate argument type and number Functions ending with f take floatsFunctions ending with f take floats Functions ending with i take intsFunctions ending with i take ints Functions ending with b take bytesFunctions ending with b take bytes Functions ending with ub take unsigned bytesFunctions ending with ub take unsigned bytes Functions that end with v take an array.Functions that end with v take an array.Examples glColor3f() takes 3 floatsglColor3f() takes 3 floats glColor4fv() takes an array of 4 floatsglColor4fv() takes an array of 4 floats

23. March 1, 2009Dr. Muhammed Al-Mulhem23 OpenGL: Simple Use Open a window and attach OpenGL to it Set projection parameters (e.g., field of view) Setup lighting, if any Main rendering loop Set camera pose with gluLookAt()Set camera pose with gluLookAt() –Camera position specified in world coordinates Render polygons of modelRender polygons of model –Simplest case: vertices of polygons in world coordinates Open a window and attach OpenGL to it Set projection parameters (e.g., field of view) Setup lighting, if any Main rendering loop Set camera pose with gluLookAt()Set camera pose with gluLookAt() –Camera position specified in world coordinates Render polygons of modelRender polygons of model –Simplest case: vertices of polygons in world coordinates

24. March 1, 2009Dr. Muhammed Al-Mulhem24 OpenGL: Simple Use Open a window and attach OpenGL to it glutCreateWindow() or FLTK window methodglutCreateWindow() or FLTK window method Open a window and attach OpenGL to it glutCreateWindow() or FLTK window methodglutCreateWindow() or FLTK window method

25. March 1, 2009Dr. Muhammed Al-Mulhem25 OpenGL: Perspective Projection Set projection parameters (e.g., field of view) Typically, we use a perspective projection Distant objects appear smaller than near objectsDistant objects appear smaller than near objects Vanishing point at center of screenVanishing point at center of screen Defined by a view frustum (draw it)Defined by a view frustum (draw it) Other projections: orthographic, isometric Set projection parameters (e.g., field of view) Typically, we use a perspective projection Distant objects appear smaller than near objectsDistant objects appear smaller than near objects Vanishing point at center of screenVanishing point at center of screen Defined by a view frustum (draw it)Defined by a view frustum (draw it) Other projections: orthographic, isometric

26. March 1, 2009Dr. Muhammed Al-Mulhem26 Setting up Camera glMatrixMode(GL_MODELVIEW);glLoadIdentity(); gluLookAt(eyeX, eyeY, eyeZ, lookX, lookY, lookZ, upX, upY, upZ); eye[XYZ]: camera position in world coordinateseye[XYZ]: camera position in world coordinates look[XYZ]: a point centered in cameras viewlook[XYZ]: a point centered in cameras view up[XYZ]: a vector defining the cameras verticalup[XYZ]: a vector defining the cameras vertical Creates a matrix that transforms points in world coordinates to camera coordinates Camera at originCamera at origin Looking down -Z axisLooking down -Z axis Up vector aligned with Y axisUp vector aligned with Y axisglMatrixMode(GL_MODELVIEW);glLoadIdentity(); gluLookAt(eyeX, eyeY, eyeZ, lookX, lookY, lookZ, upX, upY, upZ); eye[XYZ]: camera position in world coordinateseye[XYZ]: camera position in world coordinates look[XYZ]: a point centered in cameras viewlook[XYZ]: a point centered in cameras view up[XYZ]: a vector defining the cameras verticalup[XYZ]: a vector defining the cameras vertical Creates a matrix that transforms points in world coordinates to camera coordinates Camera at originCamera at origin Looking down -Z axisLooking down -Z axis Up vector aligned with Y axisUp vector aligned with Y axis

27. March 1, 2009Dr. Muhammed Al-Mulhem27 OpenGL: Perspective Projection In OpenGL: Projections implemented by projection matrixProjections implemented by projection matrix gluPerspective() creates a perspective projection matrix:gluPerspective() creates a perspective projection matrix:glSetMatrix(GL_PROJECTION); glLoadIdentity(); //load an identity matrix gluPerspective(vfov, aspect, near, far); Parameters to gluPerspective() : vfov : vertical field of viewvfov : vertical field of view aspect : window width/heightaspect : window width/height near, far : distance to near & far clipping planesnear, far : distance to near & far clipping planes In OpenGL: Projections implemented by projection matrixProjections implemented by projection matrix gluPerspective() creates a perspective projection matrix:gluPerspective() creates a perspective projection matrix:glSetMatrix(GL_PROJECTION); glLoadIdentity(); //load an identity matrix gluPerspective(vfov, aspect, near, far); Parameters to gluPerspective() : vfov : vertical field of viewvfov : vertical field of view aspect : window width/heightaspect : window width/height near, far : distance to near & far clipping planesnear, far : distance to near & far clipping planes

28. March 1, 2009Dr. Muhammed Al-Mulhem28 OpenGL: Lighting Setup lighting, if any Simplest option: change the current color between polygons or vertices glColor() sets the current colorglColor() sets the current color Or OpenGL provides a simple lighting model: Set parameters for light(s)Set parameters for light(s) –Intensity, position, direction & falloff (if applicable) Set material parameters to describe how light reflects from the surfaceSet material parameters to describe how light reflects from the surface Wont go into details now; check the red book if interested Setup lighting, if any Simplest option: change the current color between polygons or vertices glColor() sets the current colorglColor() sets the current color Or OpenGL provides a simple lighting model: Set parameters for light(s)Set parameters for light(s) –Intensity, position, direction & falloff (if applicable) Set material parameters to describe how light reflects from the surfaceSet material parameters to describe how light reflects from the surface Wont go into details now; check the red book if interested

29. March 1, 2009Dr. Muhammed Al-Mulhem29 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 triangleA 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:Usage: glBegin( geomtype ) where geomtype is: –Points, lines, polygons, triangles, quadrilaterals, etc... Geometry in OpenGL consists of a list of vertices in between calls to glBegin() and glEnd() A simple example: telling GL to render a triangleA 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:Usage: glBegin( geomtype ) where geomtype is: –Points, lines, polygons, triangles, quadrilaterals, etc...

30. March 1, 2009Dr. Muhammed Al-Mulhem30 Primitive Types GL_POINTSGL_LINE {S | _STRIP | _LOOP}{S | _STRIP | _LOOP}GL_TRIANGLE {S | _STRIP | _FAN}{S | _STRIP | _FAN}GL_QUAD {S | _STRIP}{S | _STRIP}GL_POLYGONGL_POINTSGL_LINE {S | _STRIP | _LOOP}{S | _STRIP | _LOOP}GL_TRIANGLE {S | _STRIP | _FAN}{S | _STRIP | _FAN}GL_QUAD {S | _STRIP}{S | _STRIP}GL_POLYGON

31. March 1, 2009Dr. Muhammed Al-Mulhem31 GL_POLYGON List of vertices defines polygon edges Polygon must be convex List of vertices defines polygon edges Polygon must be convex

32. March 1, 2009Dr. Muhammed Al-Mulhem32 Non-planar Polygons Imagine polygon with non-planar vertices Some perspectives will be rendered as concave polygons These concave polygons may not rasterize correctly Imagine polygon with non-planar vertices Some perspectives will be rendered as concave polygons These concave polygons may not rasterize correctly

33. March 1, 2009Dr. Muhammed Al-Mulhem33 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 immediatelyThis type of operation is called immediate-mode rendering; each command happens immediately 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 immediatelyThis type of operation is called immediate-mode rendering; each command happens immediately

34. March 1, 2009Dr. Muhammed Al-Mulhem34 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(); Each set of 3 vertices forms a triangle What do the triangles drawn above look like?What do the triangles drawn above look like? How much redundant computation is happening?How much redundant computation is happening? 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(); Each set of 3 vertices forms a triangle What do the triangles drawn above look like?What do the triangles drawn above look like? How much redundant computation is happening?How much redundant computation is happening?

35. March 1, 2009Dr. Muhammed Al-Mulhem35 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, v2triangle 0 is v0, v1, v2 triangle 1 is v2, v1, v3 (why not v1, v2, v3?)triangle 1 is v2, v1, v3 (why not v1, v2, v3?) triangle 2 is v2, v3, v4triangle 2 is v2, v3, v4 triangle 3 is v4, v3, v5 (again, not v3, v4, v5)triangle 3 is v4, v3, v5 (again, not v3, v4, v5) 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, v2triangle 0 is v0, v1, v2 triangle 1 is v2, v1, v3 (why not v1, v2, v3?)triangle 1 is v2, v1, v3 (why not v1, v2, v3?) triangle 2 is v2, v3, v4triangle 2 is v2, v3, v4 triangle 3 is v4, v3, v5 (again, not v3, v4, v5)triangle 3 is v4, v3, v5 (again, not v3, v4, v5) v0v0 v2v2 v1v1 v3v3 v4v4 v5v5

36. March 1, 2009Dr. Muhammed Al-Mulhem36 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 immediatelyThis type of operation is called immediate-mode rendering; each command happens immediately 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 immediatelyThis type of operation is called immediate-mode rendering; each command happens immediately

37. March 1, 2009Dr. Muhammed Al-Mulhem37 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 counterclockwiseWhen looking at the front side, the vertices go counterclockwise –This is basically the right-hand rule –Note that this still holds after perspective projection 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 counterclockwiseWhen looking at the front side, the vertices go counterclockwise –This is basically the right-hand rule –Note that this still holds after perspective projection

38. March 1, 2009Dr. Muhammed Al-Mulhem38 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(); Each set of 3 vertices forms a triangle What do the triangles drawn above look like?What do the triangles drawn above look like? How much redundant computation is happening?How much redundant computation is happening? 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(); Each set of 3 vertices forms a triangle What do the triangles drawn above look like?What do the triangles drawn above look like? How much redundant computation is happening?How much redundant computation is happening?

39. March 1, 2009Dr. Muhammed Al-Mulhem39 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, v2triangle 0 is v0, v1, v2 triangle 1 is v2, v1, v3 (why not v1, v2, v3?)triangle 1 is v2, v1, v3 (why not v1, v2, v3?) triangle 2 is v2, v3, v4triangle 2 is v2, v3, v4 triangle 3 is v4, v3, v5 (again, not v3, v4, v5)triangle 3 is v4, v3, v5 (again, not v3, v4, v5) 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, v2triangle 0 is v0, v1, v2 triangle 1 is v2, v1, v3 (why not v1, v2, v3?)triangle 1 is v2, v1, v3 (why not v1, v2, v3?) triangle 2 is v2, v3, v4triangle 2 is v2, v3, v4 triangle 3 is v4, v3, v5 (again, not v3, v4, v5)triangle 3 is v4, v3, v5 (again, not v3, v4, v5) v0v0 v2v2 v1v1 v3v3 v4v4 v5v5

40. March 1, 2009Dr. Muhammed Al-Mulhem40 Double Buffering Avoids displaying partially rendered frame buffer OpenGL generates one raster image while another raster image is displayed on monitor glxSwapBuffers (Display *dpy, Window, w) glutSwapBuffers (void) Avoids displaying partially rendered frame buffer OpenGL generates one raster image while another raster image is displayed on monitor glxSwapBuffers (Display *dpy, Window, w) glutSwapBuffers (void)

41. March 1, 2009Dr. Muhammed Al-Mulhem41 Learn OpenGL by example robot.c from the OpenGL Programming Guide

42. March 1, 2009Dr. Muhammed Al-Mulhem42 Learn OpenGL by example Two bodies Upper armUpper arm Lower armLower arm Major tasks PositionPosition OrientationOrientation Two bodies Upper armUpper arm Lower armLower arm Major tasks PositionPosition OrientationOrientation

43. March 1, 2009Dr. Muhammed Al-Mulhem43 Learn OpenGL by example Both bodies originally at origin

44. March 1, 2009Dr. Muhammed Al-Mulhem44 Learn OpenGL by example Headers #include #include Headers

45. March 1, 2009Dr. Muhammed Al-Mulhem45 Learn OpenGL by example int main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB); glutInitWindowSize (500, 500); glutInitWindowPosition (100, 100); glutCreateWindow (argv[0]); init (); glutDisplayFunc(display);glutReshapeFunc(reshape);glutKeyboardFunc(keyboard);glutMainLoop(); return 0; } int main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB); glutInitWindowSize (500, 500); glutInitWindowPosition (100, 100); glutCreateWindow (argv[0]); init (); glutDisplayFunc(display);glutReshapeFunc(reshape);glutKeyboardFunc(keyboard);glutMainLoop(); return 0; }

46. March 1, 2009Dr. Muhammed Al-Mulhem46 Learn OpenGL by example void init(void) { glClearColor (0.0, 0.0, 0.0, 0.0); glShadeModel (GL_FLAT); } void init(void) { glClearColor (0.0, 0.0, 0.0, 0.0); glShadeModel (GL_FLAT); }

47. March 1, 2009Dr. Muhammed Al-Mulhem47 Learn OpenGL by example void display(void){ glClear (GL_COLOR_BUFFER_BIT); glPushMatrix(); glTranslatef (-1.0, 0.0, 0.0); glRotatef ((GLfloat) shoulder, 0.0, 0.0, 1.0); glTranslatef (1.0, 0.0, 0.0); glPushMatrix(); glScalef (2.0, 0.4, 1.0); glutWireCube (1.0); glPopMatrix();Continued… void display(void){ glClear (GL_COLOR_BUFFER_BIT); glPushMatrix(); glTranslatef (-1.0, 0.0, 0.0); glRotatef ((GLfloat) shoulder, 0.0, 0.0, 1.0); glTranslatef (1.0, 0.0, 0.0); glPushMatrix(); glScalef (2.0, 0.4, 1.0); glutWireCube (1.0); glPopMatrix();Continued…

48. March 1, 2009Dr. Muhammed Al-Mulhem48 Learn OpenGL by example glTranslatef (1.0, 0.0, 0.0); glRotatef ((GLfloat) elbow, 0.0, 0.0, 1.0); glTranslatef (1.0, 0.0, 0.0); glPushMatrix(); glScalef (2.0, 0.4, 1.0); glutWireCube (1.0); glPopMatrix();glPopMatrix();glutSwapBuffers();} glTranslatef (1.0, 0.0, 0.0); glRotatef ((GLfloat) elbow, 0.0, 0.0, 1.0); glTranslatef (1.0, 0.0, 0.0); glPushMatrix(); glScalef (2.0, 0.4, 1.0); glutWireCube (1.0); glPopMatrix();glPopMatrix();glutSwapBuffers();}