Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu...

39
1 2. 2次元CG Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension CG Version 1.2 2006.03.31 2. 2次元CG 1. 2次元コンピュータグラフィックス 1グラフィックハードウェア 1.2 座標変換 1.3 直線と円弧の描画 1.4 塗りつぶし(Filling1.5 2Dクリッピング 1.6 二次元座標変換

Transcript of Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu...

Page 1: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

1

2. 2次元CG

Computer Graphics

Numazu College of TechnologyDept. of Computer & Control

Production System Lab.

1. 2-Dimension CG

Version 1.2 2006.03.31

2. 2次元CG

1. 2次元コンピュータグラフィックス

1.1 グラフィックハードウェア

1.2 座標変換

1.3 直線と円弧の描画

1.4 塗りつぶし(Filling)

1.5 2Dクリッピング

1.6 二次元座標変換

Page 2: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

2

2. 2次元CG1. 2次元コンピュータグラフィックス

1.1 グラフィックディスプレイ(Cathode Ray Tube Graphic Display)

グラフィックディスプレイ(CRT)

リフレッシュ不要

リフレッシュ必要

ストレージ方式(Strage Tube)

リフレッシュ方式(Refresh Tube)

ランダム(ベクタ)スキャン方式(Random/Vector Scan)

ラスタースキャン方式(Raster Scan) 現在主流

PDP:プラズマディスプレイ(ガス放電) 大型TV用・高速応答液晶ディスプレイ(液晶) 小型ディスプレイ用・低応答性

[ その他 ]

2. 2次元CG1. 2次元コンピュータグラフィックス

1.1.1 ストレージ方式

価格が安い

ちらつきが少ない

分解能が高い

図形の一部消去が困難

カラー化が難しい

CRT

電子ビーム

特殊な蛍光層

1度の描画で電荷として保持

Page 3: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

3

2. 2次元CG1. 2次元コンピュータグラフィックス

1.1.2 ランダムスキャン方式 (リフレッシュ方式)

表示される線が美しい

図形が多いとフリッカー(ちらつき)が生じる

面表示が難しい

CRTリフレッシュ

電子ビーム

ディスプレイリストメモリ

[リフレッシュバッファ]

2. 2次元CG1. 2次元コンピュータグラフィックス

1.1.3 ラスタースキャン方式 (リフレッシュ方式)

価格が安い

豊富な色表示が可能

Jugが生じるためAnti-Aliasingが必要

現在の主流

リフレッシュBit Plane

フレームバッファ(Video RAM)

電子ビーム

CRT

Page 4: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

4

2. 2次元CG1. 2次元コンピュータグラフィックス

インターレス/ノンインターレス (ラスタースキャンディスプレイ)

インターレス(Interlace) ノンインターレス(Non-Interlace)CRT-TVのもこれ

(512本)

ちらつきが生じる

1

3

579

24

68

10

1/60(1画面全体の描画)

1/60

12

4

6

8

10

3

5

7

9

Odd Even

1/60

1/30(1画面全体の描画)

1/60

2. 2次元CG1. 2次元コンピュータグラフィックス

1.1.4 液晶ディスプレイ

液晶ディスプレイ

単純マトリックス(STN,DSTN)

アクティブマトリックス

2枚のガラス板の間に特殊な液体を封入し、電圧をかけることによって液晶分子の向きを変え、光の透過率を増減させることで像を表示する構造になっている。液晶自体は発光せず、明るいところでは反射光を、暗いところでは背後に仕込んだ蛍光燈の光を使って表示を行なう。

X軸方向とY軸方向の2方向に導線が張り巡らされていて、XとYの2方向から電圧をかけると交点の液晶が駆動する方式。

単純マトリクス型液晶の構造に加えて、各液晶ごとに「アクティブ素子」を配置したもの。

Page 5: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

5

2. 2次元CG1. 2次元コンピュータグラフィックス

1.1.5 描画におけるデータの流れ(ラスタースキャンディスプレイ)

シンプルな構成

高機能な構成

描画SWFrameBuffer

RAMDAC

グラフィ ッ クボードPIXEL CRT

幾何情報面・ 球・ 光

描画SW FrameBuffer

GeometricEngine

RenderingEngine

Z-Buffer

RAMDAC

グラフィ ックアクセレータ(エンジン)

PIXEL

CRT幾何情報

面・ 球・ 光

2. 2次元CG1. 2次元コンピュータグラフィックス

1.1.6 表示色とフレームバッファ容量

Bit-Plane

1bit

2 = 2色

12

= 4色

2 = 256色

82

= 4096色

12

2 = 32768色

15 2 = 65536色

162

= 16777216色

24

2bit 3bit

4bit

5bit

5bit

5bit

6bit

6bit

8bit

8bi t

8bi t

4bi t

4bit4bit

RG

B3bi t

2bit

Page 6: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

6

2. 2次元CG1. 2次元コンピュータグラフィックス

画面サイズとフレームバッファ容量

640800

1024 1600

480600768

12001024

1280

メモリ容量計算式

SIZEX*SIZEY*n8*1024*1024 [Mbyte]

SIZEX,SIZEY : 画面サイズn : Bit-Plane数

where

1Kbyte=1024(210)byteとする

2. 2次元CG1. 2次元コンピュータグラフィックス

画面サイズとフレームバッファ容量

1M

2M

3M

4M

横 縦 256(28)色 32768(215)色 16777216(224)

640 480 0.29 0.55 0.88

800 600 0.46 0.86 1.37

1024 768 0.75 1.41 2.25

1280 1024 1.25 2.34 3.75

1600 1200 1.83 3.43 5.49

色数画面サイズ

Page 7: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

7

2. 2次元CG1. 2次元コンピュータグラフィックス

画面サイズと呼称

1M

2M

3M

4M

2. 2次元CG1. 2次元コンピュータグラフィックス

ダブルバッファ(Double Buffer)

二つのフレームバッファを交互に使う(Animation)

描画SW RAMDAC切替 切替

FrameBuffer

FrameBuffer

CRT

Page 8: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

8

2. 2次元CG1. 2次元コンピュータグラフィックス

フレームバッファの用途

いろいろな組み合わせが用いられる

フレームバッファフレームバッ ファ

フレームバッ ファ フレームバッ ファTextureMemory

Texture Memory

Texture Memory

RGB RGB

RGB RGBα

+

+ +

2. 2次元CG1. 2次元コンピュータグラフィックス

1.1.7課題1:フレームバッファの容量計算

(2)1024×1024の画面サイズのディスプレイに対し、1Mbyte(220)のフレー

ムバッファを用いた場合、何色表示できるか

(1)1024×1024の画面サイズのディスプレイに対し、512色表示したい場合

に必要となるフレームバッファの大きさを求めよ

1024

1024

Page 9: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

9

2. 2次元CG1. 2次元コンピュータグラフィックス

課題2:フレームバッファの容量計算

2Mbyteのフレームバッファを用いた場合、1600×1200の画面では理論上、何色ま

で表示できるか

1600

1200

2. 2次元CG1. 2次元コンピュータグラフィックス

課題3:まとめ(グラフィックディスプレイ)

グラフィックディスプレイには大きく分けて、リフレッシュが必要な(a)方式と不要な(b)方式に分類できる。(a)方式はさらに(c)方式と(d)方式に分けることができる。

ここで、(d)方式は、TVにも利用されている方式で現在主流となっている。また、(d)方式は、スキャンの仕方によって(e)と(f)に分けられる。

(e)は全画面を2回スキャンして描画しており、(f)は1回で全画面を描画している。その時間は(g)である。

Page 10: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

10

2. 2次元CG1. 2次元コンピュータグラフィックス

課題4:まとめ(色表現とフレームバッファ)

グラフィックの画面出力としては、(a)ディスプレイが主流となっている。これらの画面のひとつの点を(b)と呼ぶ。この(b)毎に与えられたビット数により画面に表示できる色数が決まる。

例えば、6bitであれば(c)色の表示が可能となる。コンピュータ内における色の表現には(d)の三原色が使われ三色混合(全色0xFF)により(e)色が表現される。一般にフルカラーと呼ばれている表現色は、これらの原色を(f)ビットで表現した場合をいう。

2. 2次元CG1. 2次元コンピュータグラフィックス

1.2 座標変換

VRAM

フレームバッファアドレス

ディスプレイ座標

ディスプレイ座標

スクリーン座標

スクリーン座標

Page 11: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

11

2. 2次元CG1. 2次元コンピュータグラフィックス

1.2.12次元座標(ディスプレイ座標とスクリーン座標)

ディスプレイ座標

(H/W座標)

スクリーン座標

(デカルト座標)数学の世界

Xs

Ys

Xd

Yd

2. 2次元CG1. 2次元コンピュータグラフィックス

画面のサイズとディスプレイ座標の関係

一般に画面サイズは偶数であるので、以後は偶数に限定する

Screen Size640 480(VGA)×

Screen SizeSY SX×

SY

SX0 0639640

SX-1

SY-1479

480

Xd

Yd

Xd

Yd

Page 12: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

12

2. 2次元CG1. 2次元コンピュータグラフィックス

1.2.2ディスプレイ座標とフレームバッファアドレス

SX

SX: X方向のスクリーンサイズ

SY: Y方向のスクリーンサイズ

Frame Bufferオフセットアドレス

RGB

RGB

SY

Xd

Yd

2. 2次元CG1. 2次元コンピュータグラフィックス

画面のサイズとディスプレイ座標の関係(具体例)

オフセットアドレス = 10*4 + 7 = 47

また、逆に4 = 47/10(但し 整数)7 = 47- 10*4

PIXEL( 画素)

10

6

Xd

Yd

Page 13: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

13

2. 2次元CG1. 2次元コンピュータグラフィックス

画面のサイズとディスプレイ座標の関係(具体例)

Add = SX* yd + xdピクセル座標 (xd,yd) のオフセットアドレスは

Add : オフセットアドレスSX :画面のXサイズ

yd = Int(Add / SX)xd = Add – SX * yd

オフセットアドレス(Add)のピクセル座標 (xd,yd) は

PIXEL( 画素)

10

6

Xd

Yd

2. 2次元CG1. 2次元コンピュータグラフィックス

1.2.3座標変換(ディスプレイ座標とスクリーン)

Display Coordinate Screen Coordinate

(xd,yd) (xs,ys)

注)点は移動しない座標の読み方が異なるだけ

画面サイズとスクリーン座標の関係

Xd

Xs

Yd

YsSX

SX

(0,0)

(0,0)SY SY

Page 14: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

14

2. 2次元CG1. 2次元コンピュータグラフィックス

スクリーン座標と画面のサイズ(具体例)

画面サイズが偶数のときに限定

+X : 3(=8/2-1)- X : - 4(=-8/2)

+Y : 3(=6/2)- Y : - 2(=-6/2+1)

8

6

Ys

Xs

Yd

Xd

2. 2次元CG1. 2次元コンピュータグラフィックス

スクリーン座標における画面のサイズ

+X : SX/2-1- X : - SX/2

+Y : SY/2- Y : - SY/2+1

画面サイズとスクリーン座標の関係

SX

SX

(0,0)

(0,0)SY SY

-SX2

SY2

SX2 -1

SY2 +1

Ys

Xs

Xd

Yd

Page 15: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

15

2. 2次元CG1. 2次元コンピュータグラフィックス

Display→Screen座標変換の具体例

xs = 6 – 8/2ys = -4 + 6/2

xd = 2 + 8/2yd = -(-1) + 6/2

Display Coordinate Screen Coordinate

(6,4)(xs、ys)=fs(xd,yd)

(2,-1)(xd、yd)=fd(xs,ys)

Xd

Xs

Yd

Ys8

6

2. 2次元CG1. 2次元コンピュータグラフィックス

座標変換式(ディスプレイ座標とスクリーン)

xs = xd – SX/2ys = -yd + SY/2(xs、ys)=fs(xd,yd)

xd = xs + SX/2yd = -ys + SY/2(xd、yd)=fd(xs,ys)

Display Coordinate Screen Coordinate

Display to Screen

Screen to Display

Xd

Xs

Yd

YsSX

SX

(0,0)

(0,0)SY SY

Page 16: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

16

2. 2次元CG1. 2次元コンピュータグラフィックス

Display座標とScreen座標の変換式

xs = xd – SX/2ys = -yd + SY/2

xd = xs + SX/2yd = -ys + SY/2Add = SX * yd + xd

yd = Int(Add/SX)xd = Add – SX * yd

注)点は移動しなくて座標の読み方が異なるだけである

Xd

Xs

Yd

YsSX

SX

(0,0)

(0,0)SY SY

Frame Bufferオフセットアドレス

RGB

RGB

2. 2次元CG1. 2次元コンピュータグラフィックス

1.2.4 課題:まとめ(2次元座標)

コンピュータの画面は(a)にある色情報を画面の対応する画素(pixel)におけるアナログ色に変換することにより描画されている。

(a)のハードウェア的な要因によって、画面の(b)にある画素が(a)の先頭番地となり、次の番地は先頭の画素の(c)の位置にくる。これを(d)座標という。この座標は画面の(b)を原点とし、右横方向にX軸、(e)方向にY軸を取る。

しかし、この座標はディスプレイのH/Wに起因する座標であり、一般的に用いるには数学で用いられる座標に変換した方が便利である。このように、数学的な座標を画面に適用したのが(f)座標であり、画面の(g)を原点とし、右横方向にX軸、(h)方向にY軸を取る。

(a)フレームバッファ(VRAM) (b)左上 (c)右横

(d)ディスプレイ(H/W) (e)下 (f)スクリーン(デカルト)

(g)中心 (h)上

Page 17: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

17

2. 2次元CG1. 2次元コンピュータグラフィックス

課題:まとめ(2次元座標変換式)

yd = Int(Add/SX)xd = Add – SX * yd

Add = SX * yd + xd

xs = xd – SX/2ys = -yd + SY/2

xd = xs + SX/2yd = -ys + SY/2

Xd

Xs

Yd

YsSX

SX

(0,0)

(0,0)SY SY

Frame Bufferオフセットアドレス

RGB

RGB

2. 2次元CG1. 2次元コンピュータグラフィックス

課題:まとめ(2次元座標変換)

VRAMにおけるオフセットアドレスが5000である時、ディスプレ座標値とスクリーン座標値を求めよ。ただし、スクリーンの大きさは640×480とする。

5000

SX=640SY=480

yd = Int(5000/640)=7xd = 5000 – 640*7=520

xs = 520 -640/2=200ys = -7 + 480/2=233

DisplayOffset Address

Page 18: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

18

2. 2次元CG1. 2次元コンピュータグラフィックス

課題:まとめ(2次元座標変換)

スクリーン座標値が(-50,-30)である時、ディスプレ座標値とVRAMのオフセット値を求めよ。ただし、スクリーンの大きさは640×480とする。

SX=640SY=480

(xs,ys)=(-50、-30)

Add = 640*270 + 270=173070

xd = -50 + SX/2=270yd = -(-30) + SY/2=270

DisplayOffset Address

2. 2次元CG1. 2次元コンピュータグラフィックス

1.3 直線と円弧の描画

(x1,y1)

(x2,y2)

X

Y

スクリーンに直線を描画する

数学の世界での直線の式

y=y2-y1x2-x1 (x-x1) +y1

y2-y1x2-x1

傾き : m=

y=mx+b y1=mx1+b

b=y1-mx1

直線の式 x1,y1の代入 bを代入

y=mx+y1-mx1

Y=m(x-x1) +y1

Page 19: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

19

2. 2次元CG1. 2次元コンピュータグラフィックス

1.3.1スクリーンへの直線の描画

スクリーンに直線を描画する

X

Y

(x2,y2)

(x1,y1)

格子上にしか点を打てない

どこに点を打つか

2. 2次元CG1. 2次元コンピュータグラフィックス

直線の描画のプログラミング

スクリーンに直線を描画する

X

Y

Xs

YsYp

E

(x2,y2)

(x1,y1)

Xsを+1する

ypを求めるyp=m(Xs-x1) +y1

Xsをx1Ysをy1とする

Eを求めるE=Yp-Ys

E>=0.5なら Ys=Ys+1

(Xs,Ys)に点を描画

Xs=X2なら終了

不具合が生じるケースがある

Page 20: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

20

2. 2次元CG1. 2次元コンピュータグラフィックス

直線の描画の問題点

傾きが45度以上の場合不具合が生じるケースがある

X

Y (x2,y2)

(x1,y1)

X

Y (x2,y2)

(x1,y1)

2. 2次元CG1. 2次元コンピュータグラフィックス

傾き45度以上の直線の描画

傾きが45度以上の場合

X

Y (x2,y2)

(x1,y1)

Ys=m(Xs-x1) +y1

Xs=(Ys-y1 )/m+x1

式の変形

XではなくY方向に+1していく

Page 21: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

21

2. 2次元CG1. 2次元コンピュータグラフィックス

高速化(Bresenham Algorithm)

X

Y (x2,y2)

(x1,y1)

Ys=m(Xs-x1) +y1

Xs=(Ys-y1 )/m+x1

計算に浮動小数点計算が必要

処理速度の著しい低下

Bresenham AlgorithmH/W化

少数を使わないようにする

Bresenhamの参考:Cアルゴリズム全科 : 千葉則茂著

2. 2次元CG1. 2次元コンピュータグラフィックス

(x-x0)2+(y-y0)2=R2

Bresenham Algorithm

H/W化

少数を使わないようにする

Bresenhamの参考:Cアルゴリズム全科 : 千葉則茂著

R

(x0,y0)

X

Y数学の世界での円の式

1.3.2 円の描画

Page 22: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

22

2. 2次元CG1. 2次元コンピュータグラフィックス

課題:まとめ(Bresenham Algorithm)

1.ブレゼンハムアルゴリズムが用いられる理由を述べよ

2.ブレゼンハムアルゴリズムは計算時間の短縮化のためにどのような考え方を導入しているか述べよ

・処理が高速・ハードウェア化しやすい

・小数点演算を極力除いている

2. 2次元CG1. 2次元コンピュータグラフィックス

Filling

直線の描画ができるようになった

1.4 塗りつぶし(Filling)

塗りつぶす

Page 23: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

23

2. 2次元CG1. 2次元コンピュータグラフィックス

1.4.1三角形の塗りつぶし

A(x0s,y0s)

A(x0,y0)

(xmin,ymin)

(xmax,ymax)

B(x1s,y1s)

デ ィ ス プ レ イ 座 標ス ク リ ー ン 座 標

左 回 り

C(x2s,y2s)

X

XY

Y

B(x1,y1)

C(x2,y2)

塗りつぶす三角形 ディスプレイ座標に変換

頂点は左回りにつける min,maxの算出

2. 2次元CG1. 2次元コンピュータグラフィックス

三角形の塗りつぶし方

Ysをymin -> ymaxまで+1しながら以下の処理を繰り返す

ymin

ysxs xe LS

ymax

X

Y

(1)ysにおけるLSの設定(2)三辺について以下の処

理を繰り返す

(2-1)LSと辺の交点を求める

(3)求めた交点の小さい方をXs、大きいほうをxeとしてこの間を直線で結ぶ

Page 24: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

24

2. 2次元CG1. 2次元コンピュータグラフィックス

辺との交点算出

X=(Y-y0 ) * m+x0辺の式

但し、m=(x1-x0)/(y1-y0)A(x0,y0)

LS

B(x1,y1)

LSの式y=ys

LSの式を辺の式に代入して交点を求める

X=(ys-y0) * m+x0=(ys-y0) * (x1-x0)/(y1-y0)+x0=(ys-y0)/(y1-y0) * (x1-x0)+x0

Y軸に関する部分をまとめるX=d * (x1-x0)+x0但し、d=(ys-y0)/(y1-y0)

dにより交点の判別が出来る

O<=d<=1d<0 or d>1Y1-y0=0 交点なし(LSと平行)

交点あり(x,ys)交点なし

2. 2次元CG1. 2次元コンピュータグラフィックス

辺との交点算出例

d=(ys-y0)/(y1-y0) d=(ys-y1)/(y2-y1)

d<0なので交差しない0<=d<=1なので交差する

x=d * (x1-x0)+x0y=ys

A(x0,y0) A(x0,y0)

ys ys

LS

辺ABの 場 合 辺BCの 場 合

X

Y

B(x1,y1) B(x1,y1)

C(x2,y2) C(x2,y2)

LS

X

Y

ys-y0

y1-ysy1-ys

y2-y1

Page 25: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

25

2. 2次元CG1. 2次元コンピュータグラフィックス

1.4.2ポリゴンの塗りつぶし

(xmin,ymin)

(xmax,ymax)

ymax

ys

LS

ymin

デ ィ ス プ レ イ 座 標

X

Y

xs xe

Ysをymin -> ymaxまで+1しながら以下の処理を繰り返す

(1)ysにおけるLSの設定(2)全辺について以下の処

理を繰り返す

(2-1)LSと辺の交点を求める

(3)求めた交点の小さい方をXs、大きいほうをxeとしてこの間を直線で結ぶ

2. 2次元CG1. 2次元コンピュータグラフィックス

ポリゴンの塗りつぶしにおける注意点

凹形ポリゴンの場合には対応できない

凸 形 ポ リ ゴ ン 凹 形 ポ リ ゴ ン

Page 26: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

26

2. 2次元CG1. 2次元コンピュータグラフィックス

ポリゴンの凹凸判定

180以 内

180以 上 あ り

凸 形 ポ リ ゴ ン 凹 形 ポ リ ゴ ン

凸 形 ポ リ ゴ ン 凹 形 ポ リ ゴ ン

(1)各頂点の内側の角度を求める

ひとつでも180度以上の頂点があると凹

(2)辺上の点から他の辺上の点へ直線を引く

直線が外側を通ると凹

2. 2次元CG1. 2次元コンピュータグラフィックス

ポリゴンの三角形分割

凹形ポリゴンの場合には対応できない

凸 形 ポ リ ゴ ン 凹 形 ポ リ ゴ ン

多角形を三角形に分割し、三角形毎に塗りつぶし処理を行う

Page 27: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

27

2. 2次元CG1. 2次元コンピュータグラフィックス

スクリーンの外にある図形を除去する

1.5 2Dクリッピング(Clipping)

クリッピング

SCREEN

不 要

不 要

不 要

不 要

不 要

Xs

Ys

処理の高速化の為

点のクリッピング

点がスクリーン座標内にあるか判定する

SCREEN

Xs

Ys

2. 2次元CG1. 2次元コンピュータグラフィックス

直線のクリッピング(Cohen-Sutherland)

スクリーンを中心に9の部分に分割し、各部を4bitであらわす

101010001001

001000000001

011001000101

上 側: 1

下 側: 1

左 側: 1

右 側: 1

線の端点これらのコードを与える(Pa,Pb)Pa | pb = 0000 : 線全体がウインドウ内Pa & pb = 0000 : 一部が入っている可能性あり

Page 28: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

28

2. 2次元CG1. 2次元コンピュータグラフィックス

Cohen-Sutherland(順次クリッピング)

Pa | pb = 0000 : 線全体がウインドウ内Pa & pb = 0000 : 一部が入っている可能性あり

SCREEN

別 の 判 定 必 要

AND=0000

不 要

不 要

不 要

Xs

Ys 101010001000

0010

0000

0000

0000

0001

0001

01100100

0100

AND 0010

別の判別必要

2. 2次元CG1. 2次元コンピュータグラフィックス

1.6 二次元座標変換(幾何学変換)

平行移動・回転・圧縮

幾何学変換 :点や線自体が移動や変形する

X

Y

X

Y

座標変換 :点や線自体が移動せず座標系が変形する

幾何学変換と座標変換

図形 or 座標

Page 29: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

29

2. 2次元CG1. 2次元コンピュータグラフィックス

同次座標系(Homogeneous Coordinate)

座標変換を簡単に行う為、行列を用いる

座標変換を簡単に行う為、次元を上げる

2Dならば、通常の座標 (x,y)を(wx,wy,1)とする。ただし、w!=0

通常 w=1として扱うので、座標(x,y)は同次座標系では(x,y,1)となる

2Dでは 3×3の行列となる

2. 2次元CG1. 2次元コンピュータグラフィックス

平行移動(Translation)

xt = x + txyt = y + ty

行列式で書くと

平行移動を行列であらわすには同次座標を用いなければならない

1 0 tx0 1 ty0 0 1

xtyt1

=xy1

移動

tx

(xt,yt)

(x,y)

ty

Page 30: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

30

2. 2次元CG1. 2次元コンピュータグラフィックス

拡大・縮小(Scaling):原点中心

xs = x × sxys = y × sy

sx 0 00 sy 00 0 1

xsys1

=xy1

行列式で書くと

拡 大 ・ 縮 小

sx × x

sy × y

(xs,ys)

(x,y)

2. 2次元CG1. 2次元コンピュータグラフィックス

回転(Rotation):原点中心

xr = R cos(θ+α)yr = R sin (θ+α)

cosθ -sinθ 0sinθ cosθ 0

0 0 1

xryr1

=xy1

行列式で書くと

回 転

(xr,yr)

(x,y)θ

α

R

xr = R cosθcosα - R sinθsinαyr = R cosθsinα + R cosαsinθ

xr = x cosθ - y sinθyr = x sinθ + y cosθ

x = Rcosα, y =Rsinα

回転は左まわりを正とする

Page 31: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

31

2. 2次元CG1. 2次元コンピュータグラフィックス

せん断(Shear)

xc = x + cx × yyc = y

a c 0b d 00 0 1

xcyc1

=xy1

行列式で書くと

X軸のせん断

せ ん 断(x-axis)

cx × y

(xc,yc)(x,y)Y軸のせん断

xc = xyc = y + cy × x

1 0 0b 1 00 0 1

1 c 00 1 00 0 1

X軸のせん断Y軸のせん断

2. 2次元CG1. 2次元コンピュータグラフィックス

幾何変換と座標変換

幾何学変換(Geometric Transformation)

座標変換(Coordinate Transformation)

回 転

(xr,yr)

(x,y)θ

α

R回 転

(xr,yr)(x,y)

θ

点をθ回転 座標系を-θ回転

動作が反対(逆変換)

結果としては同じ

Page 32: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

32

2. 2次元CG1. 2次元コンピュータグラフィックス

幾何変換と座標変換の関係

幾何学変換(Geometric Transformation)

座標変換(Coordinate Transformation)

平行移動

回転

拡大・縮小

点を原点中心にtx,ty移動 座標系を-tx,-ty移動

点を原点中心にsx,sy倍 座標系を原点中心に1/sx,1/sy倍

点を原点中心にθ回転 座標系を原点中心に-θ回転

1 0 tx0 1 ty0 0 1

1 0 -tx0 1 -ty0 0 1

Sx 0 00 sy 00 0 1

1/sx 0 00 1/sy 00 0 1

cosθ -sinθ 0sinθ cosθ 0

0 0 1

cosθ sinθ 0-sinθ cosθ 0

0 0 1

逆変換

逆行列

逆行列

2. 2次元CG1. 2次元コンピュータグラフィックス

合成変換

平行移動、拡大・縮小、回転等を組み合わせる事によって様々な図形の変形が可能となる

これらの変形を順番に A1,A2, ….. Anの順に行ったとき、これらをひとつの変形(変換)にまとめたものを合成変換という。また、まとめた変換行列の事を合成マトリックスという。

変換を A1,A2, …. Anの順に行い、その行列を T1,T2, …. Tnとすると合成変換は An, …. A2,A1そして、合成マトリックスは Tn ・・・T2・T1となる

Page 33: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

33

2. 2次元CG1. 2次元コンピュータグラフィックス

合成変換の例(幾何変換)

処理を分解

回転・縮小

2. 2次元CG1. 2次元コンピュータグラフィックス

合成変換の例(座標変換)

処理を分解

回転・縮小

Page 34: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

34

2. 2次元CG1. 2次元コンピュータグラフィックス

平行移動と回転(幾何変換)

Translate

1 0 -tx0 1 -ty0 0 1

x1y11

=xy1

x2y21

=x1y11

Sx 0 00 sy 00 0 1

2. 2次元CG1. 2次元コンピュータグラフィックス

縮小・平行移動(幾何変換)

Translate

X3y31

=x2y21

1 0 tx0 1 ty0 0 1

x4y41

=x3y31

cosθ -sinθ 0sinθ cosθ 0

0 0 1注)回転は左回転を正とする

Page 35: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

35

2. 2次元CG1. 2次元コンピュータグラフィックス

合成マトリックス(幾何変換)

Sx 0 00 sy 00 0 1

X3y31

=x2y21

1 0 tx0 1 ty0 0 1

x4y41

=x3y31

1 0 - tx0 1 -ty0 0 1

x1y11

=xy1

cosθ -sinθ 0sinθ cosθ 0

0 0 1

x2y21

=x1y11

= T1 X

= T2 X1

= T3 X2

= T4 X3

平行移動

回転

縮小

平行移動

合成変換 X4 = T4 X3 = T4 T3 T2 T1 X = T X

変換の逆順 T:合成マトリックス

2. 2次元CG1. 2次元コンピュータグラフィックス

合成マトリックスと逆変換(幾何変換)

X4 = T4T3T2T1X = T X

X X4

X = T-1 X4=T1-1T2-1T3-1T4-1X4合成マトリックスの逆行列を用いることで、逆の変換も出来る

Page 36: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

36

2. 2次元CG1. 2次元コンピュータグラフィックス

アフィン変換(Affine Transformation)

合成変換 X4 = T4 X3 = T4 T3 T2 T1 X = T X変換の逆順

T:合成マトリックス

T=1 0 tx0 1 ty0 0 1

Sx 0 00 sy 00 0 1

cosθ -sinθ 0sinθ cosθ 0

0 0 1

1 0 -tx0 1 - ty0 0 1

(注)変換の順は重要で、 T1 T2 != T2 T1である

このように、平行移動、回転等による変換をアフィン変換という

Affine Transformation

a b ec d f0 0 1

x’y’1

=xy1

アフィン変換では、直線は直線に、平行は平行に、直線上の比は維持される。

2. 2次元CG1. 2次元コンピュータグラフィックス

行列の表記について

CGに関する書籍を見ると、平行移動や回転が下の行列ではなく

cosθ -sinθ 0sinθ cosθ 0

0 0 1

1 0 00 1 0tx ty 1

1 0 tx0 1 ty0 0 1

下のようになっている事がある。これは、行列の表記の仕方によるもので、意味は同じである。

cosθ sinθ 0-sinθ cosθ 0

0 0 1

x1 y1 1 x y 1= 1 0 00 1 0tx ty 1

例えば、平行移動

1 0 tx0 1 ty0 0 1

x1y11

=xy1

VS

Page 37: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

37

2. 2次元CG1. 2次元コンピュータグラフィックス

まとめ1(直線の描画、塗りつぶし)

二次元座標において、直線や円弧を高速に描画する為に(a)アルゴリズムが用いられる。この手法はハードウェア化しやすいように計算の中に(b)演算が無いように工夫されている。この手法を用いて直線を描画するとき、そのアルゴリズムは(c)によって大きく二つに分けられる。

2. 2次元CG1. 2次元コンピュータグラフィックス

まとめ2(直線の描画、塗りつぶし)

多角形を塗りつぶすには、まず多角形を(a)と(b)に区別しなければならない。多角形が(b)の場合には、この多角形を三角形に分けて、三角形毎に塗りつぶしを行う。(a)の場合には、直接塗りつぶす事が可能である。その手順としてまず、各点を左回りに定義し、各点をスクリーン座標から(c)座標に変換する。そして、(c)座標における 大、 小値を求め、(d)軸に平行な直線LSをyminからymaxまで変化させながらLSと各辺との(e)を求め、求まった小さい値から大きい値まで直線を引くことにより塗りつぶしが行われる

Page 38: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

38

2. 2次元CG1. 2次元コンピュータグラフィックス

まとめ3(座標変換)

図に示すように、 (rx,ry)中心に与点(x,y)をθ回転させた後、(tx,ty)dだけ平行移動させたときの、合成マトリックスを求めよ。

(rx,ry)

(x,y)

(x1,y1)移 動 量(tx,ty)

θ

(x2,y2)

X

Y

1 0 tx0 1 ty0 0 1

cosθ -sinθ 0sinθ cosθ 0

0 0 1

回転移動、平行移動には以下の行列を用いる

2. 2次元CG1. 2次元コンピュータグラフィックス

まとめ4(クリッピング、座標変換)

・クリッピングが必要な理由を述べよ

・アフィン変換とは何か

・クリッピングがとは何か。また、その代表的なCohen-Sutherland アルゴリズムについて説明せよ

・幾何変換と座標変換の違いを述べよ

・アフィン変換に同次座標を用いる理由を述べよ

Page 39: Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu College of Technology Dept. of Computer & Control Production System Lab. 1. 2-Dimension

39

2. 2次元CG1. 2次元コンピュータグラフィックス

まとめ5(ビューイング変換)

X X

Y Y

40 30

5055

7065

45度

60 705050

60 60

次の変換を「幾何変換」により変換した後の四角形の座標値を求めよ。計算過程では、合成行列を作成すること。