コンピューターグラフィックスＳ

Size: px

Start display at page:

Download "コンピューターグラフィックスＳ"

みがねすえたけ
5 years ago
Views:

1 コンピューターグラフィックス S 第 12 回シェーディングマッピングシステム創成情報工学科尾下真樹 2018 年度 Q2

2 今回の内容前回の復習シェーディング光のモデルスムーズシェーディングシェーディング ( 続き ) OpenGL での光源情報の設定ラジオシティ影の表現 BRDF マッピング

3 今回の内容シェーディング光の効果の表現マッピング生成画像表面の素材の表現オブジェクトオブジェクトの作成方法オブジェクトの形状表現表面の素材の表現動きのデータの生成画像処理カメラから見える画像を計算光源光の効果の表現

教科書 ( 参考書 ) コンピュータグラフィックス CG-ARTS 協会編集出版 4 章 4-4 4-7( 詳しい ) 4

4 教科書 ( 参考書 ) コンピュータグラフィックス CG-ARTS 協会編集出版 4 章 ( 詳しい ) 4 章 4-5 ビジュアル情報処理 -CG 画像処理入門 - CG-ARTS 協会編集出版 4 章 4-4~4-5 4 章 4-6

5 参考書コンピュータグラフィックス CG-ARTS 協会編集出版 (3,200 円 ) 4 章 3DCG アニメーション栗原恒弥安生健一著技術評論社出版第 2 章 (68~108 ページ ) 3 次元 CG の基礎と応用千葉則茂土井章男著サイエンス社出版第 2 章 (23~28 ページ ) 第 4 章 (35~39 ページ ) 第 5 章 (40~49 ページ ) 第 8 章 (73~75 ページ ) 第 9 章 (79~90 ページ )

6 前回の復習

7 光のモデル輝度の計算式全ての光による影響を足し合わせることで物体上の点の輝度 (RGB の値 ) が求まる各 I は光の明るさ (RGB) 各 k は物体の反射特性 (RGB) n L n I I k I k N L k R V k I k I a a i d s r r t t i 1 環境光拡散反射光鏡面反射光 ( 局所照明 ) 鏡面反射光 ( 大域照明 ) 透過光それぞれの光源からの光 ( 局所照明 ) 大域照明

8 光のモデル局所照明モデル光源と一枚の面の関係のみを考慮したモデル環境光拡散反射光鏡面反射光大域照明モデル周囲の物体の影響も考慮したモデル環境光鏡面反射光透過光同じ種類の光でも考慮する範囲に応じて局所モデルと大域モデルがあるので注意

9 光のモデルのまとめ光源 N L R 拡散鏡面反射光 ( 光源から来る光 ) 環境光 ( 周囲から来る光 ) 鏡面反射光 ( 映り込み ) n L 透過光 n I I k I k N L k R V k I k I a a i d s r r t t i 1 環境光拡散反射光鏡面反射光 ( 局所照明 ) 鏡面反射光 ( 大域照明 ) 透過光それぞれの光源からの光 ( 局所照明 ) 大域照明

10 光源の種類平行光源一定方向からの光源計算量が最も少ない太陽などの遠くにある光源の表現に適している点光源位置の決まった光源ライトなどの表現に適している光の方向は点光源と面の位置関係により決まる光の減衰も考慮できる無限遠に光源があると見なす

11 光のモデルの計算 OpenGL による光の効果の計算設定された光源情報及び法線に従い局所照明モデルのみを計算環境光には一定の明るさを指定可能光源の種類や位置を指定可能 ( 複数指定可能 ) n L n I I k I k N L k R V k I k I a a i d s r r t t i 1 環境光拡散反射光鏡面反射光 ( 局所照明 ) 鏡面反射光 ( 大域照明 ) 透過光それぞれの光源からの光 ( 局所照明 ) 大域照明

12 プログラムの例光源の位置や色の設定 ( 詳細は後日の演習 ) 以下の例では環境光と一つの点光源を設定 float light0_position[] = { 10.0, 10.0, 10.0, 1.0 }; float light0_diffuse[] = { 0.8, 0.8, 0.8, 1.0 }; float light0_specular[] = { 1.0, 1.0, 1.0, 1.0 }; float light0_ambient[] = { 0.1, 0.1, 0.1, 1.0 }; gllightfv( GL_LIGHT0, GL_POSITION, light0_position ); gllightfv( GL_LIGHT0, GL_DIFFUSE, light0_diffuse ); gllightfv( GL_LIGHT0, GL_SPECULAR, light0_specular ); gllightfv( GL_LIGHT0, GL_AMBIENT, light0_ambient ); glenable( GL_LIGHT0 ); glenalbe( GL_LIGHTING );

13 シェーディングの方法フラットシェーディングスムーズシェーディンググローシェーディングフォンシェーディングフラットシェーディンググローシェーディングフォンシェーディング

14 シェーディングの処理のまとめフラットシェーディング面の法線から面の色を計算グローシェーディング頂点の法線から頂点の色を計算頂点の色から各点の色を決定フォンシェーディング頂点の法線から面内の各点 ( ピクセル ) の法線を計算各点の法線から色を計算

15 頂点の法線頂点の法線もともと頂点には法線という概念はないシェーディングを計算するために頂点の法線を利用計算方法頂点に隣接する全ての面の法線を平均面の面積に応じて加重平均する方法もある基礎と応用図 4.2

16 レポート課題 OpenGL を使った課題プログラムの作成各自自分に与えられた課題を実現するプログラムを作成するポリゴンモデルの描画視点操作インターフェースの拡張アニメーション Moodle から提出レポート作成したプログラム一式を提出レポートの締め切りは後日連絡 8 月上旬 ( 期末試験後 ) の締め切りを予定

17 OpenGL での光源情報の設定

18 OpenGL の光源処理の概要光源と物体の素材 ( 頂点の色 ) 法線によって描画される頂点 ( ポリゴン ) の色が決まる OpenGL の光源処理 OpenGLの関数を使って光源や物体の素材法線の情報を指定 OpenGLは各頂点ごとに自動的に光源処理を行い各頂点の色を決定グローシェーディングにより各頂点の色をもとにポリゴンが描画される

19 レンダリングパイプライン各頂点ごとに処理各ポリゴンごとに処理 x y z 座標変換 x y z ラスタライズ描画頂点座標スクリーン座標カメラの位置向き光源の情報テクスチャの情報光源の情報物体の素材法線を指定各頂点ごとに自動的に光源処理を行い各頂点の色を決定 ( 座標変換 ) グローシェーディングにより各頂点の色をもとにポリゴンが描画される ( ラスタライズ )

20 光のモデル ( 復習 ) 輝度の計算式全ての光による影響を足し合わせることで物体上の点の輝度 (RGB の値 ) が求まる各 I は光の明るさ (RGB) 各 k は物体の反射特性 (RGB) n L n I I k I k N L k R V k I k I a a i d s r r t t i 1 環境光拡散反射光鏡面反射光 ( 局所照明 ) 鏡面反射光 ( 大域照明 ) 透過光それぞれの光源からの光 ( 局所照明 ) 大域照明

21 光のモデル ( 復習 ) 光源 N L R 拡散鏡面反射光 ( 光源から来る光 ) 環境光 ( 周囲から来る光 ) 鏡面反射光 ( 映り込み ) n L 透過光 n I I k I k N L k R V k I k I a a i d s r r t t i 1 環境光拡散反射光鏡面反射光 ( 局所照明 ) 鏡面反射光 ( 大域照明 ) 透過光それぞれの光源からの光 ( 局所照明 ) 大域照明

22 OpenGL の光源処理光のモデルにもとづき各光源による輝度を RGBごとに次式で計算して加算 Color L M max l n, 0 L M max{a, B} は A, B のうち大きい値を使用内積が負の場合はその項は 0 になる全ての値を足し合わせた結果は 0.0~1.0 の範囲に丸められる L, ambient L, diffuse Lspecular は光の輝度 M, ambient M, diffuse M, specular M pecular_factor は素材の特性 s ambient ambient diffuse diffuse M s pecular_factor max sn, 0 L M specular specular

23 光源情報の設定光源情報の設定 gllight(), gllightv() 関数を使用光源番号設定パラメタの種類設定する値を指定 gllight() 関数はスカラ値を設定 gllightv() 関数はベクトル値を設定光源処理を有効にする光源処理を有効にする glenable(gl_lighting) 各光源の影響を有効にする glenable(gl_light0)

24 光源情報の設定の例 (1) 初期化処理での設定 float light0_position[] = { 10.0, 10.0, 10.0, 1.0 }; float light0_diffuse[] = { 0.8, 0.8, 0.8, 1.0 }; float light0_specular[] = { 1.0, 1.0, 1.0, 1.0 }; float light0_ambient[] = { 0.1, 0.1, 0.1, 1.0 }; gllightfv( GL_LIGHT0, GL_POSITION, light0_position ); gllightfv( GL_LIGHT0, GL_DIFFUSE, light0_diffuse ); gllightfv( GL_LIGHT0, GL_SPECULAR, light0_specular ); gllightfv( GL_LIGHT0, GL_AMBIENT, light0_ambient ); glenable( GL_LIGHT0 ); glenalbe( GL_LIGHTING ); 詳細は後ほど説明

25 光源情報の設定の例 (2) 変換行列の変更後に光源位置を再設定光源計算はカメラ座標系で適用されるため void display( void ) { // 変換行列を設定 ( ワールド座標系カメラ座標系 ) glmatrixmode( GL_MODELVIEW ); // 光源位置を設定 ( 変換行列の変更にあわせて再設定 ) float light0_position[] = { 10.0, 10.0, 10.0, 1.0 }; gllightfv( GL_LIGHT0, GL_POSITION, light0_position );

26 サンプルプログラムの構成 ( 確認 ) main() 関数 initenvironment() 関数 display() 関数ユーザプログラム初期化処理描画 GLUT glutmainloop() reshape() 関数 mouse() 関数 motion() 関数ウィンドウサイズ変更マウス処理入力待ち処理 idle() 関数アニメーション処理 main() 関数終了処理

27 光源の種類と設定方法 (1) 平行光源 (x,y,z) の方向から平行に光が来る光源位置のw 座標を0.0に設定無限遠に光源があると見なせる点光源 (x,y,z) の位置に光源がある光源位置のw 座標を1.0に設定

28 光源の種類と設定方法 (2) スポットライト光源点光源にさらにスポットライトの向き角度範囲などの情報を設定したもの指定した方向角度にのみ有効な点光源光源の減衰も設定可能点光源スポットライト光源から距離が離れるほど暗くなるような効果を加える設定方法の説明は省略

29 光源情報の設定の例サンプルプログラムの例 float light0_position[] = { 10.0, 10.0, 10.0, 1.0 }; float light0_diffuse[] = { 0.8, 0.8, 0.8, 1.0 }; float light0_specular[] = { 1.0, 1.0, 1.0, 1.0 }; float light0_ambient[] = { 0.1, 0.1, 0.1, 1.0 }; gllightfv( GL_LIGHT0, GL_POSITION, light0_position ); gllightfv( GL_LIGHT0, GL_DIFFUSE, light0_diffuse ); gllightfv( GL_LIGHT0, GL_SPECULAR, light0_specular ); gllightfv( GL_LIGHT0, GL_AMBIENT, light0_ambient ); glenable( GL_LIGHT0 ); glenalbe( GL_LIGHTING ); 光源位置の w 座標が 1.0 なので点光源となる LIGHT0 の光源の位置種類拡散反射成分の色鏡面反射成分の色を設定 LIGHT0 の環境光成分の色を設定

30 光源位置向きの設定 ( 注意 ) 光源の位置向きは描画関数内で毎回更新光源の位置向きは現在のカメラ座標系にもとづいて設定されるためカメラが移動回転する度に設定し直す必要がある void display( void ) { // 光源位置を設定 ( 変換行列の変更にあわせて再設定 ) float light0_position[] = { 10.0, 10.0, 10.0, 1.0 }; gllightfv( GL_LIGHT0, GL_POSITION, light0_position );

31 一般的な光源の設定方針 LIGHT0 を使って環境の主な光源を設定その環境の明るさに応じて環境光を設定全体の明るさを決めるような平行光源 or 点光源を設定 LIGHT1 以降を使って追加の光を設定電灯や車など空間中にあるオブジェクトが周囲のオブジェクトを照らすような場合に点光源やスポットライトを追加する 2 番目以降の光源では環境光はあまり大きくしないことが多い

32 素材の設定頂点の色の設定 glcolor() 関数デフォルトでは頂点の環境特性と拡散反射特性を同時に設定 ( 個別に設定することも可能 ) その他の素材特性を個別に設定 ( 詳細は省略 ) glmaterial() 関数環境特性拡散反射特性鏡面反射特性鏡面反射係数など Color L M max l n, 0 L M ambient ambient diffuse diffuse M s pecular_factor max sn, 0 L M specular specular

33 ラジオシティ

34 ラジオシティ環境光をより正しく計算するための方法面同士の相互反射を考慮各面ごとの環境光を計算する方法これまでのモデルでは環境光は一定と仮定していたため周囲の明るさによる影響を表現できなかったどのレンダリング手法とも組み合わせが可能ただし非常に計算時間がかかる n L n I I k I k N L k R V k I k I a a i d s r r t t i 1 環境光拡散反射光鏡面反射光 ( 局所照明 ) 鏡面反射光 ( 大域照明 ) 透過光

35 レイトレーシングの限界反射光や透過光はほぼ正しく計算できる環境光を正しく計算するのは難しい環境光を計算しようとするとレイと物体の衝突点から無数の方向にレイを飛ばす必要があるため基礎と応用図 8.2

36 ラジオシティの具体例レイトレーシングとラジオシティの比較鏡面反射による映り込み ( レイトレーシング ) と拡散反射による色の影響 ( ラジオシティ ) CG 制作独習事典 p.5

37 レイトレーシング法鏡面反射により周囲の一点の色が映り込むラジオシティの具体例ラジオシティ法周囲の面との明るさの相互影響を計算するこレイトレーシングとラジオシティの比較鏡面反射による映り込み ( レイトレーシングとで周囲の面からぼ ) と拡散反射による色の影響 ( ラジオシティ ) んやりと照らされる効果を表現 CG 制作独習事典 p.5

38 ラジオシティの考え方 (1) ラジオシティ ( 熱の放射エネルギー ) の考え方にもとづく面ごとの環境光の計算面同士の相互反射モデルある面の明るさが別の面の明るさにどの程度影響を与えるか ( フォームファクタ ) を計算面同士が向き合っており障害物がなければ大きな影響を与える ( 一方が明るくなるともう一方も照らされて明るくなる ) 基礎と応用図 9.3

39 ラジオシティの考え方 (2) フォームファクタをもとに全ての面同士の明るさがつり合うような各面の明るさを計算エネルギーの分散と同様の考え方にもとづいて光源となる面の明るさをフォームファクタの大きさに応じて他の面に分散させていくフォームファクタ ( 面同士の明るさの影響 ) 明るさがつり合うように光源の明るさを分散光源となる面

40 ラジオシティの計算手順ポリゴンを細かい面に分割フォームファクタを計算光源の情報などを設定連立方程式を解く計算結果の明るさを使ってレンダリング基礎と応用図 9.4

41 ラジオシティ計算のための分割もとのポリゴンモデルを細かく分割するそれぞれの分割ポリゴンごとにフォームファクタによる明るさを計算ある程度細かく分割する必要がある 3DCG アニメーション図 2.38

42 フォームファクタの計算フォームファクタの計算モデル球面に投影した面積を水平面に射影しその面積の広さによりフォームファクタを計算基礎と応用図 9.7

43 フォームファクタの計算障害物を考慮した計算 ( ヘミキューブ法 ) ある面の周囲にZバッファを持った面を置く全ての面を周囲の面に描画それぞれの面の最終的な面積によってフォームファクタを決める基礎と応用図 9.8

44 連立方程式の計算面の光の計算式 B E B F i i i j ij j 1 連立方程式 n Bi i 光の強さ反射率 Ei F ij 放射光の強さフォームファクタ 1 1F11 1F12 1F1 n B1 E1 2F21 1 n 2F22 2F 2n B 2 E 2 E BF F F 1 F B E n n1 n n2 n nn n n i i j ij j 1 ガウス - ザイデル法などを使って解が収束するまで繰り返し計算

45 ラジオシティの具体例基礎と応用図 9.1, 9.2 基礎と応用図 5.4

46 ラジオシティの特徴どのレンダリング手法とも組み合わせ可能レンダリングの前処理として計算される光源や物体が動かなければ再計算の必要がないのでリアルタイム処理でも利用可能前もってラジオシティを計算した結果を保存しておくウォークスルーなどでの利用自然な照明の効果を計算するためには必須の技術

47 他の大域照明計算手法モンテカルロ法 1 本のレイを追跡するレイトレーシングとは異なり複数の経路を追跡する手法乱数にもとづいて反射面から複数の経路を生成するフォトンマッピング法光源から放射される光を追跡することで各点における明るさを計算する手法基礎と応用図 8.2

48 影の表現

49 影の表現方法レイトレーシングやラジオシティなどを用いることで影も自動的に表現できる CG 制作独習事典 p.5 コンピュータゲームなどで使用するのは難しい影は非常に重要なので他の手段で特別に実現

50 影の擬似的な表現方法テクスチャマッピング投影ポリゴンシャドウヴォリュームシャドウマップなどここでは各手法の説明は省略

51 BRDF

52 BRDF BRDF Bi-directional Reflectance Distribution Function 双方向反射分布現実世界の物質の反射特性を正確に再現するための技術イメージベースドレンダリングの考え方を発展させたもの

53 反射特性のモデルフォンのモデル拡散反射光 I k I N L d d l 鏡面反射光 I ki RV d s l n 現実の物体表面は平らではなく乱反射などが起こるモデルとのずれが生じる基礎と応用図 2.9 基礎と応用図 2.10

54 BRDF の考え方反射特性を表現カメラ方向光源方向の関数によって表される法線に対するカメラ方向光源方向特殊な装置を使って実際の素材から計測 CG WORLD 2004 年 12 月号

55 Debevec 2000 サンプル画像の取得

56 映画への応用 Spider-Man 2 完全 CG のキャラクタの顔の皮膚の質感を再現 CG WORLD 2004 年 12 月号 Spider-Mann 2 Sony Pictures

57 映画への応用 Matrix (2, 3) 完全な CG キャラクタに BRDF が使われた最初の例 Matrix Warner Bros. CG WORLD 2004 年 12 月号

58 マッピング

59 マッピングマッピング面を描画する時に面の表面に画像を貼り付ける技術複雑なモデリングをすることなく細かい模様などを表現できる基礎知識図 3-19 基礎と応用図 5.2

60 マッピングの方法物体への画像の貼り付け方マッピングの方向や繰り返しの方法 uv 座標系基礎と応用図 5.3 テクスチャ画像の座標は (u,v) で表せるモデルデータの各頂点 (x,y,z) ごとに対応するテクスチャ画像の (u,v) 座標を与えておく

61 マッピングの例人体モデルへのマッピングの例 v 各頂点にテクスチャの (u,v) 座標を設定 u

62 自動マッピングの方法ラッピング各頂点の (u,v) 座標を自動的に計算する方法主に単純な物体へのマッピング時に使用平行ラッピング曲座標ラッピング基礎知識図 3-22

63 手動マッピングの方法手動でのマッピング複雑な物体へのマッピングをする時はモデリングをする人が手動で (u,v) 座標を設定マッピング作成の手順 1. 最初にまずモデルを作成 2. モデルの展開図を作りモデルの各頂点に対応する (u,v) 座標を設定 ( モデリング用ソフトの機能 ) 3. テクスチャ画像を描く後からモデルを大きく変更することは難しい

64 特殊なマッピングバンプマッピング透過率や反射率のマッピング環境マッピング

65 バンプマッピングバンプマッピング面の色ではなく法線を変化させる方法法線を変化させることで見た目の質感を変えることができるピクセルの周囲との輝度の差に応じて法線を傾ける形状そのものを変えるわけではないので輪郭線はそのままであることに注意各ピクセルごとに法線と色を計算することが必要になる ( フォンシェーディングとの組み合わせ )

66 バンプマッピングの原理基礎と応用図 5.9 テクスチャに格納された各点の高さから各点の傾き ( 法線を計算 ) テクスチャから計算された法線に従って各点の法線を変化

67 バンプマッピングの例基礎と応用図 5.9 CG 制作独習事典 p.13

68 反射率透過率のマッピング反射率や透過率をマッピングすることも可能透過率のマッピングは髪の毛や破れた着物などを表現する時などに用いられる細かい形状を一枚の大きなポリゴンで表現できる [Koh and Huang, CAS 2001]

69 環境マッピング環境マッピング物体の周囲の風景の画像をテクスチャマッピングを使って物体に貼り付けることで周囲の風景の映り込みを表現する CG 制作独習事典 p.17

70 環境マッピングの手順物体の周囲の画像をレンダリングカメラを物体の中心に置いて各方向を見たときの画像を生成例えばキューブ環境マップならば 6 枚分の画像を生成周囲の物体が動かなければ周囲の画像の生成は最初の一回だけで良い (2 回目からは高速に描画可能 ) レンダリングした画像を物体に貼り付けるテクスチャ座標は各点の法線から自動的に計算できる

71 環境マッピングの例 CG 制作独習事典 p.17

72 マッピングの合成複数の画像によるマッピング実際の応用では複数のマッピングを重ね合わせる ( 合成する ) 場合が多い基本となる模様 (1 枚 ) + 環境や光などの影響 (1~ 数枚 ) 昔のハードウェアは 1 枚しかマッピングができなかった最近のハードウェアは 4 枚 ~16 枚程度の同時マッピングに対応している

73 まとめ前回の復習シェーディング光のモデルスムーズシェーディングシェーディング ( 続き ) OpenGL での光源情報の設定ラジオシティ影の表現 BRDF マッピング

74 次回予告 OpenGL 演習シェーディング ( 光源情報の設定 ) マッピング

Fair Curve and Surface Design System Using Tangent Control

Fair Curve and Surface Design System Using Tangent Control 情報工学 2016 年度後期第 6 回 [11 月 16 日 ] 静岡大学工学研究科機械工学専攻ロボット計測情報講座創造科学技術大学院情報科学専攻三浦憲二郎講義アウトライン [11 月 16 日 ] ビジュアル情報処理 3 モデリング 3.3 曲線曲面 OpenGL 色の取り扱いシェーディング照明モデルと照光処理拡散光鏡面光環境光ビジュアル情報処理 3-3 曲線曲面 3-3-1