Uint8Arrayをキャンバスにレンダリングする最も速い方法

Question

私はRGBA値を持つUint8Arrayと、画像の一部が更新された情報を受け取りました。この生のビットマップ情報をキャンバスに戻す最も簡単な方法は何ですか？私は、アレイと設定された画素情報かかわらず、手動でループに2Dレンダリングコンテキストを使用しているが、これは非常に遅いです：

let imageData = new ImageData(1920, 1080); 
for (var i=0;i < args.frameBuffer.length; i+=4) { 
    imageData.data[i] = args.frameBuffer[i]; 
    imageData.data[i+1] = args.frameBuffer[i+1]; 
    imageData.data[i+2] = args.frameBuffer[i+2]; 
    imageData.data[i+3] = args.frameBuffer[i+3]; 
} 
context.putImageData(imageData, 0, 0, args.dirtyX, args.dirtyY, args.dirtyWidth, args.dirtyHeight); 

これを行うには、より効率的な方法だろうか？ WebGLは2Dコンテキストよりも優れていますか？ネイティブまたはThree.jsのようなものを介して？

Answer 1

gl.TexSubImage2Dを使用してテクスチャを更新し、テクスチャ全体をブリットすることができます。しかし、TexSubImage2Dは、次のフレームのテクスチャを更新する前に、前のレンダリングを完了するまで待機しなければならないため、パフォーマンス上の問題があります。

より良い方法は、webglにpreserveDrawingBufferビットを使用して、TexImage2Dでラウンドロビン方式で2つのテクスチャを使用することです。ダーティ領域のみをレンダリングするには、ダーティ座標に基づいてDrawArraysの頂点データを設定する必要があります。

WebGLはまだ多くのデータをコピーする必要がありますが、これらのコピーパスはputImageDataよりも最適化されている可能性があります。しかし、ドライバがしばしばテクスチャ画像が静的であり、複数のレンダリングに使用されるユースケースに対して最適化することが多いため、webglが遅くなる可能性がある深刻な危険があります。これにより、レンダリングは高速になりますが、テクスチャデータのアップロードは遅くなります。

高価なテクスチャアップロードの問題を解決するにはOpenGLには複数の拡張機能があり、高速の画像アップロードをサポートしていますが、レンダリングは少し遅くなります。これらの拡張子があまりにも悪いとwebglにとって実用的ではありません。

しかし、あなたは完全にフレームバッファーを受け取っているように見えますが、たびたびに部分的にしか更新されません。

あなたは[テクスチャ]（https://developer.mozilla.org/を見てみましょう、あなたの現在のインターフェースが

let imageData = new ImageData(args.frameBuffer, 1920, Math.floor((args.frameBuffer.length + 4*1919)/(4*1920))); 
context.putImageData(imageData, 0,0, args.dirtyX, args.dirtyY, args.dirtyWidth, args.dirtyHeight);