WebGPU Unleashed: 실전 튜토리얼
"WebGPU Unleashed"에 오신 것을 환영합니다. 이곳은 역동적인 그래픽스 프로그래밍의 세계로 들어가는 관문입니다. 이 무료 도서는 저자의 학습 여정을 바탕으로, JavaScript로 WebGPU를 이용한 그래픽스 프로그래밍을 차근차근 알려드립니다.
왜 이 책을 쓰게 되었을까요? 최근 한 친구가 자녀가 그래픽스 프로그래밍을 시작하려면 무엇을 배워야 할지 물었습니다. 몇 년 전만 해도 OpenGL이 입문자에게 추천되던 API였고, 게임 개발에 관심 있다면 DirectX가 대안이었습니다.
하지만 최근 몇 년 사이 그래픽스 API 환경은 크게 변화했습니다. Vulkan, Metal, DirectX 12 같은 새로운 세대의 API가 등장했죠. 이런 API들은 더 가볍고 성능도 뛰어나지만, 코드가 훨씬 장황해졌습니다. 개념은 비슷해도 OpenGL 때보다 더 파편화되었고, 어떤 것은 특정 플랫폼에서만 사용할 수 있습니다. 이런 파편화는 입문자에게 혼란을 주고, 어디서부터 시작해야 할지 막막하게 만듭니다.
바로 여기서 WebGPU가 등장합니다. WebGPU는 기존 API와 개념적으로 유사하지만, 목표가 다릅니다. WebGPU는 웹에 네이티브 그래픽스 기능을 제공하는 데 중점을 둡니다. 다른 API들은 그래픽 드라이버에 직접 구현되어 있지만, WebGPU는 사실상 그 위의 래퍼(wrapper) 역할을 하죠. 이 점에서 WebGPU는 첫 번째 그래픽스 API로써 여러 이점이 있습니다:
-
래퍼로서 WebGPU는 다른 API의 공통분모를 지향하므로 상대적으로 더 단순합니다.
-
웹 표준 그래픽스 API로써 WebGPU는 모든 플랫폼에서 사용할 수 있습니다.
-
네이티브 개발에 관심이 있는 경우, C++와 Rust로 된 WebGPU 구현도 있습니다.
최근 WebGPU가 공식적으로 공개되면서, 지금이 바로 배우기에 최적의 시기입니다.
이 책은 GPU 드라이버와 GPU 파이프라인에 대한 개요로 시작합니다. 이런 주제는 다른 그래픽스 API 책에서는 잘 다루지 않지만, 간단한 그래픽스 프로그램을 구현할 수 있는 학생들도 실제로 드라이버와 하드웨어가 어떻게 소프트웨어와 상호작용하는지 이해하지 못하는 경우가 많습니다. 저는 이 부분을 꼭 짚고 넘어가는 게 중요하다고 생각했습니다.
개요 이후에는 WebGPU의 가장 단순한 활용, 즉 삼각형 그리기부터 시작합니다. 3D 그래픽스의 기본 요소인 삼각형 그리기이지만, 이것만으로도 중요한 개념을 제대로 이해할 수 있습니다. 그다음엔 2D 렌더링 기법, 3D 장면 제어 등, 웹용 그래픽스 앱 구현에 필수적인 스킬들을 다룹니다.
고급 챕터에서는 WebGPU를 활용한 GPU 컴퓨팅과, 단순 삼각형을 넘어선 고급 렌더링 기법도 배웁니다. WebGL로는 불가능했던 GPU 연산(컴퓨트)이 WebGPU에서는 가능합니다. 덕분에 웹 애플리케이션에서 GPU를 이용한 AI 추론 등도 가능해집니다.
마지막 튜토리얼로, GPU 컴퓨트와 렌더링을 결합한 고급 예제인 가우시안 스플래팅 렌더러를 구현해봅니다. 이 책을 쓰는 시점에 가우시안 스플래팅은 최신 장면 표현 및 렌더링 기술로, 실제 3D 장면을 매우 사실적으로 그리고 실시간으로 재현할 수 있는 강력한 기법입니다.
이 책의 콘텐츠를 준비하면서 정말 많은 노력을 기울였습니다. 처음엔 전통적인 종이책으로 기획했지만, 기술서에 더 적합한 상호작용형 웹 포맷이 더 효과적임을 깨달았습니다. 이 방식의 장점은 다음과 같습니다:
비디오로 개념을 더 쉽게 설명할 수 있습니다.
참고 자료를 링크로 쉽게 인용할 수 있습니다.
온라인 플레이그라운드에서 모든 코드 샘플을 실행하고 수정할 수 있습니다.
본문에 포함된 모든 코드 조각은 플레이그라운드 샘플과 교차 참조됩니다. 독자를 혼란스럽게 하지 않기 위해 글에는 꼭 필요한 부분만 발췌하여 실었습니다. 본문과 플레이그라운드 간의 이동은 매우 쉽습니다.
또 한 가지 온라인 포맷의 장점은 독자의 피드백을 즉시 받을 수 있다는 점입니다. 제안이나 개선 의견이 있으시다면 GitHub Discussions와 Issues를 통해 언제든 남겨주세요.
이제 WebGPU 여정에 함께 올라타봅시다!