O'Reilly logo

WebGL Beginner's Guide by Brandon Jones, Diego Cantor

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required