Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu...
Transcript of Computer Graphicsuser.numazu-ct.ac.jp/~fujio/personal/jp/kougi/zukei/...Computer Graphics Numazu...
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 二次元座標変換
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度の描画で電荷として保持
3
2. 2次元CG1. 2次元コンピュータグラフィックス
1.1.2 ランダムスキャン方式 (リフレッシュ方式)
表示される線が美しい
図形が多いとフリッカー(ちらつき)が生じる
面表示が難しい
CRTリフレッシュ
電子ビーム
ディスプレイリストメモリ
[リフレッシュバッファ]
2. 2次元CG1. 2次元コンピュータグラフィックス
1.1.3 ラスタースキャン方式 (リフレッシュ方式)
価格が安い
豊富な色表示が可能
Jugが生じるためAnti-Aliasingが必要
現在の主流
リフレッシュBit Plane
フレームバッファ(Video RAM)
電子ビーム
CRT
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方向から電圧をかけると交点の液晶が駆動する方式。
単純マトリクス型液晶の構造に加えて、各液晶ごとに「アクティブ素子」を配置したもの。
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
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
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
色数画面サイズ
7
2. 2次元CG1. 2次元コンピュータグラフィックス
画面サイズと呼称
1M
2M
3M
4M
2. 2次元CG1. 2次元コンピュータグラフィックス
ダブルバッファ(Double Buffer)
二つのフレームバッファを交互に使う(Animation)
描画SW RAMDAC切替 切替
FrameBuffer
FrameBuffer
CRT
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
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)である。
10
2. 2次元CG1. 2次元コンピュータグラフィックス
課題4:まとめ(色表現とフレームバッファ)
グラフィックの画面出力としては、(a)ディスプレイが主流となっている。これらの画面のひとつの点を(b)と呼ぶ。この(b)毎に与えられたビット数により画面に表示できる色数が決まる。
例えば、6bitであれば(c)色の表示が可能となる。コンピュータ内における色の表現には(d)の三原色が使われ三色混合(全色0xFF)により(e)色が表現される。一般にフルカラーと呼ばれている表現色は、これらの原色を(f)ビットで表現した場合をいう。
2. 2次元CG1. 2次元コンピュータグラフィックス
1.2 座標変換
VRAM
フレームバッファアドレス
ディスプレイ座標
ディスプレイ座標
スクリーン座標
スクリーン座標
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
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
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
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
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
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)上
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
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
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なら終了
不具合が生じるケースがある
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していく
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 円の描画
22
2. 2次元CG1. 2次元コンピュータグラフィックス
課題:まとめ(Bresenham Algorithm)
1.ブレゼンハムアルゴリズムが用いられる理由を述べよ
2.ブレゼンハムアルゴリズムは計算時間の短縮化のためにどのような考え方を導入しているか述べよ
・処理が高速・ハードウェア化しやすい
・小数点演算を極力除いている
2. 2次元CG1. 2次元コンピュータグラフィックス
Filling
直線の描画ができるようになった
1.4 塗りつぶし(Filling)
塗りつぶす
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としてこの間を直線で結ぶ
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
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次元コンピュータグラフィックス
ポリゴンの塗りつぶしにおける注意点
凹形ポリゴンの場合には対応できない
凸 形 ポ リ ゴ ン 凹 形 ポ リ ゴ ン
26
2. 2次元CG1. 2次元コンピュータグラフィックス
ポリゴンの凹凸判定
180以 内
180以 上 あ り
凸 形 ポ リ ゴ ン 凹 形 ポ リ ゴ ン
凸 形 ポ リ ゴ ン 凹 形 ポ リ ゴ ン
(1)各頂点の内側の角度を求める
ひとつでも180度以上の頂点があると凹
(2)辺上の点から他の辺上の点へ直線を引く
直線が外側を通ると凹
2. 2次元CG1. 2次元コンピュータグラフィックス
ポリゴンの三角形分割
凹形ポリゴンの場合には対応できない
凸 形 ポ リ ゴ ン 凹 形 ポ リ ゴ ン
多角形を三角形に分割し、三角形毎に塗りつぶし処理を行う
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 : 一部が入っている可能性あり
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 座標
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
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α
回転は左まわりを正とする
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)
θ
点をθ回転 座標系を-θ回転
動作が反対(逆変換)
結果としては同じ
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となる
33
2. 2次元CG1. 2次元コンピュータグラフィックス
合成変換の例(幾何変換)
処理を分解
回転・縮小
2. 2次元CG1. 2次元コンピュータグラフィックス
合成変換の例(座標変換)
処理を分解
回転・縮小
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注)回転は左回転を正とする
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合成マトリックスの逆行列を用いることで、逆の変換も出来る
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
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)を求め、求まった小さい値から大きい値まで直線を引くことにより塗りつぶしが行われる
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 アルゴリズムについて説明せよ
・幾何変換と座標変換の違いを述べよ
・アフィン変換に同次座標を用いる理由を述べよ
39
2. 2次元CG1. 2次元コンピュータグラフィックス
まとめ5(ビューイング変換)
X X
Y Y
40 30
5055
7065
45度
60 705050
60 60
次の変換を「幾何変換」により変換した後の四角形の座標値を求めよ。計算過程では、合成行列を作成すること。