Brian Koponen

Programming and Tech Tips

Web 3D Graphics Programming for Beginners

There seems to be a bit of a misconception that libraries like Three.js make 3D graphics programming so easy that you don't need any knowledge of how a 3D graphics engine actually works. While it is certainly much easier than programming the raw WebGL code, you really should have some concept of what is happening at that layer, as it informs everything on top. Just reading the Three.js documentation, for instance, assumes a working knowledge of standard 3D graphics math and scene graph structure. If you are new to 3D graphics programming and want to really understand it, I would suggest the following course of study.


A Bit of Math

There's no getting around it, you have to learn a bit of math to really get anywhere. Of course, you'll need a general understanding of geometry and trigonometry. You'll be using both degrees and radians when using angles, so make sure to memorize the common angles in radians if you haven't already. If you haven't taken a Linear Algebra course, you will need to get comfortable with a Transformation Matrix as it is fundamental to dealing with points in 3D space. It is worth spending the time to get a solid understanding of this because you will see it everywhere. Don't worry, it's not difficult for these purposes. You just want to have the understanding of what they are used for and how you use them to transform 3D coordinates between different coordinates bases. The libraries themselves do all the calculations, you just need to know the concepts.

You will also want to learn about the problem of Gimbal Lock when using Euler angles and how you get around this by using a rotation matrix or a quaternion. Thankfully, you can pick up these things as you need them. It's normal to bump into things that you probably never heard while reading through the documentation. Just take a minute to look things up and see how they are being used and it all usually makes sense.


Graphics Vocabulary

In order to learn all the graphics terminology, what everything is and what it means, I would suggest learning how to use Blender very well. This will teach you about Meshes, Materials, Textures, Lights, Animations and more. There are plenty of tutorials out there that will walk you through the whole program. Don't worry if you don't have any artistic talent, it isn't necessary to still understand what each element does.

By becoming familiar with all the elements that make up a 3D scene, you will have a good context for all the classes in Three.js and most any other 3D engine for that matter. Most of the classes have a lot of parameters and you will appreciate having been exposed to them in Blender instead of having to look up the definition of 5 things every time you instantiate a new object.

As a side benefit, you will get hands on knowledge of how to create a 3D scene, which will make it a lot easier to communicate with artists and designers. If you have to create a special tool, for instance, you can use the controls and workflows that they are going to be most familiar with. In fact, you may end up just using Blender's Python API to create whatever they may need.


Coding

Once you have a really good understanding of all the parts of a 3D scene, I would recommend learning enough WebGL to get a textured cube drawn to the screen. This will show you enough of a lower level API to see how the CPU sends data to the GPU to be drawn. This will really help you understand why the Three.js API is structured the way it is. You will intuitively be able to tell which parts are essentially WebGL wrappers and which parts are the higher level conveniences. Finally, having learned all of this fundamental information, you are more than ready to dive deep into the full Three.js API or any other 3D engine.


Onward and Upward

3D graphics programming is a very wide field of study that can range from complex light physics to very basic animation. Having a good grasp of the fundamentals will make any topic at least approachable. Suddenly you will find that listening to a John Carmack talk isn't that foreign.

I hope this helps some newcomers to 3D graphics programming get a good foundation built up. If you want a more complete educational experience that will guide you through every aspect of 3D graphics programming, there are a few books that I recommend.

All by David H. Eberly, these are extremely detailed textbooks on every aspect of 3D engines. If you really want to become an expert, I highly recommend you pick these up. They aren't cheap, but they are worth it.

Question or Comment?