3D 좌표를 깊이로 나누는 것에서 시작해 원근 투영 행렬까지, 슬라이더로 설명한 인터랙티브 글

3D 카메라가 어떻게 동작하는지 정리한 글 썼어. 인터랙티브 예제도 넣었으니 슬라이더 가지고 놀아봐.

시각 자료랑 슬라이더 좋더라. 공이 뷰 프러스텀 옆면 경계에서 잘리게 처리하면 더 좋을 것 같아. near/far도 마찬가지고, 수학적으로는 아니어도 3D 앱에서 기대되는 결과니까.

설명 깔끔했어. 제목 보고 tsoding 영상 바로 떠올랐는데 글에서 언급한 것도 반가웠음.

'뷰 프러스텀이 z=1에서 끝이 잘린 90도 피라미드이고 끝은 무한대'라고 시작하면 NDC 매핑을 행렬로 유도하기가 훨씬 직관적이야. 보통 '행렬은 이렇고 숫자 출처는 묻지 마' 식으로 가르치는데 그거보다 낫더라.

나 혼자 배울 땐 near plane 없이 해보는 게 도움이 됐어. 카메라 뒤에 있는 물체가 앞에 나타나는 걸 직접 보게 되거든. divide by depth 같은 기본 몇 개만 알면 3D 그래픽 대부분을 유도할 수 있고, 좌표계 기저에서 변환 행렬 만드는 법도 그중 하나야.

난 창문 비유를 써. 눈에서 창틀까지 피라미드가 계속 뻗어간다고 상상하고, 창밖 물체 모서리에서 눈으로 실을 연결하면 그 실이 창문을 지나는 위치를 찾는 게 3D 그래픽이야.

이 수학으로 2D 사진을 깊이맵과 함께 3D 장면으로 바꾸는 글도 있더라. blog.skz.dev에 정리해놨음.

행렬에서 (x y z 1)의 1이 뭔지 설명이 좀 아쉬웠어. 이동은 원점이 원점으로 안 가는 아핀 변환이라 3x3으로는 표현이 안 돼. 3차원 공간을 w=1인 4차원에 embed하면 이동도 선형 변환이 되고 4x4 행렬곱으로 처리할 수 있어. 저 1 덕분에 이동까지 행렬 곱으로 다 되는 거임.

그 직관 좋네. 더 단순하게 3차원에 embed된 2차원 평면을 생각하면, 3차원에서는 선형 변환이고 2차원에서는 아핀 변환인 건가? 그런 것 같은데.

나도 같은 수학으로 HTML5 Canvas에서 플랫 셰이딩 폴리곤을 그리는 3D 엔진을 만들었어. 커서 키로 샌드 크롤러를 몰고 대괄호로 FOV를 바꿀 수 있음. 소스는 GitHub에 있고, 이상한 부분이 있어서 Claude한테 조사시켰더니 수학 오류 두 개를 찾아주더라. 깊이 정렬이 이상한 건 코드가 아니라 모델 문제인 듯.

올해 초 tsoding 데모도 있는데 7분쯤부터 진짜 좋아. 어떻게 다 맞아떨어지는지 거의 마법 같음.

OP가 이미 글 서두에서 인용한 걸 놓쳤네. 그래도 같이 보기 좋은 자료임.

Carmack, Abrash, Hecker 같은 사람들이 공개적으로 게임 만들던 시절엔 이게 소프트웨어 업계 상식이었는데, 누가 처음부터 다시 발명해야 했다는 게 좀 웃기지.

문제는 좋은 설명을 찾기가 어렵다는 거야. 검색하면 나한테는 안 맞거나 수학을 너무 많이 가정한 설명만 나와. 요즘은 LLM한테 내 수준에 맞춰 물어볼 수 있으니까 사정이 좀 나아졌지만.

그냥 40년 안에 나온 컴퓨터 그래픽 책 아무거나 펴면 돼. 다만 카메라 변환은 직관적이지 않아서 학생이 직접 왜 그런지 유도해보는 게 큰 도움이 됨.