2012年度学術交流支援資金報告書

外国語電子教材作成支援

メディア技術基礎（3Dプログラミング）

環境情報学部准教授脇田玲

1. 教材作成の背景

ここ数年で3Dプログラミングの世界では表現のパラダイムシフトが起きている。多くのマシンにGPU(Graphics Processing Unit)が搭載され、マルチコアのCPUも一般的になりつつある。ノートブックでも4GB程度のメモリが一般的になり、これまでにない高速な計算が可能になった。それに伴い、これまでリアルタイムグラフィクスで扱うには計算負荷が高かった数値流体力学、剛体力学、数十万ものパーティクル表現、プログラマブルシェーダ等がリアルタイムの3Dプログラミングで扱われる機会が増えている。このような新しいリアルタイム３Dプログラミングの教材はほとんどが熟練したプログラマを対象としており、おいそれと手を出せるような代物ではない。一方でこれらの出力結果はデジタルメディアの表現として非常に魅力的なものであり、CAD/CGのシステム開発での利用はもちろんのこと、インタラクティブメディアやアート作品の制作にもおおいに利用できるものである。つまり多くの学生にとって有用であり、需要もあると考えるべきだろう。しかしながら、現状の学生向けリアルタイム３Dプログラミング教材の多くは、一昔前のPCのハードウェアを対象にしたものが多い。具体的には、OpenGLの基本仕様に基づいた言語仕様しか扱っておらず、現実感の低いグーローのシェーディングモデルに基づいた表現しか学ぶ事ができない。また、物理シミュレーションに基づく表現力の高いアニメーションや、GPU/OpenCL対応という現在のプログラミングパラダイムにも追いついていない。プログラムの基礎を理解した学生が前述したような現代的なリアルタイム３Dプログラミングを効果的に学べる電子教材が強く求められている。

2. 課題の内容

そこで本研究では現代的なハードウェアの進歩に伴った教材を作成する。開発環境はopenFrameworksとC++を用い、物理シミュレーション、群衆モデル、ハードウェアアクセラレーション、等を題材にした。教材の前半ではXCodeの使い方、OpenGLとGLUTの基礎を学ぶ。並行して四元数などの数学的ツールを学び、グラフィクスと数理の足腰を鍛えることを目指した。後半では、openFrameworksを用いて、物理シミュレーション、群衆モデル、GPUの使い方などを学ぶ。

3. 教材の中身

第一回　環境構築
XCodeのインストール
	Snow leopard -> 3.2.6
	Lion -> 4.3.3
openFrameworksのインストール
	ダウンロード
openFrameworksの準備。Xcodeの使い方
	oFサンプルのコンパイルを通して
	VBO, shader,の利用チェック


第1回の環境設定でコンパイルされるテクスチャマッピングとライティングを多用したサンプル。



図：第1回の環境設定でコンパイルされるシェーダーのチェックプログラム。


第二回　Hello World
	XCodeの使い方（新規プロジェクトの作成）
	OpenGL入門
		OpenGL Frameworkの利用
		GLUT Frameworkの利用
		ウインドウの描画
		カラーバッファの初期化
		直線の描画
	演習：円を描画してみよう
	コールバック関数
	ウインドウのコールバック関数
	マウスのコールバック関数
	キーボードのコールバック関数
	

	
第三回　Hello 3D World
	OpenGLの処理の流れ
	ビューポートってなに？
	プロジェクション行列を設定する = 視体積を設定する
		視体積ってなに？
		平行投影
		透視投影
	モデルビュー行列を設定する = 視点位置を設定する
	GLUTによる立体の描画
	デプスバッファ
	アフィン変換の適用範囲
		アフィン変換の演算順
		アフィン変換のまとめ



第四回　四元数（クォータニオン）
	OpenGL + C/C++ でクォータニオンによる回転を実装する（数式編）
	クォータニオンってなに？
	鏡映変換ってなに？
	クォータニオンの演算法則
	共役なクォータニオン
	クォータニオンの積 1（計算してみよう）
	クォータニオンの積 2
	クォータニオンの積の順番
	クォータニオンで鏡映変換
	クォータニオンで鏡映変換×2
	クォータニオンによる回転
	まとめ
		クォータニオンの表し方
		クォータニオンの積
		共役なクォータニオン
		クォータニオンによる回転
	課題
		OpenGL + C/C++ でクォータニオンによる回転を実装する（準備編）
		クォータニオンの積の実装（OpenGL + C/C++)
		3次元ベクトルの正規化の実装
		3次元ベクトルの外積の実装
		カメラの情報を用意する

第五回　オブジェクト指向プログラミング
	クラス
	3次元ベクトルクラスを作ろう
	プロパティ
	コンストラクタ
	サンプルソースコード
	メソッド
	演算子のオーバーロード
	サンプルソースコード
	セッターの実装
	正規化の実装
	エラーの対処法
	3次元ベクトルクラスを（Quaternionによる回転）に、追加実装してみよう
		カメラの位置を３次元ベクトルクラスに書き直す
		カメラの上向きベクトルを３次元ベクトルに書き直す
		３次元ベクトルの関数を消す
		gluLookAtの引数を書き直す
		回転軸ベクトルの宣言を書き直す
		マウスクリック時のカメラの位置ベクトル R を書き直す
		マウスクリック時のカメラの上向きベクトル C を書き直す
		回転ベクトル U の取得部分を書き直す
		カメラの位置ベクトルを虚数部としたクォータニオンを作る部分を書き直す
		回転軸を U 、回転角度 theta_u のクォータニオンを作る部分を書き直す
		Qの共役なクォータニオンを作る部分を書き直す
		カメラの位置に代入する部分を書き直す
	Quaternion クラスの実装
	
第六回　ボイドシミュレーション
	ボイドシミュレーション
	パーティクル
	パーティクルクラスの作成
	パーティクルクラスを使ってみよう
	ボイドシミュレーション
	ローカルスペース
	

第六回の学生の作品

第七回　Hello openFrameworks
	プロジェクトの新規作成
		1. emptyプロジェクトをコピーする
		2. 自分のプロジェクトフォルダを作る
		3. emptyExample を media3D フォルダにペーストする
		4. XCodeプロジェクトを開く
		5. 実行してみる
	実行出来ない方
	コールバック関数の紹介
		setupメソッド
		update / draw メソッド
		keyPressed / keyReleased メソッド
		mouseMoved / mouseDragged / mousePressed / mouseReleased メソッド
		windowResized メソッド
	はじめての openFrameworks （３次元プログラミング版）
		初期設定
		３次元形状の描画
			直線を描画しよう
			原点を画面の中央に移動しよう
			色を変えてみよう
			直線を描画しよう（OpenGL編）
			色を変えてみよう（OpenGL編）
		カメラを設定しよう
			カメラクラス
			カメラの距離を設定する
			カメラを描画処理に追加する
		サンプルソースコード
			矩形 - ofRect
			円 - ofCircle
			
第八回　GUI
	ofxSimpleGuiToo
	ofxSimpleGuiTooとは
	ofxSimpleGuiTooの準備
	はじめての ofxSimpleGuiToo
		0. ボタンを配置する
		1. コンボボックスを配置する
		2. スライダーを配置する
		3. トグルボタンを配置する
		


第九回　ボイドシミュレーション(oF版）
	Boid Simulation on oF （GUI編）
		ofxSimpleGuiTooのライブラリを追加
		ルールのパラメータを操作するスライダーの追加
	Boid Simulation on oF （ヴィジュアライズ編）
		Colorのプロパティを追加
		コンストラクタで初期化
		RGBを表すパラメータを考える
		RGB空間を正規化する
		RGBの因数を作る
	Boids Simulation （アドバンスドヴィジュアライズ編）
		パーティクルの描画部分を改良する
		テクスチャーの読み込み
		アルファ値とポイントスプライトを有効にして描画する



第十回　GLSL
	Introduction to GLSL （OpenGL Shadhing Language）
		レンダリングパイプライン
		GLSLの文法
			拡張子
			main関数
	Your First GLSL Shader (本編)
		バーテックスシェーダーとフラグメントシェーダーを読み込む
			1. ofShaderクラスのオブジェクトを準備する
			2. バーテックスシェーダーとフラグメントシェーダーを読み込む
		バーテックスシェーダーとフラグメントシェーダーを適用する
			実行できない方
		Qualifier
			組み込み変数
	グーローシェーディング
		環境光(AMBIENT)
		拡散反射光(DIFFUSE)
		鏡面反射光(SPECULAR)
		完成
	フォンシェーディング
		バーテックスシェーダー - Phong.vert
		フラグメントシェーダー - Phong.frag　


第十一回　物理シミュレーション
	ofxBulletとは
	はじめてのofxBullet
	球体を追加する
	光源を追加する
	動的に物体を追加する
	外力を加える
	
第十二回　GPU
	VBO（Vertex Buffer Object）の利用
		ofVBOで頂点を描画してみよう
		ofVboで頂点の色を変更してみよう
		ofVboで面を描画してみよう



第十三回　Arduino
	フォトレジスタ
	回路図
	Arduino
	Ardiuno に Standard Firmata を書き込む
	準備編
		ローレンツアトラクターのクラスの準備
		カメラの準備
	Arduino と接続する
	Arduino を初期化する
	Arduino を更新する
	描画

4. 議論

最後まで講義に参加していた学生からは近年稀に見る本格的なプログラミング講義であるとの声を多くもらった。一方で、講義の初期で半分以上の学生が脱落してしまったことは検討が必要である。これはXCodeのインストール作業が多くの履修者にとって高いハードルとなっていると考えられる。こればかりは本人の精神力と情報処理教育の初期段階のカリキュラムに委譲せざるを得ず、本講義としては手を出しようがない。個々の科目の教材を充実すること以前に、根本的な情報処理教育の改善が必要であることは言うまでもない。

2012年度 学術交流支援資金 報告書