<i>"Right now we have an f16-model.obj file. This file is a text file that contains data about our model’s vertices. In order to make use of this data, we parse it into more readily accessible structure and store it as JSON."</i><p>Wait what? This is completely redundant and will negatively impact performance and memory.
If you're already familiar with Javascript, and you want to learn WebGL, I recommend just diving into THREE.js instead.<p>The problem with this tutorial is that almost all of it is hidden behind an opaque "loadWFObj", so you don't get the critical aha moments of "wait so the model is just a bunch of 3d triplets?", "whoa every camera is just a 4x4 matrix you multiply by", and "shaders are a C program that runs on a pixel".<p>I promise you'll pick up all of these things naturally by fiddling around with THREE.js. But, you probably won't get there by copying a WebGL context initialization example that does everything interesting inside an opaque library.
This might be useful for people who want to get started with WebGL and web-based 3D engines:<p><a href="https://playcanvas.com/" rel="nofollow">https://playcanvas.com/</a>
<a href="http://babylonjs.com/" rel="nofollow">http://babylonjs.com/</a>
<a href="https://threejs.org/" rel="nofollow">https://threejs.org/</a>
<a href="https://github.com/GooTechnologies/goojs" rel="nofollow">https://github.com/GooTechnologies/goojs</a>
<a href="https://whsjs.io/#/" rel="nofollow">https://whsjs.io/#/</a>