Texture to data URI in THREE.js - three.js

Question

Most of the people have opposite problem, but I want to ask is there any simple way to get texture data back to the data URI.
I am using render to texture (RTT) to render the scene in background (with different camera). I want to be able to send this data to the server or just display in img element for test purpose.

Answer 1

Since you asked specifically for the render to texture case, there's a function for that in another answer: https://stackoverflow.com/a/18804083/3640489
Suppose you have a THREE.WebGLRenderTarget defined like so:
var renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, {
minFilter: THREE.NearestFilter,
magFilter: THREE.NearestFilter,
format: THREE.RGBAFormat
});
Then you get the WebGLRenderingContext from the renderer and call the function:
var gl = renderer.getContext();
var webglTexture = renderTarget.__webglTexture;
var img = createImageFromTexture(gl, webglTexture, width, height);

Answer 2

Thanks guys for the help. I have figured out one solution. Probably it could be done simpler, but this solution works and looks quite fast.
RTT
this.renderer.render(this.scene, camera, this.rttTexture, true);
Get scene data.
this.pixelsIn = new Uint8Array(4 * 1024 * 1024);
var gl = this.renderer.context;
var framebuffer = this.rttTexture.__webglFramebuffer;
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
gl.viewport(0, 0, 1024, 1024);
gl.readPixels(0, 0, 1024, 1024, gl.RGBA, gl.UNSIGNED_BYTE, this.pixelsIn);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
Create 2d context.
this.printScreenCanvas = document.createElement("canvas");
this.printScreenCanvas.width = 1024;
this.printScreenCanvas.height = 1024;
this.printScreenContext = this.printScreenCanvas.getContext('2d');
Create storage for 2d context.
this.pixelsOut = this.printScreenContext.createImageData(1024, 1024);
Must convert data + flip Y.
var row, col, k = 4*1024;
for(var i=0; i<this.pixelsIn.length; i++) {
row = Math.floor(i/k);
col = i % k;
this.pixelsOut.data[(1023-row)*k+col] = this.pixelsIn[i];
}
Store data in 2d context.
this.printScreenContext.putImageData(this.pixelsOut,0,0);
Get data URI data.
return this.printScreenCanvas.toDataURL();

Answer 3

Would this do?
var gl = renderer.getContext();
var pixels = new Uint8Array(width * height * 4);
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
your pixels should end up in the pixels array

Answer 4

its a little late but there is a really simple way.
The WebGLRenderer finally draws to a canvas object accessed by the domElement property.
HTML Canvas object has a standard implementation to grab the buffer and encode it into a Data URL.
If you want to display this screenshot into say an img HTML element then here is the example code. Assuming that the img HTML element has an id of "screenshotImageBox"
var imageDataURL = threeJSRenderer.domElement.toDataURL( "image/png" );
document.getElementById("screenshotImageBox").src = imageDataURL;