Exhibit 4 Textures and Transparency

What We Did

• Some image file formats contain the alpha channel, which specifies the transparency of the pixels.
  • PNG and GIF file formats have it, but JPG does not.
• Here, we have three images:

  Sky	Mountain	Ground

• In WebGL, the alpha channel is generally used in tandem with blending.
  • However, you can write your shader to do whatever you want with it, like what we did in Exhibit #3.
• To implement image opacity that is commonly associated with the alpha channel, you need to do three things:
  • Before drawing, let WebGL know that you would like to blend values from different fragments, and specify how they should blend:

    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

  • Draw multiple pieces of geometry that reference the different textures. Draw your images from BACK TO FRONT. This is very important.
  • In the fragment shader, just fetch and output the texture value. No special processing is required.
• Sidenote: we took these images from OpenGameArt. They were created by bevouliin.com, and the images are in the public domain. We're very grateful to this generous artist.
  • If you want to look for art assets for your final project, OpenGameArt is a good place to start.