05 — 2차원 그래픽스의 변환

출처: SSU 컴퓨터 그래픽스 슬라이드 — SSU_CG_05_2차원그래픽스의변환.pdf 주차: 5주차

오브젝트의 위치·크기·모양 을 조작하는 기하 변환의 수학, 이를 한 형태의 행렬 곱으로 통일하는 동차좌표계, 그리고 화면에 실제로 그려질 영역만 남기는 클리핑 까지 다룹니다.

1. 그래픽스의 변환

1.1 왜 변환이 필요한가

모델 데이터의 재사용: 같은 모델을 위치/크기만 바꿔 여러 번 배치.
계층적 구조의 모델: 팔이 몸통에 붙고, 손이 팔에 붙는 식의 조립.
애니메이션: 시간에 따라 변환 파라미터를 바꾸면 움직임.
좌표계 변환: 한 공간에서 다른 공간으로 자연스럽게 이동.

1.2 어떤 좌표계들이 필요한가 — 그래픽스 파이프라인

수업이 강조하는 4단계 개념 모델:

The Grand Pipeline — Model → Screen

6주차

Model Space

오브젝트 자체의 로컬 좌표계 (원점 기준).

Formula

실시간 좌표

(0.50, 0.50, 0.50)

World Space

Model Matrix M 을 곱해 전역 공간에 배치.

Formula

실시간 좌표

(0.68, 0.50, 0.20)

View Space

View Matrix V 로 카메라 기준으로 재정렬.

Formula

실시간 좌표

(0.68, 0.45, 0.29)

NDC Space

Projection 적용 + 원근 분할 → [-1, 1] 정규화.

Formula

실시간 좌표

(3.72, 3.71, 0.29)

Screen Space

최종 픽셀 좌표로 변환하여 화면에 출력.

Formula

실시간 좌표

1889px, -814px

Model Y-Rotate29°

World Position X0.0

Camera Distance Z5.0

모델링 → 배치/애니메이션 → 촬영 구도 → 렌더링

이를 좌표계 관점으로 펼치면:

단계	이름	별칭
1	모델 공간 (원점은 모델 중심)	Local / Model / Object Space
2	월드 공간 (원점은 월드)	World / World Coordinate
3	뷰 공간 (원점은 카메라)	View / Eye / Camera Space
4	렌더링	Clip → NDC → Screen Coordinates

변환 적용 순서:

모델-월드 변환: 스케일링, 회전, 이동
월드-뷰 변환: 회전, 이동
프로젝션 변환: 투영 (3D → 2D)

2. 기본적인 기하 변환

2.1 이동 (Translation)

한 점 를 변위 만큼 이동.

다각형은 각 꼭지점을, 원은 중심점을 이동하고 다시 그립니다.

2.2 신축 (Scaling)

점 를 원점 기준으로 만큼 확대/축소.

임의의 점 기준 신축 — 샌드위치 기법 ⭐️

기준점을 원점으로 이동:
원점 기준 신축:
원래 위치로 복귀:

2.3 회전 (Rotation)

점 를 원점 중심으로 각도 만큼 회전.

유도: 이므로

왜 이 행렬이 sin/cos 로 생겼는가 — 단위원에서 점의 좌표 자체가 (cosα, sinα) 이기 때문. 추가로 θ 만큼 돌리면 각도 차 공식으로 풀려 나오는 계수가 곧 행렬의 네 칸. 아래 시각화로 직접 확인하세요.

회전 행렬 유도 — 왜 sin/cos이 나오는가

유도

α — 초기 각도30°

θ — 회전각60°

원본 좌표

P.x = cos(30°) = 0.866

P.y = sin(30°) = 0.500

θ만큼 회전 후 — 각도 차 공식

P'.x = cos(α+θ) = cos α · cos θ − sin α · sin θ

= 0.87·0.50 − 0.50·0.87 = 0.000

P'.y = sin(α+θ) = sin α · cos θ + cos α · sin θ

= 0.50·0.50 + 0.87·0.87 = 1.000

행렬 형태로 묶으면

┌ P'.x ┐   ┌ cos θ   −sin θ ┐ ┌ P.x ┐
│ P'.y │ = │ sin θ    cos θ │ │ P.y │
└      ┘   └                ┘ └     ┘

↑ 이 행렬이 바로 회전 행렬 R(θ). 각도 차 공식의 계수가 그대로 행렬의 네 칸.

왜 회전 행렬이 sin/cos 로 생겼는가: 단위원에서 점의 좌표 자체가 (cos α, sin α) 이기 때문. 점을 θ 만큼 더 돌리면 각도가 α+θ 가 되는데, 이를 각도 차 공식 으로 풀면 원래 x, y 의 선형 조합으로 표현되고, 그 계수가 행렬 성분으로 정확히 떨어집니다. 행렬은 발명된 게 아니라 삼각함수의 필연.

임의의 점 기준 회전

원점이 아닌 점 기준 회전의 "공식"은 따로 없습니다. 필요한 것은 원점으로 가져가 회전하고 되돌리는 샌드위치. 아래에서 단계별로 뜯어봅니다.

피봇 기준 회전 — 샌드위치 T(−c) → R(θ) → T(+c)

5주차

θ — 회전각60°

단계 (0→3)0.00

①

T(−c): 모든 것을 피봇만큼 반대로 이동 — 피봇이 원점으로 간다.

②

R(θ): 원점 기준 회전 공식은 이미 알고 있다 → 그대로 적용.

③

T(+c): 이동했던 만큼 다시 원래로 → 피봇이 제자리.

합성 행렬

M = T(+c) · R(θ) · T(−c)

수식은 오른쪽에서 왼쪽 적용 — 읽는 순서와 적용 순서가 반대.

"원점이 아닌 점 기준" 회전 공식은 없다 — 필요한 것은 원점으로 가져가 회전한 뒤 되돌리는 세 단계. 이 샌드위치 패턴 은 임의축 회전(3D), 평면 대칭, 확대 중심 변경 등 모든 "임의 기준" 변환에 공통.

2.4 관찰: 왜 동차좌표가 필요한가

기본 변환은 모두 형태. 순차적인 기하변환을 중간 좌표 없이 한 번에 계산하려면 이 덧셈 항 를 제거 해야 합니다. 동차좌표계 를 도입하면 이동까지도 행렬의 곱만으로 표현할 수 있습니다.

3. 동차좌표계 (Homogeneous Coordinates)

3.1 동차좌표 표현

인 경우 2D 점 는 로 표현됩니다. 이제 모든 기본 변환을 동일한 형태의 3×3 행렬 로 표현 가능.

2D Matrix Transformation

5주차

Translate X0.0

Translate Y0.0

Rotation0°

Scale X1.0×

Scale Y1.0×

순서 선택: Scale → Rotate → Translate — 객체가 자기 중심에서 회전한 뒤 이동합니다.

3.2 합성 변환 (Composite Transformation)

연속적인 이동

두 이동 행렬의 곱은 변위의 합인 단일 이동 — 기대한 그대로.

임의점 기준 신축의 최종 합성 행렬

3.3 행렬 곱셈의 성질 ⭐️

결합법칙 (Associativity) 항상 성립:
교환법칙 (Commutativity) 성립 안 됨:
단, 동일한 종류의 기하변환에 대해서는 교환법칙이 성립
- 이동끼리, 신축끼리, 회전끼리는 순서를 바꿔도 같은 결과.

실무적 의의

여러 변환을 행렬 곱으로 하나의 합성 변환 행렬을 미리 계산 해 두면, 동일한 변환을 거치는 모든 점에 효율적으로 적용 할 수 있습니다. 수백만 버텍스를 다루는 GPU의 핵심 최적화.

4. 기타 기하 변환

4.1 반사 (Reflection)

좌표축·원점 기준 반사

기준	효과	행렬
x축	y 부호 반전
y축	x 부호 반전
원점	x, y 모두 반전 (= 180° 회전)

에 대한 반사 ⭐️

단순한 좌표 교환 행렬:

샌드위치 해석으로도 유도 가능:

45° 시계 방향 회전 (반사축 를 x축에 맞춤)
x축에 대한 반사
45° 반시계 방향 회전 (원래 방향으로 복귀)

4.2 밀림 (Shearing)

한 축 방향으로 비례해 기울이는 변환. x-방향으로 비율만큼 밀 때:

예: x-방향 0.5, y-방향 0.4 밀림변환을 조합하면 이탤릭체 글자 가 됩니다. 아래에서 직접 밀어보세요.

밀림 (Shear) — 왜 이탤릭체가 나오는가

5주차

h_x — x 방향 밀림 (y에 비례)0.50

h_y — y 방향 밀림 (x에 비례)0.00

행렬 형태

┌ x' ┐   ┌ 1    0.50 ┐ ┌ x ┐
│ y' │ = │ 0.00   1  │ │ y │
└    ┘   └             ┘ └   ┘

대각이 1, 대각선 밖 한 칸에 h — 신축도 회전도 아닌 축 간 혼합.

관찰: h_x 만 있을 때 — 위쪽 끝이 오른쪽으로, 아래쪽 끝이 왼쪽으로 기울어진다. y 좌표에 비례하기 때문. 이게 바로 이탤릭체. h_y 는 세로로 기울이는 효과.
넓이·부피는 보존됨 (det = 1−h_x·h_y, 작은 h일 땐 ≈ 1). 회전과 달리 직교성은 깨짐.

3D 공간에서의 밀림도 같은 원리 — 한 축을 다른 축에 비례해서 밀어내는 변환. 수업의 프러스텀 정규화에서 원근 시야각 정렬에 SH_z(a, b) 가 등장하는 이유: 기울어진 프러스텀을 z축에 정렬하기 위해 x, y 를 z에 비례해 밀어준다.

5. 래스터 방식에서의 변환

벡터 공간이 아닌 프레임버퍼의 픽셀블록 을 직접 조작해 객체를 이동/복사하는 기법. 수리 연산 없이 비트 연산 만 사용하므로 효율적. 일반적으로 H/W 또는 firmware 에서 처리.

5.1 Bit Block Transfer (bit-blt / RasterOp)

프레임버퍼 영역을 한 번에 복사·이동. 비트 연산 기본:

COPY, OR, XOR, AND, ERASE, SET, CLEAR

블록 이동 예시

해당 영역 복사: 1 로 OR 연산
해당 영역 제거: 0 으로 AND 연산
이동: 저장했던 블록을 새 위치에 Write

5.2 XOR 를 이용한 커서 이동 ⭐️

동일한 래스터 영역에 픽셀 블록을 2회 연속 XOR 연산 하면 영역의 원래 값이 복원된다는 성질을 이용.

배경 영역을 , 커서 블록을 라 할 때:
- 현재 위치에서 로 연산 → 커서가 화면에 나타남
- 커서가 움직이면 동일 위치에 다시 로 XOR: → 화면의 원래 모습이 복원.
- 새로운 위치에서 커서 객체를 다시 XOR 연산으로 그림.

커서 저장 메모리 없이 비파괴적으로 움직이는 고전 GUI 의 핵심 기법.

6. 윈도우와 뷰포트 (Viewport)

6.1 2차원 그래픽스의 뷰잉 과정

수업 슬라이드의 상세한 4단계 파이프라인:

모델좌표계: 개별 객체의 표현
모델링 변환 ↓
월드좌표계: 통합된 그림, 윈도우 설정
윈도우-뷰포트 변환 ↓
뷰잉좌표계: 뷰포트 내의 좌표
뷰잉좌표계의 정규화 ↓
정규화된 뷰잉좌표계
장치좌표계 변환 ↓
장치좌표계: 출력될 화면, 뷰포트 설정

이 파이프라인 덕분에 Zooming, Panning 같은 효과가 단순한 윈도우 크기/위치 변경만으로 자연스럽게 구현됩니다.

6.2 윈도우-뷰포트 좌표 변환 공식

월드 좌표계에서 뷰잉 좌표계로의 이동 및 신축변환.

직관: 윈도우 내 상대적 위치 비율을 뷰포트에서도 똑같이 유지. 배율 , 가 숨어 있는 구조이며, 전체가 "윈도우 원점 이동 → 배율 신축 → 뷰포트 원점 이동" 이라는 합성 변환과 동등.

Window → Viewport 매핑

5주차

WINDOW (월드 좌표)(0,0) — (10,10)

⤷ 클릭하면 위치를 옮깁니다

VIEWPORT (장치 좌표)(100,100) — (300,300)

← 같은 점의 장치 좌표

매핑 공식

S_x = (vp.right − vp.left) / (win.right − win.left)

= (300−100) / (10−0) = 20.00

S_y = (vp.top − vp.bottom) / (win.top − win.bottom) = 20.00

x_v = vp.left + (x_w − win.left) · S_x

= 100 + (5.0−0) · 20.00 = 200.0

Window 조정

L R B T

Viewport 조정

L R B T

공식의 핵심: "윈도우 내에서의 상대 위치 비율을 뷰포트에서도 똑같이 유지". 즉 `(x_w − L) / 너비` 라는 0~1 비율을 뷰포트 쪽에도 그대로 곱해줄 뿐. 배율 S_x, S_y 를 달리 두면 — 한 축만 늘이기(왜곡) 도 자연스럽게 허용.

7. 클리핑 알고리즘 (Clipping Algorithm)

7.1 클리핑의 종류

월드 좌표 클리핑 vs 뷰포트 클리핑 — 어느 공간에서 자르느냐.
점, 선, 영역, 텍스트 클리핑 — 무엇을 자르느냐.

7.2 점 클리핑 (Point Clipping)

다음 식을 만족하는 점만 그린다:

7.3 선 클리핑 — Cohen-Sutherland 알고리즘 ⭐️

영역 코드 (Region Code / Outcode)

윈도우 외부를 9개 영역으로 나누고, 각 끝점에 4비트 영역 코드를 부여:

TEXT

1001 | 1000 | 1010
-----+------+-----
0001 | 0000 | 0010    ← 0000 = 윈도우 내부
-----+------+-----
0101 | 0100 | 0110

비트 할당: [Top, Bottom, Right, Left].

알고리즘

선분 양끝점의 영역코드를 정함.
Accept: 두 코드가 모두 0000 이면 수락 (완전히 내부).
Reject: 두 코드의 logical AND 가 0000이 아니면 거부 (같은 바깥 영역).
그 외에는 윈도우 경계와 교차하는 지점에서 수직 또는 수평 분할.
- 수직 경계 ( 또는 ) 에서:
- 수평 경계 ( 또는 ) 에서:
단축된 선분으로 (1), (2) 반복.

Cohen-Sutherland Outcode

5주차

P₁ Outcode

0001

P₂ Outcode

1010

1011

AND

0000

Decision

✂ CLIP — 경계와 교차 계산 후 반복

비트 순서 [Top, Bottom, Right, Left]. 두 끝점의 Outcode가 모두 0000이면 Accept, AND ≠ 0 이면 Reject, 그 외엔 경계와 교점을 구해 분할 후 반복.

7.4 영역 (다각형) 클리핑

다각형 클리핑의 문제점

속이 빈 다각형 (Hollow polygon): 선 클리핑 알고리즘 적용으로 충분.
속이 찬 다각형: 몇 개의 Closed filled polygon 을 새로 생성해야 함. 단순히 경계만 자르면 내부가 뚫려버리는 문제.

Sutherland-Hodgman 알고리즘 ⭐️

각 윈도우 경계(상·하·좌·우) 에 대해 순차적으로 클리핑 수행 (파이프라인).
Filled polygon 을 꼭지점 배열 로 표현.
시계 방향으로 다각형의 에지를 훑으며, 에지와 윈도우 경계가 만나는 점을 구해 4가지 경우 로 분기:

에지 유형	출력에 저장할 것
(a) 외부 → 내부	교차점 , 그리고 끝점
(b) 내부에 완전히 포함 (내부 → 내부)	끝점
(c) 내부 → 외부	교차점 (끝점 저장 안 함)
(d) 외부 → 외부	저장 안 함

각 윈도우 경계(left, right, top, bottom) 에 이 과정을 반복.

Sutherland-Hodgman 다각형 클리핑

5주차

Pass

4 / 4 (아래)

Edge

Case

내부→내부 (끝점 출력)

Output Buffer (이번 pass)

(150, 150) → (58, 150) → (50, 140) → (50, 66) → (64, 50) → (150, 50)

4 경계(좌·우·상·하)마다 **에지 s→e 를 훑으며 4 case 분기**. 꼭짓점(검정)을 드래그해 오목 다각형도 만들어 보세요.

한계: Concave polygon 을 클리핑하면 2개 이상의 polygon 으로 분리되어 가짜 연결선(spurious edge) 이 생길 수 있음 → Weiler-Atherton 같은 일반화된 알고리즘이 필요.

7.5 텍스트 클리핑 (Text Clipping)

텍스트는 어느 단위 로 자를지를 선택할 수 있습니다.

방식	동작
전체 텍스트 클리핑	텍스트 박스가 완전히 윈도우 내부에 있을 때만 전체 출력. 일부라도 걸치면 통째로 숨김
전체 문자 클리핑	글자 단위. 한 글자가 완전히 내부면 출력, 경계에 걸친 글자는 통째로 숨김
개별 문자 클리핑	픽셀 단위. 글자가 경계에 걸치면 걸친 부분만 잘라서 출력

📝 Knowledge Check: 2D 변환 종합

Quiz

2D Transformations & Clipping

Q 1 / 10

동차좌표계를 도입하는 근본 이유는?

🔗 다음 학습

이전: 04 — 2차원 그래픽스의 기본 (4주차)
다음 (보조): CGP 4-1 — 3D 수학 기초 — 6주차 진입 전 벡터·행렬 점검.
다음 (본강): 07 — 3차원 기하변환과 뷰잉 (6주차) — z 축을 더해 3차원 공간으로 확장.