PDA

View Full Version : Multitexture intro



pion
12-17-2010, 05:22 PM
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:


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.

pion
12-17-2010, 05:57 PM
I have just changed


// Changed from 0 to 1
gl.uniform1i(gl.getUniformLocation(gl.program, "texture1"), 1);

Unfortunately, it still does not work as expected.

pion
12-18-2010, 06:53 AM
I found and fixed the problem


gl.activeTexture(gl.TEXTURE0); // remove the "GL_" on GL_TEXTURE0
gl.bindTexture(gl.TEXTURE_2D, photoTexture0);

gl.uniform1i(gl.getUniformLocation(gl.program, "texture1"), 0);
gl.activeTexture(gl.TEXTURE1); // remove the "GL_" on GL_TEXTURE1


I cut'n'paste the GL_TEXTURE0 from an example written in C language.

cgardner5
09-13-2012, 10:27 AM
Hello pion,
I am learning webgl and am trying to do a multi-texture as well. Is there any way you can post your full working code as an example?