WebGL VS Canvas 2Dハードウェアアクセラレーション

Question

最近はキャンバスにたくさんの絵を描く必要があります。キャンバスのサイズは800x600pxであり、256x256px（一部は小さい）の画像を多数描画して描画します。これらの小さな画像がキャンバス上の完全な画像を構成します。これを実装するには2つの方法があります。

最初に、キャンバスの2Dコンテキスト、つまりcontext = canvas.getContext('2d')を使用する場合、context.drawimage()メソッドを使用してすべての画像をキャンバスの適切な場所に配置できます。

別の方法では、WebGLを使用してこれらの画像をキャンバスに描画します。このように、小さな画像ごとに長方形を描く必要があります。長方形のサイズは、この小さな画像と同じです。さらに、長方形はキャンバスの適切な位置にあります。次に、画像をテクスチャとして使用して塗りつぶします。

次に、これら2つの方法のパフォーマンスを比較します。両方のfpsが60に達し、アニメーション（マウスでクリックまたは移動すると、キャンバスが何度も再描画される）は非常に滑らかに見えます。それで、私はCPU使用率を比較します。 WebGLを使用すると、GPUが描画の多くの作業を保証するため、CPUの使用量が少なくなると思います。しかし、その結果、CPU使用率はほとんど同じに見えます。私はWebGLコードを最適化しようとしましたが、それで十分だと思います。グーグルによって、私はChrome、Firefoxなどのブラウザがデフォルトでハードウェアアクセラレーションを有効にすることを発見しました。そこで、ハードウェアアクセラレーションを閉じようとします。次に、最初の方法のCPU使用率がはるかに高くなります。それで、私の質問は、キャンバス2DがGPUを使用して加速するので、2DレンダリングのためだけにWebGLを使用する必要があるのでしょうか？キャンバス2D GPUアクセラレーションとWebGLの違いは何ですか？どちらもGPUを使用しています。たぶん、2番目の方法のCPU使用率を下げる他の方法はありますか？どんな答えでもありがたいです！

gman · Accepted Answer

Canvas 2Dは引き続きWebGLよりも多くの場所でサポートされているため、他の機能が必要ない場合、Canvas 2Dを使用すると、ページはcanvasを搭載しているが古いAndroidデバイスなどのWebGLを搭載していないブラウザーで動作します）。もちろん、それらのデバイスでは速度が遅くなり、多くのイメージがある場合、メモリ不足などの他の理由で失敗する可能性があります。

キャンバス2Dのデフォルトは描画バッファが保持されるのでWebGLは保持されないため、理論的にはWebGLの方が高速です。つまり、WebGLでアンチエイリアスをオフにすると、ブラウザにはダブルバッファリングのオプションがあります。 canvas2dではできないこと。別の最適化はWebGLであり、アルファをオフにすることができます。つまり、ブラウザーでWebGLをページと合成するときにブレンディングをオフにするオプションがあり、これもキャンバス2Dで実行するオプションがありません。（canvas 2dのアルファをオフにできるようにする計画がありますが、2017/6の時点では広くサポートされていません）

しかし、オプションによって私はそれを意味します。これらの最適化を行うかどうかは、ブラウザ次第です。

そうでなければ、それらの最適化を選択しない場合、2つが同じ速度になる可能性があります。私はそれが事実であると個人的には知りませんでした。 canvas 2dでdrawImageのみをいくつか実行しようとしましたが、WebGLで行ったようなスムーズなフレームレートが得られませんでした。意味がありませんでしたが、気づかなかったブラウザーの内部で何かが起こっていると思いました。

それは最終的な違いをもたらすと思います。 WebGLは低レベルでよく知られています。ブラウザがそれを台無しにするためにできることはあまりありません。または、別の言い方をすると、100％制御しています。

一方、Canvas2Dでは、何をすべきか、どの最適化を行うかはブラウザ次第です。リリースごとに変更される可能性があります。 Chromeについては、ある時点で256x256未満のキャンバスはハードウェアアクセラレーションではなかったことがわかっています。別の例は、画像を描画するときにキャンバスが行うことです。 WebGLでは、テクスチャを作成します。シェーダーの複雑さを決定します。 Canvasでは、何をしているのかまったくわかりません。たぶん、さまざまなキャンバスのglobalCompositeOperation、マスキング、その他の機能をすべてサポートする複雑なシェーダーを使用しています。多分メモリ管理のために、それは画像をチャックに分割し、それらをバラバラにレンダリングします。各ブラウザーおよび同じブラウザーの各バージョンについて、ブラウザーが決定するのはそのチーム次第です。WebGLの場合と同様に、ほぼ100％です。途中でWebGLを台無しにするためにできることはあまりありません。

参考までに、これが canvas2d drawImage関数のWebGLバージョンの記述方法を詳しく説明した記事であり、その後に canvas2dマトリックススタックの実装方法に関する記事が続きます。