Jump to content

Animated textures in webgl


Recommended Posts

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?



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...