three.js - THREE.js：从 THREE.WebGLRenderTarget 获取数据

Question

ATHREE.Texture可以用作材质中的贴图，并具有称为“图像”的属性。ATHREE.WebGLRenderTarget可以用作材质中的贴图，但没有称为“图像”的属性。

我将如何从 a 中检索纹理数据WebGLRenderTarget？我想将它保存到一个文件中（或者，如果不可能的话，作为一个字节数组）。

Answer 1

现在的新功能：

WebGLRenderer.readRenderTargetPixels ( renderTarget, x, y, width, height, buffer )

将来自 renderTarget 的像素数据读取到您传入的缓冲区中。缓冲区应该是一个用 new Uint8Array(renderTargetWidth * renderTargetWidth * 4) 实例化的 Javascript Uint8Array，以说明大小和颜色信息。这是 gl.readPixels 的包装。

Answer 2

我自己没有尝试过，但应该可以使用 WebGL 的readPixels函数传递渲染目标的（私有）__webglTexture属性来获取字节数组。

Answer 3

将 THREE.WebGLRenderTarget 转换为 2D 画布的代码片段：

// 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);