HOME > natural science Laboratory

物理シミュレーション環境構築用HTML5フレームワーク「physics.js」

文責:遠藤理平
公開日:2015年01月15日
最終更新日:2015年02月09日

3次元グラフィックス

仮想物理実験室

「physics.js」の概要

「physics.js」は、ウェブブラウザ内に仮想物理実験室を構築し、物理シミュレーション(数値計算+3次元グラフィックス+2次元グラフ)を実行するためのHTML5フレームワークです。 と言ってもまだ剛体物理学の極々一部分のみを対象としているに過ぎませんが、今後様々な物理現象の物理シミュレーションをウェブブラウザで実行できることを目的に開発を進めて行きます。 本ウェブページでは「physics.js」の使い方や物理現象の解説を行い、計算アルゴリズムや物理エンジンの開発方法については、以下の書籍を参考にしてください。

【書籍】HTML5による物理シミュレーション【剛体編2】(2015年2月24日)
【書籍】HTML5による物理シミュレーション【剛体編】(2014年8月24日)
【書籍】HTML5による物理シミュレーション【拡散・波動編】(2013年5月25日)
【書籍】HTML5による物理シミュレーション(2013年2月22日)

なぜウェブブラウザ?

 物理シミュレーション環境の構築に必要な要素として、【入力】【演算】【描画】の3つが挙げられます。これまで【入力】は各実行環境に応じたGUI、【演算】はC言語などのプログラミング言語、【描画】は二次元グラフ描写ならgnuplot、3次元グラフィックスならOpenGLというように、独立したアプリケーションをそれぞれ習得する必要がありました。
 しかしながら、HTML5の登場により、状況は劇的に変化しつつあります。【入力】はHTMLが本来得意とするインタラクティブ・インターフェース、【演算】はウェブブラウザ上で高速実行可能なJavascript、【描画】はcanvas要素によるリアルタイムな二次元ならびに三次元のグラフィックス描画と、HTML5の各要素によって、物理シミュレーション環境の構築に必要な3つの要素すべてが高レベル、かつウェブブラウザだけで完結することが可能となりました。
 さらにHTML5で作成したアプリケーションはウェブブラウザを介して様々な環境で実行することができる上に、当然ながら、HTMLの本領であるウェブ上での公開も容易です。すなわち、アプリケーションの共通プラットフォームであるHTML5の一つの応用例として、HTML5は、新しいインタラクティブな科学コミュニケーションツールとしての可能性を大きく秘めていると考えています。
 物理シミュレーションは、様々な条件で何度でも、また実際の実験系では再現の難しい条件ですらパラメータ1つで「実験」することができ、さらには様々な情報(本書では軌跡や速度ベクトル、ストロボ撮影を実装)を付加することもでき、中学校・高校・大学における物理教育にも活用できると考えています。
 プロ・アマ問わず、それぞれの方々の興味のもと物理現象の解説や発見などを発表できれば面白いなと思っています。

フレームワークとしての機能(リビジョン1)

本フレームワーク(リビジョン1)は「【書籍】HTML5による物理シミュレーション【剛体編2】(発売日:2015年春)」にて開発を行った「physLab_r10.js」と「physObject_r10.js」を元にしていますが、書籍の内容と異なる場合がありますことをご了承下差さい。

仮想物理実験室の構築例

仮想物理実験室の構築例

実物:http://www.natural-science.or.jp/physics.js/physics.js_r1/example/OneBodyLab.html

3次元グラフィックス関連

◯計算結果のリアルタイム描画
◯再生モード
◯運動の軌跡の表示
◯速度ベクトルの表示
◯ストロボ表示
◯マウスドラックによる3次元オブジェクトの移動
◯マウスドラックによるカメラのの移動
◯PNG形式画像の生成・ダウンロード
◯WebM形式動画の生成・ダウンロード

2次元グラフ関連

◯任意の数値データを用いた2次元グラフ
◯線形・対数グラフの描画
◯マウス操作によるグラフの拡大
◯PNG形式画像の生成・ダウンロード
◯2次元グラフ描画を行った数値データ(CSV形式)のダウンロード

数値計算関連

◯ベルレ法による時間発展の計算
×それ以外の計算アルゴリズムは未実装

依存する外部ライブラリなど

◯ウェブブラウザ上で3次元グラフィックスを実現するHTML5の規格であるWebGLのラッパーライブラリ「three.js」(必須)
◯HTML要素を簡単に操ることのできるライブラリ「jQuery」ならびにグラフィカルなユーザインターフェースを実現する「jQueryUI」(必須ではない)
◯HTML5のcanvas要素に2次元グラフを描画するjQueryのプラグイン「jqPlot」(必須ではない)
◯FPSを表示するライブラリ「Stats.js」(必須ではない)
◯WebM形式の動画生成ライブラリ「whammy.js」(必須ではない)

物理シミュレーション対象領域(リビジョン1)

剛体物理学の極々一部。
◯重力場中を運動する剛体球の並進運動のみ。
◯剛体球と様々な3次元形状をもつ剛体(平面、立方体、球、点、線、円、円錐(円柱)ポリゴン)との衝突計算・接触計算
◯任意の経路上を運動する剛体球の運動
△剛体球と運動する剛体の衝突(衝突相手の運動が関数で与えられている運動の場合のみ実装済み)
×それ以外の運動(回転運動すら未実装)

「physics.js」で生成した動画の例

指定した任意の経路上を運動する球体のシミュレーション。本動画はサイクロイド曲線、円、楕円、2次方程式を比較した様子。

ダウンロード

リビジョン1(2015年1月15日公開、最終更新日:2015年2月3日)(8.5MB)

動作環境

HTML5が動作する最新ウェブブラウザ。ただし、一部の機能は「Google Chrome」のみで動作。
◎ Google Chrome 35(全機能動作)
◎ Opera 26(全機能動作)
◯ Mozilla Firefox 32(動画生成不可)
△ Internet Explorer 11(動画生成不可・画像ダウンロード不可)

ライセンス

MIT licenseの元、変更、再配布、商用利用などによる利用を認めます。
Copyright (c) 2015 Rihei Endo
Released under the MIT license
http://opensource.org/licenses/mit-license.php


問い合わせ

作者:遠藤理平
mail:info@natural-science.or.jp


物理シミュレーション環境構築用HTML5フレームワーク「physics.js」の使い方

physics.js」は、ウェブブラウザ内に仮想物理実験室を構築し、物理シミュレーション(数値計算+3次元グラフィックス+2次元グラフ)を実行するためのHTML5フレームワークです。本項では重力場中の放物運動をテーマに、物理シミュレーションの実行方法から速度ベクトル、軌跡、ストロボの表示といったグラフィックス関連、2次元グラフ、動画生成など、「physics.js」の基本的な機能の紹介を行い、物理シミュレータ開発までの手順を示します。

目次


「physics.js」による仮想物理実験室の構築例


関連ページ

「physics.js」関連ページのアーカイブ
PhysLabクラス
PhysObjectクラス

▲このページのトップNPO法人 natural science トップ