[컴퓨터그래픽스] 3D 그래픽스에서의 좌표 변환: Local → World → View → Clip → Screen

3D 그래픽스에서 물체가 화면에 보이기까지는 여러 단계의 좌표계 변환을 거칩니다.

내가 만든 물체의 좌표가 카메라 기준으로 바뀌고, 최종적으로 “모니터 픽셀 위치”로 매핑되는 과정입니다.

(이 모든 과정은 행렬 연산으로 이루어집니당)

이번 포스팅에서는 Local → World → View → Clip → Screen 순서로 이 과정을 정리해봤습니다.

 

🌏 3D 그래픽스 좌표 변환 과정

✅ Model Matrix: Local Space → World Space

Local Space는 물체 자체의 기준 좌표계입니다.

예를 들어, 큐브를 원점(0,0,0)에 만들었을 때, 이건 “세상 속의 큐브”가 아니라 “큐브 자신 입장에서의 좌표”예요.

여기서 Model Matrix를 적용하면 이 큐브를 세상(World) 안의 적절한 위치, 방향, 크기로 옮길 수 있습니다.

mat4.translate(modelMatrix, modelMatrix, [x, y, z]);
mat4.rotateZ(modelMatrix, modelMatrix, angle);
mat4.scale(modelMatrix, modelMatrix, [sx, sy, sz]);

보통 이렇게 translate → rotate → scale 순서로 작성하지만,

행렬은 곱셈 순서가 반대(S * R * T) 로 적용된다는 점을 꼭 기억해야 합니다.

행렬 곱셈은 교환법칙이 성립하지 않습니다 (not commutative).

즉, TRS ≠ SRT 입니다.

✅ View Matrix: World Space → View Space

World Space는 장면(Scene) 전체의 공통 좌표계입니다. 여러 개의 오브젝트가 한 공간 안에 놓이는 단계입니당

하지만 우리가 보는 화면은 “세상”이 아니라 “카메라가 바라보는 시점(view)”이기 때문에,

이제 카메라 위치 기준으로 좌표계를 바꿔줘야 합니다. 그게 바로 View Matrix 입니다.

mat4.lookAt(viewMatrix, eye, center, up);

• eye: 카메라 위치 (예: [0, 0, 5])
• center: 카메라가 바라보는 대상 (예: [0, 0, 0])
• up: 카메라의 위쪽 방향 (보통 [0, 1, 0])

lookAt 내부적으로는 많은 계산이 일어납니다.

• 카메라 위치(COP)를 원점으로 이동
• Z축 방향을 반전시켜 화면 쪽으로 바라보게 만듦
• 카메라 기준 프레임을 새로 구성

실제 행렬 곱은 프레임 변경 × Z축 반전 × 카메라 원점 이동 순으로 일어납니다.

✅ Projection Matrix: View Space → Clip Space

이제 카메라 기준으로 본 장면을 “화면 좌표”로 압축하는 단계입니다.

Projection Matrix는 3D 좌표를 2D 평면으로 투영하는 역할을 합니다.

원근 투영 (Perspective Projection)

mat4.perspective(out, fov, aspect, near, far);

• fov: 시야각 (예: Math.PI / 4)
• aspect: 화면 비율 (예: canvas.width / canvas.height)
• near, far: 시야 깊이 범위

멀리 있는 물체는 작게, 가까운 물체는 크게 표현되어 현실감이 살아납니다.

직교 투영 (Orthographic Projection)

mat4.ortho(out, left, right, bottom, top, near, far);

• 비율이 일정해서 원근감이 없습니다.
• CAD나 UI 렌더링, 미니맵 등에 자주 사용됩니다.

✅ Viewport Matrix: Clip Space → Screen Space

투영까지 끝나면 이제 GPU가 그 좌표를 화면에 실제 픽셀로 옮기는 단계입니다. 화면에 어디까지 등장하고 잘려얗라지를 이 단계에서 결정하게 되고, 최종적인 화면에서 렌더링될 픽셀 좌표까지 결정합니다.

이때 나오는 결과가 gl_Position 입니다.

gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);

이 값은 “Clip Space”라고 불리는 중간 좌표계에 존재합니다.

여기서 GPU는 내부적으로 w로 나누어 NDC(Normalized Device Coordinates) 로 변환합니다.

• NDC는 [-1, 1] 범위로 정규화된 좌표계입니다.
• x, y, z가 이 범위를 벗어나면 클리핑(clipping)되어 화면에 안 나옵니다. (1.234325 이런건 렌더링 안됩니당)

[-1, 1] → 화면 왼쪽부터 오른쪽, 아래에서 위까지의 픽셀 공간으로 변환됩니다.

우리가 작성한 3D 모델이 GPU의 렌더 파이프라인을 거쳐 “화면의 픽셀 위치(Screen Space)” 로 매핑

 

🌏 3D 그래픽스 좌표 변환 요약

변환 단계	행렬	설명
Local → World	Model Matrix	물체 기준에서 세계 좌표로
World → View	View Matrix	카메라 기준 좌표로 변환
View → Clip	Projection Matrix	3D를 2D로 투영
Clip → Screen	Viewport Matrix	GPU가 NDC를 픽셀로 변환

gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);

 

 

 

 

도움이 되었다면, 공감/댓글을 달아주면 깃짱에게 큰 힘이 됩니다!🌟
비밀댓글과 메일을 통해 오는 개인적인 질문은 받지 않고 있습니다. 꼭 공개댓글로 남겨주세요!