<indentation: 1>
<font-size: 24>
<center: true>
<color: 0.1 0.1 0.9>
<p>
OpenGL Tutorials and Examples
<p>
<font-size: 18>
<center: false>
<color: 0.0 0.0 0.0>
<p>
<p>
The tutorials are interactive, allowing you to manipulate controls and make changes to the world being depicted. In addition, you can open pages that provide help on using the tutorial, a brief discussion of the concept being explored with the tutorial, a set of quiz questions that you can use to check your understanding and, when appropriate, 
a summary of OpenGL functions presented through the tutorial. You open the additional pages by a right-click at points in the main window outside of the subwindows and select "Show Help". Another menu choice is "Close". You should use this choice to close the tutorial (versus using the X to close the window) since the choice allows memory management functions to run.
<p>
<p>
A program example illustrates the use of concepts and OpenGL function calls. In addition to the window containing the graphical content generated by the program, either the program's source
code or a discussion on points illustrated by the example accompanies the example. The ancillary material opens in Internet Explorer when the example is launched. If you should need to re-open the material, right-click in the example's window to bring up a popup menu which contains the choice "Show Source Code". 
<p>
<p>
You may open any of the tutorials and examples by selecting its name from a popup menu. The menu appears with a right mouse click. You may also vertically scroll this window by dragging the mouse up and down with its left button pressed or with the up and down arrow keys.
<font-size: 24>
<center: true>
<color: 0.1, 0.1, 0.9>
<p>
<p>
Table of Contents
<font-size: 18>
<center: false>
<indentation: 10>
<p>
Chapter 0: Our First World
<p>
Chapter 1: 2D Projection and Viewports
<p>
Chapter 2: Color, Geometry and Shading
<p>
Chapter 3: Transformations and Animation
<p>
Chapter 4: Menu, Keyboard and Mouse Interaction
<p>
Chapter 5: Texture Mappings
<p>
Chapter 6: A Little Game Programming
<p>
Chapter 7: Virtual Camera
<p>
Chapter 8: Lighting
<p>
Chapter 9: Miscellaneous
<font-size: 24>
<center: true>
<color: 0.1 0.1 0.9>
<indentation: 1>
<p>
<p>
Chapter 0: Our First World
<center: false>
<font-size: 18>
<p>
Example: Hello World
<color: 0.0, 0.0, 0.0>
<p>
This is our first example of an OpenGL program. It shows how to create a window using the GLUT library and 
create a very simple image in that window using OpenGL function calls.
<color: 0.1, 0.1, 0.9>
<font-size: 24>
<center: true>
<color: 0.1 0.1 0.9>
<p>
<p>
Chapter 1: 2D Projection and Viewports
<center: false>
<font-size: 18>
<p>
Tutorial:  Orthographic Projections
<color: 0.0, 0.0, 0.0>
<p>
With this tutorial you will be learning about projection windows and viewports.
<color: 0.1 0.1 0.9>
<p>
<p>
Example:  Viewports
<color: 0.0, 0.0, 0.0>
<p>
We use the geometry of our Hello World example and produce two instances of it. The instances are accomplished through the use
of two veiwports.
<font-size: 24>
<center: true>
<color: 0.1 0.1 0.9>
<p>
<p>
Chapter 2: Color, Geometry and Shading
<font-size: 18>
<center: false>
<p>
Tutorial:  Color Models
<color: 0.0, 0.0, 0.0>
<p>
The tutorial is designed to help you develop intuition about the two color models RGB and HSV. The models are depicted, respectively, with a hexcone and a cube. By giving input values for either model, you can
develop intuition for color mixing within each model along with an understanding of the relationship between the two models.
<color: 0.1 0.1 0.9>
<p>
<p>
Tutorial:  Geometry
<color: 0.0, 0.0, 0.0>
<p>
You see in this tutorial how to construct basic geometries in OpenGL. The geometries include lines, triangles, quadrilaterials and polygons. 
<color: 0.1 0.1 0.9>
<p>
<p>
Tutorial:  Smooth Shading
<color: 0.0, 0.0, 0.0>
<p>
The focus in this tutorial is the computations used to determine the color of "interior" 
points of a triangle using smooth shading (also called Gouraud shading). You are presented with a triangle having vertex colors red, green, and blue. You select a point of interest within the triangle and the interpolation computations for that point are then displayed. You may focus your attention on either the final computation for the selected point or upon one of the intermediary computations.
<color: 0.1 0.1 0.9>
<p>
<p>
Example:  Cascading Squares
<color: 0.0, 0.0, 0.0>
<p>
The example illustrates the creation of a geometric pattern. The pattern is a sequence of nested squares with the squares' color saturation decreasing as the squares become smaller. The pattern is
created through recursive function calls.
<color: 0.1 0.1 0.9>
<p>
<p>
Example:  Circle Disk
<color: 0.0, 0.0, 0.0>
<p>
Line strip (and loop) is a useful basic geometry for approximating curves. We can vary the smoothness of the approximating curve by varying the distance between the points in the strip. This is illustrated here with the construction of a circle. Also, once we have the points for the approximating circle, we can easily construct a filled circle (i.e, a disk).
<color: 0.1 0.1 0.9>
<p>
<p>
Example:  GLU Disk
<color: 0.0, 0.0, 0.0>
<p>
The OpenGL utility library glu contains a function for constructing a disk. The example illustrates how to use the function. 
<color: 0.1 0.1 0.9>
<p>
<p>
Example:  Line Stipple
<color: 0.0, 0.0, 0.0>
<p>
A line is stippled when it is drawn broken and appears as a sequence of dots and dashes. Further, the length of the visible portions and the length of spaces can be varied as illustrated with this example.
<font-size: 24>
<center: true>
<color: 0.1 0.1 0.9>
<p>
<p>
Chapter 3: Transformations and Animation
<font-size: 18>
<center: false>
<p>
Tutorial:  2D Transformations
<color: 0.0 0.0 0.0>
<p>
By interacting with this tutorial, you can see how a 2D object is affected with the application of two-dimensional transformations while also viewing the current transformation matrix that creates the effect.
<color: 0.1 0.1 0.9>
<p>
<p>
Example:  Many Instances
<color: 0.0, 0.0, 0.0>
<p>
We saw with the example Viewports how we can use different viewports to create several instances of a geometry. The use of transformations gives another way of creating multiple static instances of a geometry. 
The example illustrates this point. 
<color: 0.1 0.1 0.9>
<p>
<p>
Example:  Morphing Using Idle Function
<color: 0.0, 0.0, 0.0>
<p>
Animations are of great interest. We use the basic OpenGl transformations to animate the size, orientation and/or location of geometries. In this example we use transformations to change the shape of an object. We also animate the color of the object. In creating the animation, we demonstrate how to the use an idle function that we register with glut. In particular, our registered idle function calls our display method with a change between calls to the parameters that control the transformations on the object and the color applied to the object.
<color: 0.1 0.1 0.9>
<p>
<p>
Example:  Morphing Using Timer Function
<color: 0.0, 0.0, 0.0>
<p>
The animation is the same as the one demonstrated in the previous example. Except in this example we create the animation through the use of a timer function that we register with glut. The advantage in using a timer function versus an idle function allows us to make the speed of the animation platform independent by setting the frame rate of the animation.
<font-size: 24>
<center: true>
<color: 0.1 0.1 0.9>
<p>
<p>
Chapter 4: Menu, Keyboard and Mouse Interaction
<font-size: 18>
<center: false>
<p>
Example:  User Interaction through GLUT
<color: 0.0 0.0 0.0>
<p>
We see with this example how to create interactive methods using glut. These include the use of the mouse for picking an object within the world and dragging the object. We also see how to create a popup menu and define keyboard handlers. 
<font-size: 24>
<center: true>
<color: 0.1 0.1 0.9>
<p>
<p>
Chapter 5: Texture Mappings
<font-size: 18>
<center: false>
<p>
Tutorial: Texture Coordinates
<color: 0.0 0.0 0.0>
<p>
The tutorial guides you through understanding what is needed to accomplish the application of a texture (bitmap) to a geometry in two dimensions. 
<p>
<p>
<color: 0.1 0.1 0.9>
<p>
Tutorial: Texture Transformations
<color: 0.0 0.0 0.0>
<p>
The tutorial follows the one on texture coordinates. It is suggested that you do the Texture Coordinate tutorial before doing this one.
<p>
<p>
<color: 0.1 0.1 0.9>
<p>
Example: Image Map
<color: 0.0 0.0 0.0>
<p>
The example has two image maps where either of the two can be applied to different geometries. The geometries consist of squares, a hexagon and an octagon. The application of a map to a square is straight forward. But the calculations of the texture coordinates corresponding to the vertices of the hexagon and the octagon are a bit more complicated.
<font-size: 24>
<center: true>
<color: 0.1 0.1 0.9>
<p>
<p>
Chapter 6: A Little Game Programming
<font-size: 18>
<center: false>
<p>
Example: Game with Stationary Targets
<color: 0.0 0.0 0.0>
<p>
This example illustrates a simple third person shooting game. The game consists of a rotating tank that fires projectiles and five stationary targets. Discussion is given here on how we decide when a projectile will hit a target. This game provides one of the simplest cases of collision detection -- a moving object along a straight line and a stationary target.
<color: 0.1, 0.1, 0.9>
<p>
<p>
Example: Game with Moving Target
<color: 0.0 0.0 0.0>
<p>
This is the first in a series of two in which a moving target is added to our shooting game with stationary targets. Our method of collision detection used with stationary targets can be used with the moving target if the moving target stops when the projectile is fired. Guess what happens in this version of the game.
<color: 0.1, 0.1, 0.9>
<p>
<p>
Example: Shooting Game (final version)
<color: 0.0 0.0 0.0>
<p>
Collision detection in this version of the game is with both objects moving. The calculations are still relatively simple since the two motion paths are straight lines. Note that in a real situation, collision detection requires knowing not only the motion paths but also the velocities of each object. With this information we compute whether the two objects will arrive at the collision point at the same time. Time in our synthetic world is measured by frames and, in turn, our question is will the two moving objects arrive at the collision point
in the same frame. 
<font-size: 24>
<center: true>
<color: 0.1 0.1 0.9>
<p>
<p>
Chapter 7: Virtual Camera
<font-size: 18>
<center: false>
<p>
Tutorial: Virtual Camera
<color: 0.0 0.0 0.0>
<p>
A key concept in computer graphics is to model a world and then "take a picture" of the world through a (virtual) camera. We first establish the camera in OpenGL by setting its location, the direction it points and its orientation, also called its roll. Next, we establish the type of projection to be applied, either orthographic or perspective. The tutorial, in turn, is designed to help you understand this fundamental concept of viewing and how it is accomplished in OpenGL.
<p>
<color: 0.1 0.1 0.9>
<p>
Tutorial: Camera Motion
<color: 0.0 0.0 0.0>
<p>
There are standard camera movements that include orbit, pan, truck and dolly. By interacting with this tutorial, you can see the effect of each of these camera moves on the projected image.
<p>
<color: 0.1 0.1 0.9>
<p>
Tutorial: The Viewing Transformation Matrix
<color: 0.0 0.0 0.0>
<p>
The tutorial shows the computations used by OpenGL in determining
the viewing transformation matrix. This matrix is created by OpenGL when a call is made to gluLookAt.
<font-size: 24>
<center: true>
<color: 0.1 0.1 0.9>
<p>
<p>
Chapter 8: Lighting
<font-size: 18>
<center: false>
<p>
Tutorial: Ambient Reflection
<color: 0.0 0.0 0.0>
<p>
The tutorial focuses on the determination of color using
the Phong Illumination Model. In particular, you control the color 
of an ambient light as it illuminates four swatches of material 
(cyan, yellow, magenta, and gray). The color computations for any one of the materials you choose are shown in one sub window while the visual effect of the computation is displayed in another sub window.
<color: 0.1 0.1 0.9>
<p>
<p>
Tutorial: Diffuse Reflection
<color: 0.0 0.0 0.0>
<p>
The tutorial helps you understand the lighting effects of omni and directional lights on a simple scene consisting of two planes meeting at a corner. Further, the effect involves diffuse reflectivity and is determined by the orientation of surface normals to the lights. You can change the lighting effects by manipulating the normals.
<color: 0.1 0.1 0.9>
<p>
<p>
Tutorial: Specular Reflection
<color: 0.0 0.0 0.0>
<p>
The tutorial demonstrates specular reflectivity as created by a spot light illuminating a sphere. Also, you can change the cutoff angle and the exponent of the light and see the effect of the changes by viewing the illumination of the light on the background.
<color: 0.1 0.1 0.9>
<p>
<p>
Example: Lights
<color: 0.0 0.0 0.0>
<p>
The example illustrates the use of four lights, ambient, omni, directional and spot, to illuminate our world.
<font-size: 24>
<center: true>
<color: 0.1 0.1 0.9>
<p>
<p>
Chapter 9: Miscellaneous
<font-size: 18>
<center: false>
<p>
Tutorial: Bezier Spline
<color: 0.0 0.0 0.0>
<p>
A spline consists of curves placed end-to-end. We consider in this tutorial Bezier curves that are part of OpenGL. We also show how the splines obtained from these curves can be used as motion paths, to obtain a surface through extrusion and to obtain a surface of revolution.
<p>
<font-size: 18>
<color: 0.1 0.1 0.9>
<p>
Tutorial: A Projected Shadow 
<color: 0.0 0.0 0.0>
<p>
The tutorial demonstrates how a shadow can be cast onto a plane by computing a projection matrix and applying it to the 3D geometry. We also set the drawing color to one appropriate for the shadow and apply it to the projected geometry.
<p>
<font-size: 18>
<color: 0.1 0.1 0.9>
<p>
Tutorial: Ray Traced Shadow 
<color: 0.0 0.0 0.0>
<p>
The tutorial applies the method used in a Ray Trace render for creating shadows. The demonstration shows the calculations for "casting" a shadow onto a plane by one of three types of objects -- a sphere, a hollow cylinder (one without end caps) and a solid cylinder (one with caps).   
<p>
<font-size: 18>
<color: 0.1 0.1 0.9>
<center: false>
<p>
Example: Two-Sided Material
<color: 0.0 0.0 0.0>
<p>
OpenGL provides the means to assign different materials to two sides, the outside and the inside, of the geometry. In this example, you can cut away the geometry, which is of course hollow, and see both the inside and outside of the geometry. You create the cut-away by moving the near plane of the virtual camera.
<p>
<font-size: 18>
<color: 0.1 0.1 0.9>
<center: false>
<p>
Example: Inside a Sphere
<color: 0.0 0.0 0.0>
<p>
Generally the background of our synthetic world is static. If we want
the background to change as we animate the camera, then we can place the background on the inside of a sphere and have the sphere surround the geometry and the camera, as done in this example.
<p>
<font-size: 18>
<color: 0.1 0.1 0.9>
<center: false>
<p>
Example: Transparency
<color: 0.0 0.0 0.0>
<p>
We have seen with the tutorial Texture Transformations how to make a portion of an image map "invisible." We do this by setting the alpha component of the texel's color to zero and apply alpha bending. This can also be accomplished when using a base color or material color for an object. The example also illustrates how to use the GLUI library in creating an interface for user input.
<p>
<font-size: 18>
<color: 0.1 0.1 0.9>
<center: false>
<p>
Example: Texture Methods
<color: 0.0 0.0 0.0>
<p>
We have seen in chapter 5 two of the OpenGL methods, namely GL_REPLACE and GL_DECAL, for applying a image map to a geometry. A third method GL_MODULATE is demonstrated in the example. You can also compare the effect created with this method in contrast to GL_DECAL. Also, part of the user interface is created with the GLUI library. Note that this example is located here versus chapter 5 since the effect of modulate is best appreciated when lighting is present.
<p>
<font-size: 18>
<color: 0.1 0.1 0.9>
<center: false>
<p>
Example: Model Viewer
<color: 0.0 0.0 0.0>
<p>
The tutorial Camera Animation is a model viewer but with only one model available. The example illustrates how to use the GLUI library to open a file browser and select a model to be viewed. Reading the file and rendering its content is part of the Utils class ObjectModel. You can use this class and any of the others in Utils when you construct your own programs.
