WebGL Beginner's Guide

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 ...