Exhibit 3 Loading and Using More Than One Texture

What We Did

• The way we load an image in Exhibit #0 is troublesome. If we want to load multiple images, we need to chain the callback functions together: once one image loads, we need to start loading the next, and so on. This is a hassle.
• To make life easier, we use a library called PreloadJS.
  • Before you initialize WebGL:

    // Step 1: Create a LoadQueue object.
    var queue = new createjs.LoadQueue();
    // Step 2: Register the callback function to run when all images have loaded.
    queue.on("complete", function() { runWebGL(queue) }, this);
    // Step 3: List the files you want to load, with their correponding ID.
    queue.loadManifest([
        {
            id: "cornell",
            src: "cornell-logo.jpg"
        },
        {
            id: "wood",
            src: "wood1.png"
        },
        {
            id: "checker",
            src: "checker.jpg"
        }
    ]);
    

  • Notice that we pass the queue to the callback function, so that it will have access to the queue and the loaded images.
  • In the callback function, we can retrieve the loaded images from the queue with the following method: queue.getResult(<id>)
    • <id> is the ID you speicified in the above manifest.
    • PreloadJS figures out the file type from the extension, and returns an HTML img object.
    • Sidenote: if you want the raw data instead, use queue.getResult(<id>, true).
  • We can then fetch the loaded images by name and create textures from them:

    var cornellTexture = createTexture(gl, queue.getResult("cornell", false));
    var woodTexture = createTexture(gl, queue.getResult("wood", false));
    var checkerTexture = createTexture(gl, queue.getResult("checker", false));
    

  • The createTexture function does what we did in Exhibit #0 to create a texture. You might find it useful in your programming assignment and final project.
• To use multiple textures, the fragment shader should have multiple uniforms of type sampler2D. Here's the fragment shader code:

  precision highp float;
  
  varying vec2 geom_texCoord;
  
  uniform sampler2D texture0;
  uniform sampler2D texture1;
  uniform sampler2D textureAlpha;
  
  void main() {
      vec4 c0 = texture2D(texture0, geom_texCoord);
      vec4 c1 = texture2D(texture1, geom_texCoord);
      float alpha = texture2D(textureAlpha, geom_texCoord).x;
      gl_FragColor = (1.0-alpha)*c0 + alpha*c1;
  }
  

• Then, we need to hook up the textures to the uniforms. This time, we activate multiple texture units and assign different indices to the uniforms.

  if (program.texture0 != null) {
      gl.activeTexture(gl.TEXTURE0);
      gl.bindTexture(gl.TEXTURE_2D, cornellTexture);
      gl.uniform1i(program.texture0, 0);
  }
  if (program.texture1 != null) {
      gl.activeTexture(gl.TEXTURE1);
      gl.bindTexture(gl.TEXTURE_2D, woodTexture);
      gl.uniform1i(program.texture1, 1);
  }
  if (program.textureAlpha != null) {
      gl.activeTexture(gl.TEXTURE2);
      gl.bindTexture(gl.TEXTURE_2D, checkerTexture);
      gl.uniform1i(program.textureAlpha, 2);
  }
  

• Here are the raw images used: