2차원 그래픽스의 변환

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

---

1. 그래픽스의 변환

1.1 왜 변환이 필요한가

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

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

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

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

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

변환 적용 순서:

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

---

2. 기본적인 기하 변환

2.1 이동 (Translation)

한 점 를 변위 만큼 이동.

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

2.2 신축 (Scaling)

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

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

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

2.3 회전 (Rotation)

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

유도: 이므로

임의의 점 기준 회전

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

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

---

3. 동차좌표계 (Homogeneous Coordinates)

3.1 동차좌표 표현

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

3.2 합성 변환 (Composite Transformation)

연속적인 이동

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

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

3.3 행렬 곱셈의 성질 ⭐️

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

실무적 의의

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

---

4. 기타 기하 변환

4.1 반사 (Reflection)

좌표축·원점 기준 반사

에 대한 반사 ⭐️

단순한 좌표 교환 행렬:

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

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

4.2 밀림 (Shearing)

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

예: x-방향 0.5, y-방향 0.4 밀림변환을 조합하면 이탤릭체 글자 가 됩니다.

---

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

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

5.1 Bit Block Transfer (bit-blt / RasterOp)

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

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

블록 이동 예시

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

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

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

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

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

---

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

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

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

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

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

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

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

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

---

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

7.1 클리핑의 종류

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

7.2 점 클리핑 (Point Clipping)

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

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

영역 코드 (Region Code / Outcode)

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

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

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

알고리즘

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

7.4 영역 (다각형) 클리핑

다각형 클리핑의 문제점

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

Sutherland-Hodgman 알고리즘 ⭐️

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

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

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

7.5 텍스트 클리핑 (Text Clipping)

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

---

📝 Knowledge Check: 2D 변환 종합

---

🔗 다음 학습

• 이전: 래스터 알고리즘 (4주차)
• 다음: 3D 수학·뷰잉·은면 제거 (6~7주차) — z 축을 더해 3차원 공간으로 확장.