Summary

In this chapter, we have discussed WebGL and how it can improve performance in web games. I have introduced you to the concept of GLSL shaders and talked about vertex shaders and fragment shaders, what the differences between the two types of shaders are, and how they are used to render a combination of geometry and images to the HTML5 canvas.

We also recreated the moving spaceship that we created with the 2D canvas using WebGL. We have discussed how to use vertex geometry to render 2D images to a 3D canvas. We also talked about the differences between the pixel-based 2D canvas coordinate system and the 3D WebGL coordinate system.

WebGL is a broad topic to cover, so a single chapter can only give a very cursory introduction at best. WebGL is a 3D rendering space, and in this chapter, I went out of my way to ignore that and treat it like a 2D space. You could take what we have done here and build on it, but to improve the performance of our application, we will be using the WebAssembly SDL API for all of our interactions with WebGL in the future. If you would like to learn more about WebGL, Packt has a large selection of books devoted entirely to WebGL at https://search.packtpub.com/?query=webgl.

In the next chapter, I will teach you the basics of SDL, what it is, and how it works with WebAssembly. We will also learn how to render a sprite to the HTML5 canvas using SDL, animate it, and move it around the canvas.