「HTML5による物理シミュレーション」出版決定（発売日：2013年2月22日）

HTML5による物理シミュレーション
JavaScriptでThree.js/jqPlot/jQuery UIを使う

著者　遠藤 理平
出版社　株式会社カットシステム
発売日　2013年2月22日
判型　B5変型判、392頁
税込価格　3,990円（本体 3,800円）
ISBN　978-4-87783-303-9

最新のthree.jsで利用するために必要な変更点をまとめました：three.js仕様変更による変更点（PDF）

本書の続編となる「HTML5による物理シミュレーション【拡散・波動編】」が2013年5月25日に出版決定！

フジテレビ月９ドラマ【ガリレオ】HTML5による物理シミュレーション＆動画の提供決定！

はじめに

　本書は、HTML5を利用しウェブブラウザだけで完結した「物理シミュレーション環境」を構築するまでの手順を示すことで、実践を交えながら、HTML5によるアプリケーションの開発の手順と、物理シミュレーションの基礎を習得することを目的としています。

　物理シミュレーション環境の構築に必要な要素として、【入力】【演算】【描画】の３つが挙げられます。これまで【入力】は各実行環境に応じたGUI、【演算】はC言語などのプログラミング言語、【描画】は二次元グラフ描写ならgnuplot、３次元グラフィックスならOpenGLというように、独立したアプリケーションをそれぞれ習得する必要がありました。
　しかしながら、HTML5の登場により、状況は劇的に変化しつつあります。【入力】はHTMLが本来得意とするインタラクティブ・インターフェース、【演算】はウェブブラウザ上で高速実行可能なJavascript、【描画】はcanvas要素によるリアルタイムな二次元ならびに三次元のグラフィックス描画と、HTML5の各要素によって、物理シミュレーション環境の構築に必要な３つの要素すべてが高レベル、かつウェブブラウザだけで完結することが可能となりました。
　さらにHTML5で作成したアプリケーションはウェブブラウザを介して様々な環境で実行することができる上に、当然ながら、HTMLの本領であるウェブ上での公開も容易です。すなわち、アプリケーションの共通プラットフォームであるHTML5の一つの応用例として、HTML5は、新しいインタラクティブな科学コミュニケーションツールとしての可能性を大きく秘めていると考えています。

　ところで、そもそもなぜ物理シミュレーションなのでしょうか。一般に物理シミュレーションというと、自然科学や工学における専門家に限られたマイナーな分野と受け取られるかと思います。しかしながら昨今、例えば、映画やゲームといったエンターテイメント分野においても、実行環境の進歩に伴い、人々がリアリティを追求する中で物理演算が実装されるなど、物理シミュレーションの知識は、「科学の世界」を飛び越えて「表現の世界」における主役的な存在へと生まれ変わっています。そしてこの流れは、昨今ニーズが高まるデジタル教材の普及に伴い、「教育の世界」へとさらに広がっていくことが考えられます。

　物理シミュレーションは、これまで自然科学や工学の分野で「数値シミュレーション」「計算物理学」「計算機実験」などと呼ばれ、自然科学や工学の分野における一手法として発展してきました。「実験」と「理論」が主な手法であった物理学においても、近年、物理シミュレーションは第３の科学的手法として無くてはならない存在となりました。この飛躍を支えるのは、コンピュータの高性能化・低価格化です。一般用途向けパーソナルコンピュータでも、物理シミュレーションを行うのに十分な環境が整ってきました。さらに、HTML5ならびにウェブブラウザの進化は、より一般的な環境における物理シミュレーションの実行を可能としています。

　数学や物理学における方程式は、これまで人類が積み重ねた「いつでも・どこでも・だれでも」利用することのできるユビキタスなオープンソースです。コンピュータの発達は、コンピュータによる演算との相性が抜群な数学と、数学を言語とする物理学の発展に直結します。これは、これまで紙と鉛筆では到底解くことのできなかった問題が、コンピュータを利用することで数値的に解けるようになり、これまで物理学で取り扱うことのできなかった複雑な分野についても数学や物理学の言葉で書き換えられることを意味しています。今後、数学や物理学を使いこなしていく技術と素養は、未来を切り開いていく上での大きな力になると信じています。

　「未来を切り開く」といっても、なにも科学における前人未到の領域に踏み込んで、工業的な技術開発や学術論文を書くことだけが目的ではありません。自分自身で設定した数値モデルに対して計算アルゴリズムを構築し、数値結果から因果関係を見出すまでの過程の中で「自分にとっての発見」があれば、それは知的好奇心の発露の結果であり、人間が生きていく糧として、内発的モチベーションの源泉となります。これこそが未来を切り開くためのエネルギー源であると思います。

　本書を通じて、HTML5によるアプリケーション開発、数学や物理学についての興味を持つきっかけとなれば、筆者としてこれほどの喜びはありません。なお、筆者の勉強不足のために、プログラムや数学、物理学の説明に間違いが有るかもしれません。その際はお手数ですが、ご指摘いただければ幸いです。

最後に、本書の執筆を提案頂きました株式会社カットシステムの石塚勝敏さん、厳しいスケジュールのなか丁寧な編集を行なって頂きました株式会社チューリングの鈴木光治さん、また、日常的に議論に付き合って頂いている特定非営利活動法人natural scienceの皆さんには、深く感謝申し上げます。

目次

• 第１章 Three.jsを利用した３次元コンピュータ・グラフィックス入門
  • 1.1 WebGLとThree.js
    • 1.1.1 WebGLについて
    • 1.1.2 WebGLの例
    • 1.1.3 Three.jsについて
    • 1.1.4 ダウンロードと環境設定
  • 1.2 Three.js の基本形
    • 1.2.1 軸オブジェクト描画プログラムソース
    • 1.2.2 HTML文書の準備（HelloWorld.html）
    • 1.2.3 Three.jsスタート関数の定義
    • 1.2.4 Three.js初期化関数の定義
    • 1.2.5 カメラ初期化関数の定義
    • 1.2.6 オブジェクト初期化関数の定義
    • 1.2.7 描画関数の定義
  • 1.3 ３次元オブジェクトの描画
    • 1.3.1 光源初期化関数の定義
    • 1.3.2 立方体オブジェクトの準備
    • 1.3.3 Three.jsにおける形状オブジェクト
  • 1.4 プリミティブオブジェクトの描画
    • 1.4.1 「形状オブジェクト」と「材質オブジェクト」
    • 1.4.2 「点オブジェクト」
    • 1.4.3 「線オブジェクト」の描画
    • 1.4.4 「三角形オブジェクト」の描画
  • 1.5 ３次元オブジェクトの移動・回転・拡大
    • 1.5.1 「Object3Dクラス」と「Vector3クラス」
    • 1.5.2 位置座標の指定
    • 1.5.3 オイラー角とクオータニオン
    • 1.5.4 オブジェクトの拡大と縮小
  • 1.6 Three.jsによるアニメーション
    • 1.6.1 JavaScriptによるアニメーション
    • 1.6.2 アニメーション実行のための構成
    • 1.6.3 光源移動とカメラ移動のアニメーション
    • 1.6.4 マウスによるカメラの移動
  • 1.7 影の描画とその他の光源
    • 1.7.1 影の必要性について
    • 1.7.2 影描画の手法と実装手順
    • 1.7.3 スポットライト光源によるライティングと影の描画
    • 1.7.4 環境光の設定
    • 1.7.5 点光源によるライティング
• 第２章 jqPlot を利用した２次元グラフ描画入門
  • 2.1 jqPlotの準備
    • 2.1.1 jqPlotとは
    • 2.1.2 実行環境の準備
  • 2.2 jqPlot の基本形
    • 2.2.1 ２次関数の描画
    • 2.2.2 HTML文書の構造と描画までの手順
    • 2.2.3 グラフ描画のための関数とデータ構造
  • 2.3 オプションの設定
    • 2.3.1 軸オプション（デフォルト）
    • 2.3.2 各軸に対するオプションの設定
    • 2.3.3 背景色、方眼線、外枠線のオプション
    • 2.3.4 凡例の追加
    • 2.3.5 データ列オプション（デフォルト設定）
    • 2.3.6 各データ描画に対するオプションの設定
    • 2.3.7 多軸系統グラフの描画
    • 2.3.8 その他のオプション
  • 2.4 プラグインの導入
    • 2.4.1 対数グラフの描画用プラグイン「logAxisRenderer」
    • 2.4.2 カーソル描画プラグイン「cursor」
    • 2.4.3 ラベルプラグイン「CanvasAxisLabelRenderer」「CanvasAxisTickRenderer」
  • 2.5 jqPlotを利用したクラスの実装
    • 2.5.1 2次元グラフ描画クラス「Plot2D」クラス
    • 2.5.2 対数グラフ描画メソッドの追加
    • 2.5.3 テキストエリアに入力された関数を描画するツール
• 第３章 物理シミュレーション環境の構築
  • 3.1 JavaScriptライブラリ「jQuery」の準備
    • 3.1.1 「jQuery UI」のダウンロード
    • 3.1.2 タブ切り替えインターフェース
    • 3.1.3 スライダーインターフェース
  • 3.2 共通インターフェースの構築
    • 3.2.1 共通インターフェースのHTMLの構造
    • 3.2.2 外部CSSファイルの構造
  • 3.3 ２次元グラフ描画ツールの構築
    • 3.3.1 ２次元関数プロッターの構築
    • 3.3.2 数値計算機（NumericalCalculator）の実装
    • 3.3.3 数値計算誤差ビューアの実装
    • 3.3.4 数値計算誤差Δt依存性ビューアの実装
  • 3.4 仮想物理実験室の構築
    • 3.4.1 仮想３次元空間の構築
    • 3.4.2 球クラスの定義と位置ベクトルの制御の実装
    • 3.4.3 位置ベクトルの時系列プロットの実装
    • 3.4.4 「計算」ボタンと「一時停止」ボタンの追加
• 第４章 物理シミュレーション入門
  • 4.1 そもそも物理シミュレーションとは？
    • 4.1.1 物理学について
    • 4.1.2 物理学的手法：「実験」と「理論」
    • 4.1.3 物理シミュレーションの位置づけ
    • 4.1.4 物理シミュレーションまでの道のり
  • 4.2 「はじき」からはじめる計算アルゴリズム
    • 4.2.1 ３次元空間中の物体（仮想物理実験室１）
    • 4.2.2 「速度」の定義
    • 4.2.3 等速度運動のアルゴリズムの導出
    • 4.2.4 球体の等速度運動（仮想物理実験室２）
    • 4.2.5 等速度運動の計算誤差
    • 4.2.6 「加速度」の定義
    • 4.2.7 等加速度運動のアルゴリズムの導出
    • 4.2.8 球体の等加速度運動（仮想物理実験室３）
    • 4.2.9 等加速度運動の計算誤差
  • 4.3 高精度の計算アルゴリズムの導出
    • 4.3.1 テーラー展開
    • 4.3.2 １次精度の計算アルゴリズム「前進オイラー法」「後進オイラー法」
    • 4.3.3 ２次精度の計算アルゴリズム「修正オイラー法」
    • 4.3.4 ３次精度の計算アルゴリズム「ベルレ法」の導出
  • 4.4 ニュートンの運動方程式
    • 4.4.1 加速度・力・質量の関係：ニュートンの運動方程式
    • 4.4.2 力学的エネルギー保存則と運動量保存則
    • 4.4.3 本書で利用する計算アルゴリズム
    • 4.4.4 重力場中の自由落下シミュレーション（仮想物理実験室４）
    • 4.4.5 重力場中の斜方投射シミュレーション（仮想物理実験室５）
    • 4.4.6 復元力による単振動
    • 4.4.7 重力場中の復元力による単振動運動（仮想物理実験室６）
    • 4.4.8 重力場中の張力による単振子運動（仮想物理実験室７）

付属サンプルプログラム一覧

本書で取り扱ったすべての題材にはサンプルプログラムが用意されています。

サンプルプログラム実行例（画面キャプチャ）

第１章

発光材質による三角形オブジェクトの描画

点光源によるライティング＋影の描画

第２章

2次元グラフ描画クラス＋テキストエリアに入力した関数描画

第３章

２次元関数プロッターツール

第４章

局所離散化誤差のΔt依存性のグラフ（計算アルゴリズムによる比較）

【仮想物理実験室７】ベルレ法による重力場中の張力による単振子運動
位置ベクトル、速度ベクトル、力学的エネルギー、張力の時系列プロットも実装