2Dゲーム/アプリで2D Canvasの代わりにWebGLを使用する理由はありますか？

2Dゲーム/アプリに2D-CanvasではなくWebGLを使用する理由はありますか？

言い換えれば、2D-Canvasでは簡単に実現できないWebGLによって提供される2D機能は何ですか？

この質問を別の側面から見ると
、開発者はどのようにして1つのテクノロジーを別のテクノロジーよりも選択するのでしょうか。

• すでに構築されたシステムとよりよく統合する
• 使いやすい
• より速い
• より多くの機能を備えているか、ニーズに適している
• 費用
• よりプラットフォームに依存しない

そこで、これらの品質に関するcanvas APIとwebGL APIの違いについて説明します。

canvasとwebGLはどちらもJavaScript APIです。統合（バインディング）に関してはほとんど同じです。どちらも、コーディングを高速化できる多数のライブラリによってサポートされています。ライブラリが異なればコードの編成方法も異なるため、ライブラリの選択によって描画APIの構造が決まりますが、それでもほとんど同じです（残りのコードがどのようにバインドされるか）。ライブラリを使用する場合、コードの書きやすさはライブラリ自体に依存します。

ゼロからコードを書くと、キャンバスAPIの学習と理解がはるかに簡単になります。それは最小限の数学の知識を必要とし、開発は速くて簡単です。

WebGL APIを使用するには、強力な数学のスキルとレンダリングパイプラインの完全な理解が必要です。これらのスキルを持つ人々は見つけるのが難しく、生産が遅くなります（そのようなコードベースのサイズと複雑さのため）。

WebGLはより高速で、より多くの機能を備えています。それについては疑いがない。これは、レンダリングパイプラインへのフルアクセスを提供するネイティブ3D APIであり、コードとエフェクトはより高速に実行され、より「調整可能」です。webGLでは、実際に制限はありません。

canvasとwebGLはどちらもhtml5の優れた機能です。通常、一方をサポートするデバイスが他方をサポートします。

つまり、要約すると：

• 描画APIコードと残りのコード（統合）のマージ：同様
• 使いやすさ：
  • （ライブラリあり）canvas = webGL
  • （ゼロから）webGL <<キャンバス
• 速度：webGL>キャンバス
• 機能：webGL>キャンバス
• コスト：webGLははるかに高価です
• プラットフォーム：非常に似ている

お役に立てれば。

PS議論のためにオープン。

最大の利点は、パイプラインのプログラマビリティとパフォーマンスです。たとえば、2つのボックスを上下に描画し、1つを非表示にすると、一部のGL実装には非表示のボックスを破棄するスコープがあります。

比較については、ここでテーブルをすばやく作成する方法がないため、以下の比較テーブルの写真をアップロードしました。完全を期すためにThree.jsを追加しました。

私自身のアプリケーションでの経験から言えば、グラフィックシェーダーがWebGLのサポートを必要とした唯一の理由です。どちらのフレームワークもthree.jsで抽象化できるので、使いやすさは私にとってほとんど意味がありません。シェーダーが必要ない場合は、どちらのフレームワークを使用してもブラウザー/マシンのサポートを最大化できます。

2Dキャンバスが提供しないWebGLの2D機能にはどのようなものがありますか？最大のIMHOは、グラフィックハードウェア上のプログラム可能なフラグメントシェーダーです。たとえば、WebGLでは、3DハードウェアのシェーダーにConwayのGame of Lifeを実装できます。

http://glslsandbox.com/e#207.3

この種類の2Dディスプレイは、GPUではなくCPUでのみ実行され、2Dキャンバスで実行されます。すべての計算はJavaScriptで実装され、Webワーカーの助けを借りてもGPUほど並列ではありません。これはもちろん一例にすぎません。あらゆる種類の興味深い2D効果をシェーダーで実装できます。

まあ、ゲームをコーディングするときは高速でなければならないので、パフォーマンスが最大の理由の1つになります。ただし、キャンバスではなくWebGLを選択する理由は他にもいくつかあります。これは、シェーダー、照明、ズームをコーディングする可能性を提供します。これは、商用ゲームアプリを実行している場合に重要です。また、50スプライト程度になると、キャンバスが遅延します。

Canvasでできることは何もありません。webGLではできません。canvasではget / putImageDataでバイトをつぶすことができ、webGLを使用してプログラムで線、円などを描くことができます。
しかし、かなりの描画と、60 fpsでのいくつかの効果を実行しようとしている場合、パフォーマンスのギャップが非常に大きいため、webGLで正常に実行されるときにcanvasでは不可能です。パフォーマンスはルート機能です。

それでも、webGLのプログラミングは非常に複雑です。canvasで十分かどうか、または痛みを和らげるライブラリを探すかどうかを確認してください...
その他の欠点：IEでは動作しません（しかし何が動作するか）、一部のモバイルでは動作しません。
互換性についてはこちらをご覧ください：http : //caniuse.com/webgl

あなたがキャンバスでうまく機能しない古典的な2Dのものが特に欲しいので：

• 色変換（スプライトの点滅など）
• ビットマップの塗りの繰り返し
• 回転中のタイリングマップ（キャンバスの下では、実装によっては継ぎ目が作成されます）
• 深い階層化（実装に大きく依存）
• 乗法または加法ブレンディング

...もちろん、ピクセルアクセスが可能なので、上記を含め、実際には何でも手動で行うことができます。しかし、それは本当に、非常に遅い場合があります。理論的には、キャンバスにレンダリングするためにMesa openGlを記述できます。

webGLを使用するもう1つの大きな理由は、結果が他の場所に非常に簡単に移植できることです。これにより、スキルの価値も高まります。

canvasを使用する理由は、それでもサポートが向上していることと、ピクセル単位で物事を行うことを学ぶなら、これも非常に貴重なレッスンです。

WebGLは特に新しいテクノロジーであり、HTML5キャンバスはより確立されているため、使用する内容はユーザーによって異なります。ユーザーがモバイルデバイスを使用すると思われる場合は、HTML5キャンバスをお勧めしますが、より優れた2Dレンダリングが必要な場合は、WebGLを使用します。したがって、HTML5を使用したモバイルレンダーで使用する場合は、WebGLをサポートするプラットフォームで使用する場合は、どうすればよいでしょうか。

例えば：

 if (window.WebGLRenderingContext) {
     webGLcanvasApp()
         } else if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
     html5CanvasAppFMobile()
    } else {
    html5CanvasApp()
    }

出典：
WebGLサポートを検出する適切な方法？
jQueryでモバイルデバイスを検出する最良の方法は何ですか？

WebGLはGPUがないと使用できません。
ほとんどのシステムにはGPUがあるため、このハードウェアの依存関係は大きな問題ではありませんが、GPUまたはCPUアーキテクチャが進化する場合、エミュレーションによるwebglコンテンツの維持は困難な場合があります。古い（仮想化された）コンピューター上で実行すると問題が発生します。

ただし、「Canvas vs WebGL」はバイナリの選択である必要はありません。私は実際にはエフェクトにwebglを使用することを好みますが、残りはキャンバスで行います。それをVMで実行しても、効果はありませんが、効果があり高速です。