Blank texture in webGL

Question

I have simple quad, and very simple shader (see below). I load image needed for texture, process it, get uniform place in shader program, and send it, the way that has been explained in "learning webgl" examples. I tested everything and used webGL inspector to see the textures I've been using and the problem is that quad is whole black. In fragment shader, the line:

gl_FragColor = texture2D( uSampler, vUV);

actually always sets the fragment color to (0,0,0,1). So it's like "blank" texture, or all-black with alpha equals to 1 texture, which is not the same as image I'm trying to attach.

If anyone encountered similar problem and knows how to fix it, please tell me. It's done in Chrome, with --allow-file-access-from-files flag, html page, js/webgl code and image are local, I even tested it on my server, with no results.

Vertex:

attribute vec3 aVertexPosition;
attribute vec2 aUV;
uniform mat4 uPMatrix;
uniform mat4 uMVMatrix;
varying vec2 vUV;
void main() {
vUV = aUV;
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}

Fragment:

uniform sampler2D uSampler;
varying vec2 vUV;
void main() {
gl_FragColor = texture2D( uSampler, vUV)
}

Texture loading and attaching:

var tex = new CHAOS.Texture().load2D("ch.jpg");
var mat = new CHAOS.Material().fromScript("v1", "f1");
mat.addTexture("uSampler", tex);

loading function:

load2D: function(url) {
    function handleTextureLoaded(image, texture, gl) {
        gl.bindTexture(gl.TEXTURE_2D, texture);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
        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.generateMipmap(gl.TEXTURE_2D);
        gl.bindTexture(gl.TEXTURE_2D, null);
    }

    var tex, im, gl = CHAOS.__R.context;

    tex = gl.createTexture();
    im = new Image();
    im.src = url;
    im.onload = function() { handleTextureLoaded(im, tex, gl); }


    return tex;
},

and addTexture:

addTexture: function(name, texture) {
    this.maps[name] = texture;
    this.locUnif(name);
}

in render function there's part:

for(var key in mate.maps) {
  gl.activeTexture(gl.TEXTURE0 + tex_count); // some problem with int+string, don't look at it
  gl.bindTexture(gl.TEXTURE_2D, mate.maps[key]);
  gl.uniform1i(shaderProgram.unif[key], tex_count);     
  tex_count++;
}

A sampler gives you opaque black if the texture is not properly configured, so that's where the problem probably is. Show us your texture-loading and uniform-setting code, and maybe also your UV coordinates. — Kevin Reid
Is your texture a power of 2 dimension on each side? If not you can't set filtering to gl.LINEAR_MIPMAP_NEAREST and you can't call gl.generateMipmap. — gman
it is power of two. I tried animating scene, and I put gl.isTexture in rendering function. the very first call tells it's not texture, others say that it is, but still all black. webGL inspector shows that texture has been loaded properly and getting uniform location also returns expected value. — Abstract Algorithm
For adding a texture to canvas in webgl, you would like to see this — graphics123

Abstract Algorithm Abstract Algorithm · Accepted Answer · 2013-05-05T20:34:29

I declared property .isReady on texture, and put on 'true' in the end of the image's onload callback function. Then in render function I just check if it .isReady and send it to gpu. If animation is running, it will probably be visible in the second or third frame, depending on image size and the time it takes to be loaded. The problem was that I used local variable for buffered arrays, so they would be discarded after first frame was rendered (because I buffer data only once). All fine now.

If someone encounteres similar problem with blank texture, check if the right values are being sent with gl.uniform1i, check that the binded texture is actual webGL texture object and check how your attributes are going.

Blank texture in webGL

1 Answers