기본 개념

2차원 그래픽 변환은 컴퓨터 그래픽스에서 기본적이면서도 중요한 주제이다. 동차 좌표 시스템을 사용하면, 일관된 방식으로 선형 변환(회전, 축소/확장, 평행이동 등)을 수행할 수 있다.

변환 행렬

평행이동 (Translation)

평행이동은 객체를 일정한 거리만큼 이동시키는 변환이다. 2D 평행이동을 정의하는 변환 행렬 \mathbf{T}는 다음과 같다:

\mathbf{T} = \begin{bmatrix} 1 & 0 & t_x \\ 0 & 1 & t_y \\ 0 & 0 & 1 \end{bmatrix}

여기서 t_xt_y는 각각 x축과 y축 방향으로의 이동 거리이다. 동차 좌표계에서 점 \mathbf{P}(x, y)를 이동시키는 연산은 다음과 같이 표현된다:

\mathbf{P'} = \mathbf{T} \mathbf{P} = \begin{bmatrix} 1 & 0 & t_x \\ 0 & 1 & t_y \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \\ y \\ 1 \end{bmatrix}

회전 (Rotation)

회전 변환은 객체를 원점 중심으로 일정한 각도만큼 회전시키는 변환이다. 회전을 정의하는 변환 행렬 \mathbf{R}는 다음과 같다:

\mathbf{R} = \begin{bmatrix} \cos \theta & -\sin \theta & 0 \\ \sin \theta & \cos \theta & 0 \\ 0 & 0 & 1 \end{bmatrix}

여기서 \theta는 회전 각도이다. 동차 좌표계에서 점 \mathbf{P}(x, y)를 회전시키는 연산은 다음과 같이 표현된다:

\mathbf{P'} = \mathbf{R} \mathbf{P} = \begin{bmatrix} \cos \theta & -\sin \theta & 0 \\ \sin \theta & \cos \theta & 0 \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \\ y \\ 1 \end{bmatrix}

스케일링 (Scaling)

스케일링 변환은 객체의 크기를 조정하는 변환이다. 2D 스케일링을 정의하는 변환 행렬 \mathbf{S}는 다음과 같다:

\mathbf{S} = \begin{bmatrix} s_x & 0 & 0 \\ 0 & s_y & 0 \\ 0 & 0 & 1 \end{bmatrix}

여기서 s_xs_y는 각각 x축과 y축 방향으로의 스케일링 팩터이다. 동차 좌표계에서 점 \mathbf{P}(x, y)를 스케일링하는 연산은 다음과 같이 표현된다:

\mathbf{P'} = \mathbf{S} \mathbf{P} = \begin{bmatrix} s_x & 0 & 0 \\ 0 & s_y & 0 \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \\ y \\ 1 \end{bmatrix}

예제 (종합 변환)

이제 평행이동, 회전, 스케일링을 조합하여 종합 예제를 만들어 보겠다.

예를 들어, 원점에 있는 점 \mathbf{P}(1, 1)을 먼저 x축 방향으로 2 단위, y축 방향으로 3 단위 평행이동시키고, 45도 회전시킨 다음, x축 방향으로 2배, y축 방향으로 3배 스케일링한다고 가정해 봅시다.

Step 1: 평행이동

\mathbf{T} = \begin{bmatrix} 1 & 0 & 2 \\ 0 & 1 & 3 \\ 0 & 0 & 1 \end{bmatrix}

프로덕트:

\mathbf{P_1} = \mathbf{T} \mathbf{P} = \begin{bmatrix} 1 & 0 & 2 \\ 0 & 1 & 3 \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} 1 \\ 1 \\ 1 \end{bmatrix} = \begin{bmatrix} 3 \\ 4 \\ 1 \end{bmatrix}

Step 2: 회전

\mathbf{R} = \begin{bmatrix} \cos 45^\circ & -\sin 45^\circ & 0 \\ \sin 45^\circ & \cos 45^\circ & 0 \\ 0 & 0 & 1 \end{bmatrix} = \begin{bmatrix} \frac{\sqrt{2}}{2} & -\frac{\sqrt{2}}{2} & 0 \\ \frac{\sqrt{2}}{2} & \frac{\sqrt{2}}{2} & 0 \\ 0 & 0 & 1 \end{bmatrix}

프로덕트:

\mathbf{P}_2 = \mathbf{R} \mathbf{P}_1 = \begin{bmatrix} \frac{\sqrt{2}}{2} & -\frac{\sqrt{2}}{2} & 0 \\ \frac{\sqrt{2}}{2} & \frac{\sqrt{2}}{2} & 0 \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} 3 \\ 4 \\ 1 \end{bmatrix} = \begin{bmatrix} -0.707 \\ 4.949 \\ 1 \end{bmatrix}

Step 3: 스케일링

\mathbf{S} = \begin{bmatrix} 2 & 0 & 0 \\ 0 & 3 & 0 \\ 0 & 0 & 1 \end{bmatrix}

프로덕트:

\mathbf{P}_3 = \mathbf{S} \mathbf{P}_2 = \begin{bmatrix} 2 & 0 & 0 \\ 0 & 3 & 0 \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} -0.707 \\ 4.949 \\ 1 \end{bmatrix} = \begin{bmatrix} -1.414 \\ 14.847 \\ 1 \end{bmatrix}

따라서 최종적으로 변환된 점의 좌표는 (-1.414, 14.847)가 된다.

이러한 각 변환을 하나의 결합 변환 행렬로 표현할 수도 있다. 결합된 변환 행렬 \mathbf{C}는 각각의 변환 행렬을 순서대로 곱한 결과이다.

\mathbf{C} = \mathbf{S} \mathbf{R} \mathbf{T}

이를 통해 다양한 그래픽 변환을 한 번에 적용할 수 있다.

이 예제는 동차 좌표계를 사용하여 2차원 그래픽 변환을 수행하는 방법을 잘 보여준다. 동차 좌표계는 복잡한 변환을 간결하고 체계적으로 처리할 수 있게 해준다.