web-dev-qa-db-ja.com

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

2D games/appsに2D-Canvasの代わりにWebGLを使用する理由は、パフォーマンス以外にありますか？

言い換えると、2D-Canvasでは簡単に達成できない2D機能がWebGLによって提供されていますか？

html5html5-canvaswebgl
91
Ali Shakiba

別の側面からこの質問を見てください：
開発者は、あるテクノロジーを別のテクノロジーよりもどのように選択しますか？

  • すでに構築されたシステムにより良く統合する
  • 使いやすい
  • より速い
  • より多くの機能を持っているか、ニーズに合っている
  • コスト
  • より独立した

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

CanvasとwebGLはどちらもJavaScript APIです。したがって、統合（バインド）に関してはほとんど同じです。どちらにも、コーディングを高速化できるライブラリ/エンジンが多数あります。ライブラリが異なるとコードの編成方法も異なるため、描画APIを中心にコードを構成する方法は異なりますが、それでもほぼ同じです（コードの残りの部分がどのように結合されるか）。

ライブラリを使用する場合、コードの記述のしやすさはライブラリ自体に依存します。
ただし、ゼロからコードを記述すると、canvas 'APIの学習と理解がはるかに簡単になり、最小限の数学知識が必要になります。開発は迅速かつ簡単です。 WebGLには、レンダリングパイプラインを完全に理解し、彼が何をしているのかを知っている強力な数学スキルを持つ開発者が必要です。それらの人々は見つけるのが難しく、生産は遅くなります（コードのサイズとそれを他のコードに統合する複雑さのため）。したがって、コストが高くなります。

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

CanvasとwebGLはどちらもhtml5の利点です。通常、一方をサポートするデバイスがもう一方をサポートします。

要約すると、

  • 描画APIコードと残りの部分の統合（統合）：類似
  • 使いやすさ：
    • （ライブラリ付き）canvas = webGL
    • （最初から）webGL << canvas
  • 速度：webGL>キャンバス
  • 機能：webGL>キャンバス
  • コスト：webGLははるかに高価です
  • プラットフォーム：非常に類似

お役に立てれば。

P. S.議論のためにオープン。

65
Abstract Algorithm

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

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

Table

30
Prabindh

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

http://glslsandbox.com/e#207.

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

15
emackey

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

12
16807

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

10
Xk0nSid

具体的には、キャンバスではうまく機能しない古典的な2Dのものが必要です。

  • 色変換（スプライトの点滅など）
  • ビットマップの塗りつぶしを繰り返す
  • 回転下でのマップのタイル化（キャンバスの下では、一部の実装は継ぎ目を作成します）
  • 深層化（非常に実装に依存）
  • 乗法または加法混合

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

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

キャンバスを使用する理由は、キャンバスのサポートが向上していることと、ピクセル単位で物事を行うことを学べば、非常に貴重な教訓になることです。

6
starmole

WebGLではできないCanvasでできることは何もありません。キャンバスはget/putImageDataでバイトを押しつぶすことができ、webGLでプログラムで線、円などを描くことができます。
[。パフォーマンスは根本的な機能です。

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

6
GameAlchemist

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でモバイルデバイスを検出する最良の方法は何ですか？

2
MayorMonty