2D canvas to WebGL

Let's begin by copying out canvas code from the Chapter02 directory into the Chapter03 directory. Next, we are going to rename the canvas_shell.html file to webgl_shell.html. We will rename canvas.css to webgl.css. Lastly, we will rename the canvas.c file webgl.c. We will also need to make sure that we copy over the spaceship.png file. We are not going to be changing the webgl.css file at all. We will make the most significant changes to the webgl_shell.html file. There is a lot of code that must be added to make the switch from 2D canvas to WebGL; almost all of it is additional JavaScript code. We will need to make some minor tweaks to webgl.c so that the ship's position in the MoveShip function reflects the WebGL coordinate system with its origin in the center of the canvas.

Before we begin, I would like to mention that this WebGL code is not meant to be production ready. The game we will be creating will not use WebGL in the way that I am demonstrating here. That is not the most efficient or scalable code. What we are writing will not be able to render more than one sprite at a time without significant changes. The reason I am walking you through what it takes to render 2D images using WebGL is to give you an idea of what is going on behind the scenes when you are using a library like SDL. If you do not care how things work behind the scenes, no one will fault you for skipping ahead. Personally, I always prefer knowing a little more.