1

Ch 5. 2차원그래픽스의 변환

5.1 기본적인 기하변환

5.2 동차좌표계를 이용한 변환

5.3 기타 기하변환

5.4 래스터 방식에서의 변환

5.5 윈도우와 Viewport

5.6 클리핑 알고리즘

2

개 요

• 객체에 이동이나 회전, 신축과 같은 기하변환을 시키면 새로운 객체를만들 수도 있고, 애니메이션 효과도 낼 수 있다.

• 객체를 모델링할 때, 각 객체별로 좌표계를 사용하면 그 객체를 손쉽게표현

→하나의 좌표계에 표현, 좌표계와 각 객체를 표현하기 위한 좌표계 사이에는 좌표변환이 이루어져야 한다.

• 여러 가지 변환을 이용하여 완성된 그림은 전체가 컴퓨터 화면에 디스플레이 되기도 하지만, 대부분의 경우는 그림의 일정 부분만이 컴퓨터화면에 디스플레이 된다. 이를 위해 뷰잉변환을 시행하며, 이때 원래 그림 가운데 컴퓨터 화면에 출력되지 않는 부분은 절단하여 제거하여야한다.

• 2차원 객체를 설계하여 그래픽 장면을 제작하기 위한 여러 가지 기하변환과 완성된 그래픽 장면을 출력장치에 나타내기 위한 일련의 변환 과정 및 클리핑에 대하여 설명한다

3

5.1 기본적인 기하변환

• 2차원 그래픽스에서는 기본 객체를 움직이고, 크기를 확대,축소,회전을

시키는 기하변환을 수행→객체의 모양을 변형, 애니메이션 효과

(1) Translation• 이차원 평면상의 한점 P(x, y)를 T(tx, ty)만큼 이동시켜 P(x’, y’)가 되면

• 이를 이동벡터 T(tx, ty)로 나타내면

• P’=P+ T(tx, ty) 의 관계가 성립

• 객체의 이동 : 다각형의 경우 각 꼭지점을, 원의 경우 중심점을, 타원은

두초점을, 직선이나 곡선은 구성하는 점들을 이동하여 다시 그린다

4

(2) 신축(확대/축소:Scaling)• 한 점 P(x , y)가 원점을 기준으로 S(sx, sy) 만큼 신축하여 P’(x’,y’)가 됨

(sx, sy : scaling factor)

• sx, sy가 1보다 크면 객체가 확대, 1보다 작으면 객체가 축소• sx(또는 sy)가 음수이면 x(또는 y)축에 대칭이면서 신축

원점을 기준으로 하는 다각형의 신축

5

• 임의의 점에 대한 신축(1) 신축 기준점(xf, yf)이 원점이 되도록 a를 이동 : T(-xf, -yf)(2) b를 원점에 대하여 신축 : S(sx, sy)(3) c를 (1)의 반대방향으로 이동 : T(xf, yf)

즉, P’ = T(xf, yf) · S(sx, sy) · T(-xf, -yf) · P

임의의 점을 기준으로 하는 다각형의 신축

6

(3) 회전(Rotation) • 회전각이 양수이면 반시계방향, 음수이면 시계방향으로 회전

• 한점 P(x, y)를 원점을 중심으로 Θ만큼 회전

원점을 중심으로하는다각형의 회전

7

• 임의의 점에 대한 회전

(1) 원점으로 이동 : T(-xr, -yr)

(2) 원점을 중심으로 회전 : R(θ) · T(-xr, -yr) · P

(3) 원래 위치로 이동 : T(xr, yr)

즉, P' = T(xr, yr)·R(θ)·T(-xr, -yr)·P

임의의 점을 중심으로 하는 회전

8

5.2 동차좌표계를 이용한 변환

• 임의의 점에 대한 신축은 3개의 행렬을 순차적으로 적용시킴으로써수행

• 3개의 행렬을 하나로 나타내면 변환절차가 간단

→ 동차좌표계(Homogeneous Coordinate System)를 이용

(1)동차좌표계

• 점 P가 순서대로 변환을 거쳐 최종적으로 Pn이 되었다고 가정

P3=M2P2+A2=M2･(M1P1+A1)+A2 = M2M1P1+M2A1+A2

if A1, A2 가 없다면 = M2M1P1

가 되어 단계별로 변환된 좌표값을 구하지 않고 P1으로 부터 P3를 직접 구할 수 있다

Pn= Mn-1 ･Pn-1 = Mn-1 ･Mn-2 ･Pn-2= . . . = Mn-1 ･Mn-2 . . . M1 ･P1 = M･P1

• 기본변환은 P' = M1· P + M2 의 행렬 형태로 표현 가능

• 순차적인 기하변환을 처리할 때 각 단계별 좌표 값을 구하지 않고 바로 계산 하려면 행렬의합(M2)을 제거해야 함→ 동차좌표계를 이용하면 행렬의 곱으로만 표현 가능

9

(2) 동차 좌표계의 표현• 동차 좌표계를 이용하면 행렬의 곱셈만으로 기하변화늘 표현 가능

• 공간상의 점을 동차 좌표계로 표현하면 차원이 확장(x,y)→ (xh, yh, h) , (x,y,z)→ (xh, yh, zh, h) 로 표현(xh, yh, zh ) 는 (hx, hy, hz) 로 정의, 이때 h=1이면 평면상의 점 (x, y )는 (x, y, 1)로

공간상의 점 (x, y, z)는 (x, y, z, 1)로 표현

• 동차 좌표계를 이용한 기하변환 P(x,y,1)→ P’(x,y,1)

이동

원점에 대해 신축

원점에 대하 회전

10

(3) 합성변환(Composite Transformation)•이동, 회전, 신축 등이 연속적으로 발생하는 경우 : 동차좌표계 이용

•연속적인 이동 (tx1, ty1)와 (tx2, ty2)을 한 경우

•임의의 점에 대한 신축→ 이동 + 신축 + (역)이동

•임의의 점에 대한 회전→ 이동 + 회전 + (역)이동

11

• 행렬 곱셈의 성질- 결합법칙 (Associativity) 항상 성립. 즉, (A · B) · C = A · (B · C)- 교환법칙 (Commutativity) 성립 안됨. 즉, A · B ≠ B · A- 단, 동일한 종류의 기하변환에 대해서는 교환법칙이 성립

• 연속된 이동의 경우 순서를 바꿔 이동시켜도 결과는 동일

A · B = B ·A

• 동일한 점에 대한 연속된 회전의 경우에 순서를 바꾸어도 결과는 동일

• 동일한 점에 대한 연속된 신축의 경우에 순서를 바꾸어도 결과는 동일

12

5.3 기타 기하변환 – 반사나 밀림

1) 반사(Reflection)• 반사 : 2차원 객체의 거울 영상을 반드는 변환

• x축, y축, 원점에 대한 반사

– y 좌표값 부호 변경, x 좌표값 부호 변경, 모두 변경

• y = x 에 대한 반사(1) 반사축과 객체 a 를 45° 시계방향 회전(2) 회전한 객체 b 를 x축에 대한 반사(3) c 를 45° 반시계방향 회전, y = x 에 대한 반사된 객체 d 가 얻어짐

• 평면상의 점P(x, y) 가 직선 y=x에 대하여 반사되어 P’(x’, y’)이 되었다면, 이두점의 관계는 반사행렬 RF를 사용

• P가 y=x에 대하여 반사되어 P’이 되었다면, P’=RF･P의 관계가 성립하며 x’와 y’의 값은 각각 y와 x가 된다

13

직선 y = x 에 대한 반사

14

2) 밀림(Shearing)• 객체를 기울어지게 만들어 객체의 모양을 왜곡시키는 변환

• 객체를 구성하는 점P(x, y)를 x방향으로 밀림변환시켜 P’(x’, y’)를 얻었다면x’는 y값의 일정비율을 x값에 가감함으로써 얻어지고 y값은 변하지 않는다. 밀림비율 sh를 포함하는 행렬을 써서 표현

• x방향으로 sh비율만큼 밀림변환

• P가 밀림 변환되어 P’이 되었다면, P’=SHx･P의 관계가 성립

예) 크기가 1인 정사각형 안의 글자를 x방향으로 0.3, y방향으로 0.3 만큼 밀림변환

15

5.4 래스터 방식에서의 변환

•래스터그래픽스시스템 : 객체를 픽셀단위로 표현하여 저장

•변환 : 프레임버퍼에 저장된 사각형 픽셀 블록을 프레임버퍼내의 한곳에서 다른 곳으로 이동

(1) 래스터 방식의 변환•프레임버퍼 내의 픽셀블록 들을 직접 조작하여 변환

– 변환이 효율적임(수리연산(+,*) 없이 비트연산(AND,OR) 사용)

– RasterOp : 직사각형 영역안의 픽셀블록들을 조작하는 래스터함수

– Bit Block Transfer(bit-Blt) : 한곳에서 다른 곳으로 픽셀 블록을 움직이는 것, 픽셀값의 블록이동

– 일반적으로 H/W 또는 firmware 방식으로 처리

래스터 방식에서객체의 이동

16

(2) 래스터 연산의 모드•비트연산 : 객체변환을 위해 AND, OR, XOR, NOR 등•예) 블록이동

– 해당영역 복사 : 복사하려는 영역을 1로 OR연산 →해당영역을 read – 해당영역 제거 : 이동시키고자 할 때 해당영역을 0으로 AND연산– 이동 : 저장했던 블록 Write

•커서이동

– 동일한 영역에 어떤 픽셀 값을 2회 연속 XOR연산을 실행하면 원래영역값이 복원됨

– 연속적인 XOR 적용으로 배경을 손상하지 않고 커서이동 구현– (A XOR B) XOR B = A XOR (B XOR B) = A XOR 0 = A

XOR를 이용한 책갈피 커서의 이동

17

• 2차원 그래픽스의 기본요소와 기하변환으로 생성한 그래픽→ 컴퓨터화면에 표현, 그림의 특정부분을 출력장치 어디에 표현?

(1) 뷰잉 파이프라인(윈도우와 뷰포트의 개념)• 자신이 만든 그림, 특정부분만 출력?, 출력장치에 따라 변환 필요• Viewing Pipeline(Process) : 사용자가 그림을 제작하여 출력시킬 때까

지의 일련의 과정• 2차원 그래픽스의 뷰잉과정

5.5 윈도우와 뷰포트(Viewport)

•모델좌표계 : 개별 객체를 표현, 객체를 가장 간단하게 표현하도록 설정

•월드좌표계 : 각 모델좌표계의 위치 및 방향을 파악하면 모든 좌표계간의 관계를 알 수 있어 통합된 그림을 얻음, 윈도우 설정

•뷰잉좌표계 : 출력장치의 크기나 사용자의 의도에 따라 신축이나 회전같은 변환을 거쳐 디스플레이, 이러한 변환을 위해 뷰포트 내의 좌표

•장치좌표계 : 출력될 화면, 뷰포트 설정

18

• 윈도우-뷰포트 변환으로 다양한 효과• Zooming

– Zoom In 효과 : 장면확대– Zoon Out 효과 : 전체 모습

• Panning

– 뷰포트의 크기를 고정시킨채 같은 크기의 윈도우가 지정된 경로를

따라 그림위를 연속적으로 움직이거나 일직선으로 움직이면 패닝

효과를 얻을 수 있다(그림 5-14)

윈도우-뷰포트 변환

19

•이동 및 신축변환 적용

(2) 윈도우-뷰포트 좌표변환• 윈도우영역을 뷰포트로 변환할 때는 윈도우 내의 객체들을 기하변환 시

켜야 함 → 이동변환, 신축변환, 회전변환(방향이 일치하지 않으면)

월드좌표계에서 뷰잉좌표계로의 변환

20

•Clipping :정해진 윈도우 영역외부에 있는 그림의 일부를 제거하는 절차

래스터(외부 픽셀을 간단히 제거), 벡터(별도의 기법 필요)

(1) 클리핑의 개념

•클리핑되는 객체를 기준으로 점, 선, 영역, 텍스트 클리핑

•윈도우-뷰포트 변환시 클리핑 되는 시점에 따라

– 월드좌표 클리핑 : 윈도우를 설정할 때 윈도우 바깥영역을 제거하여 윈도

우 내부영역만 뷰포트로 매핑시키는 방법

– 뷰포트클리핑 : 월드좌표계로 표현된 그림 전부를 뷰포트로 매핑시킨

후 뷰포트 외부에 위치한 객체나 그림의 일부를 제거하는 방법

– 월드좌표 클리핑을 이용하면 뷰포트로 매핑시키는 영역이 감소하므

로 전체적으로 계산 시간이 줄어듬

5.5 Clipping Algoruthm

21

(2) Point Clipping • 클리핑되는 객체가 점인 경우, 윈도우 내부에 존재하는지 결정하면 된다.

• 윈도우가 점(xwmin, ywmin)과 점(xwmax, ywmax)를 서로 마주보는 꼭지점으로하는 사각형이라면, 다음 식을 만족하는 점 P(x, y)는 화면에 출력되어야 하므로 프레임버퍼에 저장되고 그외의 점들은 제거됨

• 폭발이나 바다의 거품 같은 점들이 흩어져 있는 객체를 포함하는 장면에적용

(3) Line Clipping • 클리핑되는 객체가 직선 또는 선분인 경우

• 선분이 클리핑 영역의 내부에 포함되면 프레임버퍼에 저장, 외부에 있는 직선은 제거

•내부, 외부에 완전히 포함되는지 결정할 수 없거나

•동시에 걸쳐있는 경우는 클리핑 경계와 교점을 계산

22

• 코헨-서더랜드(Cohen-Sutherland) 알고리즘(1) 직선의 양끝점의 영역코드를 정함 양끝점의 영역코드가 모두 0000

인 경우 → Accept(선분은 윈도우 내부에 포함)

(2)양끝점의 영역코드의 logical AND 가 0000 이 아닌 경우 → Reject (3) 윈도우의 경계와 교차하는 경우( (2)의 경우에 해당하지 않으면 )

윈도우 경계에서 선분을 분할수직경계 : y = y1 + m x = xwmin 또는 x = xwmax수평경계 : x= x1+(y - y1) / m y = ywmin 또는 y = ywmax

과정 (1), (2)를 반복.

윈도우를 중심으로 전체그림을 9개 영역으로 구분, 각영역에 4bit를 사용하여 영역코드를 부여Bit1(왼쪽), Bit2(오른쪽) Bit3(아래쪽) Bit4(위쪽)

23

(4) Area Clipping(영역 클리핑)•클리핑되는 객체가 다각형인 경우, 선클리핑 일고리즘을 수정하여 사용

•속이 빈 다각형(Hollow polygon) : 선 클리핑 알고리즘 적용– 클리핑된 선분을 연결하고 닫힌 사각형으로 만듬

•속이 찬 다각형 : 몇 개의 closed filled polygon 생성– 여러 개의 작은 다각형으로 분리될 수 있음, 다각형 내부를 주어진 색상으로 채

우기

다각형의 클리핑

•Sutherland-Hodgman 알고리즘

윈도우 경계에 의한 클리핑

24

(1) 각 윈도우 경계(상하좌우)에 대하여 아래 알고리즘을 적용

(2) Filled polygon 을 배열로 표현

(3) 4 가지 경우로 구분하여 다각형 꼭지점을 재구성- 시계 방향으로 다각형의 에지와 윈도우 경계가 만나는 점을 구한다.

(4) 각 윈도우 경계 (left, right, top, bottom) 에 위의 과정을 반복 적용- Concave polygon -> 2개 이상의 polygon 생성

윈도우 경계에 대한 영역 클리핑

25

(6) 텍스트 클리핑(Text Clipping)• 전체 텍스트 클리핑

• 전체 문자 클리핑

• 개별 문자 클리핑

[그림 5-23] 텍스트 클리핑의 종류