# ASCII 3D 렌더러 만들기 > Clean Markdown view of GeekNews topic #14690. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=14690](https://news.hada.io/topic?id=14690) - GeekNews Markdown: [https://news.hada.io/topic/14690.md](https://news.hada.io/topic/14690.md) - Type: news - Author: [kciter1](https://news.hada.io/@kciter1) - Published: 2024-05-07T15:26:58+09:00 - Updated: 2024-05-07T15:26:58+09:00 - Original source: [kciter.so](https://kciter.so/posts/ascii-3d-renderer/) - Points: 28 - Comments: 3 ## Topic Body ASCII 3D 렌더러를 구현하며 3D 렌더링 파이프라인에 대해 설명함 이 글의 결과물은 블로그 글 외에 다음 링크에서도 볼 수 있음 GitHub: https://github.com/kciter/ascii-3d-renderer.js Chromatic: https://6637eb83d047d2bb1b3cfe67-bdnazvfsel.chromatic.com/?path=/story/example-ascii3drenderer--default * ASCII를 3D처럼 보이게하는 것이 가능한가? * ASCII는 크게 확대한 흑백 픽셀과 유사하다 * 글자의 밀집도에 따라 밝기를 조절할 수 있다 * 3D 좌표를 2D 좌표로 어떻게 만드는가? * 크게 버텍스 처리, 래스터화, 프래그먼트 처리로 진행함 * 3D 좌표를 버텍스라고 부르며 3D 공간에 위치한 '정점'을 의미함 * 버텍스 하나로는 물체를 표현할 수 없으므로 버텍스를 모아 물체를 표현함 * 물체를 표현하는 최소 단위를 폴리곤이라고 부름 * 버텍스 처리 * 버텍스를 변형하는 과정을 버텍스 처리라고 부름 * 월드 변환, 뷰 변환, 투영 변환 순서로 진행 * 각 변환은 행렬을 이용하여 연산함 * 월드 변환은 3D 모델 파일에 담긴 버텍스를 3D 공간에 배치하는 것 * 뷰 변환은 카메라를 배치하는 것으로 어느 좌표에서 어느 시점으로 물체를 바라보는지 연산하는 것 * 투영 변환은 원근감을 표현하기 위한 연산. 보통 원근 투영을 사용한다. * 투영 변환을 통해 2D 공간 좌표로 변환하는 것이 가능 * 래스터화 * 2D 공간 좌표를 픽셀 좌표로 변환하는 과정 * 클리핑, 원근 나누기, 후면 제거, 뷰포트 변환, 스캔 변환을 거침 * 이 글에서는 위 작업들을 적절히 섞어서 구현함 * 프래그먼트 처리 * 픽셀로 변환된 좌표를 처리하는 과정 * 일반적인 3D 렌더러에선 쉐이더 연산을 하는 등 후처리를 진행함 * 이 글에서는 광원 계산에 대한 결과만 적용 * 구현 파트는 거의 대부분이 소스 코드기 때문에 요약에선 생략 ## Comments ### Comment 25092 - Author: cosine20 - Created: 2024-05-09T11:52:59+09:00 - Points: 1 재미있게 읽었습니다. 학부 때 들었던 컴퓨터그래픽스 수업도 새록새록 기억나고 좋았어요. ### Comment 25044 - Author: toaonly - Created: 2024-05-08T13:00:06+09:00 - Points: 1 재미있게 읽었습니다. 카메라 위치까지 생각해서 작업한 것이 인상적이었습니다 ### Comment 25020 - Author: thesol9 - Created: 2024-05-07T18:06:33+09:00 - Points: 1 기본적인 렌더링 파이프라인 설명까지 아주 재밌는 내용이었습니다.