I am learning to use multitexture on WebGL. I'd like to do the following:
  • Pass 2 textures to the shader: texture0 and texture1
    Display texture0 if I access texture0
    Display texture1 if I access texture1


I have the following fragment shader code snippet:
Code :
    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:
Code :
    // 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
Code :
		gl_FragColor = vec4(texel0.xyz, texel0.a);
or (notice the above code accesses texel0 of texture0 and below code accesses texel1 of texture1)
Code :
		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.