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,

Jennifer

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.

Answer 2

Thats the point of getImageData, getting an image to manipulate it and then draw on any canvas.

imageData = someContext.getImageData(0, 0, canvasWidth, canvasHeight);
anotherContext.putImageData(imageData, 0, 0);

doing things like: http://jsfiddle.net/jaibuu/myRGr/

If you don't intend to do pixel manipulation, you should only use drawImage(), without getImageData/putImageData which are slower though.

Answer 3

Yes, texImage2D can take an ImageData.

var imageData = some2DCanvasContext.getImageData(...);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imageData);

Here are is one of the WebGL conformance tests that test this functionality

https://www.khronos.org/registry/webgl/sdk/tests/conformance/textures/tex-image-and-sub-image-2d-with-image-data.html