gl.readPixelsを使用せずにwebglコンテキストをバイナリデータとして送信する別の方法

Question

websocketサーバを使用して互いに通信する2つの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あなたは画像データをつかむためにcanvas.toDataURL("image/jpg");（またはpng）を使用して試みることができるlink

Answer 1

を描画するための基礎として使用されるコードですさWebGLコンテキストからのデータ。パフォーマンスがreadPixelsとどのように比較されるかはわかりませんが、私はこれまでスクリーンショットに使用したことがありません。