Laboratorio Grafica al Calcolatore 2009/2010: Lecture 2 - Rendering

Roberto Toldo, <nome.cognome@univr.it >

Hit the space bar for next slide

Previous Lecture Summary

Rendering is the process of converting geometric models into a 2D picture. OpenGL is capable of rendering three types of geometric primitives: points, lines, and polygons. It can also render image and bitmap primitives, which are covered in the sequel to this course.

The geometric primitives are composed of vertices, placed in a three dimensional `world' defined in world coordinates. The vertices are defined in homogeneous coordinates, which combine world coordinates (x,y,z) with a scaling factor w.

In OpenGL, vertices are specified using the glVertex* functions. There are many forms of glVertex* for specification of 2, 3, or 4 coordinates using long or short integer types, or floating point data types. The different forms can be used in any combination when defining a primitive.

To draw a geometric primitive in OpenGL, call glBegin() with the type of primitive you wish to render. Then call the glVertex* functions to define all the vertices, and finish the primitive with a call to glEnd(). The geometric primitives may be simple (points, lines, triangles or quadrilaterals), or complex (line strips and loops, triangle strips and fans, quadrilateral strips).

Triangle Strips and Fans

When OpenGL renders a triangle strip, there are two retained vertices, R1 and R2. There is a pointer, P, which always points to the older of the two retained vertices. Here the GL_TRIANGLE_STRIP primitive is started:

       glBegin (GL_TRIANGLE_STRIP);
          /* P is initialized to point to R1. */

After the first two vertices, each additional vertex produces one triangle. Here is what happens as each of the vertices are specified:

       glVertex3fv (vNew);

If this is at least the third vertex, we are completing a triangle. Draw the triangle specified by (R1, R2, vNew).
Put the vertex vNew into the location pointed to by P.
Change P to point to the other of (R1, R2).

The triangle fan is simpler. The first vertex specified is a pivot point. After the second vertex, subsequent vertices specify triangles formed by v0, the previous vertex, and the most recently specified vertex. The triangle fan can be used to draw cones, circles, and filled arcs.

Example:

OpenGL Call	Triangle Drawn	R1	R2	vNew	P
glBegin (GL_TRIANGLE_STRIP); glVertex3fv (v0); glVertex3fv (v1); glVertex3fv (v2); glVertex3fv (v3); glVertex3fv (v4); glVertex3fv (v5); glVertex3fv (v6); glEnd(); glBegin (GL_TRIANGLE_FAN) glVertex3fv (v6); glVertex3fv (v5); glVertex3fv (v7); glVertex3fv (v8); glVertex3fv (v9); glVertex3fv (v10); glEnd();	0, 1, 2 2, 1, 3 2, 3, 4 4, 3, 5 4, 5, 6 6, 5, 7 6, 7, 8 6, 8, 9 6, 8, 10	v0 v0 v2 v2 v4 v4 v6	v1 v1 v3 v3 v5 v5	v0 v1 v2 v3 v4 v5 v6 v6 v5 v7 v8 v9 v10	R1 R2 R1 R2 R1 R2 R1 R2

Lecture Objectives

At the completion of this module, you will be able to

Use modeling transformations to manipulate objects in the scene
Use orthographic or perspective projection transformations to define your view of the world
Use the matrix stacks to save projection and modeling transformations

Camera Analogy

Transformation

Camera

Notes:

Camera analogy:

Modeling has to do with where you put your objects. For example, setting up modeling transformations is like the photographer telling you to take a step to the left or right.

Projection has to do with the type of lens you choose. For example, you might use a wide angle lens to capture an entire tree, or you might use a telephoto lens to take a picture of a single leaf.

Viewing has to do with how and where you position the camera. For example, you might move the camera off to the side and take a picture from an angle, or you might turn the camera ninety degrees to take a picture of a tall person.

The Role of Matrices

All transformations are represented as 4x4 matrices

A vertex can be transformed by a 4x4 matrix into another vertex

A vertex is always represented as a homogeneous coordinate

Notes:

For most operations, you will not need to create your own matrix. You will simply tell OpenGL what operation to perform and OpenGL will create the appropriate matrix for you.

Notice how the subscripts on the matrix elements go down first and then across. If you're programming in C and you declare a matrix as m[4][4], then the element m[i][j] is in the ith column and jth row of the OpenGL transformation matrix. This is the reverse of the standard C convention in which m[i][j] is in row i and column j. To avoid confusion, you should declare your matrices as a one-dimensional array (m[16]).

Modeling Transformations

Modeling Transformations are actions applied to the coordinate system. There are three types:

Translation
Rotation
Scaling

Translation

GLvoid glTranslatef( GLfloat Tx, GLfloat Ty,
                     GLfloat Tz )

Moves the coordinate system origin to the point specified by (Tx,Ty,Tz)

Notes:

Alternate form:

GLvoid glTranslated( GLdouble x, GLdouble y, 
                     GLdouble z )

Rotation

GLvoid glRotatef( GLfloat angle, GLfloat x,
                  GLfloat y, GLfloat z )

Rotate angle degrees around the vector [ x, y, z ]
Positive angles represent counterclockwise rotation

Notes:

Alternate form:

GLvoid glRotated( GLdouble angle, GLdouble x, 
                  GLdouble y, GLdouble z )

The angle parameter is different from the corresponding IRIS GL function. The angle parameter is specified in degrees, not tenths of degrees. Also note that this function is more general than the IRIS GL version in that we can rotate around any vector, not just the 'x', 'y', or 'z' axes.

The right-hand rule

OpenGL uses a right-handed coordinate system for the viewing transformations.
The right-hand rule helps you remember the directions of positive and negative rotation:
1. Open your right hand
2. Stick out the thumb
3. Point your thumb along one of the axes in a positive direction
4. Curl your fingers around the axis
5. A positive rotation around that axis will be in the same direction that your fingers curl

Scaling

GLvoid glScalef( GLfloat Sx, GLfloat Sy,
                 GLfloat Sz )

Scale each axis by the corresponding scaling factor
Negative values cause a reflection about that axis

Notes:

Scale Factor(s)	Effect
\|s\| > 1.0	Expands dimension
\|s\| = 1.0	Nothing
0.0 < \|s\| < 1.0	Shrinks dimension
s = 0.0	BAD! Compresses dimension out of existence

Note: the use of absolute values in the chart. The magnitude of the value determines whether the axis is stretched or reduced. If the value is negative, then the axis is also reflected 180 degrees.

Alternate form:

GLvoid glScaled( GLdouble x, GLdouble y, GLdouble z )

Example: `transforms.c`

/* transforms.c - draw a triangle under the effect of a rotation, 
 *             a translation and a scale
 *
 *     Escape key      - exit program
 */

#include <GL/glut.h>    /* includes gl.h, glu.h */

#include <stdio.h>

/*  Function Prototypes  */

GLvoid  initgfx( GLvoid );
GLvoid  keyboard( GLubyte, GLint, GLint );
GLvoid  drawScene( GLvoid );

void drawTriangle( GLfloat red, GLfloat green, GLfloat blue );

void printHelp( char * );

/* Global Definitions */

#define KEY_ESC        27      /* ascii value for the escape key */

void
main( int argc, char *argv[] )
{
   GLsizei width, height;

   glutInit( &argc, argv );

   width = glutGet( GLUT_SCREEN_WIDTH ); 
   height = glutGet( GLUT_SCREEN_HEIGHT );
   glutInitWindowPosition( 0, height / 4 );
   glutInitWindowSize( width / 2, height / 2 );
   glutInitDisplayMode( GLUT_RGBA );
   glutCreateWindow( argv[0] );

   initgfx();

   glutKeyboardFunc( keyboard );
   glutDisplayFunc( drawScene ); 

   printHelp( argv[0] );

   glOrtho( -2.0, 2.0, -2.0, 2.0, -1.0, 1.0 );

   glutMainLoop();
}

void
printHelp( char *progname )
{
   fprintf(stdout, "\n%s - demonstrates modeling transformations\n\n"
           "Escape Key   - exit the program\n\n",
           progname);
}

GLvoid
initgfx( GLvoid )
{
   glClearColor( 0.0, 0.0, 1.0, 1.0 );
   glShadeModel( GL_FLAT );
}

GLvoid 
keyboard( GLubyte key, GLint x, GLint y )
{
   switch (key) {
   case KEY_ESC:   /* Exit whenever the Escape key is pressed */
       exit(0);
   }
}

GLvoid
drawTriangle( GLfloat red, GLfloat green, GLfloat blue )
{
   glColor3f( red, green, blue );
   glBegin( GL_TRIANGLES );
       glVertex2f( -0.5, -0.5 );
       glVertex2f( 0.5, -0.5 );
       glVertex2f( 0.0, 0.5 );
   glEnd();
}

GLvoid
drawScene( GLvoid )
{
   glClear( GL_COLOR_BUFFER_BIT );

   /* draw a black triangle centered at the origin */
   drawTriangle( 0.0, 0.0, 0.0 );

   /* Draw x and y axes to show the origin */
   XYaxes();

   /* move over a bit and draw a dark gray triangle */
   glTranslatef( 0.5, 0.0, 0.0 );
   drawTriangle( 0.3, 0.3, 0.3 ); 

   /* move over a bit and draw a rotated triangle */
   glTranslatef( 0.5, 0.0, 0.0 );

   /* Rotate 15 degrees clockwise around the positive Z axis */
   glRotatef( -15.0, 0.0, 0.0, 1.0 );
   drawTriangle( 0.7, 0.7, 0.7 ); /* draw light gray triangle */

   /* move over a bit and draw a scaled triangle */
   glTranslatef( 0.5, 0.0, 0.0 );

   /* Scale the triangle by one-half in all dimensions, and
    * reflect about the x axis
    */
   glScalef( -0.5, 0.5, 0.5 );
   drawTriangle( 1.0, 1.0, 1.0 );  /* draw white triangle */
   XYaxes();

   glFlush();
}

Notes:

This program demonstrates the three types of modeling transformations: rotation, scaling, and translation. It draws four triangles.

The first triangle is rendered at the origin. An x-y axis is also rendered, to help visualize the effects of subsequent transformations.

The second triangle is translated a short distance in the positive x direction.

The third triangle is translated a short distance in the positive x direction and then rotated slightly.

The last triangle is translated a short distance in the positive x direction, rotated slightly, and then scaled by one-half. It is also reflected about the new x axis. Another set of axes is rendered to show the reflection.

The XYaxes() function renders the x axis in red and the y axis in green. It helps to visualize the transformations and is useful to use when developing code. The XYaxes() function is available in the class library.

Lab: Modeling Transformation Exercise

Change directory to siggraph_2001_demos/bin.
Run ./transformation, the transformation tutorial program.
If you move mouse cursor into one of the three subfigure in the window and click the right mouse button you will change different parameter.
For each subfigure the parameter are the following:
- World space-view: if you change "toggle model" the model disappear or reappear.
- Screen-space view: you can choose the model you want.
- Command manipulation window: you can swap the order of translation and rotation, and reset parameters.
Modify the parameters to glScalef, glRotatef, or glTranslatef to create the views below. Record the subroutine and values used to create each view.

Notes:

You can use the right mouse button to bring up a menu which allows you to choose the type of modeling transformation.

Under Windows NT this tutorial occasionally does not display correctly until it has been iconized and restored.

Projection Transformations

Projection transformations define how much of the world you can see and how you view it. There are two types:

Notes:

We have already seen one type of projection transformation -- glOrtho().

Orthographic Projections

GLvoid glOrtho( GLdouble left, GLdouble right,
                GLdouble bottom, GLdouble top,
                GLdouble nearClip, GLdouble farClip )

Imitates parallel light rays approaching the eye
- Also called a parallel projection
Objects are projected to the screen by making them uniformly flat

Notes:

Think of it is as though the viewing volume was flattened from the back to the front, and the result was placed on the screen.

A 3D Experiment

Until now, all of our rendering has been done in only two dimensions (the z coordinate has been 0.0).

Try rotating the grid around the x axis (1.0, 0.0, 0.0) to make it three-dimensional.

Example: `orthoRotate.c`

/* orthoRotate.c - rotate the line grid around the X axis, making
 *       it an object in '3D'.
 *
 *     Escape Key              - exit program
 */

#include <GL/glut.h>    /* includes gl.h, glu.h */

#include <stdio.h>

/*  Function Prototypes  */

GLvoid  initgfx( GLvoid );
GLvoid  keyboard( GLubyte, GLint, GLint );
GLvoid  drawScene( GLvoid );

void printHelp( char * );

/* Global Definitions */

#define KEY_ESC        27      /* ascii value for the escape key */

void
main( int argc, char *argv[] )
{
   GLsizei width, height;

   glutInit( &argc, argv );

   width = glutGet( GLUT_SCREEN_WIDTH ); 
   height = glutGet( GLUT_SCREEN_HEIGHT );
   glutInitWindowPosition( 0, height / 4 );
   glutInitWindowSize( width / 2, height / 2 );
   glutInitDisplayMode( GLUT_RGBA );
   glutCreateWindow( argv[0] );

   initgfx();

   glutKeyboardFunc( keyboard );
   glutDisplayFunc( drawScene ); 

   printHelp( argv[0] );

   glOrtho( -2.0, 2.0, -2.0, 2.0, -1.0, 1.0 );

   glutMainLoop();
}

void
printHelp( char *progname )
{
   fprintf(stdout, 
           "\n%s - render a rotated grid using an orthographic projection\n\n"
           "Escape Key         - exit the program\n\n",
           progname);
}

GLvoid
initgfx( GLvoid )
{
   glClearColor( 0.0, 0.0, 1.0, 1.0 );
   glShadeModel( GL_FLAT );
}

GLvoid 
keyboard( GLubyte key, GLint x, GLint y )
{
   switch (key) {
   case KEY_ESC:   /* Exit when the Escape key is pressed */
       exit(0);
   }
}

GLvoid
drawScene( GLvoid )
{
   static GLfloat    whiteColor[] = { 1.0, 1.0, 1.0 };

   glClear( GL_COLOR_BUFFER_BIT );

   /* Rotate grid around the X axis - push the top of the grid
    *    into the screen
    */
   glRotatef( -60.0, 1.0, 0.0, 0.0 );

   glColor3fv( whiteColor );   
   WireGrid();

   glFlush();
}

Notes:

This program draws a wire grid rotated 60 degrees around the x axis. The grid should look as though the top is pushed in and the bottom is sticking out, but it doesn't. Explain why not.

Note: The WireGrid function is a version of the grid we saw in grid.c. It is available in the class library.

Observations

The grid still looks like it was rendered with z = 0.0, and it looks as though it was scaled in the y dimension. Why?

Notes:

The reason the grid looks squashed in the y direction, rather than appearing 3D, has to do with the way the scene is projected onto the screen.

Perspective Projection Using `glFrustum`

GLvoid glFrustum( GLdouble left, GLdouble right,
                  GLdouble bottom, GLdouble top,
                  GLdouble nearClip, GLdouble farClip )

Objects that are closer to the view-point appear large

Notes:

The eye is located at the origin and is looking down the negative z axis (into the screen). Near and far specify the distance from the eye (0.0 < near < far) of the near and far clipping planes along the negative z axis. The near clipping plane is specified by (left, bottom, -near) as the lower left corner and (right, top, -near) as the upper right corner. Changing near changes the shape of the viewing volume

glFrustum() is not intuitive to use, so a related function was added to the GLU library.

Perspective Projection Using `gluPerspective`

GLvoid gluPerspective( GLdouble fovy, GLdouble
                       aspect, GLdouble nearClip, 
                       GLdouble farClip )

Creates a frustum that is symmetric in x and y dimensions along the line of sight

Notes:

gluPerspective creates a viewing frustum using glFrustum. You just provide the information in a different way. glFrustum provides more flexibility in that it allows you to specify a frustum that is not symmetric in x and y. This means that the line of sight does not have to be centered in the middle of the projection plane.

near and far are the same, but instead of specifying left, right, bottom, top, you give an angle for the field of view in y (fovy) and the aspect ratio. fovy determines the height, and the height combined with the aspect ratio determines the width

Large fovy is like having a "wide angle" lens
Small fovy is like having a "telephoto" lens

aspect determines the width of the frustum.

Using Perspective Projections

To see your objects, you need to make sure they are in the frustum.

   gluPerspective( 45.0, 1.0, 3.0, 7.0 );
   ...
   /* sometime before drawing scene */
   glTranslatef( 0, 0, -5.0 );

Notes:

For now, we will just move our objects down the negative z axis. We'll see other ways to do this later.

Because the eye is initially at the origin of the system, and we tend to draw the objects there, they will not be in the viewing volume. We need to move the coordinate system between -near and -far

Example: `perspectiveRotate.c`

/* perspectiveRotate.c - rotate the line grid around the X axis, 
 *     making it an object in '3D'. View it using a perspective projection.
 *
 *     Escape Key      - exit program
 */

#include <GL/glut.h>    /* includes gl.h, glu.h */

#include <stdio.h>

/*  Function Prototypes  */

GLvoid  initgfx( GLvoid );
GLvoid  keyboard( GLubyte, GLint, GLint );
GLvoid  drawScene( GLvoid );

void printHelp( char * );

/* Global Definitions */

#define KEY_ESC        27      /* ascii value for the escape key */

void
main( int argc, char *argv[] )
{
   GLsizei width, height;
   GLdouble    aspect; 

   glutInit( &argc, argv );

   width = glutGet( GLUT_SCREEN_WIDTH ); 
   height = glutGet( GLUT_SCREEN_HEIGHT );
   glutInitWindowPosition( (width / 2) + 2, height / 4 );
   glutInitWindowSize( width / 2, height / 2 );
   glutInitDisplayMode( GLUT_RGBA );
   glutCreateWindow( argv[0] );

   initgfx();

   glutKeyboardFunc( keyboard );
   glutDisplayFunc( drawScene ); 

   printHelp( argv[0] );

   gluPerspective( 45.0, (GLdouble) width/(GLdouble)height, 3.0, 7.0 );

   /* Translate the origin so that it is between the near and far
    *    clipping planes.
    */
   glTranslatef( 0.0, 0.0, -5.0 );

   glutMainLoop();
}

void
printHelp( char *progname )
{
   fprintf(stdout, 
           "\n%s - render a rotated grid using a perspective projection\n\n"
           "Escape Key         - exit the program\n\n",
           progname);
}

GLvoid
initgfx( GLvoid )
{
   glClearColor( 0.0, 0.0, 1.0, 1.0 );
   glShadeModel( GL_FLAT );

}

GLvoid 
keyboard( GLubyte key, GLint x, GLint y )
{
   switch (key) {
   case KEY_ESC:   /* Exit when the Escape key is pressed */
       exit(0);
   }
}

GLvoid
drawScene( GLvoid )
{
   static GLfloat    whiteColor[] = { 1.0, 1.0, 1.0 };

   glClear( GL_COLOR_BUFFER_BIT );

   /* Rotate grid around the X axis - push the top of the grid
    *    into the screen
    */
   glRotatef( -60.0, 1.0, 0.0, 0.0 );

   /* Draw grid centered around translated origin */
   glColor3fv( whiteColor );   
   WireGrid();

   glFlush();
}

Notes:

This program is the same as orthoRotate.c, except that we are using a perspective projection instead of an orthographic projection.

The call to gluPerspective sets up the perspective projection. After setting up the projection transformation, the program does a translate so that all objects are inside the viewing volume.

Lab: Projection Transformation Exercise

Change directory to siggraph_2001_demos/bin.
Run ./projection, the projection tutorial program.
Modify the parameters to glOrtho, glFrustum, or gluPerspective to create the views below. Record the subroutine and values used to create each view.

Notes:

You can use the right mouse button to bring up a menu which allows you to choose the type of projection transformation.

Under Windows NT this tutorial occasionally does not display correctly until it has been iconized and restored.

Matrix Stacks

There are two matrix stacks used to save projection and modeling transformations.

All transformations are performed on the top of the current matrix stack

Notes:

Up to now we have not been using these two stacks. We've been accumulating all of the transformations on the ModelView matrix stack

Vertex Transformation

Each vertex is first multiplied by the ModelView matrix, then by the Projection matrix.

Projection and modeling transformations should be kept in separate matrices
Initially each matrix contains the identity matrix

Who's Who?

GL_PROJECTION transformations
- glOrtho()
- gluOrtho2D()
- glFrustum()
- gluPerspective()
GL_MODELVIEW transformations
- glTranslate*()
- glRotate*()
- glScale*()

Matrix Modes

GLvoid glMatrixMode( GLenum mode )

Determines which stack is current
- The current matrix is at the top of the current matrix stack
- Subsequent transformations affect this matrix
- Should match the type of transformation being performed
mode indicates which matrix stack to use when updating transformations

mode	Where transformations happen
`GL_PROJECTION` `GL_MODELVIEW`	Projection Matrix ModelView Matrix

A Shortcut

Most work is done on the ModelView matrix stack.

Keep the system in GL_MODELVIEW mode most of the time

Surround projection transformations as follows

   glMatrixMode( GL_PROJECTION );
   gluPerspective( 45.0, 1.0, 3.0, 7.0 );
   glMatrixMode( GL_MODELVIEW );

Notes:

The default matrix stack is GL_MODELVIEW.

Note: Because the matrix stack had not yet been introduced, the previous example programs didn't call glMatrixMode(GL_PROJECTION). Consequently, the projection transformations were specified on the ModelView stack. This is not a recommended practice.

Matrix Stack Operations

GLvoid glPushMatrix( GLvoid )

GLvoid glPopMatrix( GLvoid )

glPushMatrix() duplicates the current matrix and pushes it onto the top of the stack
glPopMatrix() pops the current matrix off the top of the stack

Make sure that the number of pushes and pops match.

Notes:

Indenting code between Push/Pop pairs helps readability.

In GL_MODELVIEW mode, the matrix stack depth is at least 32. In GL_PROJECTION mode, the depth is at least 2. You can use the query command glGetIntegerv() to determine the maximum stack depth or the current stack pointer. See man glGet(3G) for explanations of GL_MODELVIEW_STACK_DEPTH, GL_MAX_MODELVIEW_STACK_DEPTH, GL_PROJECTION_STACK_DEPTH, and GL_MAX_PROJECTION_STACK_DEPTH.

Loading the Identity Matrix

GLvoid glLoadIdentity( GLvoid )

Replaces the current matrix (the top of the stack) with the identity matrix

Notes:

The glLoadIdentity() function is indispensable in working with the matrix stacks. Although it is not used in the following example program, its use will be discussed further in Lecture 6, Viewports.

Other matrix stack operations include:

`glLoadMatrix*()`	Load a specified matrix onto the stack
`glGetFloatv()`	Return the matrix on the top of the specified matrix stack
`glMultMatrix*()`	Multiply the current matrix with a specified matrix

Using the ModelView Matrix Stack

The display function is called whenever the window is resized or exposed.

Modeling transformations accumulate
Use the ModelView stack to return to the identity matrix

Example: `matrixmodes.c`

/* matrixmodes.c - draw a triangle under the effect of a rotation,
 *              a translation and a scale; use the matrix stack
 *              to ensure that the scene is properly redrawn.
 *
 *     Escape Key      - exit program
 */

#include <GL/glut.h>    /* includes gl.h, glu.h */

#include <stdio.h>

/*  Function Prototypes  */

GLvoid  initgfx( GLvoid );
GLvoid  keyboard( GLubyte, GLint, GLint );
GLvoid  drawScene( GLvoid );

void drawTriangle( GLfloat red, GLfloat green, GLfloat blue );

void printHelp( char * );

/* Global Definitions */

#define KEY_ESC        27      /* ascii value for the escape key */

void
main( int argc, char *argv[] )
{
   GLsizei width, height;

   glutInit( &argc, argv );

   width = glutGet( GLUT_SCREEN_WIDTH ); 
   height = glutGet( GLUT_SCREEN_HEIGHT );
   glutInitWindowPosition( (width / 2) + 2, height / 4 );
   glutInitWindowSize( width / 2, height / 2 );
   glutInitDisplayMode( GLUT_RGBA );
   glutCreateWindow( argv[0] );

   initgfx();

   glutKeyboardFunc( keyboard );
   glutDisplayFunc( drawScene ); 

   printHelp( argv[0] );

   glMatrixMode( GL_PROJECTION );
   gluPerspective( 45.0, (GLdouble) width/ (GLdouble)height, 3.0, 7.0 );
   glMatrixMode( GL_MODELVIEW );

   glutMainLoop();
}

void
printHelp( char *progname )
{
   fprintf(stdout, 
           "\n%s - demonstrates use of matrix modes and stacks\n\n"
           "Escape Key         - exit the program\n\n",
           progname);
}

GLvoid
initgfx( GLvoid )
{
   glClearColor( 0.0, 0.0, 1.0, 1.0 );
   glShadeModel( GL_FLAT );
}

GLvoid 
keyboard( GLubyte key, GLint x, GLint y )
{
   switch (key) {
   case KEY_ESC:   /* Exit whenever the Escape key is pressed */
       exit(0);
   }
}

GLvoid
drawTriangle( GLfloat red, GLfloat green, GLfloat blue )
{
   glColor3f( red, green, blue );
   glBegin( GL_TRIANGLES );
       glVertex2f( -0.5, -0.5 );
       glVertex2f( 0.5, -0.5 );
       glVertex2f( 0.0, 0.5 );
   glEnd();
}

GLvoid
drawScene( GLvoid )
{
   glClear( GL_COLOR_BUFFER_BIT );

   glPushMatrix();
       /* Translate the origin so that it is between the near and far
        *    clipping planes.
        */
       glTranslatef( 0.0, 0.0, -5.0 );

       /* draw a black triangle centered at the origin */
       drawTriangle( 0.0, 0.0, 0.0 );

       /* Draw x and y axes to show the origin */
       XYaxes();

       /* move over a bit and draw another triangle */
       glTranslatef( 0.5, 0.0, 0.0 );
       drawTriangle( 0.3, 0.3, 0.3 ); 

       /* move over a bit and draw a rotated triangle */
       glTranslatef( 0.5, 0.0, 0.0 );

       /* Rotate 15 degrees counter-clockwise around the positive Z axis */
       glRotatef( -15.0, 0.0, 0.0, 1.0 );
       drawTriangle( 0.7, 0.7, 0.7 );

       /* move over a bit and draw a scaled triangle */
       glTranslatef( 0.5, 0.0, 0.0 );

       /* Scale the triangle by one-half in all dimensions */
       glScalef( -0.5, 0.5, 0.5 );
       drawTriangle( 1.0, 1.0, 1.0 );  /* draw green triangle */
       XYaxes();

   glPopMatrix();

   glFlush();
}

Notes:

This program is the same as transforms.c, except that it has been modified to use the matrix stacks.

In main(), the program switches to the projection stack to set the projection transformation, and then returns to the ModelView stack.

In drawScene(), the program pushes a copy of the current ModelView matrix onto the ModelView stack, so that after rendering the scene the matrix can be restored. Because the matrix is restored each time the scene is drawn, the proportions of the objects within the scene remain constant when the window is resized. Compare this with the transforms example, in which the transformations accumulate with each rendering of the scene, causing the triangles to grow smaller and smaller.

Lab: Modeling and Projection Transformations

Change directory to ../tutorial/exercises
Copy your objects.c program to perspective.c.
Modify perspective.c to
1. Use a perspective projection. Be sure to set the matrix stacks appropriately.
2. Move the coordinate system so that the origin is between the near and far clipping planes.
3. Save and restore the identity matrix each time the scene is drawn.
Experiment with using a modeling transformation on one of the objects you added previously (or on a new object).

OpenGL C Quick Reference

Modeling Transformations

void glRotatef( GLfloat angle, GLfloat x, GLfloat y, 
GLfloat z )
void glRotated( GLdouble angle, GLdouble x, GLdouble y, 
GLdouble z )

Computes a matrix that performs a counterclockwise rotation about the specified vector from the origin through the point (x, y, z).

void glScalef( GLfloat scalex, GLfloat scaley, GLfloat 
scalez )
void glScaled( GLdouble scalex, GLdouble scaley, GLdouble 
scalez )

Scales the coordinate system along the x, y and z axes.

void glTranslatef( GLfloat transx, GLfloat transy, GLfloat 
transz )
void glTranslated( GLdouble transx, GLdouble transy, 
GLdouble transz )

Moves the coordinate system origin to the point specified by (x,y,z)

Projection Transformations

void glOrtho( GLdouble left, GLdouble right, GLdouble
bottom, GLdouble top, GLdouble near, GLdouble far )

Multiplies the current matrix by a matrix that describes a parallel projection.

void gluOrtho2D( GLdouble left, GLdouble right, GLdouble 
bottom, GLdouble top )

Multiplies the current matrix by a matrix that describes a two-dimensional parallel projection. This is equivalent to calling glOrtho with near=-1 and far=1.

void glFrustum( GLdouble left, GLdouble right, GLdouble 
bottom, GLdouble top, GLdouble near, GLdouble far )

Multiplies the current matrix by a matrix that describes a perspective projection.

void gluPerspective( GLdouble fovy, GLdouble aspect, 
GLdouble near, GLdouble far )

Multiplies the current matrix by a matrix that describes a perspective projection, with a symmetrical, pyramid-shaped viewing volume.

Matrix Stack Manipulation

void glMatrixMode( GLenum mode )

Specifies which matrix stack is the target for subsequent matrix operations.

void glPushMatrix( GLvoid )
void glPopMatrix( GLvoid )

glPushMatrix() pushes the current matrix stack down by one, duplicating the current matrix. glPopMatrix() pops the current matrix stack, replacing the current matrix with the one below it on the stack.

void glLoadIdentity( void );

Replaces the current matrix with the identity matrix.

void glLoadMatrixf( const GLfloat *m )
void glLoadMatrixd( const GLdouble *m )

Replaces the current matrix (as specified by the current matrix mode).

void glGetFloatv( GL_PROJECTION_MATRIX, GLfloat *m )
void glGetFloatv( GL_MODELVIEW_MATRIX, GLfloat *m )

Returns the matrix on the top of the specified matrix stack.

void glMultMatrixf( const GLfloat *m )
void glMultMatrixd( const GLdouble *m )

Multiplies the current matrix (as specified by the current matrix mode) with the one specified in m.

mElite 02: Let's move the orthographic camera

Using your knowledge about stack matrices and transformations, you have to:

control the translation along x and y directions of the orthographic camera using arrow keys.
add keys control for change the speed: use two different keys to speed ud and slow down.
Try to draw the planet using the parametric equations of the circle:
x = a+r*cos(t)
y = b+r*sin(t) with t = [0,1]

You can click >>here<< to download an example of what you have to realize. You have to run

chmod +x melite2b

if you want a successful execution of the program.

Laboratorio Grafica al Calcolatore 2009/2010: Lecture 2 - Rendering

Previous Lecture Summary

Triangle Strips and Fans

Example:

Lecture Objectives

Camera Analogy

Transformation

Camera

The Role of Matrices

Modeling Transformations

Translation

Rotation

The right-hand rule

Scaling

Example: transforms.c

Lab: Modeling Transformation Exercise

Projection Transformations

Orthographic Projections

A 3D Experiment

Example: orthoRotate.c

Observations

Perspective Projection Using glFrustum

Perspective Projection Using gluPerspective

Using Perspective Projections

Example: perspectiveRotate.c

Lab: Projection Transformation Exercise

Matrix Stacks

Vertex Transformation

Who's Who?

Matrix Modes

A Shortcut

Matrix Stack Operations

Loading the Identity Matrix

Using the ModelView Matrix Stack

Example: matrixmodes.c

Lab: Modeling and Projection Transformations

OpenGL C Quick Reference

Modeling Transformations

Projection Transformations

Matrix Stack Manipulation

mElite 02: Let's move the orthographic camera

Example: `transforms.c`

Example: `orthoRotate.c`

Perspective Projection Using `glFrustum`

Perspective Projection Using `gluPerspective`

Example: `perspectiveRotate.c`

Example: `matrixmodes.c`