Note! To do this lesson, you need a WebGL-enabled browser (if in doubt, just use Chrome). Here's more information.

Here's an exciting application in computer programming: drawing using three-dimensional computer graphics. Thanks to some technology called WebGL, you can render 3D graphics right in your web browser, and that's what this lesson is all about. Such 3D graphics can have a very compelling look, particularly because of the perspective and lighting effects that the objects have. Spheres look nice and round (with a limb) and boxes look rigid and "boxy."

From a mathematics point of view, 3D plotting allows you to think of the Cartesian Coordinate System in three-dimensions now, not just two. Mostly you deal with $(x,y)$ coordinates in math class, and this was covered in this lesson.

For 3D graphics, you need to think about $(x,y,z)$ coordinates. Here, the $x$ and $y$ axes are in the plane of the screen as usual. $+x$ is to the right, and $-x$ is to the left. $+y$ is up and $-y$ is down. But now, you'll have the $z$ axis, which runs out-of and in-to the screen. $+z$ is toward you as the viewer and $-z$ is away from you. The 3D render engine will provide all of the perspective, meaning closer objects will be bigger than farther objects, etc. Cool stuff!

We'll start with two core functions for 3D drawing as described here. Have fun!

Move the mouse over a dotted box for more information.

You can find a list of color codes here. The 3D drawing area will appear under your code-editor. You might have to scroll down to see it.