THREE.js: get data from THREE.WebGLRenderTarget - three.js

Question

A THREE.Texture can be used as a map in a material and has a property called "image".
A THREE.WebGLRenderTarget can be used as a map in a material but does not have a property called "image".
How would I retrieve the texture-data from a WebGLRenderTarget? I would like to save it to a file (or, if that is not possible, as a byte array).

Answer 1

New function for this now:
WebGLRenderer.readRenderTargetPixels ( renderTarget, x, y, width, height, buffer )
Reads the pixel data from the renderTarget into the buffer you pass in. Buffer should be a Javascript Uint8Array instantiated with new Uint8Array( renderTargetWidth * renderTargetWidth * 4 ) to account for size and color information. This is a wrapper around gl.readPixels.

Answer 2

I haven't tried it myself, but it should be possible to get a byte array using WebGL's readPixels function passing the render target's (private) __webglTexture property.

Answer 3

Code fragment of converting THREE.WebGLRenderTarget to 2D canvas:
// allocate RGBA array
let pixels = new Uint8Array(_floor_width * _floor_height * 4);
let can = document.createElement("canvas"), ctx, ctxData, color;
// _floor_target is instance of THREE.WebGLRenderTarget of dimension _floor_width x _floor_height and _renderer is THREE.WebGLRenderer
_renderer.readRenderTargetPixels(_floor_target, 0, 0, _floor_width, _floor_height, pixels);
can.width = _floor_width;
can.height = _floor_height;
ctx = can.getContext('2d');
ctxData = ctx.getImageData(0, 0, can.width, can.height);
for (var fy = 0; fy < _floor_height; fy++) {
for (var fx = 0; fx < _floor_width; fx++) {
// retrieve exact rendered pixel
color = [
pixels[fy * _floor_width * 4 + fx * 4 + 0],
pixels[fy * _floor_width * 4 + fx * 4 + 1],
pixels[fy * _floor_width * 4 + fx * 4 + 2],
pixels[fy * _floor_width * 4 + fx * 4 + 3]
];
// put pixel to canvas image data (this whole thing might be done much faster)
ctxData.data[(fy * can.width * 4) + (fx * 4) + 0] = color[0];
ctxData.data[(fy * can.width * 4) + (fx * 4) + 1] = color[1];
ctxData.data[(fy * can.width * 4) + (fx * 4) + 2] = color[2];
ctxData.data[(fy * can.width * 4) + (fx * 4) + 3] = color[3];
}
}
// update canvas image data
ctx.putImageData(ctxData, 0, 0);
document.body.appendChild(can);