WebGL setting different textures

Question

I'm working on an existing project in WebGL and there is something wrong with the textures, i'm having some trouble setting the right texture to the right object, on the khronos.org forum I have some screenshots and code of what happens.

http://www.khronos.org/message_boards/viewtopic.php?f=43&t=5203

at the moment I'm creating a small box just to learn how everything works, but it gets the texture from the walls and floor on it.

http://tinypic.com/r/23mr1j8/6

Thank you in advance.

here is the "handleloadedtexture"

function handleLoadedTexture(texture, image) {
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE,
            texture.image);

    if (isPowerOfTwo(texture.image.width) && isPowerOfTwo(texture.image.height)) {
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    } else {
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    }



    gl.bindTexture(gl.TEXTURE_2D, null);

    texturesToLoad--;
}

All the textures are loaded, I can switch between them if I change something in this part:

  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, texture0);
  gl.uniform1i(shaderProgram.texture0Uniform, 0);


  gl.activeTexture(gl.TEXTURE0 + 1);
  gl.bindTexture(gl.TEXTURE_2D, texture1);
  gl.uniform1i(shaderProgram.texture1Uniform, 1);

  gl.activeTexture(gl.TEXTURE0 + 2);
  gl.bindTexture(gl.TEXTURE_2D, texture2);
  gl.uniform1i(shaderProgram.texture2Uniform, 2);

  gl.activeTexture(gl.TEXTURE0 + 3);
  gl.bindTexture(gl.TEXTURE_2D, texture3);
  gl.uniform1i(shaderProgram.texture3Uniform, 3);

My shader:fs looks like this:

 <script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif

varying vec2 vTextureCoord;
varying float vTextureID;
varying vec4 vColor;

uniform sampler2D uTexture0;
uniform sampler2D uTexture1;
uniform sampler2D uTexture2;

void main(void) {
    vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
    if (vTextureID < 0.1)
        gl_FragColor = texture2D(uTexture0, vTextureCoord.st);
    else if (vTextureID < 1.1)
        gl_FragColor = texture2D(uTexture1, vTextureCoord.st);
    else if (vTextureID < 2.1)
        gl_FragColor = texture2D(uTexture2, vTextureCoord.st);
    else if (vTextureID < 3.1)
        gl_FragColor = texture2D(uTexture3, vTextureCoord.st);

can you see something wrong with it?

Just updated it :) I think the problem may be at how the last person coded the shaders...but I'm not sure of it... — Lucas Nachtigall
I don't see anything obviously wrong. I'm guessing based on your pictures that all 4 images are not loading. If you add console.log("loaded: " + image.src); to handleLoadedTextures and also at the end add if (texturesToLoad == 0) { console.log("loaded all textures"); } that might help find the issue. Basically if you never load all 4 textures you'll get the bad image because the code doesn't setup the textures for drawing unless all 4 have loaded. You could also try texture0.image.onerror = function() { console.log("error loading image"; }; and the same for other textures. — gman

user2648899 user2648899 · Accepted Answer · 2013-08-03T15:31:07

uniform sampler2D uTexture0;
uniform sampler2D uTexture1;
uniform sampler2D uTexture2;

add one more line:

"uniform sampler2d uTexture3;"

for the statement

"gl_FragColor = texture2D(uTexture3, vTextureCoord.st);"

However might have something else too...

WebGL setting different textures

1 Answers