2014年1月16日付CreateJS Blogに「WebGL Support in EaselJS」という記事が投稿されました。EaselJSでWebGLレンダラがサポートされるということです。現在、パブリックプレビューが公開されています。本稿はblog記事にもとづいて、新しいWebGLレンダラについてご紹介します。

01 WebGLレンダラが目指すこと

WebGLは多くのブラウザでサポートされるようになってきました。Mozillaの協力により、EaselJSのWebGLが初期ベータとして公開されました。研究開発と最適化が重ねられたレンダラは2Dコンテンツを、Canvasの2Dコンテクストと比べて6〜50倍の速さで描きます。これはWebGLレンダラだからできたことです。

目指していることはつぎの3つです。

1. スプライトとビットマップをきわめて高速に描く
2. 今のEaselJSのAPIと整合性をもって統合する
3. WebGLが使えないときはContext2Dレンダリングにフォールバックする

02 SpriteStageとSpriteContainerクラス

ふたつの新しいクラスSpriteStageとSpriteContainerは、表示リストに制限を課します。これはビットマップコンテンツの描画を、できるかぎり最適化するためです。コンテンツには、イメージやスプライトシートアニメーション、それにビットマップテキストも含まれます。

これらの新しいクラスは、StageやContainerなどのこれまでのEaselJSクラスを拡張し、APIも変わりません。WebGLコンテンツをつくるのは、すでにEaselJSを知ってさえいれば簡単です。これまでつくったEaselJSのコンテンツをWebGLで動かすにも、さほど手間はかかりません。

03 レンダラをレイヤーとして重ねる

このアプローチでは、WebGLとContext2Dコンテンツをレイヤーとして重ね合わせることができます。マウスやタッチのインタラクションも、レイヤーを意識することなく受渡せます。たとえば、高速のゲームエンジンはWebGLレンダリングでつくり、その上のUIレイヤーには機能のより充実したContext2Dレンダラが使えます。素材はWebGLとContext2Dレイヤーの間でやり取りすることもできます。

なお、WebGLのコンテンツは、これまでのContext2Dレンダラと完全な互換性があります。デバイスやブラウザがWebGLをサポートしないとき、コンテンツは自動的にCanvasの2Dにより描画されます。

新しいレンダラのパフォーマンスの詰めには、もうしばらく時間がかかります。このアプローチにより、きわめて高いパフォーマンスのコンテンツを幅広いデバイス向けに開発できるようになります。さらに、CreateJSの豊富なAPIやツール群が使えるのです。

04 サンプル

CreateJS Blogには、テスト用に3つのサンプルが公開されています。サンプルを試したい方は、「WebGL Support in EaselJS」内のリンクからご覧ください。

Webグラフィックスのベンチマークでよく知られているのは「Bunnymark」です。このベンチマークは、単純に跳ねるうさぎのビットマップの数を見るだけです(図001)。レンダラは60fpsをサポートしています。以下の表001は、これまでのContext2Dと新しいWebGLのレンダラを使って、Bunnymarkスコアを比べました。数字は大きいほど優れています。

図001■Bunnymark

上記の数値は、60fpsにおけるスプライトの最大数です。フレームレートが下げられれば、数を大幅に増やすこともできます。ご注目いただきたいのはFxOSです。手もとの初期FxOS 1.2デバイスが備えていたのは性能の低いGPUでした。それでも、パフォーマンスは明らかに高まっています。

「Sparkles Benchmark」は、パーティクルをスクリーンにいくつまで置けるのか、24fpsに定めたブラウザで試しています(図002)。

図002■Sparkles Benchmark

「Planetary Gary」はCreateJSの新機能を試すために、これまでたびたび使われてきたゲームです(図003)。今回は、SpriteStageとSpriteContainerクラスを用いて、WebGLで描画するゲームに書替えました。

図003■Planetary Gary

書替えはきわめて簡単でした。コードを3行だけ直したり、あるいは加えるだけでした。新たなAPIの使いやすさと一貫性を示すものといえます。また、機能の充実したContext2Dレンダラは開始画面などのインターフェイスに使い、パフォーマンスのきわめて高いWebGLレンダラのゲームと組合わせるよい例にもなっています。

さらに、ゲームの素材はベクターグラフィックでパッケージされており、EaselJSのSpriteSheetBuilderクラスによりContext2Dレンダラがスプライトシートとして描いて、WebGLレンダラに渡しています。こうすることで、自由に大きさを変えられるグラフィックスが回線上は85kbほどの小さなサイズにとどまりながら、大きなパフォーマンスが得られるのです。

05 パブリックプレビュー

新たなWebGLレンダラは、パブリックプレビューとしてGitHubに公開されました。そして、フィードバックはCreateJS Supportで受付けています。WebGLレンダラは、つぎのメジャーリリースに備わる予定です。

作成者: 野中文雄
更新日: 2014年2月27日 誤記を修正。
作成日: 2014年1月17日