Exhibit 3 Loading and Using More Than One Texture

What are we doing?

• The way we load an image in Exhibit #0 is troublesome. If we want to load multiple images, we need to chain the callback function together, and that is a hassle.
• To make life easier, we use a library called PreloadJS
  • Before you start the WebGL business:

    // Step 1: Create a LoadQueue object.
    var queue = new createjs.LoadQueue();
    // Step 2: Register the callback function.
    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 there.
  • In the callback function, we can retrieve the loaded images from the queue with the following method: queue.getResult(<id>, false)
    • <id> is the ID you speicified in the above manifest.
    • false here means that you want the img tag, not the raw data.
  • 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 code of our fragment shader:

  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);
  }