TL;DR

  • 이 책은 JavaScript로 픽셀 그리기부터 3D 렌더러·레이 트레이서·패스 트레이서까지 직접 구현하고, 이후 GPU와 실시간 렌더링 기법으로 나아가는 컴퓨터 그래픽스 안내서임.
  • 게임, 영화 효과, 지도, 텍스트 등 컴퓨터 화면의 모든 이미지는 색이 지정된 점들의 격자로 표현됨.
  • 선과 도형, 색 혼합, 3D 렌더링을 거쳐 물리 법칙에 따라 빛을 추적하는 레이 트레이서와 패스 트레이서를 다룸.
  • 완성한 작업을 GPU로 옮긴 뒤 실시간 패스 트레이싱, 애니메이션, 시뮬레이션과 최신 실시간 렌더링 기법을 살펴봄.
  • 기본적인 JavaScript 지식만 필요하며, 별도 라이브러리나 프레임워크 없이 바닐라 JavaScript와 WebGPU로 독립 실행형 예제를 구성함.

컴퓨터 그래픽스의 원리와 범위

  • 게임, 영화 효과, 지도, 화면에 표시되는 텍스트를 포함한 모든 컴퓨터 이미지는 결국 색이 지정된 점들의 격자로 표현되며, 이 책은 각 점에 색을 지정하는 방법을 설명함.
  • 가장 간단한 점 하나 그리기부터 시작해 선 그리기, 도형 채우기, 색 혼합을 거쳐 3D로 나아감.
  • 평범한 JavaScript만 사용해 완전한 렌더러를 처음부터 만들고, 이어서 레이 트레이서와 물리 법칙에 따른 빛의 움직임을 따르는 패스 트레이서를 구현함.
  • 각 단계를 익힌 다음에는 작성한 작업을 같은 연산을 수백만 배 빠르게 수행하도록 설계된 특수 칩인 그래픽 처리 장치(GPU)로 옮김.
  • 이후에는 패스 트레이서의 사실성을 실시간으로 구현하는 방법, 애니메이션과 시뮬레이션을 다룸.
  • 마지막 부분에서는 시간적 안티앨리어싱, 클러스터 조명, 볼륨, 컴퓨트 셰이더의 광선 추적, 사진으로부터 학습한 장면 등 오늘날 실시간 렌더러의 기반 기법을 다룸.

필요한 지식과 도구

  • 필요한 것은 변수, 함수, 반복문, 배열을 포함한 JavaScript 기초임. 간단한 웹 페이지 스크립트를 작성할 수 있으면 시작할 수 있음.
  • 수학 배경지식은 필요하지 않음. 각 개념은 먼저 쉬운 말과 그림으로 설명하며, 수식은 코드로만 등장함.
  • 필요한 도구는 브라우저와 편집기임.
  • 제4부에서는 WebGPU를 사용하며, 현재 Chrome, Edge, Safari, Firefox가 이를 지원함.

이 책을 읽는 방법

  • 각 장은 다음 네 가지 자료를 섞어 구성함.
  • 인터랙티브 그림: 점을 끌거나 슬라이더를 움직이며 그래픽스 개념을 시각적으로 살펴봄.
  • 실행 가능한 코드: 편집 가능한 코드 패널에서 실행 버튼을 눌러 페이지 안에서 코드를 실행하고, 값을 바꾸거나 코드를 수정해 결과를 확인함. 코드는 자체 프로젝트에서 작성할 코드와 동일한 형태임.
  • 쉬운 말 설명 패널: 수식 대신 개념의 의미와 이유를 설명한 다음 JavaScript 한 줄로 표현함.
  • 전체 소스 코드: 인터랙티브 그림마다 소스 버튼이 있으며, 저장하고 열어 수정할 수 있는 독립형 HTML 페이지를 보여줌.
  • 각 장의 끝에는 막힐 때 펼쳐 볼 수 있는 힌트가 포함된 연습 문제가 있음.
  • 특히 제1부와 제2부는 각 장이 앞 장의 내용을 바탕으로 구성되므로, 처음 읽을 때는 순서대로 읽는 방식이 적합함.
  • 외부 라이브러리나 프레임워크에 의존하지 않으며, 모든 내용은 바닐라 JavaScript와 WebGPU를 사용한 독립 실행형 예제로 처음부터 구현함.