Session 66


We start today by walking through a refactor of our GLTF model loader, which now preserves our model data after load for future processing in JS. After our last stream with Steve Foot, he came back to us with a really clever idea to use the fragment shader to eliminate triangle edges by adding a single attribute to our vertices. We talk through this algorithm, and how our new loader can help support it, before diving into some code.

For our first pass at edge detection, we opt to create a simple line mesh from our triangles, and save Steve’s algorithm for the next session (we suspect the pre-processing will be very similar for both approaches). Our first pass at line detection works remarkably well on the first run, and we see our tank in full, wireframe glory for the first time. There’s still some cases to be ironed out, but we’re off to a good start!


  • The MIT Mystery Hunt for 2021 happened last weekend, and this year played host to a virtual MMO built around MIT’s campus. To take a peek at the puzzles, visit and hit “Public Access”. Dom’s team – thankfully – did not win ;)
  • WebGL’s “line width” property has both a maximum and minimum value of “1.0”. This is an inconvenient – but hilarious – limitation.
  • We’re not there yet, but the WebGL2 Fundamentals article on skinning is a great read
  • We still have a lot of freshening up to do on our linear algebra, but in short…
    • The “dot product” is used when determining if vectors are pointing in the same direction (when normalized, 1 means vectors point in the exact same direction, 0 means vectors are perpendicular, and -1 would be pointing in opposite directions).
    • The “cross product” also applies to two vectors, but returns the normal of the two vectors.
  • Check out the Noclip documentary about Hades here if you’re curious about how that excellent game was crafted:
  • This week, Dom is playing Maneater – the shark-simulator on PS Plus – and Jeff is trying to buy better clothes in Red Dead Online.