1.2 - 3D Computer Graphics - What and How¶

Computer graphics are pictures and movies created using computers. (1)

There are two basic ways to describe a picture using a computer:

• Raster graphics - describes a picture using many small dots of color. Each dot is called a pixel, which is an abbreviation for “picture element”. If the dots are small enough and close enough together, a person does not sees the individual dots, but rather sees a “picture”.
• Vector graphics - describes objects as geometric shapes using mathematical equations. A picture is created from the mathematical descriptions through a process called rendering. The results of a rendering is a 2-dimensional raster image.

Computer tools have been developed to create and manipulate both types of computer graphics. For example, Adobe PhotoShop is the premier tool for working with raster images. But creating new images by manipulating many small dots of color is not advantageous for moving pictures where objects are changing over time. PhotoShop is great for creating single images or “touching up” an existing image, but it is not good at creating movies.

Computer-generated imagery (CGI) is the application of computer graphics to create or contribute to images in art, printed media, video games, films, television programs, commercials, videos, and simulators. (2) The average person has probably only heard the term CGI in relationship to video games and movies, but it has wide applications to many fields.

3D computer graphics are graphics that use a three-dimensional representation of geometric data for the purposes of performing calculations and rendering 2D images. (3) These tutorials will help you learn how to use 3D computer graphic techniques to create CGI. Or, said another way, these tutorials will help you create vector graphic representations of 3-dimensional objects and then render them into raster images. If you can create data and algorithms that render raster images in less than 1/30th of a second, you can create real-time video that renders while a viewer watches. Most video games are based on real-time rendering. If it takes longer than 1/30th of a second to create each image, you can always store the images and play them back in real-time. Most movie CGI is not rendered in real-time.

So how are vector graphic representations of objects converted into a raster image? It is a non-trivial process that requires multiple steps. These steps have been well understood for many years and they must be done in a well defined sequence. This sequence of operations is called the “graphics pipeline”. In the early days of computer graphics the “pipeline” was not programmable. Data was fed into the pipeline and out came a raster image. But today’s GPU’s allow for a programmer to control certain parts of the pipeline using shader programs. A shader program is simply a very specialized set of instructions for manipulating the graphics data at critical steps in the pipeline process. Shader programs provide a programmer with amazing flexibility and potential creativity, but at the cost of added complexity. The purpose of these tutorials is to help you understand the graphics pipeline and how to manipulate graphics data using shader programs.

The Graphics Pipeline¶

The process of converting vector graphic representations of objects into a raster image is performed by these steps:

Pipeline Step:	Description:	Performed by:
	Feed data into the pipeline, including model vertices (x,y,z) that define location, normal vectors (dx,dy,dz) that define direction, and color data.	CPU: JavaScript code
	Translate, scale, and rotate the models to their desired location and orientation in the 3D scene. Then move everything in front of the camera.	CPU: JavaScript code GPU: Vertex Shader
	Project the 3D world onto a 2D viewing screen.	CPU: JavaScript code GPU: Vertex Shader
	Clip away everything that is not in the camera’s field-of-view.	CPU: JavaScript code GPU: Vertex Shader
	Map the 3D object coordinates into the pixel coordinates of the raster image.	GPU: Fixed functionality
	Determine which pixels are covered by each object (point, line, or triangle) and throw out objects that are hidden from view by other objects.	GPU: Fixed functionality
	Determine the color of each pixel that represents an object.	CPU: JavaScript code GPU: Fragment Shader
	Add the color of a pixel to the raster image, possibly combining the color with a color that is already in the image.	GPU: Fixed functionality
	Output a raster image, one color value for each pixel of the image.	GPU: Fixed functionality

The details in each of the above steps is explained in the rest of these tutorials. As you dive into the details, please refer back to this overview often to keep the big picture in mind.