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.

https://hero.handmade.network/episodes 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:

http://gameprogrammingpatterns.com/game-loop.html

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:

http://gafferongames.com/game-physics/fix-your-timestep

http://www.koonsolo.com/news/dewitters-gameloop/

Unity3D behaviour lifecylce and the updated version of that info: https://docs.unity3d.com/Manual/ExecutionOrder.html

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.

Physics

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:

http://buildnewgames.com/gamephysics/ http://buildnewgames.com/physics-engines-comparison/ http://gafferongames.com/game-physics

Shaders

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:

http://thebookofshaders.com

https://www.shadertoy.com/

Books

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

https://www.youtube.com/watch?v=tgVLb6fOVVc