多くのスプライトと画像を使用するゲームを作成する予定です。最初は EaselJS を試しましたが、他のキャンバス ベースのゲームをいくつかプレイしたところ、それほど高速ではないことがわかりました。そして、Mozilla の BananaBread を見たとき、「WebGL で 3D が高速に処理できるなら、2D はさらに高速に処理できる」と思いました。そこで、three.js に移行しました (プレーンと透明なテクスチャを使用し、スプライトのテクスチャ オフセットを使用)。
問題は次のとおりです。もっと早く？ほとんどの WebGL ゲームは 3D ですが、2D にはキャンバス 2D コンテキストを使用し、3D には WebGL を使用する必要がありますか? また、2D の WebGL 用のライブラリがないことにも気付きました (WebGL-2d を除くが、かなり低レベルです)。
すぐに何かをリリースする予定はないので、互換性は私の最大の関心事ではないことに注意してください :) .
短い答えはイエスです。うまく使えば、WebGL はかなり効率的になります。単純な実装はメリットがないか、パフォーマンスが低下するため、OpenGL API にまだ慣れていない場合は、当面はキャンバスに固執することをお勧めします。
いくつかの詳細なメモ: WebGL はテクスチャ付きの四角形 (スプライト) を非常に高速に描画できますが、パス トレーシングなどのより高度な 2D 描画機能が必要な場合は、2D キャンバスに固執することをお勧めします。自明ではない。ゲームの性質によっても、選択に違いが生じます。一度に画面上に移動するアイテムが数個しかない場合、Canvas はかなり高速でかなりシンプルになります。ただし、フレームごとにシーン全体を再描画する場合は、WebGL がそのタイプのレンダリング ループに適しています。
私の推薦？両方を学習している場合は、Canvas2D から始めて、ゲームをそれで動作させてください。DrawPlayerではなく関数を使用するなど、簡単な方法で描画を抽象化します。ctx.drawImage(playerSprite, ....)ゲームが機能していて、より速く実行したい場合、またはゲームの設計により、より高速な描画方法を使用する必要がある場合は、 WebGL を使用したこれらすべての抽象関数の代替レンダリング バックエンド。これにより、早い段階でレンダリング技術に夢中にならないという利点が得られます (これは常に間違いです!)。ゲームプレイに集中できます。また、両方の方法を実装することになった場合は、インターネットなどの非 WebGL ブラウザに対する優れたフォールバックが得られます。冒険者。とにかく、しばらくの間、速度を上げる必要がない可能性があります。
WebGL は canvas 2D よりもはるかに高速です。一例としてhttp://blog.tojicode.com/2012/07/sprite-tile-maps-on-gpu.htmlを参照してください。
そうは言っても、あなたは今、ほとんど一人でいると思います。おそらく PlayN http://code.google.com/p/playn/を除いて、WebGL の 2d ライブラリはわかりませんが、これは Java であり、Google Web Toolkit を使用して JavaScript に変換されます。また、上記のブログ投稿に記載されている手法を使用していないことも確かですが、ゲームでタイルを使用していない場合、その手法は役に立たない可能性があります。
three.js は間違いなく、2d を計画している場合に必要なライブラリではありません。