WebGL Multi-texture Demo — LOADING TEXTURES
This WebGL demo uses two textures in the same shader program. To do this, it uses two texture units, and it used two sampler varables in the shader. One texture provides a basic color for the image. That basic color can then be modified by the color from the second texture.
The "Mode" popup menu sets the formula that is used to combine the colors from the two textures. The values can be multiplied, they can be averaged, or the second color can be subtracted from the first. Use the "Replace" mode to see the second texture with no contribution from the first texture. Use the "Ignore" mode to see the first texture with no contribution from the second.
The program uses 11 texture images. Each texture has been loaded into its own VBO. So, to change from one texture to another, it is only necessary to bind a different buffer. The values of the sampler variables are set to 0 and 1 during initialization and are never changed, since the same two texture units are used in all cases; only the VBOs that are bound to the texture units are changed.
One of the images (Mandelbrot) can be used as either the first texture or the second texture; this is done just to demonstrate that you can use the same texture VBO with two texture units, even at the same time.
The texture can be displayed either on a square or on a ring. When the ring is used, four copies of the texture are shown around the ring.
When the "Wavy" checkbox is checked, a distortion is applied to the texture. This is done my modifying the texture coordinates, by the formula: texCoords.y += 0.25 * sin(6.28*texCoords.x). This can be thought of as a non-linear texture transformation.
