We’re doing it. It’s finally time to move our renderer from 2D to 3D (and take a short break from working on our netcode). We’re still going to be using the Canvas element, but switching the rendering mode to use WebGL2. As we dug in, we found that some parts were similar, and – as expected – some that weren’t.
After updating our screen clearing function, we looked at the changes that would be required for our camera and renderable systems. Then, we aimed for the basic first step of rendering a square on the screen. OpenGL doesn’t make this a simple process at all, so we followed a tutorial to make sure we nailed the initial boilerplate.
We created two basic shaders using GLSL: a vertex shader and a fragment shader. The vertex shader puts our points on the screen, and the fragment shader lets us specify what color(s) should be displayed. We passed our shaders to the GPU, and began setting up our triangle points for drawing. Unfortunately, we finished the stream with a bug in our WebGL, and didn’t get our rectangle on the screen…yet!
- Adding on to last week, our Transform data is living in a ComponentTable now too! We take a brief look at our new shared interface at the start of the stream.
- Erlang is a neat language built by Ericsson (yes, the phone company) designed for running telephony switches. One of it’s modern descendants is Elixir, which focuses on making it easier to build high-performance web apps https://elixir-lang.org
- Some of the documentation we ended up looking at:
- MDN’s WebGL documentation: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API
- How to draw a square with WebGL: https://www.creativebloq.com/javascript/get-started-webgl-draw-square-711298 (what we didn’t know when we started: this one is super old!)
- While we’re rendering triangles by passing three points per triangle, triangle fans and triangle strips are two clever alternate ways to present triangle data https://en.wikipedia.org/wiki/Triangle_fan, https://en.wikipedia.org/wiki/Triangle_strip