WebGL and JavaScript

As we learned in the previous chapter, working with the 2D canvas was pretty straightforward. To draw an image, you just need to translate the context to the pixel coordinates where you want to draw the image, and call the drawImage context function by passing in the image, its width, and its height. You could make this even simpler and forget about the translation passing the x and y coordinates directly into the drawImage function if you prefer. With the 2D canvas, you are working with images, but with WebGL, you are always working with 3D geometry, even when you are coding a 2D game. With WebGL, you will need to render textures onto geometry. You need to work with vertex buffers and texture coordinates. The vertex shader we wrote earlier takes 3D coordinate data and texture coordinates and passes those values onto a fragment shader that will interpolate between the geometry, and use a texture sampling function to retrieve the proper texture data to render pixels to the canvas.