컴퓨터 그래픽스 - (버텍스 셰이더)물체 축소/확대, 회전, 이동의 원리

여는 글

에픽게임즈사에서 언리얼엔진을 무료로 풀고 각종 강의를 제작하여 배포하였지만, 관련 지식이 전무했던 저에게는 기본 용어들조차 너무 어려워서 힘들었던 기억이 납니다.

 

특히, 모델의 하단에서 상단으로 갈 수록 색상이 연해지는 효과를 적용하기 위한 강의를 들을 때, '로컬 스페이스에서 버텍스의 Z축 좌표값에 비례하여 색상을 블렌딩한다'는 단 한줄의 문장을 이해하지 못해서 용어들을 파헤치느라 한참을 헤맸던 기억이납니다. 

 

생각해보면 에픽게임즈사에서 언리얼엔진을 무료로 풀고 각종 강의를 제작하여 배포하였지만, 강의를 들을때마다 위의 내용처럼 용어에 대해 이해하지 못해서 헤맸던 적이 매 강의마다 있었던 것 같네요. 예전부터 생각해왔던것이지만 언리얼엔진을 배워보기 위해 2번이나 도전했다가 실패한 주요한 원인 중 하나였던 것 같습니다.

 

이번 포스트, 다음포스트에서는 행렬에 불과한 각 정점(버텍스)가 어떻게 도형을 이루고, 이러한 도형이 카메라 시점으로 옮겨가며 이 과정에서 셰이더의 역할은 어떤지를 알아볼 예정인데요. 원래대로라면 행렬의 변환을 위한 계산이 원래는 많은 파트인데, 어차피 이런 작업들은 우수한 프로그래머들이 엔진에 이미 다 포함시켜놨을테니 저는 만들어진 프로그램을 이해하기 위한 기초지식 정도만 집고 넘어가보려 합니다.

 

오브젝트의 축소/확대(Scale/스케일)

물체의 축소/확대는 단순 곱셈을 통해 처리한다

 

물체를 확대/축소는 오브젝트 공간의 0점으로부터 떨어진 정점까지의 거리에 단순 X/Y/Z축에 적용할 배수를 단순히 곱하여 설정합니다. 각 축별로 곱하는 값을 축소확대 인자(scaling factor)라고 부르는데, 사실상 각 축별 배율이라고 할 수있죠.

 

언리얼 엔진에서의 Scaling 입력

 

위 그림에서 처럼 우리가 엔진에서 Scale에 넣는 값이 바로 이 축소확대 인자라고 볼 수 있겠습니다. 포토샵이나 파워포인트에서 개체의 크기를 정할때는 Scale기반이 아니라, 각 가로, 세로의 크기를 센티미터나 픽셀단위로 입력하다보니 원하는 크기를 정확하게 입력하기가 편하죠.

 

그런데 엔진에서는 왜 절대적인 픽셀 값이 아니라 배율로 해놔서 매번 크기 정하는데 힘들게 하는지 의문이었습니다. 아무래도 이렇게 오브젝트 크기를 계산하는 방식이 있다보니 그랬나보군요.

 

오브젝트의 회전(Rotation/로테이션)

Scale이 단순히 행렬에 곱셈을 하는 것을 처리할 수 있어서 간단했던 반면, 회전(로테이션)부터는 꽤나 어려워지기 시작합니다.

 

회전을 곱셈으로 표현하려면 벡터와 X축이 이루는 각도를 기준으로 계산식을 재정립해야 한다

 

회전의 기본 원리는 위 그림에서와 같이 기존좌표와 변경될 좌표를 삼각함수로 표현하고, 변경된 값 또한 삼각함수 계산법을 통해 풀어나가는 것입니다. 

 

위 그림의 영점으로부터 r만큼 떨어진 점(X, Y)는 각도 α를 기준으로 변환하면  (r·cos α, r·sin α)로 변환이 가능합니다.

 

이때, 회전을 통해 이동시킨 새로운 점(X', Y')는 회전에 의한 이동이므로 영점으로부터의 거리(즉, 반지름)은 r로 같은데요, 새로 추가될 각도 β를 고려하면 (r·cos (α+ β ), r·sin (α+ β ))로 표현이 가능합니다.

 

삼각함수의 계산식을 이용하여 정리하면, 최종적으로는 아래와 같이 표현이 가능합니다. 여기서 중요한 건 ⓐ삼각함수의 원리를 이용하여, sin/cos값으로 회전을 표현이 가능하다는 점과 ⓑ최종적으로 나타나는 모습을 행렬의 곱셈의 모습으로 표현이 가능하다는 점입니다. 

회전은 위와 같이 행렬값으로 표현가능함

 

참고로 앞으로 나올 이동, 회전, 축소/확대가 모두 행렬의 곱셈들로 표현이 가능하며, 실제 계산 또한 행렬간 곱셈으로 처리합니다.

 

 

오브젝트의 이동(Translation) 그리고 동차좌표(Homogeneous Coordinate)

확대/축소 및 회전과 달리 이동은 좌표값에 직접적으로 더하고 빼는 과정을 통해 나타내죠. 때문에 확대/축소 및 회전과 달리 행렬의 곱셈을 통해 나타내기 어렵겠다고 생각하시겠지만, 이동 또한 행렬의 곱셈의 형태로 처리가 가능합니다.

 

이때, 확대/축소 및 회전은 벡터의 성질(벡터는 방향과 크기를 나타내므로 공간 내의 어디에 있든 동일하다)을 보존하는 채로 이동하므로 선형변환이라고 부릅니다. 반면 이동의 경우에는 공간내의 어디에 있든 동일하다는 조건을 무시하고 추가적인 X값, Y값을 부여하는 만큼 선형변환이 아닙니다. 그럼에도 불구하고 선형변환 값들과 함께 이동을 계산할 수 있도록 만들어주는 개념이 동차좌표라는 개념입니다. 이름은 거창하지만 별건 아니고, 그냥 좌표값에 추가적인 차원 1개를 더 부여하는게 끝입니다.

 

예를들면 (X, Y)의 동차좌표는 (X, Y, 1)로 표현할 수 있고, 이때 추가되는 숫자 1은 딱히 의미를 갖진 않습니다. 참고로 수학적 용어들이 자꾸 나와서 머리아프시겠지만, 저는 동차좌표의 개념 그 자체를 이해하는 것은 크게 중요치 않다고 생각합니다. 그보다는 이를 통해 얻는 결과를 눈으로 보시는 게 좋을 것 같네요. 아래 그림에서 dx, dy는 각각 X축 이동값, Y축 이동값입니다.

 

이동(Translation)과 동차좌표(2차원 좌표계 기준)

 

여기서 중요한 건 '행렬 안에 X/Y축 이동값을 넣어서 계산이 가능하다'는 사실입니다. 그 과정에서 기존 좌표계의 차원보다 행, 열 방향으로 한 차원이 늘어나고, 이렇게 한 차원이 늘어나는 이유가 '동차좌표가 적용되어서'라는 점 정도를 기억해주시면 되겠습니다. 참고로 위 수식은 2차원을 기준으로 하므로, 3차원 좌표계는 행렬이 4×4 크기로 늘어납니다.

 

 

 

 

아핀변환(Affine Transform), 강체변환(Rigid-body motion), [L|t]/[R|t]의 개념

아핀변환

바로 직전 문단에서 확대/축소, 회전과 같이 벡터의 성질을 변화시키지 않은 채 이동하는 계산을 선형변환이라 부르고, 이와 달리 이동은 여기에 속하지 않는다고 말씀드렸는데요.

 

선형변환과 이동을 한데 묶어서 아핀변환이라고 부릅니다.

아핀변환 ⊃ {선형변환, 이동}

 

 

강체변환 및 [L|t]/[R|t]의 의미

[L❘t] 혹은 [R❘t]의 의미

참고로 각종 회전, 확대/축소 및 이동을 반복하여도 깨지지 않는 패턴이 하나 있는데요. 위 그림의 분홍색 부분에는 이동 계산내역이 딱히 포함되지 않는다는 점입니다. 즉, 선형변환 상태가 계속 유지된다는 것입니다. 따라서, 선형변환의 첫 글자를 따서 L로 표기합니다.

 

추가적으로 확대/축소를 제외한 회전과 이동의 경우에는 물체의 외형을 변화시키지 않는데요. 때문에 두 계산을 따로 묶을 경우에는 물체를 변화시키지 않는다는 의미에서 강체변환(rigid-body motion / rigid motion)이라고 부릅니다. 이런 경우에는 선형변환 부분을 R로 표기하기도 합니다.

 

반면 위 그림의 파란색 부분에는 계산을 반복할 경우 이동결과값 뿐 아니라 회전, 확대/축소의 계산도 일정부분 포함됩니다. 어찌되었건 이동이 누적 포함되는 부분이므로 이 부분은 이동(translation)의 첫 글자를 따서 t로 표기합니다.