Using array of images as texture in WebGL

Question

How to use an array of textures (which contain different images) in WebGL without initializing each texture separately? I want to display a cube and a pyramid (organized as an array), each with a different texture image. Here is a part of the code (to initialize the textures):

function handleTexture(texture) {
    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.Img);
    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.generateMipmap(gl.TEXTURE_2D);
    gl.bindTexture(gl.TEXTURE_2D, null);
}

function initTextures() {
    for (i=0; i<2; i++) {
        tex[i] = gl.createTexture();
        tex[i].Img = new Image();
        tex[i].Img.onload = function() { handleTexture(tex[i]); }
        tex[i].Img.src = texImgs[i];   // The name of the image file
    }
}

The cube and pyramid are displayed in black color (no texture), and I get this error in the page:

Uncaught TypeError: Cannot read property 'Img' of undefined  // gl.texImage2D()
tex.(anonymous function).Img.onload                          // tex[i].Img.onload = ...

I don't have this error if I initialize the texture separately, not using an array, but tex1 and tex2. Any suggestion on how to do this using array?

You can check this for adding texture to canvas in WebGL

graphics123
– graphics123

2016-03-17 11:57:46 +00:00
Commented Mar 17, 2016 at 11:57 — graphics123
– graphics123, Commented Mar 17, 2016 at 11:57

Dragan Okanovic · Accepted Answer · 2013-09-06 10:43:23Z

1

When you do:

tex[i] = gl.createTexture();

tex[i] becomes a type of WebGLTexture and you cannot attach new properties on that object as you did with .Img property. So slightly more correct version would be:

var tex = [], texImgs = ['pyra.jpg', 'cube.jpg'];

function handleTexture(myTexture) {
    myTexture.texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, myTexture.texture);

    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, myTexture.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.generateMipmap(gl.TEXTURE_2D);
    gl.bindTexture(gl.TEXTURE_2D, null);
}

function initTextures() {
    for (var i=0; i<2; i++) {
        (function(index) {
            tex[index] = new Object();
            tex[index].texture = null;
            tex[index].image = new Image();
            tex[index].image.onload = function() { handleTexture(tex[index]); }
            tex[index].image.src = texImgs[index];   // The name of the image file
        })(i);
    }
}

Note that you create an object that has image and texture property separated.

Hope this helps you.

EDIT:

Closure messes the index of the tex.

edited Sep 6, 2013 at 10:43

answered Sep 6, 2013 at 9:37

Dragan Okanovic

7,7713 gold badges35 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

ArthurN Over a year ago

Tried this, but now the cube and pyramid are not displayed. Then have this error: Uncaught TypeError: Cannot set property 'Img' of undefined (in tex[i].Img = new Image()). Anyway, if I initialize the texture not using an array, but tex1 = gl.createTexture(), afterwards I still can set tex1.Img = new Image().

Dragan Okanovic Over a year ago

Edited answer, try creating tex[i] as new object, maybe that is the problem.

ArthurN Over a year ago

The cube and pyramid are displayed now, but still in black. Then there's this error: Uncaught TypeError: Cannot set property 'texture' of undefined (myTexture.texture = gl.createTexture()).

Dragan Okanovic Over a year ago

Edited. I totally forgot about closure that doesn't exist in for loop, and async call of the tex[i]. It literally was trying to call handleTexture on tex[3]. This now should work 100%. :]

ArthurN Over a year ago

Thanks! It's working now. Anyway, it seems that WebGL really hates array.

|

Collectives™ on Stack Overflow

Using array of images as texture in WebGL

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related