Results 1 to 4 of 4

Thread: Multitexture intro

  1. #1

    Multitexture intro

    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.

  2. #2

    Re: Multitexture intro

    I have just changed
    Code :
    // Changed from 0 to 1
    gl.uniform1i(gl.getUniformLocation(gl.program, "texture1"), 1);
    Unfortunately, it still does not work as expected.

  3. #3

    Re: Multitexture intro

    I found and fixed the problem
    Code :
        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.

  4. #4
    Junior Member
    Join Date
    Sep 2012
    Posts
    3

    Re: Multitexture intro

    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?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •