THREE.js 中数据 URI 的纹理答案

【问题标题】：Texture to data URI in THREE.jsTHREE.js 中数据 URI 的纹理
【发布时间】：2014-10-10 21:33:35
【问题描述】：

大多数人都有相反的问题，但我想问有没有简单的方法可以将纹理数据返回到数据URI。

我正在使用渲染到纹理 (RTT) 在背景中渲染场景（使用不同的相机）。我希望能够将此数据发送到服务器或仅显示在 img 元素中以进行测试。

【问题讨论】：

【解决方案1】：

由于您专门询问了渲染到纹理的情况，因此在另一个答案中有一个功能：https://stackoverflow.com/a/18804083/3640489

假设您有一个 THREE.WebGLRenderTarget 定义如下：

var renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, { 
    minFilter: THREE.NearestFilter, 
    magFilter: THREE.NearestFilter, 
    format: THREE.RGBAFormat 
});

然后你从渲染器获取WebGLRenderingContext并调用函数：

var gl = renderer.getContext();
var webglTexture = renderTarget.__webglTexture;
var img = createImageFromTexture(gl, webglTexture, width, height);

【讨论】：

【解决方案2】：

感谢大家的帮助。我想出了一种解决方案。可能它可以做得更简单，但是这个解决方案可以工作并且看起来很快。

RTT

this.renderer.render(this.scene, camera, this.rttTexture, true);

获取场景数据。

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

创建二维上下文。

this.printScreenCanvas = document.createElement("canvas");
this.printScreenCanvas.width = 1024;
this.printScreenCanvas.height = 1024;
this.printScreenContext = this.printScreenCanvas.getContext('2d');

为 2d 上下文创建存储。

this.pixelsOut = this.printScreenContext.createImageData(1024, 1024);

必须转换数据+翻转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];
}

在二维上下文中存储数据。

this.printScreenContext.putImageData(this.pixelsOut,0,0);

获取数据 URI 数据。

return this.printScreenCanvas.toDataURL();

【讨论】：

【解决方案3】：

这样可以吗？

var gl = renderer.getContext();
var pixels = new Uint8Array(width * height * 4);
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

您的像素应该最终出现在像素数组中

【讨论】：

【解决方案4】：

有点晚了，但有一个非常简单的方法。

WebGLRenderer 最终绘制到由 domElement 属性访问的画布对象。

HTML Canvas 对象具有获取缓冲区并将其编码为数据 URL 的标准实现。

如果您想将此屏幕截图显示为一个 img HTML 元素，那么这里是示例代码。假设 img HTML 元素的 id 为“screenshotImageBox”

var imageDataURL = threeJSRenderer.domElement.toDataURL( "image/png" );

document.getElementById("screenshotImageBox").src = imageDataURL;

【讨论】：