Creating texture from getImageData (Javascript)

Question

It is possibile to create a texture (to use on a element in a canvas) from the getImageData array of another canvas (in the same html page)? maybe without three.js? Thanks a lot

Answer 1

The coolest thing about WebGL's texImage2D method is that its last argument can be a DOM element instead of an ArrayBuffer, in which case it copies its rendered content into your texture object.

For example:

var canvas2d = document.getElementById('canvas2d');
gl.bindTexture(gl.TEXTURE_2D, myTexture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas2d);

There's a little tutorial about this feature here.