0
\$\begingroup\$

I'm having a problem texturing a simple rectangle in my WebGL program, I have the parameters set as follows:

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImage);

I'm using this image: enter image description here

On the properties of this image it says it's 32 bit depth, so that should take care of the gl.UNSIGNED_BYTE, and I've tried both gl.RGBA and gl.RGB to see if it's not reading the transparency. It is a 32x32 pixel image, so it's power of 2. And I've tried almost all the combinations of formats and types, but I'm not sure if this is the answer or not.

I'm getting these two errors in the chrome console:

  1. INVALID_VALUE: texImage2D: invalid image (index):101

  2. WebGL: drawArrays: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'. Or the texture is Float or Half Float type with linear filtering while OES_float_linear or OES_half_float_linear extension is not enabled.

the drawArrays function is simply: "gl.drawArrays(gl.TRIANGLES, 0, 6);" using 6 vertices to make a rectangle.

Here's the main part of the code:

function loadTexture() {
    textureImage = new Image();

    textureImage.onload = function() {
        setupTexture();
    }

    textureImage.src = "jumper5.png";
}

function setupTexture() {
    texture = gl.createTexture();

    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

    /*
    void texImage2D(GLenum target, GLint level, GLenum internalformat,
                    GLenum format, GLenum type, HTMLImageElement image); 
                    // May throw DOMException
    */
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImage);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

    if (!gl.isTexture(texture)) {
        alert("Error: Texture is invalid");
    }

    glProgram.samplerUniform = gl.getUniformLocation(glProgram, "uSampler");
    gl.uniform1i(glProgram.samplerUniform, 0);

}

The shaders are as follows:

<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;

varying highp vec4 vColor;
varying highp vec2 vTextureCoord;

void main(void) {
    gl_Position = vec4(aVertexPosition, 1.0);
    vTextureCoord = aVertexPosition.xy + 0.5;
}
</script>

<script id="shader-fs" type="x-shader/x-fragment">
varying highp vec2 vTextureCoord;
uniform sampler2D uSampler;

void main(void) {
    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
}
</script>

Here's the code with the rectangles vertices and the draw function:

function setupDynamicBuffers() {
    // limit translation amount to -0.25 to 0.25
    var x_translation = Math.sin(angle)/4;

    var triangleVertices = [

     // rectangle top left triangle
    -0.5 + x_translation, -0.5,  0.0, // (-0.25, -0.25)  bottom left
     0.5 + x_translation, -0.5,  0.0, // (-0.25,  0.25)  top left
     0.5 + x_translation,  0.5,  0.0, // ( 0.25,  0.25)  top right

     // rectagle bottom right triangle
     0.5 + x_translation,  0.5,  0.0, // ( 0.25, -0.25)  bottom right
    -0.5 + x_translation,  0.5,  0.0, // (-0.25, -0.25)  bottom left
    -0.5 + x_translation, -0.5,  0.0  // ( 0.25,  0.25)  top right

     ];

     angle += 0.01;

     trianglesVerticeBuffer = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, trianglesVerticeBuffer);
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.DYNAMIC_DRAW);

}

function drawScene() {

    vertexPositionAttribute = gl.getAttribLocation(glProgram, "aVertexPosition");

    gl.enableVertexAttribArray(vertexPositionAttribute);
    gl.bindBuffer(gl.ARRAY_BUFFER, trianglesVerticeBuffer);
    gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);

    //vertexColorAttribute = gl.getAttribLocation(glProgram, "aVertexColor");
    //gl.enableVertexAttribArray(vertexColorAttribute);
    //gl.bindBuffer(gl.ARRAY_BUFFER, trianglesColorBuffer);
    //gl.vertexAttribPointer(vertexColorAttribute, 3, gl.FLOAT, false, 0, 0)

    gl.drawArrays(gl.TRIANGLES, 0, 6);
}
\$\endgroup\$
  • \$\begingroup\$ Tried re-sizing to 128x128 pixels, still didn't work. \$\endgroup\$ – mathacka Oct 27 '13 at 20:46
  • \$\begingroup\$ Did you get textureImage as a return value from gl.createTexture()? You should be passing an object of type Image() to gl.texImage2D... \$\endgroup\$ – Mokosha Oct 27 '13 at 22:38
  • \$\begingroup\$ @Mokosha I added the main parts of the code, sorry I didn't include more on the original. \$\endgroup\$ – mathacka Oct 27 '13 at 22:52
0
\$\begingroup\$

I found the solution to the problem, it needed to have the MIN filter activated, adding:

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);

solved the problem.

| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.