Texture Objects

Texture images are represented using objects in a fashion very similar to buffer objects. We can create an arbitrary number of them, but only one of them is bound at any moment.

The actual use of textures begins with a bit of ceremony. An image origin is at the upper-left, but a texture origin is at the lower-left. To account for this, configure the GL to flip all image inputs along the Y axis.

〈Texture Initialization〉 ≡
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)

Creating a texture object is familiar.


But supplying its data is not. A Javascript Image is requested via the network. We must await its arrival and fill the texture object with data only after it arrives.

    modelImage = new Image()
    modelImage.onload = function() {
        loadTexture(modelImage, modelTexture)
    modelImage.crossOrigin = “anonymous
    modelImage.src = “tinyhouse.png

Setting the src triggers the request.

When the image arrives, the onload function is invoked. It initialized the texture object using the Image as follows.

  function loadTexture(image, texture)
    gl.bindTexture(gl.TEXTURE_2D, texture)
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image)
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
    Request a frame of animation

Those texParameteri functions will be explained soon.