15-462 Computer Graphics I
Assignment 1 - Height Fields
Height fields are commonplace in computer graphics, from scientific
visualization to terrain in video games. In this assignment, you will
implement a program that loads in heightfield data from an image
supplied on the command line and allows the user to view it interactively
by rotating/translating/scaling it. After completion of your program, you will
use it to create a simple animation.
A height field is a function that takes as input a two dimensional
point and returns a value representing the orthagonal distance to a
z = f(x,y)
In the general case, this is a rather tricky rendering problem. We will
simplify the problem by defining the function in a piece-wise linear
fashion. With one dimension as input, this would be akin to "connecting
the dots" while moving along an axis:
Piecewise linear approximation of a sine wave
With two dimensions as input, we approximate our surface with triangles
in 3D space. See the following examples for some source images and
The image data loaded from the JPEG will have three intensity values
for each pixel, representing red, green and blue, respectively. You may
convert from color to height in any manner that you like, but be sure
that all grey values (all three components have the same value) convert
monotonically. The easiest way to do this is to simply pick one channel
and scale it linearly, ignoring the other two.
The image library used for this assignment actually supports JPEG images with one, three, or four bitplanes--in other words, a single pixel may have either
one, three, or four bytes for its intensity values. The above description assumes three bytes per pixel, and you may assume this as well, as this is by
far the most common JPEG type you'll run into. However, for students interested in implementing a solution which handles any number of bitplanes, the
number of bytes per pixel is stored in Pic->bpp (see pic.h for details).
The goal of this assignment is to get you comfortable with working in
GL, as well as get you familiar with some basic 3D programming. Our
starter code is exceedingly bare, and only provides you with the basic
functionality to load a JPEG image and a rudimentary implementation of
the mouse control we would like you to have. You must write the code to
open up a window and begin rendering, as well as setup the proper camera
transformations. We recommend that you do so through GLUT, and in
particular by following the information provided in your copy of
OpenGL: A Primer. You are free to use any other library you
choose in lieu of GLUT (fltk,gtk,etc etc), but we will likely be unable
to provide any support.
Our starter code for C is available
You should make sure you can log in to the graphics cluster and
compile the starter code sometime soon. Starter code for O'Caml may also be available within a
few days, and will be posted here if so.
You are also free to use any language you like, but we will only
actively support C (with some support for O'Caml) for this assignment,
and we will require that your code compile and run in the graphics cluster.
- You should become familiar with GL's viewing transformations
before you attempt to solve the rendering problem. Try with a cube or
some other simple object first.
- Don't try to do this at the last minute. This assignment is
supposed to be fun and relatively easy, but time pressure has a way of
ruining that notion.
- Make sure you can log in.
- Handle at least a 256x256 image for your height field at
interactive frame rates (>15fps with a window size of at least 640x480).
- Ability to render as either points, lines("wireframe"), or filled triangles, with keys for the user to switch between the three.
- Your code must render as a perspective view, and it must utilize
GL's depth buffer for hidden surface removal.
- Use input from the mouse to spin the heightfield around using
- Use input from the mouse to move the heightfield around using
- Use input from the mouse to change the dimensions of the heightfield
- Color the vertices using some smooth gradient.
- Code reasonably commented and written in an understandable manner--we will read your code.
- Program submitted along with documentation of features and controls (making a readme.txt is a good idea) - calling attention to any extras you
implement is a wise thing to do!
- Program submitted along with frames for the required animation (see below).
- Experiment with material and lighting properties.
- Allow the user to interactively deform the landscape.
- Color the vertices based on color values taken from another image
of equal size.
- Texturemap the surface with an arbitrary image.
For the very brave:
- Level of detail (mip mapping/trilinear) to allow heightfields of
significantly higher resolution.
- Non-rectilinear geometry (not just by wiggling the points side to
After finishing your program, you are required to submit an animation, represented by a series of JPEG images which are screenshots from your program.
Functionality to output a screenshot is included in the starter code, and assumes you are using a window size of 640x480--your JPEG images must be this
size. Please name your JPEG frames 00.jpg, 01.jpg, and so on, where 00.jpg is the first frame of your animation, and please do not exceed 100
Expect a framerate of 15 frames per second. It's probably a good idea to test your animation by using animate ("man animate" for information) in the
graphics cluster. This program takes a sequence of images and displays them as an animation, at your desired framerate.
The method of generating your frames is left up to you, and you may use any software you wish to generate the
source images for your height fields. The GIMP is available on graphics cluster machines (type "gimp" at a terminal prompt). You may also use your
animation to show off any extra features you choose to implement. For some initial ideas, see last semester's movie.
Please submit your code along with your makefile and any other files used (images, etc) to
in a sub-directory called asst1. Running "make" in
this directory should compile your program successfully, and your program should function properly
when run from this directory--if not, you've left out a necessary file.
Within this directory, make a sub-directory called movie, and place the frames for your animation within,
numbered as described above.
Please adhere exactly to the guidelines for directory and file names for your program and your images. We will be generating a class movie with
your image files, and need to run a script on them to do this--for it to work, all names must be uniform.