Creating and uploading a texture

First off, for various reasons your browser will naturally load textures "upside down" from how textures are traditionally used in desktop OpenGL. As a result, many WebGL applications specify that the textures should be loaded with the Y coordinate flipped. This is done with a single call from somewhere near the beginning of the code.

gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

Whether or not you use this mode is up to you, but we will be using it throughout this chapter.

The process of creating a texture is very similar to that of creating a vertex or an index buffer. We start by creating the texture object as follows:

var texture = gl.createTexture();

Textures, like buffers, must be bound before we can manipulate it in any way.

gl.bindTexture(gl.TEXTURE_2D, texture);

The first parameter indicates the type of texture we're binding, or the texture target. For now, we'll focus on 2D textures, indicated with gl.TEXTURE_2D in the previous code snippet. More targets...