이제 지금까지 어떻게 선분을 그릴까, 그리고 그 선분을 어떻게 잘 잘라내서 윈도우 창에 띄울 것만 추릴까에 대해 공부를 해봤다.
이제 어떻게 이 공간 내에 있는 도형들을 변환할 수 있을까에 대해 고민을 해보자.
보통 Scale를 키우거나 아니면 이 물체를 회전시키거나, 이 도형이 이동하는 것 등등은 많이 봤을 것이다. (게임 상에서 비행기가 회전하거나, 아니면 플레이어가 이동하거나, 심지어 슈퍼 마리오에서 쿠파가 커지는 것 등등) 그렇다면 이러한 우리가 보는 것 뒤에서는 어떠한 연산이 일어나는지에 대해 잘 알아둘 필요가 있다.
이 연산은 대부분 선형대수로 변환하며, 일단 2차원을 예시로 들어보도록 하겠다.


1. 평행이동(Translation)
그대로 위치만 바뀌는 식이다. 예시는 다음과 같다.

이 때 저 면의 어떤 꼭지점을 Pivot으로 두고 이를 이용해서 직선의 방정식으로 표현하면 다음과 같이 표현할 수 있다.

2. 확대/축소(Scaling)

확대 축소는 더 간단하다. 그냥 단순하게 어떤 값을 곱해주기만 하면 된다.

3. 회전(Rotation)
이 연산은 방향을 바꾸는 것이다. 어떤 벡터가 있다면 이의 방향을 바꾸는 것과 동일하다.
이는 선형대수에서 배운 Rotation을 그대로 사용하면 된다.

이로써 제일 기초적인 2차원 상 변환 3개를 소개하였다.
근데 이런 연립 방정식은 행렬이라는 강력한 도구로 표현이 가능하다.



문제는 그래픽스 상 모든 행렬은 곱셈으로 표기를 해야한다.(이 때 위에 L-Side에 있는 행렬을 변환행렬이라고 한다.) 하지만 평행이동은 더하기 연산을 사용한다. 이를 다르게 표현하면 다음과 같다.

하지만 저 방식은 uniform한 방식이기에, 이제 이를 어떤 form으로 정리할 필요성이 생긴다. 즉 다음과 같이 정리할 수 있다.

이 때 p는 피연산행렬, m은 변환 행렬이며 만약 이 변환이 많아진다면 다음처럼 될 것이다.
또 m by n 행렬이면 n X q 의 행렬만 곱을 할 수 있다. 이를 고려한다면 행렬을 확장해버리자. 즉 3by3 정방행렬을 이용해서 변환행렬을 행한다면 다음과 같이 바꿀 수 있다.


이제 이렇게 정리하면 이동 행렬또한 간단하게 확장만 하면 끝난다.

이를 통해서 알 수 있는 점은 dx와 dy가 0이 아닌 이상 이동을 하는 것이다.
그리고 참고하자면 새로 추가된 1은 무조건적으로 의미가 없는 식은 아니다. Homogeneous Coodinate System 상에서 n차원 공간 상 w라는 공간을 더 추가해서 표기를 한다. 벡터는 위치라는 것이 없다. 즉 평행이동을 해도 변화가 없다. 그래서 만약 w가 0라면 점이 아니고 벡터로 인식을 한다. 하지만 만약 0이 아니라면 position이 있는데 각 성분들을 w로 나눠준다. 즉 실제 좌표와 위치는 w로 나눠주는 것이다. 즉 점과 벡터인지 확인하는 용도이다.
4. 뒤틀림(shear)
뒤틀림이란 아래 사진같은 방식으로 도형의 모양 자체가 변하는 것을 말한다.즉 x에 맞춰서 y값이 전 모양과 다르게 변하는 것을 말한다.



특별한 경우 사용하는 변환이다.
'Graphics' 카테고리의 다른 글
[Graphics] 06. 3D 이미지 생성을 위한 작업 (0) | 2021.12.21 |
---|---|
[Graphics] 05. 3차원상 물체 변환 (0) | 2021.12.21 |
[Graphics] 03. 윈도우 클리핑 (0) | 2021.12.21 |
[Graphics] 02. 디스플레이와 그리기 방정식 (0) | 2021.12.21 |
[Graphics] 01. 컴퓨터 그래픽스의 중심. 영상과 색 (0) | 2021.12.21 |