Animated textures in webgl

[grayhuskie]

Hi! I'm pretty new with webgl and there seems to be very little help for it on google.

I'm trying to make an animated texture for a character walking, but I can't get it to work.

All it'll do is flash the last texture I loaded and show nothing when it should be showing the other ones.

 

Here's the relevant parts of my code:

 

Loading textures:

var TDCTexture;var TDCAnimation = [];function initTexture() {        var frames = 3;        for (var i = 1; i <= frames; i++)        {            TDCTexture = gl.createTexture();            TDCTexture.image = new Image();            TDCTexture.image.onload = function () {                handleLoadedTexture(TDCTexture)            }                    TDCTexture.image.src = 'TDC' + i + '.gif';            TDCAnimation.push(TDCTexture);        }    }

Handling textures once they load:

function handleLoadedTexture(texture) {        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);                gl.bindTexture(gl.TEXTURE_2D, texture);        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);        gl.bindTexture(gl.TEXTURE_2D, null);    }

the object's drawing function, which gets called every frame:

var currentTexture;    TDC.prototype.draw = function (){        currentTexture = TDCAnimation.pop();        TDCAnimation.unshift(currentTexture);                //console.log('drawing ' + currentTexture.image.src)        gl.activeTexture(gl.TEXTURE0);        gl.bindTexture(gl.TEXTURE_2D, currentTexture);        gl.uniform1i(shaderProgram.samplerUniform, 0);        gl.bindBuffer(gl.ARRAY_BUFFER, TDCVertexTextureCoordBuffer);        gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, TDCVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);        gl.bindBuffer(gl.ARRAY_BUFFER, TDCVertexPositionBuffer);        gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, TDCVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);        setMatrixUniforms();        gl.drawArrays(gl.TRIANGLE_STRIP, 0, TDCVertexPositionBuffer.numItems);    }

Any ideas?

 

Thanks!!