物理演算とは物体の運動を物理法則に基づき数値計算することです。Web業界ではゲームやビジュアル表現の分野で利用されています。アクションゲームを例にすると、キャラクターが地面に立つ、ジャンプする、重力落下する、壁とぶつかる、坂道を滑り落ちる、といったことが物理演算の実装範囲になります。
本記事ではGoogleが提供するJavaScriptライブラリ「LiquidFun」を題材にHTML5で利用可能な物理演算シミュレーションの表現を紹介します。
▲「LiquidFun」の公式サイトではドキュメントやデモが掲載されている
物理演算ライブラリ「LiquidFun.js」とは
LiquidFunは2次元の物理演算ライブラリの定番「Box2D」をベースとした拡張ライブラリです。Box2Dが提供する基本的な物理演算機能をはじめ、LiquidFunによるプラスアルファの機能が提供されています。
- 重力 (Box2Dの機能)
- 摩擦/剛体/跳ね返り (Box2Dの機能)
- 衝突判定 (Box2Dの機能)
- ジョイント (Box2Dの機能)
- 任意の図形での物理演算 (Box2Dの機能)
- 流体 (LiquidFunの機能)
もともとC++で開発されていることもあり、LiquidFunはJavaScriptに限らずAndroid、iOSなど様々なプラットフォーム向けにも利用可能です。
オリジナルのBox2Dと異なる点は大きく2点あります。一つは流体表現向けの機能が充実していること、もう一つは「LiquidFun.js」は「asm.js」が使われているということです。後者のasm.jsはJavaScriptのサブセット言語仕様で、通常のJavaScriptと比べ格段に高い計算処理性能を発揮できる技術です(詳しくは後述)。
公式サンプルで体験するLiquidFunの機能
LiquidFunで実現できる機能や利点を紹介します。公式サイトに掲載されているデモで特徴を見ていきましょう。リンク先のデモの左上のセレクトボックスでデモの種類を切り替えられます。
Soup
シンプルな流体シミュレーション。LiquidFunはその名の通り、流体の計算を得意とします。
Elastic Particles
流体の一種ですが、ゼリーみたいな表現を作ることができます。五角形の図形はドラッグ・アンド・ドロップで動かすことができます。
Sparky
衝突時にパーティクルを発生させるデモ。さりげない演出ですが、パーティクルには色が乗っています。これはパーティクルの色情報制御が可能であることを示しています。
Wave Machine
箱の中に入れたパーティクルのシミュレーション。筆者が2013年に試したBox2Dのデモ「Physics Demo using CreateJS and Box2D」と比較すると、LiquidFunのパフォーマンスの高さがわかります。
次のページでは、本記事オリジナルの簡単なサンプルで、LiquidFunの使い方を紹介します。
