ASCII 3D 렌더러 만들기
(kciter.so)ASCII 3D 렌더러를 구현하며 3D 렌더링 파이프라인에 대해 설명함
이 글의 결과물은 블로그 글 외에 다음 링크에서도 볼 수 있음
GitHub: https://github.com/kciter/ascii-3d-renderer.js
Chromatic: https://6637eb83d047d2bb1b3cfe67-bdnazvfsel.chromatic.com//…
- ASCII를 3D처럼 보이게하는 것이 가능한가?
- ASCII는 크게 확대한 흑백 픽셀과 유사하다
- 글자의 밀집도에 따라 밝기를 조절할 수 있다
- 3D 좌표를 2D 좌표로 어떻게 만드는가?
- 크게 버텍스 처리, 래스터화, 프래그먼트 처리로 진행함
- 3D 좌표를 버텍스라고 부르며 3D 공간에 위치한 '정점'을 의미함
- 버텍스 하나로는 물체를 표현할 수 없으므로 버텍스를 모아 물체를 표현함
- 물체를 표현하는 최소 단위를 폴리곤이라고 부름
- 버텍스 처리
- 버텍스를 변형하는 과정을 버텍스 처리라고 부름
- 월드 변환, 뷰 변환, 투영 변환 순서로 진행
- 각 변환은 행렬을 이용하여 연산함
- 월드 변환은 3D 모델 파일에 담긴 버텍스를 3D 공간에 배치하는 것
- 뷰 변환은 카메라를 배치하는 것으로 어느 좌표에서 어느 시점으로 물체를 바라보는지 연산하는 것
- 투영 변환은 원근감을 표현하기 위한 연산. 보통 원근 투영을 사용한다.
- 투영 변환을 통해 2D 공간 좌표로 변환하는 것이 가능
- 래스터화
- 2D 공간 좌표를 픽셀 좌표로 변환하는 과정
- 클리핑, 원근 나누기, 후면 제거, 뷰포트 변환, 스캔 변환을 거침
- 이 글에서는 위 작업들을 적절히 섞어서 구현함
- 프래그먼트 처리
- 픽셀로 변환된 좌표를 처리하는 과정
- 일반적인 3D 렌더러에선 쉐이더 연산을 하는 등 후처리를 진행함
- 이 글에서는 광원 계산에 대한 결과만 적용
- 구현 파트는 거의 대부분이 소스 코드기 때문에 요약에선 생략