59
7 章 レンダリング 7 章 レンダリング 畔上 秀幸 名古屋大学 情報学研究科 複雑系科学専攻 April 3, 2019 1 / 59

第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

第 7章 レンダリング

畔上 秀幸

名古屋大学 情報学研究科 複雑系科学専攻

April 3, 2019

1 / 59

Page 2: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

はじめに

§7.1 はじめに

(目標) CG で使われる 3次元形状を写実的に表示するための技術 (レンダリング) について理解する.

2 / 59

Page 3: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

レンダリングとは

§7.2 レンダリングとは

定義 7.2.1 (レンダリングとは)

3次元形状を写実的に表示するための方法を総称してレンダリング (rendering)という.

レンダリングには,次のような種類がある.1 隠線/隠面処理 (hidden line/surface calculation)

a 外向き法線法 (outer normal algorithm)b Zバッファ法 (Z-buffer algorithm)c スキャンライン法 (scan-line algorithm)

2 シェーディング (shading)

a フラットシェーディング (flat shading) あるいはコンスタントシェーディング(constant shading)

b スムーズシェーディング (smooth shading)

i グーロー (Gourand) シェーディングii フォン (Phong) シェーディング

3 / 59

Page 4: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

レンダリングとは

3 テクスチャマッピング (texture mapping)

a 表面テクスチャマッピング (surface texture mapping)

b バンプマッピング (bump mapping)c 環境マッピング (environmental mapping)

i 反射マッピング (reflection mapping)

ii 屈折マッピング (refraction mapping)

d ソリッドテクスチャマッピング (solid texture mapping)

4 レイトレーシング (ray tracing)

5 ボリュームビジュアライゼーション (volume visualization)

a ボリュームレンダリング (volume rendering)

b サーフェイスレンダリング (surface rendering)

4 / 59

Page 5: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

隠線/隠面処理

§7.3 隠線/隠面処理

定義 7.3.1 (隠線/隠面処理とは)

多面体を対象にして,投影変換の結果,見えない線あるいは面を消去する処理を隠線/隠面処理という.

多面体 隠線処理後 隠面処理後

図 7.1: 隠線/隠面処理

5 / 59

Page 6: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

隠線/隠面処理

外向き法線法

§7.3.1 外向き法線法

定義 7.3.2 (外向き法線法)

多面体の面ごとに外向き法線 ν ∈ R3 と視線の方向 e ∈ R3 を計算して,内積ν · e ≥ 0 のとき可視,ν · e < 0 のとき不可視と判定する方法を外向き法線法という.

面の法線 ν は,面の頂点を右回りに p0, p1, p2 としたとき,

ν =(p1 − p0)× (p2 − p0)

∥(p1 − p0)× (p2 − p0)∥

で計算される.

(問題点) 凸多面体でない場合には,判定を誤る.

6 / 59

Page 7: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

隠線/隠面処理

外向き法線法

p0

p1

p2

e

º

e

º º

e

外向き法線法 凸多面体でない場合

図 7.2: 外向き法線法

7 / 59

Page 8: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

隠線/隠面処理

Z バッファ法

§7.3.2 Z バッファ法

定義 7.3.3 (Z バッファ法)

ピクセルごとに多面体の奥行き値を正規化視座標系で表した値を z 値という. z値を記憶するメモリを Z バッファという. Z バッファを用いた隠線/隠面判定法を Z バッファ法という.

8 / 59

Page 9: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

隠線/隠面処理

Z バッファ法

(手順)

1 メモリの確保:ピクセルごとに,色を記憶するフレームバッファ f(x, y) とZ バッファ b(x, y) を用意する.

2 初期化:すべてのピクセル (x, y) に対して,f(x, y) に背景色を,b(x, y) に背景の距離を入力する.

3 Z バッファの書換: すべての面に対して,面を投影変換した多角形領域内にあるピクセル (x, y) の z 値 z(x, y) を求め,

If z (x, y) < b (x, y) , then b (x, y) := z (x, y) and f (x, y) :=面の色

により,b(x, y) と f(x, y) をかきかえる.

Z バッファ法の特徴

1 高速処理が可能である.

2 反射,屈折の処理が難しい.

9 / 59

Page 10: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

隠線/隠面処理

スキャンライン法

§7.3.3 スキャンライン法

定義 7.3.4 (スキャンライン法)

画面上の走査線をスキャンラインという.スキャンライン単位で隠面処理を行う方法をスキャンライン法という.

x

y

図 7.3: スキャンライン法

10 / 59

Page 11: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

隠線/隠面処理

スキャンライン法

(手順)

1 y ソート: 視線方向を向いたすべての面を正規化視座標系に変換し,各面ごとに最大/最小の y 値,各辺ごとに最大/最小の y 値を求め,最小 y 値の昇順でソートする.

2 スキャンラインごとに次のこと行う.a x ソート: スキャンライン平面とすべての平面の交差を調べ,交差するすべての辺の最大/最小の x 値を求め,最小 x 値の昇順でソートしたリスト (アクティブセグメントリスト) を作成する.

b z ソート: アクティブセグメントリストの辺データを z 値の昇順でソートし,z 値が最小の面の色をフレームバッファに格納する.

スキャンライン法の特徴

1 メモリの節約が可能である.

2 透過処理が可能である.

3 Zバッファ法よりも高速処理は難しい.

11 / 59

Page 12: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

OpenGL における隠面処理

§7.4 OpenGL における隠面処理

OpenGL において隠面処理を行うためには次の関数をよびだす.• Zバッファ利用の宣言

• void glutInitDisplayMode(GLUT DEPTH)

• Zバッファの初期化 (背景の距離を入力)• void glClear(GL COLOR BUFFER BIT | GL DEPTH BUFFER BIT)

• 有効範囲の指定• glEnable(GL DEPTH TEST) ~ glDisable(GL DEPTH TEST)

12 / 59

Page 13: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

OpenGL における隠面処理

ドーナツを切る.

図 7.1: ドーナツを切る

13 / 59

Page 14: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

OpenGL における隠面処理

program7 1.c...

glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH);

...

/* DEPTHバッファを ON */

#if 0

glEnable(GL_DEPTH_TEST);

#endif

...

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

...

glutSolidTorus(0.5, 0.9, 50, 50);/* トーラスを描画 */

...

glRectf(-2.0, -2.0, 2.0, 2.0);/* 長方形を描画 */

...

14 / 59

Page 15: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

シェーディング

§7.5 シェーディング

定義 7.5.1 (シェーディングとは)

多面体表面から視点に到達する光の輝度を計算する方法をシェーディング(shading) という.

1 RGB それぞれに対して,光の輝度を計算する.a 拡散反射 (diffuse reflection): Lambert 反射 (Lambertian reflectance)b 鏡面反射 (specular reflection): Phong 反射モデル (Phong reflection model)c 環境光反射 (ambient reflection)d 透過光 (transmitted light)

2 多面体表面に対して光の輝度の分布を計算する.a フラットシェーディング (flat shading)b Gouraud シェーディング (Gouraud shading)c Phong シェーディング (Phong shading)

15 / 59

Page 16: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

シェーディング

輝度の計算

§7.5.1 輝度の計算

図 7.1: 拡散反射

16 / 59

Page 17: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

シェーディング

輝度の計算

1 ν ∈ R3 を表面の外向き単位法線,l ∈ R3 を光源の向きを示す単位ベクトル,kd ∈ [0, 1], を拡散反射率とする.l · ν ≥ 0 が成り立つ表面において,RGB それぞれの入射光の輝度 iin に対して,表面の外向きすべての方向に一様な輝度

id = kdiinl · ν

の光が反射されると仮定するとき,拡散反射 (Lambert 反射) という.拡散反射は,つや消し塗料仕上げの表面を表現するために使われる.

2 ν, l ∈ R3 を前項と同様とする.r ∈ R3 を ν に対して l ∈ R3 の鏡面反射の向きを示す単位ベクトル,e ∈ R3 を視点の向きを示す単位ベクトル,ks,0 ≤ ks ≤ 1, を鏡面反射率,n > 0 を反射の鋭さを示す定数とする.l · ν ≥ 0が成り立つ表面において,RGB それぞれの入射光の輝度 iin に対して,輝度

is (α) = ksiin (r · e)n

の光が反射されると仮定するとき,鏡面反射 (Phong 反射モデル) という.ただし,cosα = r · e ≥ 0 とする.ガラスや金,銀などの反射特性は,ks をcos θ = l · ν ≥ 0 の関数で表現される.

17 / 59

Page 18: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

シェーディング

輝度の計算

re

図 7.2: 鏡面反射

18 / 59

Page 19: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

シェーディング

輝度の計算

3 ka, 0 ≤ ka ≤ 1, を環境光反射率とする.入射光とは無関係に,すべての表面に届く光の輝度 iamb に対して,輝度

ia = kaiamb

の光を反射すると仮定するとき,環境光反射 という.屋外シーンでは id, is の 10 % ~ 20 % を ia とする.

4 d, 0 ≤ d ≤ 1, を透過率とする.物体後方からくる光の輝度 i0 に対して,屈折方向に,輝度

it = di0

の光が届くと仮定するとき,透過光 という.

19 / 59

Page 20: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

シェーディング

輝度分布の計算

§7.5.2 輝度分布の計算

1 多面体モデルをそのままシェーディングする方法を,フラットシェーディングあるいはコンスタントシェーディングという.

フラット Gouraud Phong

図 7.3: シェーディングの違いによる球の表示

20 / 59

Page 21: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

シェーディング

輝度分布の計算

2 次のようなスムースシェーディング法を Gouraud シェーディングあるいは輝度補間法という.ただし,多面体の表面多角形を 3角形として,E を表面多角形の集合,N を頂点の集合とする.

a 頂点 j ∈ N に対して,Ej ⊂ E を j を含む表面多角形の集合とする.すべてのi ∈ Ej に対して法線を νi とかく.このとき,

νj =

∑i∈Ej

νi

|Ej |

を頂点 j の平均法線とする.

ºi2

ºjºi3

ºi4

ºi1

図 7.4: 平均法線

21 / 59

Page 22: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

シェーディング

輝度分布の計算

b νj を用いて各頂点の輝度 ij , j ∈ N , を計算する.c 表面多角形 Ωi, i ∈ E , の頂点を x(α)i ∈ R3, α ∈ Ni, 輝度 i(α)i, さらに,

ϕ(α)i : Ωi → R を ϕ(α)i

(x(β)i

)= δαβ , α, β ∈ Ni, を満たす関数とする.この

とき,x ∈ Ωi に対して,輝度を

ih (x) =∑α∈Ni

ϕ(α)i (x) i(α)i

で補間する.ϕ(α)i は基底関数とよばれる.

1

Á(1)i

i

Á(2)i

Á(3)i

x(1)i

x(2)i

x(3)i

i(1)i

i(2)i

i(3)i

ih

図 7.5: Gouraud シェーディング

22 / 59

Page 23: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

シェーディング

輝度分布の計算

3 次のようなスムースシェーディング法を Phong シェーディングあるいは法線補間法という.

a 頂点 j ∈ N に対して,Ej ⊂ E を j を含む表面多角形の集合,νi を i ∈ Ej の法線とするとき,

νj =

∑i∈Ej

νi

|Ej |

を j の平均法線とする.b 表面多角形 Ωi, i ∈ E , の頂点を x(α)i ∈ R3, α ∈ Ni, 法線を ν(α)i, さらに,

ϕ(α)i : Ωi → R を ϕ(α)i

(x(β)i

)= δαβ , α, β ∈ Ni, を満たす関数とする.この

とき,x ∈ Ωi に対して,法線を

νh (x) =∑α∈Ni

ϕ(α)i (x)ν(α)i

で補間する.c νh (x) から,輝度 i (x) を計算する.

23 / 59

Page 24: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

シェーディング

輝度分布の計算

º(2)i

º(3)i

º(1)i

1

Á(1)i

i

Á(2)i

Á(3)i

x(1)i

x(2)i

x(3)i

ºh

図 7.6: Phong シェーディング

24 / 59

Page 25: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

OpenGL による表面の設定

§7.6 OpenGL による表面の設定

glLightfv()

void glLightfv(GLenum light, GLenum pname, const GLfloat *params)

• light には光源の番号 (GL LIGHT0 ~ GL LIGHT7) を指定する.

• param にはパラメータの値を指定する.

• GL AMBIENT : 光の環境 RGBA 輝度• GL DIFFUSE : 光の拡散 RGBA 輝度• GL SPECULAR : 光の鏡面 RGBA 輝度• GL POSITION : 光の位置 (x, y, z, w)• GL SPOT DIRECTION : スポットライトの向き (x, y, z)• GL EXPONENT : スポットライトの円錐方向の減衰率• GL SPOT CUTOFF : スポットライトの広がり角 (度)• GL CONSTANT ATTENUATION : 一定減衰率 kc• GL LINEAR ATTENUATION : 線形減衰率 kl• GL QUADRATIC ATTENUATION : 2次減衰率 kq

25 / 59

Page 26: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

OpenGL による表面の設定

d を光の位置と頂点の間の距離とするとき,減衰係数は

1

kc + kld+ kqd2

で計算される.

glMaterialfv()

void glMaterialfv(GLenum face, GLenum pname,

const GLfloat *params);

• 表面の光の反射特性を設定する.• face には次を指定する.

• GL FRONT: 表面• GL BACK : 裏面• GL FRONT AND BACK :両面

26 / 59

Page 27: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

OpenGL による表面の設定

• pname には次を指定する.• GL AMBIENT (RGBA) : 環境光に対する反射係数,光の当たらない部分の明るさ

• GL DIFFUSE (RGBA ) : 拡散反射係数,表面の色に相当• GL SPECULAR (RGBA ) : 鏡面反射係数,光源の映り込みの強さ• GL EMISSION (RGBA ) : 発光係数• GL SHININESS (0 ∼ 128) :ハイライトの輝き,大きいほどハイライト部分が小• GL AMBIENT AND DIFFUSE (RGBA, RGBA): 拡散反射係数と鏡面反射係数の両方

• GL SPECULAR を (1 1 1 1) , GL SHININESS を大きくすればつややかになる.• GL SPECULARを GL DIFFUSE と同じにして GL AMBIENT を 0 に近づければ金属的になる.

27 / 59

Page 28: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

OpenGL による表面の設定

球のライティング

program7 2.cvoid display(void)

...

/*照明*/

glLightfv(GL_LIGHT0, GL_AMBIENT, light0_ambient); /* 環境光 */

glLightfv(GL_LIGHT0, GL_DIFFUSE, light0_diffuse); /* 拡散光 */

glLightfv(GL_LIGHT0, GL_SPECULAR, light0_specular); /* 鏡面光 */

/*材質の鏡面反射色*/

glMaterialfv(GL_FRONT, GL_SPECULAR, material_specular);

glMaterialfv(GL_FRONT, GL_SHININESS, shininess); /*ハイライト*/

...

28 / 59

Page 29: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

OpenGL による表面の設定

演習 7.6.1 (球のライティング)

program7 2.c を実行し,次の原因を考察せよ.

1 球の影が床にないのはなぜか?

2 スポットライトの当る球や床の領域が矩形になっているのはなぜか?

より美しくみえるように設定値を変えてみよ.

29 / 59

Page 30: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

テクスチャマッピング

§7.7 テクスチャマッピング

3次元オブジェクトの表面に,表面の形状に沿って模様 (texture) を貼り付ける処理をテクスチャマッピングという.

1 表面テクスチャマッピング

2 バンプマッピング

3 環境マッピング

4 ソリッドテクスチャ

30 / 59

Page 31: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

テクスチャマッピング

1 2次元の画像データを 3次元オブジェクトの表面に貼り付ける処理を表面テクスチャマッピングという.

a 平面投影マッピングb 円筒面投影マッピングc 球面投影マッピングd 曲面パラメータ化テクスチャマッピング

図 7.1: 表面テクスチャマッピング

31 / 59

Page 32: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

テクスチャマッピング

2 オブジェクト表面の細かな凸凹を法線方向の変化のみで輝度の変化を計算する方法をバンプマッピング (bump mapping) という.

図 7.2: バンプマッピング

3 オブジェクトの周囲に背景や前景をマッピングした面を設けて,視点から到達した色を表示する方法を環境マッピング (environment mapping) と呼ぶ.

a 反射マッピング (reflection mapping):オブジェクト表面で反射を 1回行う.b 屈折マッピング (refraction mapping):オブジェクト表面で屈折を 1回行う.

32 / 59

Page 33: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

テクスチャマッピング

反射マッピング 屈折マッピング

図 7.3: 環境マッピング

4 3次元空間のテクスチャを数式やアルゴリズムで作成し,オブジェクトの表面から内部に連続しているテクスチャを表現する方法をソリッドテクスチャ(solid texture) という.木材や岩石などの表現で使われている.

33 / 59

Page 34: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

テクスチャマッピング

図 7.4: ソリッドテクスチャ

34 / 59

Page 35: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

OpenGL によるテクスチャマッピング

§7.8 OpenGL によるテクスチャマッピング

glPixelStorei()

void glPixelStorei(GLenum pname, GLint param);

• ピクセル(画素)の格納モードを設定する.• pname に GL UNPACK ALIGNMENT を指定した場合,param には 1, 2, 4,8 のいずれかを指定する.

• 1 画素が RGBA,各色 1 バイトのとき 4 を指定する.• 1 画素が RGB,各色 1 バイトのとき 1 を指定する(3 は指定できない).

35 / 59

Page 36: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

OpenGL によるテクスチャマッピング

glTexParameteri()

void glTexParameteri(GLenum target, GLenum pname,

GLint param);

• テクスチャのパラメータを設定する.• target に GL TEXTURE 2D を指定(1次元の場合は別の設定)• pname に GL TEXTURE MAG FILTER を指定した場合,param にテクスチャが拡大されるときの補間方法を指定

• GL NEAREST(最近傍法)• GL LINEAR(双線形補間)

36 / 59

Page 37: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

OpenGL によるテクスチャマッピング

• pname に GL TEXTURE MIN FILTER を指定した場合,param にテクスチャが縮小されるときの補間方法を指定する.

• GL NEAREST• GL LINEAR• GL NEAREST MIPMAP NEAREST• GL NEAREST MIPMAP LINEAR• GL LINEAR MIPMAP NEAREST• GL LINEAR MIPMAP LINEAR

ただし,MIPMAP は画像の縮小サンプリングを行う際のエリアシングの発生を抑える手法である.

• pname に GL TEXTURE WRAP S あるいは GL TEXTURE WRAP T を指定した場合,param に s 軸あるいは t 軸の繰り返し指定を行う.

• GL REPEAT(繰り返し)• GL CLAMP(クランプ)

37 / 59

Page 38: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

OpenGL によるテクスチャマッピング

glTexImage2D()

void glTexImage2D(GLenum target, GLint level,

GLint internalFormat, GLsizei width, GLsizei height,

GLint border, GLenum format, GLenum type,

const GLvoid *pixels);

• 2次元テクスチャ画像を指定する.• Target に GL TEXTURE 2D を指定する.• Level に MIPMAP を行う場合のテクスチャの解像度レベルを指定する.ただし,MIPMAP を行わない場合は 0 とする.

• internalFormat にテクスチャのデータ形式を指定する.GL RGB, GL RGBA,GL ALPHA, GL LUMINANCE, GL LUMINANCE ALPHA, GL INTENSITYなど 全 38 種類

38 / 59

Page 39: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

OpenGL によるテクスチャマッピング

• width, height にテクスチャの幅と高さを指定する.• border に境界線の太さを指定する.テクスチャ境界なしのとき 0 を指定する.

• format は引数 pixels に指定したメモリ上の画像の形式を指定する.GL RGB, GL RGBA, GL COLOR INDEX, GL RED, GL GREEN, GL BLUE,GL ALPHA, GL LUMINANCE, GL LUMINANCE ALPHA が指定可能

• type に pixels のデータ型を指定する.GL UNSIGNED BYTE (unsignedchar と等価), GL BYTE, GL SHORT, GL UNSIGNED SHORT, GL INT,GL UNSIGNED INT, GL FLOAT, GL BITMAP が指定可能

• pixels に テクスチャ画像を格納した配列のポインタを指定する.

39 / 59

Page 40: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

OpenGL によるテクスチャマッピング

glTexEnvi()

void glTexEnvi(GLenum target, GLenum pname, GLint param);

• target に GL TEXTURE ENV を指定する.• pname に GL TEXTURE ENV MODE を指定する.• param には次を指定する.

• GL MODULATE (テクスチャとベースの掛け算)• GL DECAL (ステッカを貼るイメージ)• GL BLEND (あらかじめ定義しておいた色との混合)• GL REPLACE (置き換え)

40 / 59

Page 41: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

OpenGL によるテクスチャマッピング

ティーポットにテクスチャを貼り付ける.

program7 3.c

int main(int argc, char **argv)

...

/* テクスチャーの初期化 */

make_image();

init_texture();

...

void display(void)

...

glEnable(GL_TEXTURE_2D);

...

glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE,

GL_MODULATE);

...

41 / 59

Page 42: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

OpenGL によるテクスチャマッピング

図 7.1: ティーポットにテクスチャを貼り付ける

42 / 59

Page 43: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

レイトレーシング

§7.9 レイトレーシング

目に到達するまでの光を逆に辿ることによって色を計算する方法をレイトレーシング (ray tracing) という.

図 7.1: レイトレーシング

43 / 59

Page 44: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

レイトレーシング

レイトレーシングのアルゴリズム

1 空間中に視点とスクリーンを定義する.

2 各画素について,次の計算を行う.a 画素点と視点を直線 (レイ) を作成する.b レイとすべてのオブジェクトとの交点を求める.

(1) 交点がなければ,その画素の輝度は背景色とする.(2) 交点があれば,視点に一番近い交点を可視点とし,可視点の輝度を計算し,その画素の輝度とする.

44 / 59

Page 45: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

レイトレーシング

可視点輝度の計算

1 x0 ∈ R3 を可視点とする.L を光源の集合,idi (x0), isi (x0) を i ∈ L からの光が直接 x0 で拡散反射,鏡面反射の輝度とする.このとき, x0 の輝度は

i (x0) =∑i∈L

(idi (x0) + isi (x0))

+ kr (x0) ir (xr) + kt (x0) it (xt)

と仮定する.ただし,xr はレイが可視点で完全鏡面反射したときの次の交点,xt をレイが可視点で屈折したときの次の交点とする.kr, kt は反射係数と透過係数である.

45 / 59

Page 46: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

レイトレーシング

2 さらに,xr と xt の輝度を

ir (xr) =∑i∈L

(idi (xr) + isi (xr))

+ kr (xr) ir (xrr) + kt (xr) it (xrt)

it (xt) =∑i∈L

(idi (xt) + isi (xt))

+ kr (xt) ir (xtr) + kt (xt) it (xtt)

と仮定する.ただし,xrr, · · · ,xtt はレイが完全鏡面反射あるいは屈折したときの次の交点とする.

3 以下,同様に反射あるいは屈折がなくなるか,あるいは上限回になるまで輝度の式を仮定する.

4 最後の式から,可視点側に向かって代入計算を行い,i (x0) を求める.

46 / 59

Page 47: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

ボリュームビジュアライゼーション

§7.10 ボリュームビジュアライゼーション

これまでのレンダリングは 3次元形状が与えられていることを前提にしていた.ここでは,3次元領域の中にある属性値 (X線 CTの場合は X線吸収量) が埋め込まれている (場所の関数として与えられている) 次のような状況を考えてみよう.

1 3次元矩形領域 Ω ⊂ R3 は微小立方体 Ωi, i ∈ E , の周期的に配置された集合であるとみなす.Ωi をボクセル (voxel) とよぶ.

2 X線 CTによって得られる X線吸収量,密度,濃度,熱,圧力などのスカラー値関数 v : Ω → R を属性値とみなす.

3 属性値がボクセルごとに与えられているとき,すなわち vi : E ∋ i → v ∈ Rのとき,V = vii∈E をボクセルデータ (voxel data) あるいはボリュームデータ (volume data) という.ボクセルデータをボクセルの中心に配置し,それらを頂点にした配置をここでは格子という.

47 / 59

Page 48: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

ボリュームビジュアライゼーション

vi

ivi

(a) ボクセル Ωi (b) ボクセル中心を頂点とする格子

図 7.1: ボクセル Ωi と属性値 vi

48 / 59

Page 49: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

ボリュームビジュアライゼーション

定義 7.10.1 (ボリュームビジュアライゼーション)

ボクセルデータから,属性値の違う領域を可視化する方法をボリュームビジュアライゼーション (volume visualization) という.

ボリュームビジュアライゼーションには,次のような種類がある.

1 ボリュームレンダリング (volume rendering)

2 サーフェイスレンダリング (surface rendering)

(a) ボリュームレンダリングの例 (b) サーフェイスレンダリングの例

図 7.2: ボリュームビジュアライゼーション

49 / 59

Page 50: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

ボリュームビジュアライゼーション

ボリュームレンダリング

§7.10.1 ボリュームレンダリング

定義 7.10.2 (ボリュームレンダリング)

視点からの光線 (レイ) が 3次元領域を通過する際の減衰を考慮して光を追跡する方法をボリュームレンダリング (volume rendering) とよぶ.

Inte

nsi

ty o

f ligh

t

attribute value v

r g b

Inte

nsi

ty o

f ligh

t

attribute value v

®

(a) 色関数 (b) 不透明度関数

図 7.3: ボリュームレンダリングで使われる色と不透明度を決める関数

50 / 59

Page 51: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

ボリュームビジュアライゼーション

ボリュームレンダリング

ボリュームレンダリングのアルゴリズム:

1 属性値 v ∈ R に対して色 c = (r (v) , g (v) , b (v)) と不透明度 α (v) を対応させる関数 (c, α) : R → R4 を指定する (図 7.3).

2 レイの方向に輝度を計算していく.そのためにレイの方向にサンプリング点xj , j ∈ S, を設け,xj が含まれるボクセル Ωi の格子点 x(α) ∈ R3,α ∈ 1, · · · , 8 の属性値 v(α) からサンプリング点の属性値を

vj = vh (xj) =∑

α∈1,··· ,8

ϕ(α) (xj) v(α)

で補間する.ただし,ϕ(α) : Ωi → R を ϕ(α)

(x(β)

)= δαβ ,

α, β ∈ 1, · · · , 8, を満たす関数 (x1, x2, x3 に関する 3重 1次多項式) とする.ϕ(α) は基底関数とよばれる.

51 / 59

Page 52: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

ボリュームビジュアライゼーション

ボリュームレンダリング

¢s

s

xixi+1xi+2

図 7.4: ボリュームレンダリングで使われるサンプリング点

3 サンプリング点 xj , j ∈ S, の不透明度 αj = α (vj) をレイの方向に足していき,

∑j=1,··· ,m αj = 1 となるか,あるいはボクセルがなくなったとき

のサンプリング点の数を m,cm をサンプリング点 xm の色,あるいは背景色として,

im := cm

for i = m− 1 to 0 do ii := αici + (1− αi) ci+1

52 / 59

Page 53: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

ボリュームビジュアライゼーション

ボリュームレンダリング

i := i0

によってレイに対する 3原色の輝度 i = (iR, iG, iB) を計算する.

53 / 59

Page 54: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

ボリュームビジュアライゼーション

ボリュームレンダリング

さらに,属性値の勾配を利用して,境界を強調することやシェーディングの機能を加えることもできる.格子点の座標を xijk = (xi1, xj2, xk3), i, j, k ∈ 1, · · · ,m, とかくとき,属性

値 v の xijk における勾配は,中心差分の定義を用いれば

∇v (xijk) =1

2

v (xi+1 1, xj2, xk3)− v (xi−1 1, xj2, xk3)v (xi1, xj+1 2, xk3)− v (xi1, xj−1 2, xk3)v (xi1, xj2, xk+1 3)− v (xi1, xj2, xk−1 3)

によって計算される.

1 格子点 xijk の不透明度 αijk を ∇v (xijk) の大きさ ∥∇v (xijk)∥ の関数として定義すれば,境界を強調した表示が得られる.

2 ∇v (xijk) が 3次元ベクトルであることに注意して,Phong シェーディングを適用できる.

54 / 59

Page 55: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

ボリュームビジュアライゼーション

ボリュームレンダリング

図 7.5: 属性値の勾配を利用したシェーディング

55 / 59

Page 56: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

ボリュームビジュアライゼーション

サーフェイスレンダリング

§7.10.2 サーフェイスレンダリング

定義 7.10.3 (サーフェイスレンダリング)

ボクセルデータから等値面を求め,その等値面に使ってレンダリングを行う方法をサーフェイスレンダリング (surface rendering) とよぶ.その中で,格子内部の等値面を基本パターンへの場合分けに基づいて求める方法をマーチングキューブ法 (marching cubes method) とよぶ.

等値面の属性値 (閾値) を v0 とする.格子点 x(α) ∈ R3, α ∈ 1, · · · , 8 の属性値 v(α) が v(α) ≤ v0 のときに 0,v(α) > v0 のときに 1 を x(α) に割り当てる.このとき,8つの格子点に割り当てられた 0, 1 の組み合わせの場合の数は28 = 256 通りとなる.ここで,対称性を考慮すれば,位相が同じパターンは図7.6 (b) のような 15種類となる.そこで,格子ごとにパターンを特定し,その上で必要となる未知数を求めてい

くことによって,全体の等値面を構成することができる.

56 / 59

Page 57: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

ボリュームビジュアライゼーション

サーフェイスレンダリング

1

1

1

0

0

0

0

1

(a) 一例 (b) すべてのパターン

図 7.6: マーチングキューブ法で使われる格子点の 0, 1 パターン

57 / 59

Page 58: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

まとめ

§7.11 まとめ

CG で使われる 3次元形状を写実的に表示するための技術をレンダリングという.

1 辺/面の可視/不可視の判定法を隠線/隠面処理という.隠線/隠面処理には,Zバッファ法とスキャンライン法がある.

2 光による陰影を付ける方法をシェーディングという.シェーディングには,フラットシェーディング法とスムーズシェーディング法がある.

3 表面に画像を張り付ける方法をテクスチャマッピングという.

4 光を追跡して高品位の画像を作成する方法をレイトレーシングという.

5 3次元空間に分布するデータを透視画像に変換する方法をボリュームレンダリングという.

58 / 59

Page 59: 第7章レンダリング - 名古屋大学第7 章レンダリング レンダリングとは x7.2 レンダリングとは 定義7.2.1 (レンダリングとは) 3 次元形状を写実的に表示するための方法を総称してレンダリング(rendering)

第 7 章 レンダリング

参考文献

参考文献

[1] James D. Foley, Steven K. Feiner, Andries van Dam, John F. Hughes, 佐藤義雄 (訳).

コンピュータグラフィックス 理論と実践.

オーム社, 2001.

[2] 千葉則茂, 土井章男.

3次元 CGの基礎と応用.

サイエンス社, 2004.

[3] 林武文, 加藤清敬.

OpenGLによる 3次元 CGプログラミング.

コロナ社, 2003.

59 / 59