Wait what? This is completely redundant and will negatively impact performance and memory.
It turns out that the files are roughly the same size since the parser just shuffles the data around to make it easier to pass to your uniforms later.
`f16-model.obj` -> 396.9 kB (396947 bytes)
`f16-model.json` -> 397.5 kB (397534 bytes)
Using pre-parsed `JSON` here helps you avoid needing to parse your `.obj` file during runtime. Plus, since JS runtimes are heavily optomized for JSON, this seemed like a good starting place.
Super open to better alternatives of course!
Once you hand off the vertices to the WebGL context, it's all the same bits; your file loading strategy has no performance or memory impact.
JSON is nice as a hand-editable text format. It isn't designed to be fast to parse, or to produce small files.
Granted, you could say they could reduce total memory usage by not parsing it all at the same time or something, but one way or another, you'll have to parse it into JS.
Sounds like they just liked json
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".
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.
If you want to learn WebGL itself try http://webglfundamentals.org
If you just want to get 3D on your page without having to learn WebGL use THREE.js
So I'm fond of the idea of being able to quickly get up and running with small modules, hence me working on things like this. Totally hear and agree with you on most of the WebGL being "hidden" here.
I hope to work on more tutorials that dive into how the sausage is made, but for now you can look at the implementation on GitHub -> https://github.com/chinedufn/load-wavefront-obj