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コードを最適化しようとしています。十分に良いと思います。 Googleでは、Chromeのようなブラウザを見つけたので、Firefoxはデフォルトのハードウェアアクセラレータを有効にします。だから私はハードウェアアクセラレーションを閉じようとします。それで、最初の方法のCPU使用率がはるかに高くなります。ですから、キャンバスの2DはGPUを使用して加速するので、2DレンダリングのためだけにWebGLを使用する必要がありますか？キャンバスの2D GPUアクセラレーションとWebGLの違いは何ですか？どちらもGPUを使用しています。たぶん、2番目の方法のCPU使用率を下げる他の方法がありますか？どんな答えでも感謝します！

Answer 1

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

キャンバス2dのデフォルトでは描画バッファが保存されているのに対し、WebGLではそうではないため、理論的にWebGLを高速化することができます。つまり、WebGL上でアンチエイリアスをオフにすると、ブラウザはバッファを二重にすることができます。 canvas2dでできないこと。もう一つの最適化はWebGLにあります。これはアルファをオフにすることができます。つまり、ブラウザでWebGLを合成したときにブレンディングをオフにするオプションがあります。キャンバス2dのオプションもありません。私はちょうどそれを意味オプションにより、（そこキャンバス2D用のアルファをオフにすることができるようにする予定ですが、6分の2017のように、広くサポートされていない）

しかし。これらの最適化を行うかどうかは、ブラウザによって異なります。

これらの最適化を選択しないと、2が同じ速度になる可能性があります。私は個人的にそうであるとは思わなかった。私はキャンバス2dのものだけdrawImageをやろうとしましたが、WebGLでやったように滑らかなフレームレートを得られませんでした。それは意味がありませんでしたが、私は私が気づいていなかったブラウザの中で何かが起こっていると仮定しました。

私はそれが最終的な違いをもたらすと思います。 WebGLは低レベルでよく知られています。ブラウザが混乱することはあまりありません。それとも、別の方法で言えば、あなたは100％コントロールしています。

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

FYI：ここにはan article detailing how to write a WebGL version of the canvas2d drawImage functionがあり、それにはan article on how to implement the canvas2d matrix stackが続きます。