I am learning to use multitexture on WebGL. I’d like to do the following:
[ul]
Pass 2 textures to the shader: texture0 and texture1
Display texture0 if I access texture0
Display texture1 if I access texture1
[/ul]
I have the following fragment shader code snippet:
uniform sampler2D texture0;
uniform sampler2D texture1;
varying vec2 v_texCoord;
void main()
{
vec2 texCoord = vec2(v_texCoord.s, 1.0 - v_texCoord.t);
vec4 texel0 = texture2D(texture0, texCoord);
vec4 texel1 = texture2D(texture1, texCoord);
gl_FragColor = vec4(texel0.xyz, texel0.a);
}
I have the following JavaScript code snippet:
// Activate 2 textures
gl.uniform1i(gl.getUniformLocation(gl.program, "texture0"), 0);
gl.activeTexture(gl.GL_TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, photoTexture0);
gl.uniform1i(gl.getUniformLocation(gl.program, "texture1"), 0);
gl.activeTexture(gl.GL_TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, photoTexture1);
The above code always displays texture1 regardless
gl_FragColor = vec4(texel0.xyz, texel0.a);
or (notice the above code accesses texel0 of texture0 and below code accesses texel1 of texture1)
gl_FragColor = vec4(texel1.xyz, texel1.a);
Since the above code does not work as I expected and I am new on this, I am wondering if I have done something wrong or I misunderstand the concept.
Any help is appreciated. Thanks in advance for your help.