javascript - 将 webgl 上下文作为二进制数据发送而不使用 gl.readPixels 的替代方法

Question

我创建了两个 html 客户端，它们使用 websocket 服务器相互通信。一个客户端使用 Three.js 在其 Canvas 上绘制 3D 模型，并将 Canvas 上下文(即 webGl)作为二进制数据发送到 websocket 服务器上的另一个客户端。

问题是 readPixels() 方法太慢。我需要使这个流尽可能流畅。

function animate() {

    requestAnimationFrame( animate );

    render();

    var ctx = renderer.getContext();        

    var byteArray = new Uint8Array(1280 * 720 * 4);

    ctx.readPixels(0,0,1280, 720, ctx.RGBA, ctx.UNSIGNED_BYTE, byteArray);

    socket.send(byteArray.buffer);

}

渲染器是一个 THREE.WebGLRenderer。

有什么建议吗？

编辑:

这是我用作 3D 绘图基础的代码 link

Answer 1

您可以尝试使用 canvas.toDataURL("image/jpg"); (或 png) 来获取图像数据，这是获取图像数据的可靠方法来自 WebGL 上下文。我不太确定性能与 readPixels 相比如何，我只用过它来截图。