회사 프로젝트를 하는 와중에 Three.js(R3F)로 유저가 해당 3D 모델을 이벤트 핸들러를 통해 핸들링 할 수 있게 하는 기능이 필요했다.
해당 기능을 만들기 위해 Raycaster, NDC 등의 개념 학습이 필요했다. 그 중 여기에선 NDC의 개념부터 알아보자
실제 세계에서 사물을 보는 것처럼 웹이나 게임에서 원근감 있는 물체를 보여주기 위해서는 투영행렬이 필요하다.
원근감을 표현하는 카메라는 카메라로부터 시작하는 사각뿔의 앞부분이 잘린 시야영역을 사용한다. 그럼 상하 좌우 전후로 이루어진 절두체(FRUSTUM)이 나오게 된다.
출처 : https://relativity.net.au/gaming/java/Frustum.html
절두체 그림(x축 방향)
그중 근 평면이 우리의 모니터 화면이고 카메라로 부터 근 평면까지의 거리를 초점거리라고 한다(Focal Length).