3DBasics@tmokita

12年11月17日土曜日

自己紹介• 沖田知彦 @tmokita

• 以前はゲームとか組み込みとか

• 今はフリーランスでiPhoneアプリ

その他いろいろ

12年11月17日土曜日

ざっくり内容• 小難しい計算の説明はしません• 3Dのとっかかりに必要な用語を説明するので興味をもったら調べてください

• 計算とか用語などにつまずかないで頭のなかでイメージできるかが大事

• なので3D概論入門みたいな内容です

12年11月17日土曜日

目次

• 用語とかの基礎知識

• サンプルデモ、説明

• プログラムするときのポイント 的な

• Appendix

12年11月17日土曜日

なんで3Dに見えるのか？

• 2D：奥行きが無い

• 3D：奥行きがある

• 一点透視

• つまりは 比 の計算

12年11月17日土曜日

ベクトルこんなのとか こんなの

12年11月17日土曜日

ベクトル• 3次元ベクトルまでイメージできればOK

• x,y,z 成分で構成されるベクトル

• 数学的にはn次元ベクトルというものがあるが、まあ別に知らなくてもOK

• ベクトルの計算は、加算、減算、長さ、内積、外積、ノーマライズ、位わかってればOK

12年11月17日土曜日

行列

12年11月17日土曜日

あたまいたいぉ

12年11月17日土曜日

行列• 4x4行列までわかっていればOK

• 横が行、縦が列• 単位行列、逆行列、転置行列• 行列の計算は加算、減算、乗算、が分かっていればOK

• 乗算するには条件がある

12年11月17日土曜日

行列• 単位行列：数字の１と同じ：e

• どんな行列に掛けても元と同じ• 逆行列：A

• かけたら単位行列になる行列• 転置行列：A

• x成分とy成分を交換した行列

-1

t

12年11月17日土曜日

ベクトルと行列の関係• 行列はベクトルを並べたもの

• ベクトルは行列の一種

• ベクトルと行列は計算できる

• 1 3 行列と 3 3 行列は計算できる

• 結果は 1 3 行列になる

12年11月17日土曜日

ちょっとだけ• （1,1）を45度回転させる

12年11月17日土曜日

２次元での回転

12年11月17日土曜日

頂点• 3D空間における座標（位置）を表したベクトル

• x,y,z、または x,y,z,w で表す

• とりあえず最初のうちはwはオマケ程度に考えておけばOK

• 「ｗってなにそれｗｗｗｗ」くらいで

12年11月17日土曜日

法線

12年11月17日土曜日

法線• ある線や面に対して垂直なベクトル

• 線に垂直：傾きを掛けると-1になる

• 面に垂直：2辺の外積を求める

• 主に光源ベクトルとの内積を求めて明るさの計算につかう

12年11月17日土曜日

光源

12年11月17日土曜日

光源• 環境光（Ambient）距離や向きに関係なく当たる光

• 点光源（Point）距離は関係なく一点から球状に放出される光

• 平行光（Directional）距離は関係なく平行して放出される当たる光

• スポット光（Spot）距離は関係なく円錐状に放出される光（スポットライト）

12年11月17日土曜日

陰と影

12年11月17日土曜日

陰と影

• 陰：シェード（Shade）

• 影：シャドウ（Shadow）

12年11月17日土曜日

シェーディング左：フラット右：グーロー

左：フラット右：フォン

12年11月17日土曜日

シェーディング• フラットシェーディング：面単位• 法線情報は面ごと• グーローシェーディング：頂点単位• 法線情報は頂点ごと• フォンシェーディング：ピクセル単位• 法線情報はピクセルごと

12年11月17日土曜日

フレームバッファZバッファ（デプスバッファ）

• フレームバッファ：ピクセルを描画するバッファ

• Zバッファ、デプスバッファ：奥行き情報を描画するバッファ→奥行きを考慮して描画する為に必要

12年11月17日土曜日

マテリアル• マテリアル（material）：質感描画するときのパラメータ

• 色、テクスチャ情報、光源計算に関するパラメータ など

• Diffuse,Specular,Emmisive とかとか

12年11月17日土曜日

座標系

• 右手座標系：Zが手前OpenGL など

• 左手座標系：Zが奥Direct3D など

12年11月17日土曜日

カメラ（視点）

• 「見える」時の情報

• 視点の位置

• アスペクト比、画角 などなど

12年11月17日土曜日

ニアクリップファークリップ

12年11月17日土曜日

ニアクリップファークリップ

• ニア（near）クリップ：これ以上手前のものは描画しない

• ファー（far）クリップこれ以上奥のものは描画しない

12年11月17日土曜日

以上をふまえて

12年11月17日土曜日

ぽいんと１• ぱくる（INSPIRE、RESPECT）

• 表示させないと楽しくないのでとりあえずなんか表示できるようなコードを参考にして自分のモデルとかを表示させて回転させたり拡縮させたりしてみる

12年11月17日土曜日

ぽいんと２• OpenGLとかDirectXとか使えば大抵勝手に計算してくれるので小難しい計算（透視変換とか回転行列の計算など）を自前でやる必要はないです

• むしろハードのスペックを活かしたい場合は下手なコード書くよりはライブラリをフルに使う方がいい結果がでます

• iPhoneならiOSHacksなどに載っているARMのコード使えば速くなるかも

12年11月17日土曜日

あらためて

12年11月17日土曜日

3Dプログラムの流れ• レンダリング・Zバッファの作成

• カメラ（視点）の設定

• ライティングするなら：光源の設定

• 頂点や法線の設定

• 描画

12年11月17日土曜日

Demo

12年11月17日土曜日

ポイント１

• 可能なものは先に全部計算しておく

• というかデータを最適化しておく

• OpenGLに対応した頂点配列

• 法線情報 などなど

PG

12年11月17日土曜日

ポイント２

• マテリアル毎に描画する

• テクスチャの切り替えなどは負荷が大きいため同じテクスチャのものは一気に描画する

PG

12年11月17日土曜日

ポイント３• TRIANGLESよりSTRIPをつかう頂点情報を減らすため

• ダミーの頂点をはさんでSTRIPで一気に描画する

• 一般的に描画命令が一番処理が重いのでその呼出し回数を出来る限り減らす

ここからはやってないですゴメンなさいPG

12年11月17日土曜日

ポイント４• 頂点、面 などのデータを減らす

• ライティングもテクスチャで代用

• 透明度のあるものを減らす

• 半透明のモノを描画する時は順番を考える

Designer

12年11月17日土曜日

ポイント５

• そもそも見えないものは描画しない

• 完全に透明なもの

• 明らかに画面からはみ出しているだろうと思われるもの

PG/Designer

12年11月17日土曜日

Appendix• アニメーションさせたい場合

→クウォータニオン（四元数、複素数）っていうものがあるよ→ボーン、ウェイトの計算をする必要があるよ

• 影（本気）をつけたい場合→ステンシルバッファっていうものがあるよ

• 影（擬似）をつけたい場合→射影行列っていうものがあるよ

• まじめに数学勉強したければベクトル・行列→代数学、幾何学アフィン変換→幾何学微分積分→解析学 らへん

12年11月17日土曜日

これでOK!!

12年11月17日土曜日

ありがとうございました

• 大雑把な内容過ぎてごめんなさい

• tmokita at gmail.com

• @tmokita

12年11月17日土曜日