3D Graphics with Processing.js

The aim of this tutorial is to explain how to create basic 3D graphics. It uses the Khan Academy Computer Science platform, (which is based on the Processing.js library and HTML5 Canvas) but the principles are the same no matter what language you use.

The HTML5 Canvas is not really designed for 3D graphics, but that just means we can write our own 3D graphics engine and in doing so, learn a bit how 3D graphics work (and why there is a reason to learn trigonometry).

This tutorial has now been ported to Khan Academy.

Since computer screens are essentially two-dimensional, 3D graphics are just 2D optical illusions that trick your brain into thinking you're seeing a 3D object.

A 3D graphics engine works by calculating what 2D shapes a 3D object would project on to the screen. So to write our own 3D engine, we need to know how to do these calculations. Our program won't be as quick as most 3D engines but it should help us understand the principles of how they work.

A 3D graphics engine takes a 3D object and converts into 2D graphics, so the first thing we need to do is to represent a 3D object in our code.

A single point in 3D space is easy to represent using an array of three numbers. For example, we can use [30, 80, 55] to represent a point 30 pixels along the horizontal (x) axis, 80 pixels along the vertical (y) axis, and 55 pixels along the axis that goes into and out of the screen.

Representing a line is also easy: you just connect two points. One way to represent an object in 3D, therefore, is by converting it into a group of lines. This is called a wireframe, as it looks like the object is made from wire. It's not ideal for representing solid objects, but it's a good place to start.