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

March 1, 2009 Dr. Muhammed Al-Mulhem 1

ICS 415Computer Graphics

OpenGL

Dr. Muhammed Al-MulhemDr. Muhammed Al-Mulhem

March 1, 2009March 1, 2009

Dr. Muhammed Al-MulhemDr. Muhammed Al-Mulhem

March 1, 2009March 1, 2009


Intro to OpenGL

OpenGL operates as an infinite loopOpenGL 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 loopOpenGL 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


Intro to OpenGL

OpenGL uses matricesOpenGL 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 matricesOpenGL uses matrices

• Matrix describes camera typeMatrix describes camera type

• Matrix describes current configuration of the 3D spaceMatrix describes current configuration of the 3D space


Intro to OpenGL

OpenGL coordinate systemOpenGL coordinate system

• Right-handedRight-handed

– Hold out your right hand and hold your thumb, index, and Hold out your right hand and hold your thumb, index, and middle fingers middle fingers orthogonalorthogonal to one another. to one another.

– Call your thumb the x-axis, index = y-axis, and middle z-Call your thumb the x-axis, index = y-axis, and middle z-axisaxis

– This is the OpenGL coordinate systemThis is the OpenGL coordinate system

OpenGL coordinate systemOpenGL coordinate system

• Right-handedRight-handed

– Hold out your right hand and hold your thumb, index, and Hold out your right hand and hold your thumb, index, and middle fingers middle fingers orthogonalorthogonal to one another. to one another.

– Call your thumb the x-axis, index = y-axis, and middle z-Call your thumb the x-axis, index = y-axis, and middle z-axisaxis

– This is the OpenGL coordinate systemThis is the OpenGL coordinate system


Basic OpenGL Syntax

• Functions are prefixed with gl, and each component word has its first Functions are prefixed with gl, and each component word has its first letter capitalizedletter capitalized

– glBeginglBegin

– glCopyPixelglCopyPixel

• Constants begin with uppercase letter GL.Constants begin with uppercase letter GL.

• Component word within constants are written in capital letters, and the Component word within constants are written in capital letters, and the underscore (_) is used as a separator between all component wordsunderscore (_) is used as a separator between all component words

– GL_RGB,GL_RGB,

– GL_AMBIENT_AND_DIFFUSEGL_AMBIENT_AND_DIFFUSE

• Functions are prefixed with gl, and each component word has its first Functions are prefixed with gl, and each component word has its first letter capitalizedletter capitalized

– glBeginglBegin

– glCopyPixelglCopyPixel

• Constants begin with uppercase letter GL.Constants begin with uppercase letter GL.

• Component word within constants are written in capital letters, and the Component word within constants are written in capital letters, and the underscore (_) is used as a separator between all component wordsunderscore (_) is used as a separator between all component words

– GL_RGB,GL_RGB,

– GL_AMBIENT_AND_DIFFUSEGL_AMBIENT_AND_DIFFUSE


Data Types

• Data types use special built-in data type names. Each name Data types use special built-in data type names. Each name begins with GL and the remainder of the name is a standard begins with GL and the remainder of the name is a standard data type name, written in small letters.data type name, written in small letters.

– GLbyte GLbyte

– GLintGLint

– GLfloat GLfloat

– GLdoubleGLdouble

– GLbooleanGLboolean

• Data types use special built-in data type names. Each name Data types use special built-in data type names. Each name begins with GL and the remainder of the name is a standard begins with GL and the remainder of the name is a standard data type name, written in small letters.data type name, written in small letters.

– GLbyte GLbyte

– GLintGLint

– GLfloat GLfloat

– GLdoubleGLdouble

– GLbooleanGLboolean


Related Libraries

• In addition to the OpenGl basic (core) library, there are a In addition to the OpenGl basic (core) library, there are a number of associated libraries for handling special number of associated libraries for handling special operations, such as GLU.operations, such as GLU.

• GLU provides routines for setting up viewing and projection GLU provides routines for setting up viewing and projection matrices, describing complex objects with lines and polygon matrices, describing complex objects with lines and polygon approximations, etc. approximations, etc.

• OpenGL implementation include GLU library and all GLU OpenGL implementation include GLU library and all GLU function names start with the prefix glu. function names start with the prefix glu.

• In addition to the OpenGl basic (core) library, there are a In addition to the OpenGl basic (core) library, there are a number of associated libraries for handling special number of associated libraries for handling special operations, such as GLU.operations, such as GLU.

• GLU provides routines for setting up viewing and projection GLU provides routines for setting up viewing and projection matrices, describing complex objects with lines and polygon matrices, describing complex objects with lines and polygon approximations, etc. approximations, etc.

• OpenGL implementation include GLU library and all GLU OpenGL implementation include GLU library and all GLU function names start with the prefix glu. function names start with the prefix glu.


Heder Files

• For all graphics programs, we need to include header files for For all graphics programs, we need to include header files for the following libraries: the following libraries:

– OpenGL core library OpenGL core library # include <gl.h> # include <gl.h>

– GLU library GLU library # include <glu.h># include <glu.h>

– Windows library Windows library # include <windows.h># include <windows.h>

• For all graphics programs, we need to include header files for For all graphics programs, we need to include header files for the following libraries: the following libraries:

– OpenGL core library OpenGL core library # include <gl.h> # include <gl.h>

– GLU library GLU library # include <glu.h># include <glu.h>

– Windows library Windows library # include <windows.h># include <windows.h>


Heder Files

• If we use GLUT to handle the window – managing If we use GLUT to handle the window – managing operation, we do not need the above header files, operation, we do not need the above header files, we need only the glut.h file.we need only the glut.h file.

# include <glut.h> # include <glut.h>

• If we use GLUT to handle the window – managing If we use GLUT to handle the window – managing operation, we do not need the above header files, operation, we do not need the above header files, we need only the glut.h file.we need only the glut.h file.

# include <glut.h> # include <glut.h>


Heder Files

• Also, we will often need to include the following Also, we will often need to include the following header files that are required by the C++ code.header files that are required by the C++ code.

# include <stdio.h> # include <stdio.h>

# include <stdlib.h># include <stdlib.h>

# include <math.h># include <math.h>

• Also, we will often need to include the following Also, we will often need to include the following header files that are required by the C++ code.header files that are required by the C++ code.

# include <stdio.h> # include <stdio.h>

# include <stdlib.h># include <stdlib.h>

# include <math.h># include <math.h>


Display Window Management using GLUT

• First you need to initialize GLUTFirst you need to initialize GLUT

glutInit (&argc, argv);glutInit (&argc, argv);

• Next, we can state that a display window is to be created Next, we can state that a display window is to be created on the screen with a given caption for the title bar.on the screen with a given caption for the title bar.

glutCreateWindow (“An Example OpenGL Program”);glutCreateWindow (“An Example OpenGL Program”);

• First you need to initialize GLUTFirst you need to initialize GLUT

glutInit (&argc, argv);glutInit (&argc, argv);

• Next, we can state that a display window is to be created Next, we can state that a display window is to be created on the screen with a given caption for the title bar.on the screen with a given caption for the title bar.

glutCreateWindow (“An Example OpenGL Program”);glutCreateWindow (“An Example OpenGL Program”);



• Then we need to specify what the display window is to Then we need to specify what the display window is to contain.contain.

• For this, we create a picture using OpenGL functions and For this, we create a picture using OpenGL functions and pass the picture definition to the GLUT routine pass the picture definition to the GLUT routine glutDisplayFunc, which assigns our picture to the display glutDisplayFunc, which assigns our picture to the display window. window.

• For example, an OpenGL code for describing a line segment For example, an OpenGL code for describing a line segment in a procedure called lineSegment.in a procedure called lineSegment.

glutDisplayFunc (lineSegment);glutDisplayFunc (lineSegment);

• Then we need to specify what the display window is to Then we need to specify what the display window is to contain.contain.

• For this, we create a picture using OpenGL functions and For this, we create a picture using OpenGL functions and pass the picture definition to the GLUT routine pass the picture definition to the GLUT routine glutDisplayFunc, which assigns our picture to the display glutDisplayFunc, which assigns our picture to the display window. window.

• For example, an OpenGL code for describing a line segment For example, an OpenGL code for describing a line segment in a procedure called lineSegment.in a procedure called lineSegment.

glutDisplayFunc (lineSegment);glutDisplayFunc (lineSegment);



• Next, we need one more GLUT function to complete the Next, we need one more GLUT function to complete the window processing operation..window processing operation..

• After execution of the following statement, all display After execution of the following statement, all display windows that we have created, including their grphic windows that we have created, including their grphic content, are now activatedcontent, are now activated

glutMainLoop ();glutMainLoop ();

• Next, we need one more GLUT function to complete the Next, we need one more GLUT function to complete the window processing operation..window processing operation..

• After execution of the following statement, all display After execution of the following statement, all display windows that we have created, including their grphic windows that we have created, including their grphic content, are now activatedcontent, are now activated

glutMainLoop ();glutMainLoop ();



• The glutMainLoop (); do the following:The glutMainLoop (); do the following:

– Displays the initial graphicsDisplays the initial graphics

– Puts the program into an infinite loop that Puts the program into an infinite loop that checks for input from devices such as a mouse checks for input from devices such as a mouse or keyboard.or keyboard.

• The glutMainLoop (); do the following:The glutMainLoop (); do the following:

– Displays the initial graphicsDisplays the initial graphics

– Puts the program into an infinite loop that Puts the program into an infinite loop that checks for input from devices such as a mouse checks for input from devices such as a mouse or keyboard.or keyboard.



• We use a GLUT function to give the an initial We use a GLUT function to give the an initial location for the top left corner of the display location for the top left corner of the display window.window.

• For example, the following statement specifies that For example, the following statement specifies that the top-left corner of the display window is 50 the top-left corner of the display window is 50 pixels to the right of the left edge and 100 pixels pixels to the right of the left edge and 100 pixels from the top edge of the screen.from the top edge of the screen.

glutInitWindowPosition (50, 100);glutInitWindowPosition (50, 100);

• We use a GLUT function to give the an initial We use a GLUT function to give the an initial location for the top left corner of the display location for the top left corner of the display window.window.

• For example, the following statement specifies that For example, the following statement specifies that the top-left corner of the display window is 50 the top-left corner of the display window is 50 pixels to the right of the left edge and 100 pixels pixels to the right of the left edge and 100 pixels from the top edge of the screen.from the top edge of the screen.

glutInitWindowPosition (50, 100);glutInitWindowPosition (50, 100);



• Similarly, the GLUT size function is used to set the initial Similarly, the GLUT size function is used to set the initial pixel width and height of the display window.pixel width and height of the display window.

• For example, A window with width of 400 pixels and For example, A window with width of 400 pixels and height of 300 pixels height of 300 pixels

glutInitDisplaySize (400, 300);glutInitDisplaySize (400, 300);

• After the display window on the screen, we can reposion After the display window on the screen, we can reposion and resize it.and resize it.

• Similarly, the GLUT size function is used to set the initial Similarly, the GLUT size function is used to set the initial pixel width and height of the display window.pixel width and height of the display window.

• For example, A window with width of 400 pixels and For example, A window with width of 400 pixels and height of 300 pixels height of 300 pixels

glutInitDisplaySize (400, 300);glutInitDisplaySize (400, 300);

• After the display window on the screen, we can reposion After the display window on the screen, we can reposion and resize it.and resize it.



Modeling Transformations

glTranslate (x, y, z)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)glTranslate (x, y, z)

• Multiplies the current matrix by a matrix that moves (translates) an object by the given x, y, and z values.



glRotate (angle, x, y, z)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)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).



glScale (x, y, z)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)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).


OpenGL: Conventions

Functions in OpenGL start with Functions in OpenGL start with glgl

• Most functions just Most functions just gl gl (e.g., (e.g., glColor()glColor()) )

• Functions starting with Functions starting with gluglu are utility functions (e.g., are utility functions (e.g., gluLookAt()gluLookAt()))

• Functions starting with Functions starting with glxglx are for interfacing with the X are for interfacing with the X Windows system (e.g., in gfx.c)Windows system (e.g., in gfx.c)

Constants are written in CAPITAL lettersConstants are written in CAPITAL letters

• Example: GLUT_SINGLE, GLUT_RGBExample: GLUT_SINGLE, GLUT_RGB

Functions in OpenGL start with Functions in OpenGL start with glgl

• Most functions just Most functions just gl gl (e.g., (e.g., glColor()glColor()) )

• Functions starting with Functions starting with gluglu are utility functions (e.g., are utility functions (e.g., gluLookAt()gluLookAt()))

• Functions starting with Functions starting with glxglx are for interfacing with the X are for interfacing with the X Windows system (e.g., in gfx.c)Windows system (e.g., in gfx.c)

Constants are written in CAPITAL lettersConstants are written in CAPITAL letters

• Example: GLUT_SINGLE, GLUT_RGBExample: GLUT_SINGLE, GLUT_RGB


OpenGL: Conventions

Function names indicate argument type and numberFunction names indicate argument type and number

• Functions ending with Functions ending with ff take floats take floats

• Functions ending with Functions ending with ii take ints take ints

• Functions ending with Functions ending with bb take bytes take bytes

• Functions ending with Functions ending with ubub take unsigned bytes take unsigned bytes

• Functions that end with Functions that end with vv take an array. take an array.

ExamplesExamples• glColor3f()glColor3f() takes 3 floats takes 3 floats

• glColor4fv() glColor4fv() takes an array of 4 floatstakes an array of 4 floats

Function names indicate argument type and numberFunction names indicate argument type and number

• Functions ending with Functions ending with ff take floats take floats

• Functions ending with Functions ending with ii take ints take ints

• Functions ending with Functions ending with bb take bytes take bytes

• Functions ending with Functions ending with ubub take unsigned bytes take unsigned bytes

• Functions that end with Functions that end with vv take an array. take an array.

ExamplesExamples• glColor3f()glColor3f() takes 3 floats takes 3 floats

• glColor4fv() glColor4fv() takes an array of 4 floatstakes an array of 4 floats


OpenGL: Simple Use

Open a window and attach OpenGL to itOpen a window and attach OpenGL to it

Set projection parameters (e.g., field of view)Set projection parameters (e.g., field of view)

Setup lighting, if anySetup lighting, if any

Main rendering loopMain rendering loop

• Set camera pose with Set camera pose with gluLookAt() gluLookAt()

– Camera position specified in world coordinatesCamera position specified in world coordinates

• Render polygons of modelRender polygons of model

– Simplest case: vertices of polygons in world coordinatesSimplest case: vertices of polygons in world coordinates




Main rendering loopMain rendering loop

• Set camera pose with Set camera pose with gluLookAt() gluLookAt()

– Camera position specified in world coordinatesCamera position specified in world coordinates

• Render polygons of modelRender polygons of model

– Simplest case: vertices of polygons in world coordinatesSimplest case: vertices of polygons in world coordinates


OpenGL: Simple Use


• glutCreateWindow() or FLTK window methodglutCreateWindow() or FLTK window method


• glutCreateWindow() or FLTK window methodglutCreateWindow() or FLTK window method


OpenGL: Perspective Projection


Typically, we use a Typically, we use a perspective projectionperspective projection

• Distant objects appear smaller than near objects Distant objects appear smaller than near objects

• Vanishing point at center of screenVanishing point at center of screen

• Defined by a Defined by a view frustumview frustum (draw it) (draw it)

Other projections: Other projections: orthographicorthographic, , isometricisometric


Typically, we use a Typically, we use a perspective projectionperspective projection

• Distant objects appear smaller than near objects Distant objects appear smaller than near objects

• Vanishing point at center of screenVanishing point at center of screen

• Defined by a Defined by a view frustumview frustum (draw it) (draw it)

Other projections: Other projections: orthographicorthographic, , isometricisometric


Setting up CameraglMatrixMode(GL_MODELVIEW);glMatrixMode(GL_MODELVIEW);

glLoadIdentity();glLoadIdentity();

gluLookAt(gluLookAt( eyeX, eyeY, eyeZ, eyeX, eyeY, eyeZ, lookX, lookY, lookZ, lookX, lookY, lookZ, upX, upY, upZ);upX, upY, upZ);

• eye[XYZ]: camera position in world coordinateseye[XYZ]: camera position in world coordinates

• look[XYZ]: a point centered in camera’s viewlook[XYZ]: a point centered in camera’s view

• up[XYZ]: a up[XYZ]: a vectorvector defining the camera’s vertical defining the camera’s vertical

Creates a matrix that transforms points in world coordinates to Creates a matrix that transforms points in world coordinates to camera coordinatescamera coordinates

• Camera at originCamera at origin

• Looking down -Z axisLooking down -Z axis

• Up vector aligned with Y axisUp vector aligned with Y axis

glMatrixMode(GL_MODELVIEW);glMatrixMode(GL_MODELVIEW);

glLoadIdentity();glLoadIdentity();

gluLookAt(gluLookAt( eyeX, eyeY, eyeZ, eyeX, eyeY, eyeZ, lookX, lookY, lookZ, lookX, lookY, lookZ, upX, upY, upZ);upX, upY, upZ);

• eye[XYZ]: camera position in world coordinateseye[XYZ]: camera position in world coordinates

• look[XYZ]: a point centered in camera’s viewlook[XYZ]: a point centered in camera’s view

• up[XYZ]: a up[XYZ]: a vectorvector defining the camera’s vertical defining the camera’s vertical

Creates a matrix that transforms points in world coordinates to Creates a matrix that transforms points in world coordinates to camera coordinatescamera coordinates

• Camera at originCamera at origin

• Looking down -Z axisLooking down -Z axis

• Up vector aligned with Y axisUp vector aligned with Y axis


OpenGL: Perspective Projection

In OpenGL: In OpenGL: • Projections implemented by Projections implemented by projection matrixprojection matrix

• gluPerspective()gluPerspective() creates a perspective creates a perspective projection matrix:projection matrix:

glSetMatrix(GL_PROJECTION);glSetMatrix(GL_PROJECTION);

glLoadIdentity(); //glLoadIdentity(); //load an identity matrixload an identity matrix

gluPerspective(vfov, aspect, near, far);gluPerspective(vfov, aspect, near, far);

Parameters to Parameters to gluPerspective()gluPerspective()::• vfovvfov: vertical field of view: vertical field of view

• aspectaspect: window width/height: window width/height

• nearnear, , farfar: distance to near & far clipping planes: distance to near & far clipping planes

In OpenGL: In OpenGL: • Projections implemented by Projections implemented by projection matrixprojection matrix

• gluPerspective()gluPerspective() creates a perspective creates a perspective projection matrix:projection matrix:

glSetMatrix(GL_PROJECTION);glSetMatrix(GL_PROJECTION);

glLoadIdentity(); //glLoadIdentity(); //load an identity matrixload an identity matrix

gluPerspective(vfov, aspect, near, far);gluPerspective(vfov, aspect, near, far);

Parameters to Parameters to gluPerspective()gluPerspective()::• vfovvfov: vertical field of view: vertical field of view

• aspectaspect: window width/height: window width/height

• nearnear, , farfar: distance to near & far clipping planes: distance to near & far clipping planes


OpenGL: Lighting


Simplest option: change the Simplest option: change the current colorcurrent color between between polygons or verticespolygons or vertices• glColor() sets the current colorglColor() sets the current color

Or OpenGL provides a simple lighting model:Or OpenGL provides a simple lighting model:• Set parameters for light(s)Set parameters for light(s)

– Intensity, position, direction & falloff (if applicable) Intensity, position, direction & falloff (if applicable)

• Set Set materialmaterial parameters to describe how light reflects from the parameters to describe how light reflects from the surfacesurface

Won’t go into details now; check the red book if Won’t go into details now; check the red book if interestedinterested


Simplest option: change the Simplest option: change the current colorcurrent color between between polygons or verticespolygons or vertices• glColor() sets the current colorglColor() sets the current color

Or OpenGL provides a simple lighting model:Or OpenGL provides a simple lighting model:• Set parameters for light(s)Set parameters for light(s)

– Intensity, position, direction & falloff (if applicable) Intensity, position, direction & falloff (if applicable)

• Set Set materialmaterial parameters to describe how light reflects from the parameters to describe how light reflects from the surfacesurface

Won’t go into details now; check the red book if Won’t go into details now; check the red book if interestedinterested


OpenGL: Specifying Geometry

Geometry in OpenGL consists of a list of vertices in Geometry in OpenGL consists of a list of vertices in between calls to between calls to glBegin()glBegin() and and glEnd()glEnd()• A simple example: telling GL to render a triangleA simple example: telling GL to render a triangle

glBegin(GL_POLYGON);glBegin(GL_POLYGON);

glVertex3f(x1, y1, z1);glVertex3f(x1, y1, z1);



glEnd();glEnd();

• Usage: Usage: glBegin(glBegin(geomtypegeomtype)) where geomtype is: where geomtype is:

– Points, lines, polygons, triangles, quadrilaterals, etc...Points, lines, polygons, triangles, quadrilaterals, etc...

Geometry in OpenGL consists of a list of vertices in Geometry in OpenGL consists of a list of vertices in between calls to between calls to glBegin()glBegin() and and glEnd()glEnd()• A simple example: telling GL to render a triangleA simple example: telling GL to render a triangle

glBegin(GL_POLYGON);glBegin(GL_POLYGON);




glEnd();glEnd();

• Usage: Usage: glBegin(glBegin(geomtypegeomtype)) where geomtype is: where geomtype is:

– Points, lines, polygons, triangles, quadrilaterals, etc...Points, lines, polygons, triangles, quadrilaterals, etc...


Primitive Types

GL_POINTSGL_POINTS

GL_LINEGL_LINE

• {S | _STRIP | _LOOP}{S | _STRIP | _LOOP}

GL_TRIANGLEGL_TRIANGLE

• {S | _STRIP | _FAN}{S | _STRIP | _FAN}

GL_QUADGL_QUAD

• {S | _STRIP}{S | _STRIP}

GL_POLYGONGL_POLYGON

GL_POINTSGL_POINTS

GL_LINEGL_LINE

• {S | _STRIP | _LOOP}{S | _STRIP | _LOOP}

GL_TRIANGLEGL_TRIANGLE

• {S | _STRIP | _FAN}{S | _STRIP | _FAN}

GL_QUADGL_QUAD

• {S | _STRIP}{S | _STRIP}

GL_POLYGONGL_POLYGON


GL_POLYGON

List of vertices defines polygon edgesList of vertices defines polygon edges

Polygon must be convexPolygon must be convex

List of vertices defines polygon edgesList of vertices defines polygon edges

Polygon must be convexPolygon must be convex


Non-planar Polygons

Imagine polygon with non-planar verticesImagine polygon with non-planar vertices

Some perspectives will be rendered as concave Some perspectives will be rendered as concave polygonspolygons

These concave polygons may not rasterize These concave polygons may not rasterize correctlycorrectly

Imagine polygon with non-planar verticesImagine polygon with non-planar vertices

Some perspectives will be rendered as concave Some perspectives will be rendered as concave polygonspolygons

These concave polygons may not rasterize These concave polygons may not rasterize correctlycorrectly


OpenGL: More Examples

Example: GL supports quadrilaterals:Example: GL supports quadrilaterals:

glBegin(GL_QUADS);glBegin(GL_QUADS);

glVertex3f(-1, 1, 0); glVertex3f(-1, 1, 0);

glVertex3f(-1, -1, 0);glVertex3f(-1, -1, 0);

glVertex3f(1, -1, 0);glVertex3f(1, -1, 0);

glVertex3f(1, 1, 0);glVertex3f(1, 1, 0);

glEnd();glEnd();• This type of operation is called This type of operation is called immediate-mode renderingimmediate-mode rendering; ;

each command happens immediatelyeach command happens immediately







glEnd();glEnd();• This type of operation is called This type of operation is called immediate-mode renderingimmediate-mode rendering; ;

each command happens immediatelyeach command happens immediately


OpenGL: Drawing TrianglesYou can draw multiple triangles between You can draw multiple triangles between glBegin(GL_TRIANGLES)glBegin(GL_TRIANGLES) and and glEnd()glEnd()::

float v1[3], v2[3], v3[3], v4[3];float v1[3], v2[3], v3[3], v4[3];

......

glBegin(GL_TRIANGLES);glBegin(GL_TRIANGLES);

glVertex3fv(v1); glVertex3fv(v2); glVertex3fv(v3);glVertex3fv(v1); glVertex3fv(v2); glVertex3fv(v3);


glEnd();glEnd();

Each set of 3 vertices forms a triangleEach 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 You can draw multiple triangles between glBegin(GL_TRIANGLES)glBegin(GL_TRIANGLES) and and glEnd()glEnd()::


......




glEnd();glEnd();




OpenGL: Triangle StripsAn OpenGL An OpenGL triangle striptriangle strip primitive reduces this redundancy by sharing vertices: primitive reduces this redundancy by sharing vertices:

glBegin(GL_TRIANGLE_STRIP);glBegin(GL_TRIANGLE_STRIP);

glVertex3fv(v0);glVertex3fv(v0);






glEnd();glEnd();

• triangle 0 is v0, v1, v2triangle 0 is v0, v1, v2

• triangle 1 is v2, v1, v3 (triangle 1 is v2, v1, v3 (why not v1, v2, v3?why not v1, v2, v3?))


• triangle 3 is v4, v3, v5 (again, triangle 3 is v4, v3, v5 (again, notnot v3, v4, v5) v3, v4, v5)

An OpenGL An OpenGL triangle striptriangle strip primitive reduces this redundancy by sharing vertices: primitive reduces this redundancy by sharing vertices:








glEnd();glEnd();





v0v2

v1v3

v4

v5


OpenGL: More ExamplesExample: GL supports quadrilaterals:Example: GL supports quadrilaterals:






glEnd();glEnd();

• This type of operation is called This type of operation is called immediate-mode renderingimmediate-mode rendering; ; each command happens immediatelyeach command happens immediately







glEnd();glEnd();

• This type of operation is called This type of operation is called immediate-mode renderingimmediate-mode rendering; ; each command happens immediatelyeach command happens immediately


OpenGL: Front/Back Rendering

Each polygon has two sides, front and backEach polygon has two sides, front and back

OpenGL can render the two differentlyOpenGL can render the two differently

The ordering of vertices in the list determines The ordering of vertices in the list determines which is the front side:which is the front side:

• When looking at the When looking at the frontfront side, the vertices go side, the vertices go counterclockwisecounterclockwise

– This is basically the right-hand ruleThis is basically the right-hand rule

– Note that this still holds after perspective projectionNote that this still holds after perspective projection

Each polygon has two sides, front and backEach polygon has two sides, front and back

OpenGL can render the two differentlyOpenGL can render the two differently

The ordering of vertices in the list determines The ordering of vertices in the list determines which is the front side:which is the front side:

• When looking at the When looking at the frontfront side, the vertices go side, the vertices go counterclockwisecounterclockwise

– This is basically the right-hand ruleThis is basically the right-hand rule

– Note that this still holds after perspective projectionNote that this still holds after perspective projection


OpenGL: Drawing Triangles



......




glEnd();glEnd();





......




glEnd();glEnd();




OpenGL: Triangle StripsAn OpenGL An OpenGL triangle striptriangle strip primitive reduces this redundancy by sharing primitive reduces this redundancy by sharing

vertices:vertices:








glEnd();glEnd();





An OpenGL An OpenGL triangle striptriangle strip primitive reduces this redundancy by sharing primitive reduces this redundancy by sharing vertices:vertices:








glEnd();glEnd();





v0v2

v1v3

v4

v5


Double Buffering

Avoids displaying partially rendered frame bufferAvoids displaying partially rendered frame buffer

OpenGL generates one raster image while another OpenGL generates one raster image while another raster image is displayed on monitorraster image is displayed on monitor

glxSwapBuffers (Display *dpy, Window, w)glxSwapBuffers (Display *dpy, Window, w)

glutSwapBuffers (void)glutSwapBuffers (void)

Avoids displaying partially rendered frame bufferAvoids displaying partially rendered frame buffer

OpenGL generates one raster image while another OpenGL generates one raster image while another raster image is displayed on monitorraster image is displayed on monitor

glxSwapBuffers (Display *dpy, Window, w)glxSwapBuffers (Display *dpy, Window, w)

glutSwapBuffers (void)glutSwapBuffers (void)


Learn OpenGL by example

robot.c from the OpenGL Programming Guiderobot.c from the OpenGL Programming Guiderobot.c from the OpenGL Programming Guiderobot.c from the OpenGL Programming Guide



Two bodiesTwo bodies

• Upper armUpper arm

• Lower armLower arm

Major tasksMajor tasks

• PositionPosition

• OrientationOrientation

Two bodiesTwo bodies

• Upper armUpper arm

• Lower armLower arm

Major tasksMajor tasks

• PositionPosition

• OrientationOrientation



Both bodies originally at originBoth bodies originally at originBoth bodies originally at originBoth bodies originally at origin



HeadersHeaders#include <GL/gl.h> #include <GL/gl.h>

#include <GL/glu.h> #include <GL/glu.h>

#include <GL/glut.h> #include <GL/glut.h>

HeadersHeaders#include <GL/gl.h> #include <GL/gl.h>

#include <GL/glu.h> #include <GL/glu.h>

#include <GL/glut.h> #include <GL/glut.h>


Learn OpenGL by exampleint main(int argc, char** argv) { int main(int argc, char** argv) {

glutInit(&argc, argv); glutInit(&argc, argv);

glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB);glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB);

glutInitWindowSize (500, 500);glutInitWindowSize (500, 500);

glutInitWindowPosition (100, 100); glutInitWindowPosition (100, 100);

glutCreateWindow (argv[0]); glutCreateWindow (argv[0]);

init (); init ();

glutDisplayFunc(display); glutDisplayFunc(display);

glutReshapeFunc(reshape);glutReshapeFunc(reshape);

glutKeyboardFunc(keyboard); glutKeyboardFunc(keyboard);

glutMainLoop(); glutMainLoop();

return 0;return 0; } }

int main(int argc, char** argv) { int main(int argc, char** argv) {

glutInit(&argc, argv); glutInit(&argc, argv);

glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB);glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB);

glutInitWindowSize (500, 500);glutInitWindowSize (500, 500);

glutInitWindowPosition (100, 100); glutInitWindowPosition (100, 100);

glutCreateWindow (argv[0]); glutCreateWindow (argv[0]);

init (); init ();

glutDisplayFunc(display); glutDisplayFunc(display);

glutReshapeFunc(reshape);glutReshapeFunc(reshape);

glutKeyboardFunc(keyboard); glutKeyboardFunc(keyboard);

glutMainLoop(); glutMainLoop();

return 0;return 0; } }


Learn OpenGL by examplevoid init(void) { void init(void) {

glClearColor (0.0, 0.0, 0.0, 0.0); glClearColor (0.0, 0.0, 0.0, 0.0);

glShadeModel (GL_FLAT); glShadeModel (GL_FLAT);

}}

void init(void) { void init(void) {

glClearColor (0.0, 0.0, 0.0, 0.0); glClearColor (0.0, 0.0, 0.0, 0.0);

glShadeModel (GL_FLAT); glShadeModel (GL_FLAT);

}}


Learn OpenGL by examplevoid display(void){ void display(void){

glClear (GL_COLOR_BUFFER_BIT); glClear (GL_COLOR_BUFFER_BIT);

glPushMatrix(); glPushMatrix();

glTranslatef (-1.0, 0.0, 0.0); glTranslatef (-1.0, 0.0, 0.0);

glRotatef ((GLfloat) shoulder, 0.0, 0.0, 1.0); glRotatef ((GLfloat) shoulder, 0.0, 0.0, 1.0);

glTranslatef (1.0, 0.0, 0.0); glTranslatef (1.0, 0.0, 0.0);


glScalef (2.0, 0.4, 1.0); glScalef (2.0, 0.4, 1.0);

glutWireCube (1.0); glutWireCube (1.0);

glPopMatrix(); glPopMatrix();

Continued…Continued…

void display(void){ void display(void){

glClear (GL_COLOR_BUFFER_BIT); glClear (GL_COLOR_BUFFER_BIT);


glTranslatef (-1.0, 0.0, 0.0); glTranslatef (-1.0, 0.0, 0.0);

glRotatef ((GLfloat) shoulder, 0.0, 0.0, 1.0); glRotatef ((GLfloat) shoulder, 0.0, 0.0, 1.0);






Continued…Continued…


Learn OpenGL by exampleglTranslatef (1.0, 0.0, 0.0); glTranslatef (1.0, 0.0, 0.0);

glRotatef ((GLfloat) elbow, 0.0, 0.0, 1.0); glRotatef ((GLfloat) elbow, 0.0, 0.0, 1.0);







glutSwapBuffers();glutSwapBuffers();

} }


glRotatef ((GLfloat) elbow, 0.0, 0.0, 1.0); glRotatef ((GLfloat) elbow, 0.0, 0.0, 1.0);







glutSwapBuffers();glutSwapBuffers();

} }

Documents

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