Exhibit 0 Using an Image Texture

What We Did

• Loading and using a texture is a multi-step process. You have seen most of these steps already.
• First, you need to load the image.
  • Create a Javascript Image object, which is an img tag in the HTML document.
  • Set the callback function that gets called when the image loading is completed.
  • Set the src field of the image object to the file name that you want. This starts loading the image, but does not finish before continuing. This is why we need a callback function.
  • Code:

    var cornellImage = new Image();
    cornellImage.onload = function() {
        runWebGL(cornellImage);
    };
    cornellImage.src = "cornell-logo.jpg";

  • The runWebGL function takes the image instance and proceeds to run WebGL with it (creating the WebGL 1 context, starting the rendering loop, etc.). It is important that the image is loaded before we proceed with WebGL; otherwise, we cannot transfer it to the GPU.
• Second, you need to create the WebGL texture object to hold the image data in GPU memory.
  • Here are the steps:

    // Step 1: Create the texture object.
    var cornellTexture = gl.createTexture();
    // Step 2: Bind the texture object to the "target" TEXTURE_2D
    gl.bindTexture(gl.TEXTURE_2D, cornellTexture);
    // Step 3: (Optional) Tell WebGL that pixels are flipped vertically,
    //         so that we don't have to deal with flipping the y-coordinate.
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    // Step 4: Send the image data to the GPU.
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, cornellImage);
    // Step 5: Clean up. Tell WebGL that we are done with the target.
    gl.bindTexture(gl.TEXTURE_2D, null);

  • The TEXTURE_2D target tells us that we are dealing with the 2D texture system, that is, we are reading from an image where each pixel is indexed with two coordinates. There are other targets such as TEXTURE_CUBE_MAP, and WebGL 2 has TEXTURE_3D.
    • In a sense, WebGL API deals with one texture at a time, that is, whichever is bound to the appropriate target. Remember to bind the image before using it in any context.
  • texImage2D sends the image data to the GPU.
    • See Textures (Part 1) for more information on the function arguments.
    • Alternatively, you can look at the documentation here.
    • When using image data, you can use this version of the function:

      void gl.texImage2D(target, level, internalformat, format, type, HTMLImageElement? pixels);

      • pixels can just be the Image object. This already knows the size of the image, so these arguments are omitted.
• Third, write your shader so that you can use the texture.
  • Texture usage is mostly in the fragment shader, so we'll talk about texture access in fragment shader here.
    • You can do it in the vertex shader too, but it's a little more cumbersome.
  • Declare a uniform with type sampler2D in your fragment shader.

    uniform sampler2D texture;

  • To fetch a pixel value from the texture, use the texture2D(<sampler2D>, <texCoord>) function.
    • The <texCoord> parameter must be a vec2.
    • The return value is a vec4, so it has the 4 RGBA channels.
  • For example:

    precision highp float;
    
    varying vec2 geom_texCoord;
    
    uniform sampler2D texture;
    
    void main() {
        gl_FragColor = texture2D(texture, geom_texCoord);
    }

  • The texture coordinate (stored in geom_texCoord) comes from the vertex shader:

    attribute vec3 vert_position;
    attribute vec2 vert_texCoord;
    
    varying vec2 geom_texCoord;
    
    void main() {
        gl_Position = vec4(vert_position, 1.0);
        geom_texCoord = vert_texCoord;
    }

  • In general, the vertex shader will specify the varying variable that is interpolated into the texture coordinate at each fragment. The fragment shader will use that texture coordinate to fetch pixel values from the texture.
• Lastly, you need to hook up your texture object with the uniform in the GLSL program.
  • First, use your program.
  • Then:

    if (gl.getUniformLocation(program, "texture") != null) {
        // Step 1: Activate a "texture unit" of your choosing.
        gl.activeTexture(gl.TEXTURE0);
        // Step 2: Bind the texture you want to use.
        gl.bindTexture(gl.TEXTURE_2D, cornellTexture);
        // Step 3: Set the uniform to the "index" of the texture unit you just activated.
        var textureLocation = gl.getUniformLocation(program, "texture");
        gl.uniform1i(textureLocation, 0);
    }

  • Do all of the above before you actually draw your geometric primitive.