Let's cover an example of multi-texturing in action:
- Open the ch07_05_multi-texture.html file with your editor.
- At the top of the script block, add another texture variable:
let texture2;
- At the bottom of the configure function, add the code to load the second texture. We're using a class to make this process easier, so the new code is as follows:
texture2 = new Texture();
texture2.setImage('/common/images/light.png');
- The texture we're using is a white radial gradient that simulates a spot light:
- In the render function, directly below the code that binds the first texture, add the following to expose the new texture to the shader:
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, texture2.tex);
gl.uniform1i(program.uSampler2, 1);
- We need to add the new sampler uniform to the fragment shader: ...