Matter and Void | Tech Writing

Some thoughts and notes related to software and technology

Notes on learning computer graphics

2017-02-26T09:37:00Ztech writing

A few months ago I began diving into computer graphics programming with the platform of choice being WebGL. I knew libraries like Three.js existed, but when learning a new domain, I like to see what the primitives are so that I know what the limits of the platform are versus the limits of the tools and abstractions I’m using. This is a content dump of various resources I’ve discovered on my journey.

A good, fast-paced overview of what WebGL itself offers is Gregg Taveres’ WebGL Fundamentals. After going through these I was left with a new pile of topics to learn from shaders and vector math, to 3D modeling and game physics.

Game development

One of the main points of Gregg’s tutorials is that WebGL is just a drawing API, to get interesting results you have to perform the math and manipulation of data that represents vertices and colors, among other things. I realized that these problems are what game developers have been doing for decades. So, while you may not be interested in creating games, it is worth while to learn enough about game programming to know what techniques to steal.

One of the best resources for learning game development is Handmade Hero by Casey Muratori. There is a ton of material here, but you can pick and choose topics of interest.

My search for how to get real work done led me to the book WebGL Game Development (linked below), this is a great place to start getting a feel for how to make things happen with WebGL and a browser.

Simulation loops

Along the way I happened upon Game programming patterns; unfortunately it is steeped in object oriented dogma. I still recommend reading it though, as it does contain some gems, the most important being the game loop chapter:

This is a fundamental topic when doing any animation and there isn’t much out there about it. Even the WebGL fundamentals chapter on animation gets it wrong (recommends using a variable time step).

The footnotes in the chapter includes references to other helpful articles on game loops:

Unity3D behaviour lifecylce and the updated version of that info:

The talk “We will all be game programmers” linked below also touches on this important concept.

The big insight for me was that there are really two separate loops in all simulations, a physics (AKA state management) loop and a rendering loop.

By separating how these two systems update you can control how your game performs on a wide variety hardware with varying performance characteristics.


One thing that was not obvious to me is that the physics you use in games is not of the analytical kind like you find in high school and college classes, but is numerical instead. Meaning, you’re mostly using fairly simple algebraic formulas in your code instead of manipulating abstract symbols. The concepts may be similar but the applications are quite different.

I’m only beginning to dig into this subject but here are some resources I’ve found useful:


One quick point is that if you just want to render a “typical” 3D scene you really only need one vertex and fragment shader that handles rendering in 3D perspective and uses Gouraud or Phong shading, once these are set you can mostly use them without thinking about them.

Shaders is its own fascinating world which can be a dedicated area of study.

Some resources that focus just on fragment shaders:


WebGL Game Development

For showing actual examples and containing runnable code, this book stands alone. It shows how to perform practical tasks like exporting models from Blender and rendering them via WebGL. A lot of the code samples are from parts of Three.js, but instead of just using that API like a magic black box, the author guides you through how the code works, providing much needed insights into how to actually get stuff done and understand what is happening.

WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL This book provides a low level view of the WebGL API, but isn’t very practical as far as getting work done goes.

Interactive Computer Graphics: A Top-Down Approach with WebGL (7th Edition)

This is a book about computer graphics intended for use as an undergraduate class textbook. I found the book via a talk the authors gave at SIGGRAPH


Some of the more insightful talks I’ve found along the way.

We will all be game programmers

A talk by Steven Wittens (

Making WebGL Dance

Mikola Lysenko giving an overview of ReGL:

Here is a talk Gregg gave in 2011 which provides a nice overview of WebGL techniques.

Edward Angel and Dave Shreiner present an overview of the benefits of using WebGL to teach computer graphics.

Online classes

UC Davis Computer Graphics class, covers core graphics concepts.

UC San Diego class on edX

A code editor in WebGL

Tony Parisi at HTML5 Dev Conf


WeGL Utils

These functions can be found in a proper library:




Dan Vingo
This is the personal site of Daniel Vingo