第5章 cg で使われる変換 - 名大の授業 (nu ocw) · 2018. 6. 22. · x5.2 cg...

. . . . . .

はじめに CG で使われる変換の種類. . . . . . . . . .幾何変換投影変換 OpenGL における変換ティーポットを描くまとめ参考文献

.

.

. ..

.

.

第 5章 CG で使われる変換

畔上秀幸

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

May 8, 2012

1 / 37

. . . . . .


§5.1 はじめに

(目標) CG で使われる幾何変換，投影変換，視野変換の理論とOpenGL を用いた変換方法について理解する．

2 / 37

. . . . . .


§5.2 CG で使われる変換の種類

CG で使われる変換には次の種類がある．

幾何変換 3次元形状モデルの定義された局所座標系を平行移動，回転移動，拡大・縮小変形を行う変換（座標変換は幾何変換の逆向き）を幾何変換 (geometric transformation) という．⇒ 異なる座標系でモデリングされたパーツを全体座標系で組み合わせるあるいは分解する際に幾何変換が使われる．

投影変換 3次元形状モデルをディスプレイや印刷面の 2次元面に投影する変換を投影変換 (projective transformation) という．⇒ モデリングされた形状をディスプレイに表示したり，プリンタで印刷する際に投影変換が使われる．

視野変換視点の位置あるいは投影する方向（視線の方向）を移動・回転する変換を視野変換 (viewing transformation) という．⇒ 実際には 3次元形状モデルを幾何変換することになる．

3 / 37

. . . . . .


§5.3 幾何変換

平行移動，回転移動，投影変換を行列で表現するために同次座標を用いる．.定義 5.1 (同次座標)..

.

. ..

.

.

x = (x1, x2, · · · , xn)T に対して

x1 =y1w, x2 =

y2w, · · · , xn =

ynw

が成り立つような y = (y1, y2, · · · , yn, w)T を x の同次座標(homogeneous coordinate) 表現という．

4 / 37

. . . . . .


§5.3.1 平行移動

点 x = (x1, x2, x3)T を a = (a1, a2, a3)

T だけ平行移動した点x′ = (x′

1, x′2, x

′3)

T はx′1

x′2

x′3

1

=

1 0 0 a10 1 0 a20 0 1 a30 0 0 1

x1

x2

x3

1

∴

x′1

x′2

x′3

=

x1 + a1x2 + a2x3 + a3

となる．この変換は， y, y′ を x, x′ の同次座標 (homogeneouscoordinate) 表現とするとき

y′ = T (a)y

とかける．

5 / 37

. . . . . .


§5.3.2 回転点 x = (x1, x2, x3)

T を x1 軸, x2 軸, x3 軸に対して時計回りにθ1, θ2, θ3 だけ回転した点を x′ = (x′

1, x′2, x

′3)

T とするときx′1

x′2

x′3

1

=

1 0 0 00 cos θ1 − sin θ1 00 sin θ1 cos θ1 00 0 0 1

x1

x2

x3

1

,

x′1

x′2

x′3

1

=

cos θ2 0 sin θ2 00 1 0 0

− sin θ2 0 cos θ2 00 0 0 1

x1

x2

x3

1

,

x′1

x′2

x′3

1

=

cos θ3 − sin θ3 0 0sin θ3 cos θ3 0 00 0 1 00 0 0 1

x1

x2

x3

1

となる．この変換を

y′ = Ri (θi)y (i = 1, 2, 3)6 / 37

. . . . . .


§5.3.2 回転 (cnt.)

とかく．(注) (

x′1

x′2

)= r

(cos(α+ θ)sin(α+ θ)

)= r

(cosα cos θ − sinα sin θcosα cos θ + sinα sin θ

)= r

(cos θ − sin θsin θ cos θ

)(x1

x2

)

x1

x2

x3

xθ

®

x0

図 1: 回転

7 / 37

. . . . . .


§5.3.3 拡大・縮小

点 x = (x1, x2, x3)T を x1 軸, x2 軸, x3 軸に対して b1, b2, b3 倍した

点 x′ = (x′1, x

′2, x

′3)

T はx′1

x′2

x′3

1

=

b1 0 0 00 b2 0 00 0 b3 00 0 0 1

x1

x2

x3

1

となる．この変換を，b = (b1, b2, b3)

T として

y′ = S (b)y

とかく．

8 / 37

. . . . . .


§5.3.4 反転

点 x = (x1, x2, x3)T を x1 軸，および原点，に対して反転した点

x′ = (x′1, x

′2, x

′3)

T はx′1

x′2

x′3

1

=

−1 0 0 00 1 0 00 0 1 00 0 0 1

x1

x2

x3z1

,

x′1

x′2

x′3

1

=

−1 0 0 00 −1 0 00 0 −1 00 0 0 1

x1

x2

x3

1

となる．これらの変換は，拡大・縮小の特別な場合とみなせる．

9 / 37

. . . . . .


§5.3.5 任意の軸回りの回転移動

点 x = (x1, x2, x3)T を点 x0 = (x0

1, x02, x

03)

T を始点とする単位ベクトル n = (n1, n2, n3)

T に対して時計方向に θ だけ回転した点x′ = (x′

1, x′2, x

′3)

T への変換を考えてみよう．

θ

n

x0

x1

x2

x3

x

図 2: 任意の軸回りの回転移動

10 / 37

. . . . . .


§5.3.5 任意の軸回りの回転移動 (cnt.)

..1 点 x0 を原点に平行移動する．

y1 = T(−x0

)y

..2 単位ベクトル n = (n1, n2, n3)T を x3 軸回りに α だけ回転して

x2 − x3 平面内に移動する．

y2 = R3 (α)y1, cosα =n2√

n21 + n2

2

, sinα =n1√

n21 + n2

2

n

x1

x2

x3

図 3: 点 x0 を原点に平行移動

®

x1

x2

x3

図 4: n を z 軸回りに α だけ回転

11 / 37

. . . . . .



..3 n1 を x1 軸回りに β だけ回転して x1 軸と一致させる．

y3 = R1 (β)y2, cosβ = n3

..4 n2 を x3 軸回りに θ だけ回転する．

y4 = R3 (θ)y3

¯

x1

x2

x3

図 5: n1 を x1 軸回りに β だけ回転

µ

x1

x2

x3

図 6: n2 を x3 軸回りに θ だけ回転

12 / 37

. . . . . .



..5 (3) の逆変換を行う．

y5 = R−11 (β)y4


y6 = R−13 (α)y5


y7 = T−1(−x0

)y6

したがって，

y7 = T−1(−x0

)R−1

3 (α)R−11 (β)R3 (θ)R1 (β)R3 (α)T

(−x0

)y

となる．

13 / 37

. . . . . .


§5.3.6 Euler 角による回転

全体座標系 x1-x2-x3 の点 x = (x1, x2, x3)T から局所座標系

x1L-x2L-x3L の点 xL = (x1L, x2L, x3L)T への回転が Euler 角 (α, β, γ)

で与えられているとき，

yL = R2 (γ)R1 (β)R3 (α)y

となる．

x0

x2Lx3L

®x1L°

¯

x1

x2

x3

1

図 7: Euler 角による回転

14 / 37

. . . . . .


§5.4 投影変換

.定義 5.2 (視座標系)..

.

. ..

.

.

全体座標系 (world coordinate system) x1-x2-x3 に対して，視線を x3v

軸とした x1v-x2v-x3v 座標系を視座標系 (viewing coordinate system) という．全体座標系は右手系，視座標系は，通常，左手系とする．このとき，x1 = x1v, x2 = x2v となる．

x1=x1v

x3

x2=x2v

x3v

図 8: 視座標系

15 / 37

. . . . . .


§5.4 投影変換 (cnt.)

.定義 5.3 (正規化視座標系)..

.

. ..

.

.

視座標系の可視領域を正規化した座標系を正規化視座標系 (normalizedviewing coordinate system) という．

この座標系は，第 7章において，隠面/隠線処理に使われる．

»1

»3

»2

(1,1,1)

({1,{1,0)

図 9: 正規化視座標系

16 / 37

. . . . . .



.定義 5.4 (透視投影, 平行投影)..

.

. ..

.

.

投影変換には次の 2種類がある．

..1 視点を x3v 軸上に置き，x3v 軸に垂直な面に投影する変換を透視投影 (perspective projection) という．

..2 視点を全体座標系の x3 軸上無限遠方に置き， x3v 軸に垂直な面に投影する変換を平行投影 (parallel projection) という．

17 / 37

. . . . . .



x1=x1v

x2=x2v

x3v

図 10: 透視投影

∞

x=xv

y=yv

zv

図 11: 平行投影

18 / 37

. . . . . .



視点 x3v = 0, 投影面 x3v = d のとき，任意の点 xv から投影点 xd

の同次座標表現 y への透視投影はy1dy2dy3dwd

=

1 0 0 00 1 0 00 0 1 00 0 1/d 0

x1v

x2v

x31v

1

となる．

xd

x3v=dx1=x1v

x2=x2v

x3v

xv

図 12: 原点からの透視投影

19 / 37

. . . . . .



視点 x3v = −d, 投影面 x3v = 0 のとき，任意の点 xv から投影点 x0

の同次座標表現 y0 への透視投影はy10y20y30w0

=

1 0 0 00 1 0 00 0 0 00 0 1/d 1

x1v

x2v

x3v

1

となる．d → ∞ のとき，平行投影となる．

x0

x3v={d

x1=x1v

x2=x2v

x3v

xv

図 13: x3v = −d からの透視投影

20 / 37

. . . . . .


§5.5 OpenGL における変換

OpenGLでは同次座標系の変換行列を使って各種変換を行っている．

v0=Pm:::P1An:::A1v

v

Geometrictransformations

Projectivetransformations

A1 An::: P1 Pm

:::

Hidden surface calculation

Imageprocessing

Pointinformation

Picture

図 14: 変換行列を使った各種変換

21 / 37

. . . . . .


§5.5 OpenGL における変換 (cnt.)

..1 変換行列の初期化.glMatrixMode..

.

. ..

.

.

void glMatrixMode(Glenum mode);

mode に引数 GL MODELVIEW, GL PROJECTION, GL TEXTUREを指定して，幾何変換，射影変換，テクスチャー行列のどれを操作するか指定する．

.glLoadIdentity..

.

. ..

.

.

void glLoadIdentity(void);

現在対象としている行列を 4x4の単位行列にする．

22 / 37

. . . . . .



.変換の例..

.

. ..

.

.

glMatrixMode(GL_PROJECTION); /*射影変換の設定*/

glLoadIdentity(); /*初期化: P_0 = I*/

gluPerspective(60.0, 1.0, 1.0, 10.0); /*P_1*/

...

glMatrixMode(GL_MODELVIEW); /*幾何変換の設定 */

glLoadIdentity(); /*初期化: A_0 = I*/

glTranslatef(-1.0, 0.0, 0.0); /* x軸方向移動: A_1*/

glRotatef(-30.0, 0.0, 0.0, 1.0); /* 回転: A_2 */

glutWireTeapot(1.0); /* ティーポットを描画: v’=P_1A_2A_1v */

...

23 / 37

. . . . . .



..2 OpenGL における平行投影変換.glOrtho()..

.

. ..

.

.

void glOrtho(Gldouble left, Gldouble right,

Gldouble bottom, Gldouble top, Gldouble near,

Gldouble far);

図 15 のとおり．

∞

top

right

left

bottom

near far

x1=x1v

x2=x2v

x3v

図 15: OpenGL における平行投影変換

24 / 37

. . . . . .



..3 OpenGL における透視投影変換.gluPerspective()..

.

. ..

.

.

void gluPerspective(GLdouble fovy, Gldouble aspect,

GLdouble near, Gldouble far)


aspect=w=h

h

fovy

w

near

far

x1=x1v

x2=x2v

x3v

図 16: OpenGL における透視投影変換

25 / 37

. . . . . .



..4 視点の設定.gluLookAt()..

.

. ..

.

.

void gluLookAt(GLdouble e1, GLdouble e2, GLdouble e3,

GLdouble c1, GLdouble c2, GLdouble c3, GLdouble u1,

GLdouble u2, GLdouble u3)

図 17 のとおり．ただし， u1, u2, u3 は，ウィンドウに表示される画像の上の方向を示す．

x3

(e1,e2,e3)T with x3-axis

(c1,c2,c3)T with x3-axis

(u1,u2,u3)T with x3-axisx1=x1v

x2=x2v

x3v

図 17: OpenGL における視点の設定

26 / 37

. . . . . .



..5 平行移動.glTranslatef()..

.

. ..

.

.

void glTranslatef(GLfloat x1, GLfloat x1, GLfloat x3)

局所座標系を x1, x2, x3 軸に x1, x2, x3 だけ移動する．

..6 回転.glRotatef()..

.

. ..

.

.

void glRotatef(GLfloat angle, GLfloat x1, GLfloat x2,

GLfloat x3)

• angle は度数で指定する．例えば，x1-x2 平面で 60度左に回転する場合glRotatef(60.0, 0.0, 0.0, 1.0) とかく．

27 / 37

. . . . . .



..7 拡大・縮小.glScalef()..

.

. ..

.

.

void glScalef(GLfloat x1, GLfloat x2y, GLfloat x3)

各軸方向へ指定された値で伸縮させる．例えば，x1, x2 方向に半分の大きさにする場合 glScalef(0.5, 0.5, 1.0) とかく．

..8 変換行列の保存と呼出し.glPushMatrix..

.

. ..

.

.

void glPushMatrix()


.glPopMatrix..

.

. ..

.

.

void glPopMatrix()


28 / 37

. . . . . .



stack

A2A1

glLoadIdentity()

I

glScalef()glTranslatef()

glScalef()draw ¡quad()

glTranslatef()glScalef()glRotatef()draw¡tri()

A3A2A1

A2A1

A2A1

A2A1

A5:::A1 A2A1

push pushpop pop

図 18: OpenGL における変換行列の保存と呼出し

29 / 37

. . . . . .


§5.6 ティーポットを描く

ティーポットを平行投影変換で描く．.program5 1.c..

.

. ..

.

.

int main(int argc, char **argv)

...

glOrtho(-1.0, 1.0, -1.0, 1.0, -1.0, 1.0);

trackball(quat , 0.0, 0.0, 0.0, 0.0);

...

void display(void)

...

/* ティーポットを描画 */

glColor3f(1.0, 1.0, 1.0);

glutWireTeapot(0.4);

...

30 / 37

. . . . . .


§5.6 ティーポットを描く (cnt.)

このプログラムから trackball.h, trackball.c を使う．マウスのための関数

.glutMouseFunc()..

.

. ..

.

.

void glutMouseFunc(void (*func)(int button, int state,

int x1, int x2))

• func にはマウスのボタンが押されたときに実行する関数のポインタを与える．

• button には押されたボタン (GLUT LEFT BUTTON,GLUT MIDDLE BUTTON, GLUT RIGHT BUTTON)，state には押した (GLUT DOWN) のか離した (GLUT UP) のか，x と y にはその位置が渡される．

31 / 37

. . . . . .



.glutMotionFunc()..

.

. ..

.

.

void glutMotionFunc(void (*func)(int x1, int x2))

• func には，マウスのいずれかのボタンを押しながらマウスを動かしたときに実行する関数のポインタを与える．

• x1 と x2 には、現在のマウスの位置が渡される．• 設定を解除するには引数に 0（ヌルポインタ）を指定する（stdio.h等の中で定義されている記号定数 NULL を使用しても良い）．

ダブルバッファリング（ちらつきの原因となる画像の作成過程をみせないために，２つのバッファを用いて表示画面を交換すること）のために次の関数が用意されている．

• glutInitDisplayMode(GLUT DOUBLE) を指定する．

• glFlush() の代りに glutSwapBuffers() を使用する．

32 / 37

. . . . . .



ティーポットを透視投影変換で描く．.program5 2.c..

.

. ..

.

.

int main(int argc, char **argv)

...

gluPerspective(70.0, 1.0, 1.0, 10.0);

...

void display(void)

...

/* ティーポットを描画 */

glColor3f(1.0, 1.0, 1.0);

glutWireTeapot(1.0);

...

33 / 37

. . . . . .



ティーポットと水滴を図のように移動する．.program5 3.c..

.

. ..

.

.

...

void display(void)

...

// glPushMatrix();

// glTranslatef(0.0, 0.0, 0.0);/* x1 軸方向移動 */

// glRotatef(0.0, 0.0, 0.0, 1.0);/* 回転 */

glColor3f(1.0, 1.0, 1.0);/* 色指定 */

glutWireTeapot(1.0);/* ティーポットを描画 */

// glPopMatrix();

...

34 / 37

. . . . . .



図 19: ティーポットと水滴

35 / 37

. . . . . .


§5.7 まとめ

CG で使われる幾何変換，投影変換，視野変換の理論と OpenGL を用いた変換方法についてみてきた．

..1 幾何変換，投影変換，視野変換では同次座標表現が用いられる．

..2 平行移動，回転移動，拡大・縮小，反転移動はそれぞれ同次座標表現の変換行列で与えられる．一連の変換は，変換行列の積で与えられる．

..3 OpenGL における平行投影変換，透視投影変換，視点の設定，幾何変換の関数について学んだ．

36 / 37

. . . . . .


参考文献

[1] 嘉数侑昇, 古川正志.

CAD/CAM/CGのための形状処理工学入門.

森北出版, 1995.

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

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

オーム社, 2001.

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

３次元 CGの基礎と応用.

サイエンス社,, 2004.

[4] OpenGL 公式サイト.

http://www.opengl.org/.

[5] 床井浩平.

GLUTによる「手抜き」OpenGL入門.

http://www.wakayama-u.ac.jp/˜tokoi/opengl/libglut.html.37 / 37

第5章 cg で使われる変換 - 名大の授業 (nu ocw) · 2018. 6. 22. · x5.2 cg...

Documents