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

Question

我创建了两个使用websocket服务器相互通信的html客户端。一个客户端使用Three.js在其画布上绘制3D模型，并将画布上下文（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的比较，我只是用它来截图。