This is an introductory course in computer graphics. The course will be concerned mainly with three-dimensional graphics, but will begin with a look at some aspects of graphics in two dimensions. It is assumed that you know something about drawing in Java. In particular, you should be familiar with the Graphics class, which represents a two-dimensional graphics context. We will look at some of the more advanced features that are available in the Graphics2D class, concentrating on those that are most to the type of work that we will be doing in 3D. We will also look at another 2D graphics API, the one used with the HTML canvas element. But first, this section provides an overview of some of the fundamental ideas of computer graphics.
Computer graphics can be divided broadly into two kinds: vector graphics and raster graphics. In both cases, the idea is to represent an image. The difference is in how the image is represented.
An image that is presented on the computer screen is made up of pixels. The screen consists of a rectangular grid of pixels, arranged in rows and columns. The pixels are small enough that they are not easy to see individually. At a given time, each pixel can show only one color. Most screens these days use 24-bit color, where a color can be specified by three 8-bit numbers, giving the levels of red, green, and blue. Other formats are possible, such as grayscale, where a color is given by one number that specifies the level of gray on a black-to-white scale, or indexed, where a color is given as an integer index into a relatively small table of possible colors. In any case, the color values for all the pixels on the screen are stored in a large block of memory known as a frame buffer. Changing the image on the screen requires changing all the color values in the frame buffer. The screen is redrawn many times per second, so almost immediately after the color values are changed in the frame buffer, the colors of the pixels on the screen will be changed to match, and the displayed image will change.
A computer screen used in this way is the basic model of raster graphics. The term "raster" technically refers to the mechanism used on older vacuum tube computer monitors: An electron beam would move along the rows of pixels, making them glow. The beam could be moved across the screen by powerful magnets that would deflect the path of the electrons. The stronger the beam, the brighter the glow of the pixel, so the brightness of the pixels could be controlled by modulating the intensity of the electron beam. The color values stored in the frame buffer were used to determine the intensity of the electron beam. (For a color screen, each pixel had a red dot, a green dot, and a blue dot, which were separately illuminated by the beam.)
A modern flat-screen computer monitor is not a raster in the same sense. There is no moving electron beam. The mechanism that controls the colors of the pixels is different for different types of screen. But the screen is still made up of pixels, and the color values for all the pixels are still stored in a frame buffer. The idea of an image consisting of a grid of pixels, with numerical color values for each pixel, defines raster graphics.
Although images on the computer screen are represented using pixels, specifying individual pixel colors is not always the best way to create an image. Another way to create an image is to specify the basic geometric shapes that it contains, shapes such as lines, circles, triangles, and rectangles. This is the idea that defines vector graphics: represent an image as a list of the geometric shapes that it contains. To make things more interesting, the shapes can have attributes, such as the thickness of a line or the color that fills a rectangle. Of course, not every image can be composed from simple geometric shapes. This approach certainly wouldn't work for a picture of a beautiful sunset (or for most any other photographic image). However, it works well for many types of images, such as architectural blueprints and scientific illustrations.
In fact, early in the history of computing, vector graphics were even used directly on computer screens. When the first graphical computer displays were developed, raster displays were too slow and expensive to be practical. Fortunately, it was possible to use vacuum tube technology in another way: The electron beam could be made to directly draw a line on the screen, simply by sweeping the beam along that line. A vector graphics display would store a display list of lines that should appear on the screen. Since a point on the screen would glow only very briefly after being illuminated by the electron beam, the graphics display would go through the display list over and over, continually redrawing all the lines on the list. To change the image, it would only be necessary to change the contents of the display list. Of course, if the display list became too long, the image would start to flicker because a line would have a chance to visibly fade before its next turn to be redrawn.
But here is the point: For an image that can be specified as a reasonably small number of geometric shapes, the amount of information needed to represent the image is much smaller using a vector representation than using a raster representation. Consider an image made up of one thousand line segments. For a vector representation of the image, you only need to store the coordinates of two thousand points, the endpoints of the lines. This would take up only a few kilobytes of memory. To store the image in a frame buffer for a raster display would require much more memory, even for a monochrome display. Similarly, a vector display could draw the lines on the screen more quickly than a raster display could copy the the same image from the frame buffer to the screen. (As soon as raster displays became fast and inexpensive, however, they quickly displaced vector displays because of their ability to display all types of images reasonably well.)
The divide between raster graphics and vector graphics persists in several areas of computer graphics. For example, it can be seen in a division between two categories of programs that can be used to create images: painting programs and drawing programs. In a painting program, the image is represented as a grid of pixels, and the user creates an image by assigning colors to pixels. This might be done by using a "drawing tool" that acts like a painter's brush, or even by tools that draw geometric shapes such as lines or rectangles. But the point in a painting program is to color the individual pixels, and it is only the pixel colors that are saved. To make this clearer, suppose that you use a painting program to draw a house, then draw a tree in front of the house. If you then erase the tree, you'll only reveal a blank background, not a house. In fact, the image never really contained a "house" at all—only individually colored pixels that the viewer might perceive as making up a picture of a house.
In a drawing program, the user creates an image by adding geometric shapes, and the image is represented as a list of those shapes. If you place a house shape (or collection of shapes making up a house) in the image, and you then place a tree shape on top of the house, the house is still there, since it is stored in the list of shapes that the image contains. If you delete the tree, the house will still be in the image, just as it was before you added the tree. Furthermore, you should be able to select any of the shapes in the image and move it or change its size, so drawing programs offer a rich set of editing operations that are not possible in painting programs. (The reverse, however, is also true.)
A practical program for image creation and editing might combine elements of painting and drawing, although one or the other is usually dominant. For example, a drawing program might allow the user to include a raster-type image, treating it as one shape. A painting program might let the user create "layers," which are separate images that can be layered one on top of another to create the final image. The layers can then be manipulated much like the shapes in a drawing program (so that you could keep both your house and your tree in separate layers, even if in the image the house is in back of the tree).
Two well-known graphics programs are Adobe Photoshop and Adobe Illustrator. Photoshop is in the category of painting programs, while Illustrator is more of a drawing program. In the world of free software, the GNU image-processing program, Gimp is a good alternative to Photoshop, while Inkscape is a reasonably capable free drawing program. The free office software OpenOffice also has a usable drawing component.
The divide between raster and vector graphics also appears in the field of graphics file formats. There are many ways to represent an image as data stored in a file. If the original image is to be recovered from the bits stored in the file, the representation must follow some exact, known specification. Such a specification is called a graphics file format. Some popular graphics file formats include GIF, PNG, JPEG, and SVG. Most images used on the Web are GIF, PNG, or JPEG, and some web browsers also have support for SVG images.
GIF, PNG, and JPEG are basically raster graphics formats; an image is specified by storing a color value for each pixel. The amount of data necessary to represent an image in this way can be quite large. However, the data usually contains a lot of redundancy, and the data can be compressed to reduce its size. GIF and PNG use lossless data compression, which means that the original image can be recovered perfectly from the compressed data. (GIF is an older file format, which has largely been superseded by PNG, but you can still find GIF images on the web.) JPEG uses a lossy data compression algorithm, which means that the image that is recovered from a JPEG image is not exactly the same as the original image—some information has been lost. This might not sound like a good idea, but in fact the difference is often not very noticeable, and using lossy compression usually permits a greater reduction in the size of the compressed data. JPEG generally works well for photographic images, but not as well for images that have sharp edges between different colors. It is especially bad for line drawings and images that contain text; PNG is the preferred format for such images.
SVG is fundamentally a vector graphics format (although SVG images can include raster images). SVG is actually an XML-based language for describing two-dimensional vector graphics images. "SVG" stands for "Scalable Vector Graphics," and the term "scalable" indicates one of the advantages of vector graphics: There is no loss of quality when the size of the image is increased. A line between two points can be drawn at any scale, and it is still the same perfect geometric line. If you try to greatly increase the size of a raster image, on the other hand, you will find that you don't have enough color values for all the pixels in the new image; each pixel in the original image will cover a rectangle of images in the scaled image, and you will get multi-pixel blocks of uniform color. The scalable nature of SVG images make them a good choice for web browsers and for graphical elements on your computer's desktop. And indeed, some desktop environments are now using SVG images for their desktop icons.
When we turn to 3D graphics, we find that the most common approaches have more in common with vector graphics than with raster graphics. That is, the starting point is to construct a "world" or "scene" as a collection of simple geometric shapes, arranged in three-dimensional space. This is referred to as geometric modeling. Often, the range of basic shapes is very limited, perhaps including only points, line segments, and triangles. A more complex shape such as a polygon or sphere can be built or approximated as a collection of more basic shapes, if it is not itself considered to be basic.
When building an artificial 3D world from geometric shapes, each object has to be placed into the world. This involves setting its size, orientation, and position. These properties are specified by applying geometric transforms the object. A scale transform is used to set the size of an object. A rotate transform is used to set its orientation. A translate transform is used to set its position. We will meet these transformations first in two dimensions, where they are easier to understand, but it is in 3D graphics that they become truly essential.
Geometric shapes by themselves are not very interesting. You have to be able to set their appearance. The first step is to assign a material to each shape. The term material here refers to the properties that determine the intrinsic visual appearance of a surface. Essentially, this means how the surface interacts with light that hits the surface. Material properties can include a basic color as well as other properties such as shininess, roughness, and transparency.
One of the most useful kinds of material property is a texture. In most general terms, a texture is a way of varying material properties from point-to-point on a surface. This allows you to add detail to a scene without using a huge number of geometric shapes; instead, you can use a smaller number of textured shapes. The most common type of texture is a 2D image texture, which can be applied to a surface so that the image looks like it is "painted" onto the surface.
In the real world, you don't see anything unless there is some light in the environment. The same is true in 3D graphics: you have to add simulated light to a scene. This means setting the color, intensity, and position of one or more light sources. The light from those sources will then interact with the material properites of the objects in the scene.
Ultimately, the goal of 3D graphics is to produce a 2D image of the 3D world. For this to happen, the 3D world must be projected into 2D. This projection from 3D to 2D is also called viewing. It is often specified by placing a "virtual camera" or "eye" into the scene. The projection shows what the scene looks like to that camera or eye.
Geometric modeling, materials, textures, lighting, and viewing are probably the most fundamental ideas in 3D graphics, but a few others should be mentioned. The final step in 3D graphics is to assign colors to individual pixels in a 2D image; this process is called rasterization. In many cases the ultimate goal is animation, in which a series of images are created with some properties of the 3D world being modified between each image and the next. There are many techniques for animation. One of the most important is to use a physics engine, which computes the motion and interaction of objects based on the laws of physics.