物理演算とは、物体の運動を物理法則に基づき数値計算することです。ウェブ業界ではゲームやビジュアル表現の分野で利用されています。アクションゲームを例に考えてみましょう。キャラクターが地面に立つ、ジャンプする、重力で落下する、壁とぶつかる、坂道を滑り落ちるといった動きを物理演算で扱えます。
本記事ではGoogleが公開したJavaScriptライブラリ「LiquidFun」を題材に、ブラウザーで利用できる物理演算シミュレーションの表現を紹介します。
▲「LiquidFun」の公式サイトではドキュメントやデモが掲載されている
物理演算用JavaScriptライブラリ「LiquidFun」とは
LiquidFunは2次元の物理演算ライブラリの定番「Box2D」をベースとした拡張ライブラリです。Box2Dが提供する基本的な物理演算機能をはじめ、LiquidFunによるプラスアルファの機能が提供されています。
- 重力（Box2Dの機能）
- 摩擦/剛体/跳ね返り（Box2Dの機能）
- 衝突判定（Box2Dの機能）
- ジョイント（Box2Dの機能）
- 任意の図形での物理演算（Box2Dの機能）
- 流体（LiquidFunの機能）
LiquidFunはもともとC++で開発されています。ブラウザー向けには、LiquidFunの機能を含むBox2DをWebAssembly（Wasm）へコンパイルしたnpmパッケージ「liquidfun-wasm」が公開されています。本記事の作例ではこのWasm版を利用します。
オリジナルのBox2Dと比べたLiquidFunの大きな特徴は、流体表現向けの粒子システムが追加されていることです。粒子の大きさや圧力、色などを制御し、液体やゼリーのような動きを表現できます。
公式サンプルで体験するLiquidFunの機能
LiquidFunで実現できる機能や利点を紹介します。公式サイトに掲載されているデモで特徴を見ていきましょう。リンク先の左上にあるセレクトボックスでデモの種類を切り替えられます。
Soup
シンプルな流体シミュレーション。LiquidFunはその名の通り、流体の計算を得意とします。
Elastic Particles
流体の一種ですが、ゼリーみたいな表現を作ることができます。五角形の図形はドラッグ・アンド・ドロップで動かせます。
Wave Machine
箱の中に入れたパーティクルのシミュレーションです。筆者が2013年に試したBox2Dのデモ「Physics Demo using CreateJS and Box2D」と比較すると、LiquidFunのパフォーマンスの高さがわかります。
本記事オリジナルの簡単なサンプルで、LiquidFunの使い方を紹介します。
LiquidFunを使ってみよう
LiquidFunには描画機能がなく、座標更新などの計算のみを行います。そのため、画面に計算結果を表示するには描画ライブラリと組み合わせる必要があります。PixiJSは、WebGLやWebGPUを利用して2Dグラフィックスを高速に描画するJavaScriptライブラリです。本記事ではLiquidFunとPixiJSを組み合わせたオリジナルの作例を用意しました。
なお、公式サンプルのコードは難解なので、本記事のサンプルはムダを省いてシンプルにしています。詳しいLiquidFunの使い方は今回は割愛しますが、サンプルコードに事細かにコメントを記載していますので参考ください。
最小構成で仕組みを確認する
LiquidFunで流体を作り、PixiJSで粒子を描画する最小構成の作例です。画面中央の球はドラッグでき、球に押しのけられた粒子が流れる様子を確認できます。
残像を生かした流体表現
粒子の動きに残像効果を加えた作例です。粒子が落下して跳ね返る軌跡を重ね、光の帯のような流体表現に仕上げています。
大量の粒子を描画する
1万個を超える粒子を描画する作例です。画面上に表示されるフレームレート、物理演算時間、描画時間から、端末での処理負荷を確認できます。
なぜ物理演算にWasmを使うのか
一般的に物理演算は負荷の高い処理です。とくにLiquidFunのように大量の粒子を扱う流体シミュレーションでは、フレームごとに多くの座標や衝突を計算するため、高い演算性能が求められます。
Wasmは、C++などで書かれたプログラムをブラウザーで効率よく実行するための仕組みです。liquidfun-wasmでは負荷の高い物理演算をWasmが担当し、その結果をJavaScriptから利用します。これによってLiquidFunの計算性能を活かしたシミュレーションをブラウザーで扱えます。
2018年の研究で示された処理速度は、おおまかに「JavaScript＜＜＜asm.js＜Wasm」の順です。生のJavaScriptより、Wasmを使う方が計算が速いということです。
まとめ
ウェブの世界では、Flashが使われていた時代から物理演算がインタラクティブな表現に取り入れられてきました。ゲームだけでなく、要素を弾ませたり崩したりする物理演算を、サイト内の演出に意外性を加える「飛び道具」として活用するのもおもしろいでしょう。
注意点
Googleの公式GitHubリポジトリは2026年2月にアーカイブされました。ライブラリが進化することはないのでご注意ください……。
※この記事が公開されたのは10年前ですが、今月8月に内容をメンテナンスしています。
