Session 51

Another Dimension, Another Dimension

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!