物理×3D×アプリ制作!!「 HTML5による物理シミュレーション」

物理×3D×アプリ制作
1. 第一章　Three.jsを利用した3次元コンピュータ・グラフィックス入門
  1. WebGLとは？
  2. Three.jsとは？

物理×3D×アプリ制作

物理も学べて、3Dを扱ったアプリ制作も学べて一石二鳥やーん！ということで、「HTML5による物理シミュレーション」という本を進めていきました！

ここでは、本書を進めていった感想、備忘録を書いていきます。

第１章 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 重力場中の張力による単振子運動（仮想物理実験室７）

第一章　Three.jsを利用した3次元コンピュータ・グラフィックス入門

この第一章では、「WebGL」を簡単に扱うことができるライブラリの「Three.js」の使い方を学べます。

WebGLとは？

WebGLウェブ・ジーエルとはブラウザで3D表示するための標準仕様。いまやスマートフォンを含むすべてのブラウザでWebGLが動作します。WebGLを使えばGPUによって描画が高速化されるため高度なグラフィカル表現が可能になります。

WebGLを使えば主に次のようなコンテンツ開発に役立ちます。

3Dモデルの表示
ゲームコンテンツ
データビジュアライゼーション
プログラミングアート
魅力的で華やかな画面演出（広告系サイトなど）

WebGLの例として、ここで紹介されていた作品「Aquarium」をみて、ブラウザで3Dがこんなに動くのか！と驚きました。スマホでも動きました。ここでモチベーションアップ！

Three.jsとは？

Three.jsとは、手軽に3Dコンテンツを制作できる商用利用可能なJavaScriptライブラリ。

WebGLだけで3D表現をするためには、立方体1つ表示するだけでも多くのJavaScriptやGLSLコードを書く必要があり専門知識も必要です。

Three.jsを使えばJavaScriptの知識だけで簡単に3Dコンテンツが作成できるため、手軽に扱えるようになります。

つまり、「WebGL」を簡単に書くためのライブラリが「Three.js」ということですね。

この章をやってみての感想として、

Three.jsでどのように3Dの図形を出力するのか、カメラを設置するのか、光源を設置するのかなど、実際にコード打ちながら、少しずつステップアップして学んでいけて、とてもわかりやすかった。
実際に出力できたり、動いたりするのがみれて、楽しかったです。
だいたい、図形を出力するときは、「形状オブジェクト」と「材質オブジェクト」を作って、それらを引数にとった「３次元オブジェクト」を定義するという流れがいろいろと作っているうちに身に付いた（気がする）。
いままでBlenderやShadeなどの3Dモデリングソフトで3Dを扱ったことはあったが、このようにコードを書いて、3Dを描画するのがとても新鮮と思えた。

ただ、注意点として、Three.jsのバージョンによって本書のコードの書き方と違ったりするので、本書と同じバージョンの「THREE.JS r55」を使うか、本書の「three.js の仕様変更に伴う変更点」をみて、その都度コードを直しながらするという感じになると思います。

最新版を使うほうが不具合も少なくなっているのでいいらしいですが、コードをいちいちかきかえるのがめんどくさかったので、本書と同じバージョンを使って勉強を進めました。

以下に示すHTMLのひな形に、本書のコードを入力し、ブラウザで開くと実行することができます。CDNを用いています。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r55/three.min.js"></script>
<title>HTMLのひな形</title>
<style>
    div#canvas-frame{
        width:512px;
        height:512px;
    }
</style>
<script>
//ここに本書のコードを入力

</script>
</head>

<body>
    <div id="canvas-frame"></div>
</body>
</html>

2章からは随時更新…