免許法認定公開講座：コンピュータグラフィックス

免許法認定公開講座：
コンピュータグラフィックス
第5回 3次元グラフィックス演習の基礎
九州工業大学情報工学部
システム創成情報工学科尾下真樹
講義担当
• 尾下真樹（おしたまさき）
– 九州工業大学情報工学部
システム創成情報工学科助教授
– e-mail: [email protected]
– 居室：飯塚キャンパス研究棟 W623
– http://www.cg.ces.kyutech.ac.jp
• ＴＡ３名
– 寺崎、池上（天神）
– 吉屋（飯塚）
本講義の目標
• グラフィックスの基礎的な知識を理解する
– 映画やコンピュータゲームなどの映像が、どの
ような技術によって実現されているか？
– あまり詳しい理論までは踏み込まず、なるべく直
感的に理解する
• グラフィックスの基本的なプログラミング
– 画像処理や 3次元グラフィックスの簡単なプログ
ラムを作ることで、グラフィックス技術への理解
を深めるとともに、プログラミングにも慣れる
講義の内容
• 講義（7コマ）
– パワーポイントによるスライドを使った講義
• 各講義の終わりにミニテスト
• 演習（11コマ）
– 画像処理
– 3次元グラフィックス
• それぞれの演習についてレポートを提出
• 成績評価
– ミニテスト（30点）＋レポート（30点＋40点）
講義予定
• １日目
– 講義（イントロダクション、2次元グラフィックス技術）
– 演習（画像処理）
• ２日目
– 講義（3次元グラフィックス技術）
– 演習（画像処理）
• ３日目
– 演習（3次元グラフィックス）
• ４日目
– 講義（アニメーション、最新グラフィックス技術）
前回の内容
• コンピュータグラフィックスの主な技術
オブジェクトの作成方法
オブジェクトの形状表現
オブジェクト
生成画像
表面の素材の表現
光源
画像処理
カメラ
カメラから見える画像を計算
光の効果の表現
今日の予定
• 1～3限目講義＋演習
– 3次元グラフィックス演習のための基礎知識
– ミニテスト
– 資料に従いながら、全体で一緒に演習を進める
• 3～5限目自由演習＋レポート作成
– 自由演習（3～5限目）
– レポートを提出したら帰って良い
• 前回のレポートが終わっていない人は、そちらをやっ
ても良い（締め切りを延長しました）
演習内容
• 基本的な3次元グラフィックスのプログラムを
作成
– OpenGL を使ったポリゴン描画
– 視点操作
– アニメーション
講義内容
• 3次元グラフィックス演習のための基礎知識
– レンダリング・パイプライン
– 変換行列
レンダリング・パイプライン
OpenGLを使ったプログラミング
• OpenGLの機能
– 面単位で描画を行う
– Zバッファ法による描画（隠面処理）
• OpenGLの利用方法
– アプリケーションからポリゴンのデータを送ると、
OpenGLが適切な処理を行って、画面上に描画
（レンダリング・パイプライン）
– アプリケーションは、描画に必要な情報を設定
（変換行列、光源・素材情報、テクスチャ情報）
Ｚバッファ法（復習）
• 画像とは別に、それぞれのピクセルの奥行
き情報であるZバッファを持つ
• Ｚバッファを使うことで隠面消去を実現
– すでに書かれているピクセルのＺ座標と比較し
て、手前にある時のみピクセルを描画
Ｚバッファの値（手前にあるほど明るく描画）
レンダリング・パイプライン
各ポリゴンごとに処理
各頂点ごとに処理
x
y
z
頂点座標
座標変換
x
y
z
ラスタライズ
描画
スクリーン座標
• レンダリング時のデータ処理の流れ
– ３次元空間のポリゴンのデータ（頂点データの
配列）を入力
– いくつかの処理を経て、画面上に描画される
• OpenGL や DirectX などのライブラリを使用
するときは、この処理はライブラリが担当
レンダリング・パイプライン
x
y
z
座標変換
x
y
z
ラスタライズ
描画
頂点座標
スクリーン座標
（法線・色・テクスチャ座標）
• ポリゴン単位での描画を行う
１．ポリゴンを構成する頂点の座標、法線、色、
テクスチャ座標などを入力
２．スクリーン座標に変換（座標変換）
３．ポリゴンをスクリーン上に描画（ラスタライズ）
レンダリング・パイプライン
x
y
z
x
y
z
座標変換
描画
ラスタライズ
頂点座標
スクリーン座標
（法線・色・テクスチャ座標）
y
y
z
y
x
z
x
z
x
教科書基礎知識図2-21
描画前の設定
x
y
z
頂点座標
x
y
z
座標変換
ラスタライズ
描画
スクリーン座標
カメラの位置・向き
光源の情報
テクスチャの情報
• カメラの位置・向き（変換行列）の設定
• 光源の情報（位置・向き・色など）を設定
• テクスチャの情報を設定
• これらの情報は、次に更新されるまで記録される
ポリゴンデータ
• ポリゴンの持つ情報
– 各頂点の情報
•
•
•
•
座標
法線
色
テクスチャ座標
– 頂点のリスト
• 頂点の順番によって面の向きを表す
• 時計回りに見える方が表など（設定で向きは変更可）
ポリゴンの向き
• 頂点の順番で法線の向きを決定
– 例：表から見て時計回りの順序で頂点を与える
– 法線が視点と反対を向いていれば描画しない
（背面除去）
1
1
2
3
表
3
裏
2
描画データの入力
x
y
z
頂点座標
x
y
z
座標変換
ラスタライズ
描画
スクリーン座標
• 物体の情報を入力
– ポリゴンを構成する頂点の座標・法線・色・テク
スチャ座標などを入力
• 表面の素材などを途中で変える場合は、適
宜設定を変更
座標変換&ライト計算
x
y
z
座標変換
x
y
z
ラスタライズ
描画
頂点座標
スクリーン座標
（法線・色・テクスチャ座標）
• 座標変換
–
–
–
–
頂点座標・法線をスクリーン座標系に変換
視野外のポリゴンは描画しない
面の向きをもとに背面除去
法線と光源情報から、頂点の色の変化を計算
• 環境光、拡散反射光、鏡面反射光を加算
ラスタライズ
x
y
z
頂点座標
座標変換
x
y
z
ラスタライズ
スクリーン座標
• ラスタライズ（ポリゴンを画面上に描画）
– グローシェーディングを適用
– テクスチャマッピングを適用
– Ｚバッファを考慮
描画
ハードウェアサポート
x
y
z
座標変換
頂点座標
x
y
z
ラスタライズ
描画
スクリーン座標
• ハードウェアによる処理
– 昔はラスタライズのみをサポート
• 使用可能なテクスチャの種類・枚数などは増えている
– 現在は、座標変換や光の計算もハードウェアサ
ポートされている
– 最近では、ハードウェア処理の方法を変更でき
るようになっている（VertexShader, PixelShader）
ダブルバッファリング
• 画面表示の仕組み
– ビデオメモリ（VRAM）上の画面データをディスプ
レイ上に表示
– 描画途中の画面を表示するとちらついてしまう
• 描画量が少ない場合は垂直同期（VSYNC）中に描
画すればちらつかない
VRAM
描画処理
画面情報
ディスプレイ
ダブルバッファリング
• ２枚の画面を使用
– 表示用
– 描画用（＋Ｚバッファ）
• ダブルバッファリング
描画用の
画面
描画処理
表示用の
画面
ディスプレイ
– 描画用の画面に対して描画
– 描画が完了したら、描画用の画面と表示用の画
面を切り替える（もしくは、描画用の画面を表示
用の画面にコピーする）
座標変換
座標変換
• 座標変換
– ワールド座標からカメラ座標系への変換
– カメラ座標系からスクリーンへの透視変換
y
z
y
x
y
z
z
x
ワールド座標系
カメラ座標系
x
スクリーン座標系
ワールド座標系
• ３次元空間の座標系
– 物体や光源やカメラなどが配置される
– 原点や軸方向は適当にとって構わない
• カメラに対する相対座標のみが重要
– 単位も統一さえされていれば自由に設定して構
わない（メートル、センチ、etc）
y
z
x
ワールド座標系
カメラ座標系
• カメラを中心とする座標系
– Ｘ軸・Ｙ軸がスクリーンのＸ軸・Ｙ軸に相当
– 奥行きがＺ軸に相当
y
y
x
z
z
カメラ座標系
x
スクリーン座標系
• スクリーン上の座標
– 射影変換（透視変換）を適用後の座標
• 奥にあるものほど中央に描画されるように座標計算
– 奥行き値（Ｚ座標）も持つ → Ｚバッファで使用
y
y
x
z
カメラ座標系
z
y
x
スクリーン座標系
z
x
モデル座標系
• 物体のローカル座標
– ポリゴンモデルの頂点はモデル内部の原点を
基準とするモデル座標系で定義される
– 正面方向をＺ軸にとる場合が多い
– ワールド座標系にモデルを配置
y
y
y
z
x
x
z
z
モデル座標系
x
ワールド座標系
座標変換の流れ
• モデル座標系からスクリーン座標系に変換
y
y
z
モデル座標系
ワールド座標系
x
z
x
y
y
x
スクリーン
座標系
カメラ座標系
z
x
z
アフィン変換
• アフィン変換（同次座標系変換）
– ４×４行列の演算によって、３次元空間における
回転・平行移動・拡大縮小などの処理を計算
– 同次座標系
• （x, y, z, w）の４次元座標値によって扱う
• ３次元座標値は（x/w, y/w, z/w）で計算（通常は w = 1）
 R00 S x

 R10
 R20

 0
R01
R11S y
R21
0
R02
R12
R22 S z
0
Tx  x   x 
    
Ty  y   y 

Tz  z   z 

  

1  w   w ' 
回転変換
• 回転変換
– 原点を中心とする回転を表す
 R00

 R10
R
 20
 0

R01
R11
R21
R02
R12
R22
0
0
0  x   R00 x  R01 y  R02 z   x 
  
  
0  y   R10 x  R11 y  R12 z   y 

 




0 z
R20 x  R21 y  R22 z
z
  
  
 1
1  1  
1
  
回転変換の例
• Y軸を中心として、時計回りに９０度回転
(-5,6,3)
(-3,6,3)
(3,6,3)
y
(3,6,5)
(3,2,3)
(-5,2,3)
(-3,2,3)
x
(3,2,5)
z
 cos 

 0
  sin 

 0
0 sin 
1
0
0 cos 
0
0
0  x   0
  
0  y   0

0  z   1
  
1 
 1   0
0 1 0  x   z   x 
     
1 0 0  y   y   y 


0 0 0  z    x   z  
     
0 0 1 
 1   1   1 
平行移動
• 平行移動
– （Tx,Ty,Tz）の平行移動
1

0
0

0

0 0 Tx  x   x  Tx   x 
  
  
1 0 Ty  y   y  Ty   y 

 




0 1 Tz z
z  Tz
z
  
  




0 0 1  1   1   1 
平行移動の例
• （8,-2,0）平行移動
(-5,6,3)
(-5,2,3)
(-3,6,3)
(3,4,3)
y
(-3,2,3)
z
1

0
0

0
(5,4,3)
x
(3,0,3)
0 0 8  x   x  8   x 
  
  
1 0 2  y   y  2   y 


0 1 0  z   z   z  
  
  
0 0 1 
1
1
  
 1
(5,0,3)
拡大縮小
• 拡大縮小
– （Sx,Sy,Sz）倍のスケーリング
 Sx

0
0

0

0
Sy
0
0
0
Sz
0
0
0  S x x   x 

  
0  S y y   y 
 



0 Sz z
z

  


1  1   1 
拡大縮小の例
• （2, 0.5, 1）倍に拡大縮小
(-5,6,3)
(-5,2,3)
(-3,6,3)
y
(-10,3,3)
(-6,3,3)
x
(-3,2,3)
(-10,1,3) (-6,1,3)
z
 2 0 0 0  x   2 x   x 

  
  
0
0.5
0
0
y
0.5
y

   
y 
 0 0 1 0  z   z   z  


 
  

 0 0 0 1  1   1   1 
行列演算の適用
• １つの行列演算で各種の変換を適用可能
• 行列を次々にかけていくことで、変換を適用
することができる
– 回転・移動の組み合わせの例
回転
y
平行移動 y
y
x
x
z
x
z
 cos 90

0

  sin 90

0

0 sin 90
1
0
0 cos 90
0
0
0

0
0

1 
z
1

0
0

0
0 0 5

1 0 0
0 1 0

0 0 1 
行列演算の適用
• 回転・移動の組み合わせの例
回転
y
平行移動 y
y
x
z
x
z
平行移動
x
z
回転
0 0 0   cos 90
0 sin 90 0   x   x 
   

1 0 0
0
1
0
0   y   y 



0 1 5   sin 90 0 cos 90 0  z   z 
    
 
0 0 1
0
0
0
1 1   1 
先に適用する方が右側になることに注意！
1

0
0

0
行列計算の適用順序
• 行列演算では可換則は成り立たないことに
注意！
AB  BA
• 行列の適用順序によって結果が異なる
– 例：
• 回転 → 平行移動
• 平行移動 → 回転
行列演算の適用
• 移動→回転の順番で適用したときの例
平行移動
y
x
z
回転
y
x
z
y
x
z
平行移動は回転変換適用
前の座標系の向きで適用
されることに注意！
y
回転
 cos 90
0 sin 90

0
1
0

  sin 90 0 cos 90

0
0
0

x
z
平行移動
0   1 0 0 0  x   x 

   
0   0 1 0 0  y   y 


0  0 0 1 5  z   z 
 

  

1   0 0 0 1  1   1 
行列演算の適用
• 移動→回転の順番で適用したときの例
平行移動
y
x
z
回転
x
z
平行移動
0 sin 90
1
0
0 cos 90
0
y
x
z
 cos 90

0

  sin 90

0

回転
y
0
01

00
00
 
10
0 0 0  x   cos 90
0 sin 90 5   x   x 
   
  
1 0 0  y  
0
1
0
0   y   y 




0 1 5  z   sin 90 0 cos 90 0  z   z 
    

 

0 0 1  1  
0
0
0
1 1   1 
この場合は並行移動成分にも回転がかかる
行列演算の適用
• 回転→移動の順番で適用（さきほどの例）
回転
y
x
z
平行移動 y
y
x
x
z
平行移動
回転
0 sin 90
 1 0 0 0   cos 90


0
1
0
0
0
1
0


 0 0 1 5    sin 90 0 cos 90

 
0
0
0
0 0 0 1
z
0   x   cos 90
  
0 y  
0


  sin 90


z
0
   
1 1  
0
0 sin 90
1
0
0 cos 90
0
0
0   x   x 
   
0   y   y 




 z 
z
5
    
1 1   1 
こちらの順番の方が普通に使う場合が多い
アフィン変換の考え方
• アフィン変換の考え方
– ひとつの座標系内での回転・平行移動・拡大縮
小処理と考えることもできるし、
– ある座標系から別の座標系への座標系の変換
と考えることもできる
• 逆行列を計算すれば、反対方向の変換も求
まる
y
y
y
A
x
x
z
1
A
z
z
x
アフィン変換のメリット
• 行列演算だけでさまざまな処理を行える
– アフィン変換を使わずとも、回転・平行移動・拡
大縮小など各処理に応じて計算することは可能
• それぞれの処理だけをみればこの方が高速
– 各種処理を同じ方法で扱えることに意味がある
• 複数の変換処理をまとめてひとつの行列に
できる
– 最初に一度全行列を計算してしまえば、後は各
頂点につき１回の行列演算だけで処理できる
座標変換の例
• モデル座標系からカメラ座標系への変換
– 物体の位置が（-10,0,4）にあり、ワールド座標
系と同じ向き
– カメラの位置が（8,2,3）にあり、ワールド座標系
のＹ軸を中心として 90度回転している
– モデル座標系からカメラ座標系への変換行列を
計算せよ
y
y
x
z
y
(8,2,3)
x
(-10,0,4)
x
z
z
座標変換の例
• モデル座標系 → ワールド座標系
1

0
0

0
0 0 10 

1 0 0 
0 1 4 

0 0 1 
平行移動のみ
モデル座標系の原点 (0,0,0) は
ワールド座標系の (-10,0,4) に
平行移動される
y
y
x
z
y
(8,2,3)
x
(-10,0,4)
x
z
z
座標変換の例
• ワールド座標系 → カメラ座標系
 cos  90  0 sin  90  0   1 0 0 8 




0
1
0
0   0 1 0 2 




sin

90
0
cos

90
0
 
    0 0 1 3 


0 0 0 1 
0
0
0
1


カメラの座標系から見てワールド座標系は、カメラの位置が（8,2,3）なので、
ワールド座標系のＹ軸を中心に -90 度回転
ワールド→カメラは（-8,-2,-3）
位置はワールド座標系で表されているので、先に平行移動を適用
y
y
x
(8,2,3)
x
(-10,0,4)
z
x
y
z
z
座標変換の例
• モデル座標系 → カメラ座標系
 cos  90 

0


  sin  90 

0

0 sin  90
1
0
0 cos  90
0


0
01

00

0 0

  0
1
ワールド → カメラ
モデル → ワールド
y
y
x
z
x
y
(8,2,3)
x
(-10,0,4)
0 0 10  x   x 
   
1 0 0  y   y 

0 1 4  z   z 

  

0 0 1  1   1 
0 0 8  1

1 0 2  0
0 1 3  0

0 0 1 
 0
z
z
座標変換のまとめ
• 頂点座標やベクトルに、４×４行列をかける
ことで、ある座標系から異なる座標系に変換
y
y
z
モデル座標系
ワールド座標系
x
z
x
y
y
x
スクリーン
座標系
カメラ座標系
z
x
z
アフィン変換のまとめ
• 回転・移動などを行う変換行列を順番に適
用することで、複雑な座標変換を実現
平行移動






・・・
 1

 0
 0

 0

回転
0 0 0   cos 90

1 0 0
0
0 1 5    sin 90

0 0 1  
0
0 sin 90
1
0
0 cos 90
0
0
0   x   x 
   
0   y   y 


0  z   z 
    
1 1   1 
まとめ
• レンダリング・パイプライン
• 座標変換
– モデル、ワールド、カメラ、スクリーン座標系
– アフィン変換（移動・回転の組み合わせ）

Download Report