김서버의 프론트엔드 일기

컴퓨터그래픽스 - 3 (좌표계의 변환) 본문

공부하는거/컴퓨터 그래픽스

컴퓨터그래픽스 - 3 (좌표계의 변환)

kimSerVer 2022. 9. 6. 21:57

컴퓨터 세상에는 다양한 물체들로 구성되어 있는데, 각 물체는 이동, 회전, 축소확대가 될 수 있으며, 이러한 행위들을 총칭하여 변환이라고 한다.

축소확대

2차원에서는 2 X 2 행렬로 표현된다.

Sx 0
0 Sy

여기서 Sx와 Sy는 각각 x축과 y축 방향의 축소확대 인자이다. 이 인자가 1보다 크면 확대를, 작으면 축소를 의미한다.

2차원 벡터 (x,y)는 행렬-벡터 곱셈을 통해 축소 확대 된다.

Sx 0 X x = Sx * x
0 Sy y Sy * y

회전

마찬가지로 2차원에서는 2 X 2행렬로 표현되며, 회전을 하기 위한 행렬식은 각도 O를 받았을 때, 다음과 같이 구성된다.

Math.cos(O) -(Math.sin(O))
Math.sin(O) Math.cos(O)

위 행렬과 2차원 벡터 (x,y)를 행렬-벡터 곱셈을 통해 회전을 하게 된다.

이동과 동차 좌표

 위의 축소확대와 회전은 이른바 선형 변환이라는 범주에 속한다.

 이동을 시키는 방법은 2차원 벡터 (x,y)가 있을 때, 각각 움직이고 싶은 만큼의 (dx, dy)를 더해주면 되고, 이 때 (dx, dy)는 변위 벡터라고 부른다.

 이동은 선현 변환의 범주에 속하지 않고 다음과 같은 식을 만들어지게 된다

x X dx = x + dx
y dy y + dy

 하지만 이는 행렬 곱셈으로 구현되는 축소확대와 회전과는 다르게 덧셈으로 구성이 된다. 하지만, 이른바 동차 좌표를 사용하면, 이동 역시 행렬 곱셈으로 구현될 수 있다. 한 점의 2차원 카테시안 좌표 (x,y)가 주어질 때, 이에대한 동차 좌표는 간단히 (x,y,1)로 표현할 수 있다. 

 마지막 원소 1은 더미로 삽입된 것으로 생각해도 된다. 한편, 3차원벡터가 된 동차좌표와 곱셈을 하기 위해서는, 3X3 단위 행렬의 마지막 열에 (dx,dy)를 삽입하면, 이동행렬이 된다.

1 0 dx
0 1 dy
0 0 1

이 행렬을 동차좌표와 곱셈을 하면 다음과 같이 표현된다.

1 0 dx X x = x + dx
0 1 dy y y + dy
0 0 1 1 1

 2차원의 카테시안 좌표 (x,y)의 동차 좌표는 (x,y,1)로 국한 되지 않는다. 대신, w(x,y,1)로 표현되며, w는 0이 아니어야 한다.

 예를 들면 (2,3,1), (4,6,2), (6,9,3) 등은 모두 동일한 카테시안 좌표 (2,3)에 해당하는 동차 좌표들이다. 즉, (x,y,1)은 카테시안 좌표 (x,y)에 해당하는 무한히 많은 동차 좌표들 중 하나일 뿐이다.

동차 좌표를 다루기 위해서는 위의 축소확대 및 회전의 2X2 행렬 형태를 3X3행렬로 표현해야한다

 축소확대

Sx 0 0
0 Sy 0
0 0 1

회전

Math.cos(O) -(Math.sin(O)) 0
Math.sin(O) Math.cos(O) 0
0 0 1

2차원 변환의 결합

 우리는 실제로 2차원 물체를 회전후에 이동하거나 이동후에 회전을 시킬수도있다. 예를 들어 오각형을 90도로 회전한 후 x축을 따라 7만큼 이동했다. 이 회전과 이동을 각각 R(90) 과 T(7,0)으로 표현할 수 있다.

 그리고 꼭지점 (0,4)를 기준을 봤을 때의 식으로 볼 수 있다.

R(90)의 행렬 식은 다음과 같다.

0 -1 0
1 0 0
0 0 1

T(7,0)의 행렬 식은 다음과 같다

1 0 7
0 1 0
0 0 1

우선 꼭지점 (0, 4)를 R(90)과 행렬-벡터 곱셈을 한다

0 -1 0 X 0 = -4
1 0 0 4 0
0 0 1 1 1

그 다음, 회전한 결과 (-4,0)과 T(7,0)을 행렬-벡터 곱셈을 한다

1 0 7 X -4 = 3
0 1 0 0 0
0 0 1 1 1

 오각형 꼭지점 중 하나인 (0,4)는 회전과 이동을 한 결과로 (3,0)으로 변경 되었음을 알 수 있다.

 하지만 이렇게 두 번에 걸쳐서 계산하기도 하지만, R과 T의 순서를 바꾸어서 행렬 곱셈으로 하나로 결합해서 계산 할 수도 있다.

1 0 7 X 0 -1 0
0 1 0 1 0 0
0 0 1 0 0 1
0 -1 7
1 0 0
0 0 1

이렇게 곱한 3X3행렬과 (0,4)를 행렬-벡터 곱셈을 할 경우에 다음과 같은 결과가 된다.

0 -1 7 X 4 = 3
1 0 0 0 0
0 0 1 1 1

 원래 (0,4)에 있던 점은 이렇게 결합해서 행렬-벡터 곱셈을 해도 같은 결과가 나온다.

 주의 할 점은 행렬 곱셈식은 교환 법칙이 성립되지 않기 때문에, 반드시 순서대로 행렬을 곱셈을 해주어야 올바른 결과가 나오게 된다.

아핀 변환

 축소확대와 회전은 선형변환이지만 이동은 선형변환이지 않다. 우리는 위에서 3X3 변환 행렬의 곱셈을 자세히 보면 마지막 3번 행은 항상 (0,0,1)로 고정이 된다.

 고정 불변인 마지막행을 없애고 2X3행렬을 [ L| t ]로 표기하자. 왼쪽의 L은 2 X 2행렬을 t 는 3번 열을 말한다.

 아핀 변환이 결합된 [ L | t ]에서 L은 누적된 선형변환을, t는 누적된 이동을 표현한다.

R(90) X T(7,0)

0 -1 0 X 1 0 7
1 0 0 0 1 0
0 0 1 0 0 1
0 -1 0
1 0 7
0 0 1

 L은 빨간색으로 t는 초록색으로 표시하였다. 결합 과정에 사용된 유일한 선형변환이 R(90)이므로 그대로 복사되어 L을 만든 반면 t는 입력으로 주어진 T(7,0)과는 다르게 나왔다.

 어떤 물체를 [ L | t ]로 변환하는 것을 개념적으로 해석하면, 그 물체에 L을 먼저 적용하고 그렇게 선형 변환된 물체에 t를 적용하는 것과 같다. 즉, 폴리곤 메시로 표현된 물체의 각 정점을 p라 할 때, Lp + t 방식으로 변환이 이루어지는 것이다.

위 행렬식을 풀었을 때, 다음과 같이 표현 할 수 있다.

1 0 0 X 0 -1 0
0 1 7 1 0 0
0 0 1 0 0 1

 축소 확대 없이, 회전과 이동만 일어난 물체를 보면, 외양에는 어떤 영향도 미치지 못한다. 이런 점에서 이를 강체 변환이라고 부른다.

3차원 변환

 3차원 변환의 기본 개념은 사실 2차원과 동일하다. 단지 마지막에 z축이 들어가서 (x,y,z)가 되고 동차좌표는 (x,y,z,1)이 되고, 변환행렬도 2X2에서 3X3으로 변하는 것 뿐이다.

 3차원 변환에서 주목할 부분은 회전이다.

3차원 회전

 3차원에서의 회전은 회전축을 필요로 한다. 먼저, z축을 중심으로 O만큼 회전하는 Rz(O) 행렬식은 다음과 같다.

Math.cos(O) -(Math.sin(O)) 0
Math.sin(O) Math.cos(O) 0
0 0 1

 3차원 폴리곤 메시를 z축 중심으로 O만큼 회전하고자 하면, 그 폴리곤 메시를 구성하는 모든 정점(x,y,z)에 Rz(O)과의 행렬-벡터 곱셈을 적용하면 된다.

 x축을 회전축으로한 Rx(O)의 행렬식은 다음과 같다.

1 0 0
0 Math.cos(O) -(Math.sin(O))
0 Math.sin(O) Math.cos(O)

 y축을 회전축으로한 Ry(O)의 행렬식은 다음과 같다.

Math.cos(O) 0 Math.sin(O)
0 1 0
-(Math.sin(O)) 0 Math.cos(O)

월드 변환

하나의 물체를 모델링하는 데 사용된 좌표계를 오브젝트 공간이라고 부른다. 물체들을 하나의 3차원 가상 환경으로 통합하려면 이들을 하나의 좌표계로 통합해야하는데, 이 좌표계를 월드 공간이라고 부른다.

 오브젝트 공간에서 월드 공간으로 좌표계를 변환하는 것을 월드 변환이라고 부르고, 이를 통해 월드 공간으로 옮겨지게 된다.

 3차원 공간의 월드 변환을 하는 방법은 위의 축소확대, 회전, 이동을 통해서 일어나게 된다. 즉 월드 변환을 하고 싶은 행렬식을 입력하면, 폴리곤 메시에 대해서 각 정점에 대하여 행렬-벡터 곱셈식을 통해 월드 변환을 하게 된다.

 회전과 오브젝트 공간 기저

 오브젝트 공간에서 한 물체의 모델링이 완료되면, 그 물체는 오브젝트 공간과 일체가 된다. 즉 물체를 움직이게 되면 오브젝트 공간도 따라서 같이 움직이게 된다.

 예를 들어 (e1, e2, e3)는 월드 공간 기저를, (u, v, n)은 오브젝트 공간의 기저를 나타낼 때, 초기에 그 둘은 일치한다.

 하지만 물체가 회전하면, 오브젝트 공간 기저 (u, v, n)은 월드공간 기저와는 다르게 된다.

 물체에 적용된 회전을 R이라고 하자. 초기에 e1과 동일했던 u는 R에 의해 회전되어 e1과 다르게 되며 다음과 같이 표기된다.

     

  Re1 = R(1,0,0) = (ux, uy, uz)

  Re2 = R(0,1,0) = (vx, vy, vz)

  Re3 = R(0,0,1) = (nx, ny, nz)

 

이 세개의 식을 결합하면

ux vx nx
uy vy ny
uz vz nz

 이런 행렬식으로 나타 낼 수 있다. 회전된 물체의 오브젝트 공간 기저인 (u,v,n)이 주어졌다면, 그 회전 행렬을 즉각 정의 할 수 있다.

즉 (u,v,n)으로 세 열을 채우면 된다. 

역변환

컴퓨터 그래픽스에서 역변환은 자주 사용이 되는 개념이다. 변위벡터가 (dx,dy,dz)인 이동 T의 역변환은 (-dx,-dy,-dz) 만큼 이동하는 것으로 다음과 같이 나온다.

1 0 0 -dx
0 1 0 -dy
0 0 1 -dz
0 0 0 1

 이러한 T의 역변환을 T^(-1)로 표기하는데, 이는 실제로 T와 행렬곱을하면 단위 벡터가 나온다. 즉 실제로 역행렬이 되는 것이다.

 한편, (sx,sy,sz)를 축소확대 인자로 가진 역변환은 다음과 같다.

1/sx 0 0 0
0 1/sy 0 0
0 0 1/sz 0
0 0 0 1

 회전의 역변환을 구하기 위해서는 R^t 즉 전치행렬을 취하면 된다.

ux vx nx
uy vy ny
uz vz nz

 위의 역행렬은 아래와 같다.

ux uy uz
vx vy vz
nx ny nz

 

 이제는 기본적으로 다루어야하는 수학의 개념과 식을 마무리했다.