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:

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:
step1_image 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
step2_image 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
step3_image Project the 3D world onto a 2D viewing screen.
CPU: JavaScript code
GPU: Vertex Shader
step4_image Clip away everything that is not in the camera’s field-of-view.
CPU: JavaScript code
GPU: Vertex Shader
step5_image Map the 3D object coordinates into the pixel coordinates of the raster image. GPU: Fixed functionality
step6_image 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
step7_image Determine the color of each pixel that represents an object.
CPU: JavaScript code
GPU: Fragment Shader
step8_image 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
step9_image 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.

Glossary

computer graphics
pictures and movies created using computers.
raster graphics
a picture defined by many small dots of color.
vector graphics
a picture composed of geometric shapes defined using mathematical equations.
computer-generated imagery (CGI)
using computers to create or modify raster images.
3D computer graphics
the entire process of creating raster images from vector graphics data.
render
create a raster image (picture) from vector graphics data.
graphics pipeline
a series of steps that transforms vector graphics descriptions of objects into a raster image.
shader program
a computer program written in GLSL (GL Shader Language) that runs on the GPU.
vertex shader
a computer program written in GLSL that positions the geometry of models in a scene.
fragment shader
a computer program written in GLSL that assigns a color to the pixels that compose a face of a model.
Next Section - 1.3 - Computer Graphics - A Brief History