javascript - Websocket を介した WebGL Vs Canvas への画像転送、およびおそらくワーカーを使用した画像転送

Question

Websocketを介してArrayBufferを介して画像を受け取り、キャンバスに投稿しています。毎秒約 10 枚の画像 (たとえば 500x500 PNG)

実際にWEBGLに投稿する方が速いでしょうか。繰り返しますが、回転/変換は行いません。

たくさんの画像を次々と表示するだけです。

GPU/Shader を使用するため、WebGl の方が高速でしょうか?

Answer 1

ほとんどの canvas2d 実装は既にハードウェア アクセラレーションを使用しているため、単純な画像をキャンバスに配置するだけの場合、WebGL は技術的な複雑さをもたらすだけで、何も得られません。

canvas2d でピクセルレベルの操作を行う唯一の方法はグラフィックを RAM にロードすることであるのに対し、シェーダーは GPU でそれらを実行できるため、複雑な画像フィルタリング操作を実行する場合は、2D グラフィックスに WebGL を使用するのが理にかなっています。 getImageData を使用して、CPU で操作を行い、setImageData を使用して GPU にロードします。

パフォーマンスに問題がある場合、 「Websocket 経由で 1 秒あたり約 10 枚の画像 (500x500 の PNG など)」がボトルネックになっている可能性があると思います。500x500 の PNG は少なくとも 200kb ですが、コンテンツや圧縮アルゴリズムの選択によっては、さらに大きくなる可能性があります。1 秒あたり 10 個の画像は、少なくとも 16 MBit/s の帯域幅である 1 秒あたり少なくとも 2 MB を必要とします。帯域幅はそんなにありますか？