Now that we’ve got the most basic 3D objects drawing on screen, we commence an ill-advised charge directly toward a synthwave aesthetic of which the zeitgeist is rapidly tiring. First on the list is wireframe shading. How the hell do you do it?
First, we study how to get the fragment shader to do lines, which requires adding barycentric coordinates to our vertex attributes. It turns out to be easier to implement than pronounce, although we still manage to trip over the little things. By the end, we are left with one big question: how do we get rid of triangle edges that we don’t want?
Notes/highlights
- We have a new blog post on our TypeScript build process: https://jeffanddom.com/devlog/2021-01-07-how-jeff-and-dom-make-the-game/
- Deferred shading, a now-pervasive technique for composing multiple screen-size renders into a final scene: https://en.wikipedia.org/wiki/Deferred_shading
- The “fract” shader function, which gives you the decimal piece of a floating point value: https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/fract.xhtml
- The “fwidth” shader function, which is a coarse measure of how quickly an attribute (or derived attribute expression) is changing at a given screenspace fragment: https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/fwidth.xhtml
- When compiling and linking shaders, don’t forget to use the status and log functions to make sure the shader program doesn’t have any errors.
- The barycentric coordinate system, which is integral to how fragment shaders are implemented: https://en.wikipedia.org/wiki/Barycentric_coordinate_system
- Alpha blending didn’t work in our stream because we didn’t actually enable it. Here’s how to do that: https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendFunc#examples
- Maneater, a game where you play a shark: https://en.wikipedia.org/wiki/Maneater_(video_game)
- Julianne Moore’s “the story is ludicrous” quote from Big Lebowski (NSFW): https://youtu.be/lKuyOh4RPnI?t=304
- Many Japanese game devs use the Rodin font for English text, including Sony themselves: https://fontsup.com/font/sce-ps3-rodin-latin-regular.html
- Freya Holmér’s Math for Game Devs series: https://www.youtube.com/playlist?list=PLImQaTpSAdsD88wprTConznD1OY1EfK_V
- 3blue1brown is my go-to YouTube math explainer. Here’s their series on linear algebra: https://www.youtube.com/playlist?list=PLZHQObOWTQDPD3MizzM2xVFitgF8hE_ab