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.
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.
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: 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.
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:
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.
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.
A talk by Steven Wittens (http://acko.net)
Mikola Lysenko giving an overview of ReGL: https://www.youtube.com/watch?v=rFjszW5L2aw
Here is a talk Gregg gave in 2011 which provides a nice overview of WebGL techniques. https://www.youtube.com/watch?v=rfQ8rKGTVlg
Edward Angel and Dave Shreiner present an overview of the benefits of using WebGL to teach computer graphics.
UC Davis Computer Graphics class, covers core graphics concepts. https://www.youtube.com/watch?v=01YSK5gIEYQ&list=PL_w_qWAQZtAZhtzPI5pkAtcUVgmzdAP8g
UC San Diego class on edX
A code editor in WebGL
Tony Parisi at HTML5 Dev Conf
These functions can be found in a proper library: http://twgljs.org/docs/