入門向けの簡単なサンプルで学ぼう

LiquidFunには描画機能がなく座標更新等の計算のみを行います。そのため、画面に計算結果を表示するにはいずれかの描画ライブラリと組み合わせる必要があります。本記事ではCreateJSとPixi.jsという描画ライブラリを取り上げサンプルを用意しました。

なお、公式サンプルのコードは難解なので、本記事のサンプルは無駄を省いてシンプルにしています。詳しいLiquidFunの使い方は今回は割愛しますが、サンプルコードに事細かにコメントを記載していますので参考ください。

表現の自由度を求めるならHTML5 Canvas対応の「CreateJS」と連携

150530_liquildfun_createjs

CreateJSはHTML5 Canvasを描画ターゲットにしたJSライブラリです。表現の自由度が高く、スマートフォンやデスクトップブラウザで安定した性能が得られます。CreateJSはHTML5ベクターアニメーションソフト「Adobe Animate CC」との連携が可能なので、表現の自由度が高いことも利点です。

※コードを更に短くしたバージョンも用意しています。学習の際にはこちらのデモから試してください。

パフォーマンス重視ならWebGL対応の「Pixi.js」と連携

150530_liquildfun_pixijs

Pixi.jsはWebGLを描画ターゲットにしたJSライブラリです。WebGLならでは強力な描画性能と、LiquildFun(asm.js)の高速な計算性能の組み合わせは、大量の粒子/流体表現に適しているでしょう。

なぜ物理演算にasm.js対応が必要なのか

一般的に物理演算は負荷が高い部類の処理となりますが、JavaScript自体は高速な計算処理を得意としません。物理演算を活かすには通常のJavaScriptの性能だと物足りないため、演算性能が高いasm.jsを採用することに意味があります。Box2DのJavaScript移植版「box2dweb」は2010年から提供されていましたが、これは通常のJavaScriptとして実行されます。それに対して、LiquidFunはasm.js版としてコンパイルされているため、高い性能が得られると考えられます。

※LiquidFunはC++で開発したモジュールをLLVMにコンパイルし、emscriptenを使ってasm.js準拠のJavaScriptファイルに変換。このJavaScriptファイルは機械的なコードとなっているので、CPUにとって計算速度を得やすいというメリットがあります。

Box2Dの各種言語のパフォーマンス

▲参考「Box2d 2014 Update」より。ネイティブのC言語との性能比較のグラフで、左側にプロットされている方が高速であることを示す。LiquidFunを扱ったグラフでないが、Box2Dのasm.js版の性能がわかる(LiquidFunは上図の「asm.js」とプロットされているスコアとほぼ一致するはずである)。

最後に〜物理演算ライブラリには型情報が必須

物理演算はライブラリを利用することで実装工数を抑えられるものの、実装以前に多大な学習時間を要します。JavaScriptでの物理演算はFlash/ActionScript 3.0と比べて難しいと筆者は考えていますが、それはBox2D/LiquidFunが有する多数のメソッドやプロパティーの理解が大変だからです。コード補完のあるエディターを使うと学習負荷が軽減されるため、TypeScript等の型情報のある言語の採用を強くおすすめします。

次回はLiquidFunを応用した作例を紹介したいと思います。お楽しみください。