게임 화면에 3D 캐릭터가 그려질 때, 그 뒤에서는 GPU가 초당 수십억 번의 계산을 하고 있어요. 그런데 OpenGL이나 DirectX 같은 그래픽 API를 쓰다 보면 함수 몇 개만 호출해도 화면에 모델이 뿅 하고 나타나니까, 정작 그 안에서 무슨 일이 벌어지는지는 블랙박스처럼 느껴지거든요. 오늘 소개할 tinyrenderer는 바로 그 블랙박스를 직접 열어보는 프로젝트예요. 외부 라이브러리 하나 없이 순수 C++ 500줄로 3D 렌더러를 바닥부터 만들어보는 강의 시리즈인데요, 예전부터 그래픽스 입문자들 사이에서 명작으로 통하던 자료가 최근 내용을 새로 다듬어 다시 공개됐어요.
'소프트웨어 렌더링'이 뭐냐면
이게 뭐냐면, GPU의 도움 없이 CPU만으로 3D 장면을 계산해서 그림 파일로 만들어내는 방식을 말해요. 화면에 창을 띄우는 것도 아니고, 그냥 픽셀 색깔을 하나하나 직접 계산해서 이미지 파일로 저장하는 거예요. "그걸 요즘 세상에 왜 해?"라고 생각할 수 있는데, 목적이 실전용이 아니라 학습용이거든요. GPU가 내부에서 자동으로 해주는 일들을 전부 내 손으로 구현해보면, 그래픽 파이프라인 전체가 머릿속에 선명하게 그려지게 돼요. 비유하자면 자동변속기 차만 몰던 사람이 수동변속기를 배우면서 엔진과 기어의 관계를 몸으로 이해하게 되는 것과 비슷해요.
500줄 안에 들어있는 것들
과정은 차근차근 단계별로 진행돼요. 맨 처음에는 두 점 사이에 선을 긋는 것부터 시작해요. 쉬워 보이지만 픽셀은 격자 위에 놓여 있어서, 기울어진 선을 빠르고 매끄럽게 그리려면 브레젠험 알고리즘 같은 고전적인 기법이 필요하거든요. 그다음은 삼각형을 색으로 채우는 래스터화 단계예요. 3D 모델은 결국 수많은 작은 삼각형의 집합이라서, 삼각형만 제대로 그릴 수 있으면 뭐든 그릴 수 있어요. 여기서 무게중심 좌표(barycentric coordinates)라는 개념이 나오는데, 이게 뭐냐면 삼각형 내부의 임의의 점을 세 꼭짓점의 '혼합 비율'로 표현하는 방법이에요. 이 비율만 알면 색상이나 텍스처 좌표를 삼각형 안에서 부드럽게 섞어줄 수 있게 돼요.
그다음엔 z-버퍼가 등장해요. 물체가 여러 개 겹쳐 있을 때 어떤 게 앞에 보여야 하는지 판정해야 하잖아요. 픽셀마다 '지금까지 그린 것 중 가장 가까운 깊이'를 기록해두고, 그보다 더 가까운 것이 올 때만 덮어쓰는 방식이에요. 여기에 원근 투영(멀리 있는 건 작게 보이게 만드는 수학), 카메라 변환, 텍스처 매핑, 조명 계산까지 차례로 얹으면 어느새 OpenGL 파이프라인의 미니 복제품이 완성돼요. 마지막에는 버텍스 셰이더와 프래그먼트 셰이더 구조까지 흉내 내는데, 이 과정을 거치고 나면 실제 GPU 셰이더 코드가 왜 그런 모양으로 생겼는지 자연스럽게 이해되거든요.
비슷한 학습 자료와 비교하면
그래픽스를 밑바닥부터 배우는 자료로는 'Ray Tracing in One Weekend'가 유명한데요, 그쪽은 레이 트레이싱, 그러니까 빛의 경로를 하나하나 추적하는 방식이에요. 영화 CG나 최신 게임의 사실적인 반사 표현에 쓰이는 기법이죠. 반면 tinyrenderer는 래스터화 방식이라, 실시간 게임 그래픽의 근간이 되는 파이프라인을 배워요. 둘은 상호보완적이라서 둘 다 해보면 그래픽스의 큰 그림이 잡혀요. Scratchapixel처럼 이론을 깊게 파는 사이트도 있지만, tinyrenderer는 '일단 코드부터 짜면서 배운다'는 실습 중심이라 진입 장벽이 낮은 편이에요.
한국 개발자에게 주는 시사점
요즘 WebGPU가 브라우저 표준으로 자리 잡고 있고, 게임뿐 아니라 데이터 시각화나 AI 모델 시각화에서도 그래픽 지식의 수요가 늘고 있는데요. 이런 분야에 관심이 있다면 이 코스만큼 가성비 좋은 출발점이 드물어요. 필요한 건 C++ 기초 문법뿐이고, 창 띄우기나 GUI 설정 없이 이미지 파일만 출력하니까 환경 설정 스트레스도 없어요. 주말 이틀 정도 잡고 따라 하면 완주할 수 있는 분량이고, 매 단계 결과물이 눈에 보이니까 성취감도 확실하거든요. 그래픽스 직군 면접에서 "z-버퍼가 왜 필요한가요?" 같은 질문에 외운 답이 아니라 직접 구현해본 경험으로 답할 수 있게 되는 것도 큰 자산이에요.
정리하면, tinyrenderer는 GPU가 매 프레임 부려주는 마법을 C++ 500줄로 직접 재현해보면서 그래픽 파이프라인을 몸으로 익히는 실습 코스예요. 여러분은 추상화 계층 아래에 뭐가 있는지 궁금해서 바닥까지 파본 경험이 있으신가요? 그 경험이 실무에 어떤 도움이 됐는지 댓글로 나눠주세요.
🔗 출처: Hacker News