뷰 행렬

뷰 행렬은 3차원 장면의 모든 점을 카메라에서 본 위치로 옮겨 줍니다. 카메라를 한가운데에 세워 두고 장면 전체를 반대로 옮기고 돌리는 방식입니다. 카메라가 움직이면 이 행렬 하나만 새로 만들면 됩니다. 점이 화면에 닿기까지 차례로 곱하는 행렬 셋 가운데 둘째입니다.

상세

이 절은 카메라 하나와 점 하나를 끝까지 따라갑니다. 뷰 행렬이 어느 좌표계에서 어느 좌표계로 점을 옮기는지 보고, 카메라 설정 세 가지로 행렬을 만드는 과정을 숫자로 따라갑니다.

뒤쪽 소절은 이 행렬을 언제 만들고 어디서 곱하는지, 행렬에서 무엇을 꺼내 쓰는지, 도구마다 무엇이 다른지를 다룹니다. 마지막 소절은 컴퓨터 비전에서 같은 일을 맡는 행렬을 짚습니다.

기차에 앉아 창밖을 보면 나무와 전봇대가 뒤로 흘러가는 것처럼 보입니다. 앞으로 가는 쪽은 기차입니다. 앉은 사람 눈에는 자기는 가만히 있고 바깥 풍경이 움직입니다.

뷰 행렬은 3차원 장면을 이 눈으로 다시 적습니다. 카메라를 한가운데에 묶어 두고, 카메라가 움직인 만큼 장면 전체를 반대로 움직입니다. 카메라가 오른쪽으로 한 걸음 가면 장면의 모든 점을 왼쪽으로 한 걸음 옮기는 식입니다. 화면에 보이는 모습은 두 경우가 같습니다.

월드 좌표계에서 뷰 공간으로

같은 점도 무엇을 기준으로 재느냐에 따라 좌표가 달라집니다. 기준점 하나와 축 방향 셋을 정해 둔 틀을 좌표계라고 부릅니다. 뷰 행렬은 점을 한 좌표계에서 다른 좌표계로 옮깁니다.

출발하는 쪽은 월드 좌표계입니다. 장면 전체가 함께 쓰는 좌표계입니다. 방 한쪽 구석을 원점으로 잡고 바닥의 두 모서리와 벽 모서리 하나를 축으로 삼은 틀이라고 보면 됩니다.

이 문서의 월드는 구석에 서서 방 안쪽을 볼 때 x 가 오른쪽, y 가 위, z 가 앞으로 뻗은 틀입니다. 왼손 엄지를 x, 검지를 y, 가운뎃손가락을 z 에 맞출 수 있는 배치라서 왼손 좌표계라고 부릅니다.

도착하는 쪽은 뷰 공간입니다. 카메라가 선 곳을 원점으로 삼습니다. 축 셋은 카메라의 오른쪽, 위쪽, 카메라가 바라보는 쪽을 가리킵니다. 그래픽스에서는 좌표계를 흔히 「공간」이라고도 부릅니다. 뷰 공간은 카메라를 기준으로 삼은 좌표계와 같은 말입니다.

이 문서의 예는 뷰 공간에서도 오른쪽을 x, 위쪽을 y, 바라보는 쪽을 z 로 둡니다. 그러면 뷰 공간의 점 (−3, 0, 5) 는 카메라에서 왼쪽으로 3, 앞으로 5 떨어진 점으로 읽힙니다. z 가 곧 카메라 앞으로 얼마나 먼지를 말하므로, 먼 것을 작게 그리는 뒤 단계가 이 값을 씁니다.

모델·뷰·투영 가운데 둘째 행렬

장면의 점은 화면에 닿기까지 행렬 셋을 차례로 지납니다. 이 소절은 그 셋 가운데 뷰 행렬이 몇 번째에 오고 무엇을 맡는지를 봅니다.

행렬은 숫자를 가로세로로 늘어놓은 표입니다. 점의 좌표에 행렬을 곱하면 새 좌표가 나옵니다. 표에 넣는 숫자에 따라 점을 옮기거나 돌리는 계산이 됩니다.

첫째는 모델 행렬입니다. 물체 자신을 기준으로 적은 꼭짓점 좌표를 월드 좌표로 옮깁니다. 물체 자신을 기준으로 삼은 좌표계를 모델 좌표계라고 부릅니다.

둘째가 뷰 행렬입니다. 월드 좌표를 뷰 공간 좌표로 옮깁니다. 점을 옮기고 돌리기만 하고, 크기를 바꾸거나 원근을 주지는 않습니다.

셋째는 투영 행렬입니다. 뷰 공간의 점을 받아 무엇이 화면에 보이고 얼마나 크게 보일지를 정합니다.

투영 행렬을 곱한 뒤의 좌표계는 클립 공간입니다. 화면 밖에 있거나 카메라 뒤에 있는 것을 여기서 잘라 냅니다. 「클립」이 이 잘라 내기를 가리킵니다.

아래 그림은 점 하나가 거치는 좌표계와 행렬을 위에서 아래로 늘어놓은 것입니다.

flowchart TD
    A["모델 좌표계 · 물체 기준"] -->|"모델 행렬"| B["월드 좌표계 · 장면 공통"]
    B -->|"뷰 행렬"| C["뷰 공간 · 카메라 기준"]
    C -->|"투영 행렬"| D["클립 공간 · 화면 밖을 잘라 내는 곳"]

셋을 따로 두는 까닭은 다시 만드는 때가 달라서입니다. 물체가 움직이면 모델 행렬만 다시 만듭니다. 카메라가 움직이면 뷰 행렬만, 카메라가 담는 각도인 시야각이나 창 크기가 바뀌면 투영 행렬만 다시 만듭니다.

4×4 행렬과 동차 좌표

뷰 행렬은 3차원 점을 옮깁니다. 그런데 행렬은 가로세로가 네 칸씩입니다. 이 소절은 넷째 칸이 왜 붙는지를 봅니다.

행렬의 가로 한 줄을 행, 세로 한 줄을 열이라고 부릅니다. 4×4 행렬은 네 칸짜리 행 넷을 쌓은 표입니다.

회전은 3×3 행렬 곱으로 적을 수 있습니다. 반면 평행 이동은 좌표에 일정한 값을 더하는 계산이라 3×3 곱으로는 적지 못합니다.

그래서 점에 넷째 성분 1 을 붙여 (x, y, z, 1) 로 적습니다. 이렇게 성분을 하나 늘린 좌표가 동차 좌표입니다. 넷째 성분이 1 이면 4×4 행렬의 맨 오른쪽 열이 곱셈 안에서 더하기 노릇을 합니다.

회전과 이동을 한 행렬에 담으면 합치기도 쉽습니다. 뷰 행렬과 투영 행렬을 미리 곱해 두면 행렬 하나가 두 계산을 다 합니다. 장면의 꼭짓점이 백만 개여도 꼭짓점마다 곱셈 한 번이면 됩니다.

세 방향으로 만드는 뷰 행렬

이제 카메라 설정 세 가지에서 카메라의 세 방향을 구하는 과정을 숫자로 따라갑니다. 예로 쓸 카메라는 월드의 (10, 0, 0) 에 서서 (15, 0, 0) 을 봅니다. x 가 커지는 쪽을 보는 카메라입니다.

입력은 셋입니다. 카메라 위치, 바라볼 점, 카메라의 위쪽 방향입니다. 위쪽 방향은 대개 월드의 위인 (0, 1, 0) 을 줍니다.

셋째 입력과 이 소절의 계산은 벡터로 적습니다. 벡터는 방향과 길이를 함께 가진 값이고, 3차원에서는 숫자 셋으로 적습니다. (0, 1, 0) 은 위로 1 만큼 뻗은 벡터입니다.

첫째로 앞 방향을 구합니다. 바라볼 점에서 카메라 위치를 빼면 (5, 0, 0) 이 나옵니다. 길이를 1 로 맞추면 앞 방향 f 는 (1, 0, 0) 입니다. 방향만 남기고 길이를 1 로 맞춘 벡터를 단위 벡터라고 부릅니다.

둘째로 오른쪽 방향을 구합니다. 이때 외적을 씁니다. 외적은 두 벡터를 받아 둘 모두에 수직인 벡터를 돌려주는 곱입니다. 위쪽 방향과 앞 방향의 외적을 구하고 길이를 1 로 맞추면 오른쪽 방향 r 이 됩니다.

위쪽 다음 앞 순서로 곱하는 것은 이 문서가 쓰는 왼손 좌표계의 관례입니다. 다른 관례에서는 순서가 바뀝니다. 뒤의 「관례가 갈리는 축」 소절에서 다시 봅니다.

const cross = (a, b) => [
  a[1] * b[2] - a[2] * b[1],
  a[2] * b[0] - a[0] * b[2],
  a[0] * b[1] - a[1] * b[0],
];

const up = [0, 1, 0];
const f = [1, 0, 0];
const r = cross(up, f); // [0, 0, -1]

코드의 cross 가 외적입니다. 오른쪽이 z 가 작아지는 쪽으로 나왔습니다. 방 구석에서 z 쪽을 보고 서면 오른손은 x 쪽을 가리킵니다. 거기서 오른쪽으로 돌아 x 쪽을 보면 오른손은 z 가 작아지는 쪽을 가리킵니다.

셋째로 위 방향을 다시 구합니다. 입력으로 받은 위쪽은 앞 방향과 꼭 수직이지는 않습니다. 카메라가 비스듬히 아래를 내려다보면 그렇습니다. 앞 방향과 오른쪽 방향의 외적을 구하면 둘 모두에 수직인 위 방향 u 가 나옵니다. 이 예에서는 (0, 1, 0) 입니다.

점을 뷰 공간으로 옮기기

세 방향을 구했으니 점 하나를 옮겨 봅니다. 쓸 점은 월드의 (15, 0, 3) 입니다.

먼저 카메라 위치를 뺍니다. (15, 0, 3) 에서 (10, 0, 0) 을 빼면 (5, 0, 3) 입니다. 카메라에서 점으로 향하는 벡터입니다.

다음으로 이 벡터가 세 방향으로 각각 얼마나 뻗었는지를 잽니다. 이때 내적을 씁니다. 내적은 두 벡터의 같은 칸끼리 곱해 모두 더한 값입니다. 한쪽이 단위 벡터이면 다른 쪽이 그 방향으로 얼마나 뻗었는지가 나옵니다.

const dot = (a, b) =>
  a[0] * b[0] + a[1] * b[1] + a[2] * b[2];

const d = [5, 0, 3]; // 점 − 카메라 위치
const u = [0, 1, 0]; // 위 방향

dot(r, d); // -3
dot(u, d); // 0
dot(f, d); // 5

뷰 공간 좌표는 (−3, 0, 5) 입니다. 점은 카메라에서 왼쪽으로 3, 앞으로 5 떨어져 있습니다. 월드 좌표만 봐서는 카메라 위치와 방향을 함께 따져야 알던 것이 좌표 셋에 바로 드러납니다.

행렬 한 장으로 묶기

앞 소절의 빼기 한 번과 내적 세 번은 4×4 행렬 곱 한 번으로 묶입니다. 이 소절은 그 행렬의 칸마다 무엇이 들어가는지를 봅니다. e 는 카메라 위치이고, r·e 는 r 과 e 의 내적입니다.

[ rx   ry   rz   −(r·e) ]
[ ux   uy   uz   −(u·e) ]
[ fx   fy   fz   −(f·e) ]
[ 0    0    0     1     ]

위 세 행의 앞 세 칸에는 오른쪽·위·앞 방향이 한 행씩 들어갑니다. 점에 이 행을 곱하면 그 방향으로의 내적이 나옵니다.

맨 오른쪽 열은 카메라 위치를 빼는 일을 맡습니다. 점에서 e 를 먼저 빼고 내적하는 것과, 내적한 뒤 r·e 를 빼는 것은 같은 값을 줍니다. 그래서 빼기를 이 열 하나에 모아 둘 수 있습니다.

예의 카메라로 칸을 채우면 아래 행렬이 됩니다.

[ 0   0   −1     0 ]
[ 0   1    0     0 ]
[ 1   0    0   −10 ]
[ 0   0    0     1 ]

점 (15, 0, 3, 1) 에 곱하면 첫 행은 −3, 둘째 행은 0, 셋째 행은 15 − 10 = 5 를 냅니다. 앞 소절에서 한 단계씩 구한 (−3, 0, 5) 와 같습니다.

카메라의 모델 행렬을 되돌린 행렬

방금 만든 행렬은 새로 지어낸 행렬이 아닙니다. 카메라를 월드에 놓는 행렬을 거꾸로 돌린 것입니다. 이 소절은 예의 카메라로 두 행렬을 나란히 놓고 봅니다.

카메라도 장면 속 물체처럼 월드 안에 위치와 방향을 가집니다. 원점에서 z 쪽을 보던 카메라를 제 방향으로 돌리고 제 위치로 옮기는 행렬이 있습니다. 이 행렬은 카메라의 모델 행렬입니다. 물체를 월드에 놓는 행렬과 같은 일을 카메라에 합니다.

행렬에 (1, 0, 0, 0) 을 곱하면 첫 열이 그대로 나옵니다. 그래서 축 하나가 옮겨 가는 곳을 열 하나에 적습니다. 카메라의 모델 행렬은 첫 열에 오른쪽 방향, 둘째 열에 위 방향, 셋째 열에 앞 방향을 담고, 넷째 열에 카메라 위치를 담습니다.

[  0   0   1   10 ]
[  0   1   0    0 ]
[ −1   0   0    0 ]
[  0   0   0    1 ]

이 행렬에 원점 (0, 0, 0, 1) 을 곱하면 넷째 열 (10, 0, 0) 이 나옵니다. 카메라가 선 곳입니다. 앞 방향 (0, 0, 1, 0) 을 곱하면 셋째 열 (1, 0, 0) 이 나옵니다. 카메라가 보는 쪽입니다.

어떤 행렬이 한 일을 되돌리는 행렬을 그 행렬의 역행렬이라고 합니다. 뷰 행렬은 카메라의 모델 행렬의 역행렬입니다. 카메라를 놓은 동작을 되돌리면 카메라는 원점으로 돌아가고, 장면은 그만큼 반대로 움직이기 때문입니다.

되돌릴 때는 순서도 뒤집힙니다. 카메라를 놓을 때는 먼저 돌리고 그다음 옮겼습니다. 뷰 행렬은 먼저 반대로 옮기고 그다음 반대로 돌립니다. 모든 점에서 카메라 위치를 뺀 뒤, 카메라가 돈 만큼 반대로 돌리는 것입니다.

두 행렬의 왼쪽 위 3×3 칸을 견주어 봅니다. 모델 행렬에서 열로 서 있던 세 방향이 뷰 행렬에서는 행으로 누웠습니다. 행과 열을 맞바꾼 행렬을 전치 행렬이라고 합니다. 회전을 되돌리는 행렬은 이렇게 맞바꾸기만 하면 나옵니다.

맞바꾸기만으로 되는 까닭은 세 방향이 모두 길이 1 이고 서로 수직이기 때문입니다. 이런 행렬을 직교 행렬이라고 부릅니다. 직교 행렬은 전치 행렬이 곧 역행렬입니다.

일반적인 4×4 행렬의 역행렬은 계산이 꽤 무겁습니다. 뷰 행렬은 전치와 빼기만으로 그 계산을 피합니다.

위쪽 방향이 필요한 까닭

카메라 위치와 바라볼 점만으로는 카메라가 옆으로 얼마나 기울었는지가 안 정해집니다. 같은 곳을 보면서도 고개를 갸웃할 수 있기 때문입니다. 위쪽 방향을 주어야 화면의 위가 어느 쪽인지 정해집니다.

위쪽 방향이 앞 방향과 나란하면 행렬을 만들 수 없습니다. 나란한 두 벡터의 외적은 길이가 0 이라서 길이를 1 로 맞추려면 0 으로 나눠야 합니다. 행렬 칸이 NaN(Not a Number, 숫자가 아님)으로 채워지고 화면이 비어 버립니다.

카메라가 바로 위나 바로 아래를 볼 때 이 일이 생깁니다. 그래서 고개를 드는 각도를 수직 바로 앞에서 막아 두거나, 그 근처에서는 위쪽 방향으로 다른 축을 줍니다.

만드는 때와 곱하는 곳

뷰 행렬은 CPU(Central Processing Unit, 중앙 처리 장치)에서 만듭니다. 입력이 카메라 설정 세 가지뿐이라 한 번 만드는 계산은 작습니다.

그래픽용 수학 라이브러리는 대개 이 세 가지를 받아 뷰 행렬을 돌려주는 함수를 둡니다. 이 함수를 흔히 lookAt 함수라고 부릅니다. C++ 의 GLM(OpenGL Mathematics) 라이브러리에서는 glm::lookAt 이 그 함수입니다.

그래픽 계산은 GPU(Graphics Processing Unit, 그래픽 처리 장치)가 맡습니다. GPU 는 같은 계산을 수많은 꼭짓점에 한꺼번에 돌리는 전용 칩입니다.

만든 행렬은 GPU 에서 도는 정점 셰이더에 넘깁니다. 정점 셰이더는 꼭짓점마다 한 번씩 도는 작은 프로그램입니다. 꼭짓점 좌표에 뷰 행렬을 곱하는 일이 여기서 일어납니다.

한 번 그리는 동안 모든 꼭짓점이 뷰 행렬 하나를 같이 씁니다. 이렇게 모든 꼭짓점이 같이 쓰는 값을 유니폼이라고 합니다. 카메라가 움직이는 장면이면 화면 한 장을 그릴 때마다 뷰 행렬을 다시 만듭니다.

뷰 행렬을 다른 행렬과 미리 곱해 두기도 합니다. 모델 행렬과 합친 것을 모델뷰 행렬이라고 부릅니다. 모델·뷰·투영 셋을 다 곱한 것은 MVP(Model-View-Projection, 모델·뷰·투영) 행렬이라고 합니다.

점수판이나 메뉴처럼 화면에 붙어 있는 2차원 그림에는 뷰 행렬을 곱하지 않습니다. 카메라가 돌아도 화면의 같은 곳에 머물러야 하기 때문입니다.

뷰 행렬에서 꺼내 쓰는 값

뷰 행렬에는 카메라에 대한 정보가 담겨 있습니다. 그 정보를 꺼내 쓰는 경우 셋을 표로 모으고 하나씩 풉니다.

첫 줄의 판을 빌보드라고 부릅니다. 나무나 연기를 사진 한 장으로 흉내 낼 때 씁니다. 판의 가로와 세로를 카메라의 오른쪽·위 방향에 맞춰 세우면 카메라가 어디로 돌든 판이 정면을 보입니다.

둘째 줄의 카메라 위치는 역행렬을 거쳐야 나옵니다. 뷰 행렬의 맨 오른쪽 열은 위치 자체가 아니라 카메라 축으로 잰 위치에 − 를 붙인 값이기 때문입니다.

카메라 위치가 필요한 까닭은 반짝임에 있습니다. 매끈한 표면에 비친 빛은 보는 눈의 위치에 따라 반짝이는 곳이 달라집니다. 이때 역행렬은 무겁게 풀지 않습니다. 앞에서 본 전치 요령으로 카메라의 모델 행렬을 만들면 그 넷째 열이 카메라 위치입니다.

셋째 줄의 하늘 배경은 카메라가 아무리 걸어가도 가까워지지 않아야 합니다. 뷰 행렬에서 이동 성분을 지우고 회전만 남기면 배경이 카메라를 따라다닙니다. 고개를 돌리면 다른 쪽 하늘이 보이지만 걸어서는 끝에 닿지 않습니다. 이렇게 그리는 하늘을 스카이박스라고 부릅니다.

관례가 갈리는 축

뷰 행렬이 하는 일은 어디서나 같지만 세부 숫자는 도구마다 다릅니다. 이 소절은 갈리는 축 셋을 보고, 어긋났을 때 화면에 무엇이 나타나는지를 끝의 표로 모읍니다.

첫째는 카메라가 보는 방향의 부호입니다. 이 문서의 예는 뷰 공간에서 카메라가 z 가 커지는 쪽을 본다고 두었습니다. Direct3D 쪽 관례가 이와 같습니다.

OpenGL 쪽 관례는 오른손 좌표계를 쓰고, 카메라가 z 가 작아지는 쪽을 보게 둡니다. 그 관례에서는 셋째 행에 f 대신 −f 가 들어갑니다. 오른쪽 방향도 앞 방향과 위쪽 방향의 외적으로, 곱하는 순서를 바꿔 구합니다.

둘째는 점을 행렬의 어느 쪽에 두고 곱하느냐입니다. 이 문서는 점을 세로로 세워 행렬 오른쪽에 두고 곱했습니다(행렬 × 점). 점을 가로로 눕혀 행렬 왼쪽에 두는 관례(점 × 행렬)도 있습니다. 그 관례의 뷰 행렬은 이 문서의 것을 전치한 모양이고, 이동 성분이 맨 아래 행으로 갑니다.

셋째는 메모리에 담는 순서입니다. 수 열여섯 개를 한 줄로 적을 때 행부터 적는 행 우선 순서와 열부터 적는 열 우선 순서가 있습니다.

컴퓨터 비전의 외부 파라미터 행렬

컴퓨터 비전은 사진을 보고 장면을 알아내는 분야입니다. 사진 속 물체의 위치를 재려면 카메라가 어디서 어느 쪽을 보고 찍었는지를 알아야 합니다.

이 분야에서도 월드 좌표를 카메라 기준으로 옮기는 행렬을 씁니다. 이 행렬을 외부 파라미터 행렬이라고 부릅니다. 회전 3×3 옆에 이동을 담은 열 하나를 붙여 3×4 로 적습니다.

뷰 행렬과 하는 일은 같습니다. 축을 잡는 관례는 다릅니다. 컴퓨터 비전은 흔히 카메라 기준의 y 축을 아래쪽으로 잡습니다. 그래서 같은 카메라라도 행렬의 부호가 다르게 나옵니다.

이름도 헷갈리기 쉽습니다. 컴퓨터 비전에서 「카메라 행렬」이라고 하면 외부 파라미터 행렬에 렌즈의 초점 거리 같은 내부 값을 곱한 것까지 가리킵니다. 그래픽스로 치면 뷰 행렬과 투영 행렬을 합친 쪽에 가깝습니다.

관련 항목

뷰 행렬이 속하는 상위 분류

그래픽스 · 3차원 그래픽스 · 렌더링 · 좌표 변환 · 변환 행렬 · 아핀 변환

뷰 행렬과 차례로 곱해지는 행렬

모델 행렬 · 투영 행렬 · 모델뷰 행렬 · MVP 행렬

뷰 행렬 앞뒤로 점이 거치는 좌표 공간

모델 좌표계 · 월드 좌표계 · 뷰 공간 · 클립 공간 · 정규화 장치 좌표 · 화면 좌표

뷰 행렬을 정하는 카메라 설정

카메라 · LookAt 행렬 · 업 벡터 · 시야각 · 1인칭 카메라 · 궤도 카메라

카메라 방향을 적는 회전 표현

회전 행렬 · 오일러 각 · 쿼터니언 · 축-각 표현

뷰 행렬을 만드는 수학 도구

행렬 · 행렬 곱 · 동차 좌표 · 벡터 · 단위 벡터 · 내적 · 외적 · 역행렬 · 전치 행렬 · 직교 행렬 · 평행 이동

뷰 행렬을 받아 쓰는 처리 단계

그래픽스 파이프라인 · 정점 셰이더 · 유니폼 · 빌보드 · 스카이박스 · 피킹

뷰 행렬의 숫자 배치를 가르는 관례

행 우선 순서 · 열 우선 순서 · 오른손 좌표계 · 왼손 좌표계

뷰 행렬을 받아 쓰는 그래픽 API

OpenGL · Direct3D · Vulkan · WebGL · Metal

뷰 행렬을 만들어 주는 수학 라이브러리

GLM · gl-matrix · DirectXMath · three.js

컴퓨터 비전에서 뷰 행렬과 같은 일을 맡는 행렬

컴퓨터 비전 · 외부 파라미터 행렬 · 내부 파라미터 행렬 · 카메라 행렬 · 카메라 보정