web-dev-qa-db-ja.com

Canvas2Dコンテキストまたは2Dゲーム用のWebGL

たくさんのスプライトや画像を使ったゲームを書くつもりです。最初はEaselJSを試しましたが、他のキャンバスベースのゲームをプレイすると、それほど速くないことに気付きました。そして、MozillaのBananaBreadを見たとき、「WebGLが3Dを非常に高速に実行できれば、2Dをさらに高速に実行できる」と思いました。そこで、three.jsに移動しました(平面と透明なテクスチャ、スプライトのテクスチャオフセットを使用)。

問題は:それはより良いですか?もっと早く?ほとんどのWebGLゲームは3Dなので、2Dにはキャンバス2Dコンテキストを使用し、3DにはWebGLを使用する必要がありますか?また、2DのWebGL用のライブラリがないことにも気づきました(WebGL-2dを除くが、かなり低レベルです)。

私はすぐに何かをリリースする予定はないので、互換性は私の最大の関心事ではないことに注意してください:)。

24
Pic

簡単な答えはイエスです。 WebGLはかなり効率的ですifあなたはそれをうまく使います。単純な実装では、メリットが得られないか、パフォーマンスが低下するため、OpenGL APIにまだ慣れていない場合は、当面はキャンバスに固執することをお勧めします。

さらに詳細な注意事項:WebGLはテクスチャクワッド(スプライト)を非常に高速に描画できますが、パストレーシングなどのより高度な2D描画機能が必要な場合は、WebGLでこれらのタイプのアルゴリズムを実装するため、2Dキャンバスに固執する必要があります。自明ではありません。ゲームの性質もあなたの選択に違いをもたらします。一度に画面上に移動するアイテムが少ない場合、Canvasはかなり高速でかなりシンプルになります。ただし、フレームごとにシーン全体を再描画する場合は、WebGLがそのタイプのレンダリングループに適しています。

私の推薦?両方を学習しているだけの場合は、Canvas2Dから始めて、ゲームをそれで動作させます。 ctx.drawImage(playerSprite, ....)ではなくDrawPlayer関数を使用するなど、簡単な方法で図面を抽象化します。ゲームが機能していて、ゲームをより高速に実行したい場合、またはゲームデザインでは、より高速な描画方法を使用し、WebGLを使用してこれらすべての抽象関数の代替レンダリングバックエンドを作成する必要があります。これにより、早い段階でレンダリング技術にとらわれないという利点が得られます(これは常に間違いです!)。ゲームプレイに集中しましょう。両方の方法を実装することになった場合は、インターネットなどの非WebGLブラウザーに大きなフォールバックがあります。冒険者。とにかくしばらくの間、速度を上げる必要はないでしょう。

41
Toji

WebGLは、キャンバス2Dよりもはるかに高速です。一例として http://blog.tojicode.com/2012/07/Sprite-tile-maps-on-gpu.html を参照してください。

そうは言っても、あなたは今ほとんど一人でいると思います。たぶんPlayNを除いてWebGLの2Dライブラリを知りません http://code.google.com/p/playn/ それはJava and Google Web Toolkitを使用してJavaScriptに変換します。また、上記のブログ投稿に記載されている手法を使用していないことも確信しています。ただし、ゲームでタイルを使用していない場合、その手法は役に立たない可能性があります。

three.jsは、2Dを計画している場合、おそらく必要なライブラリではありません。

4
gman