WebGPU API 활용법과 프로파일링 자료를 모았다

WebGPU API의 여러 기능을 효과적으로 다루는 방법과 디버깅·프로파일링 자료를 모았다. WebGPU 입문 튜토리얼이 아니라, 기본을 알고 있거나 WebGL·네이티브 API에 익숙한 개발자를 위한 참고 자료다.

WebGPU를 처음 배우려면 다음 자료를 먼저 살펴보는 편이 좋다.

• 첫 WebGPU 앱은 Google I/O에서 WebGPU 기초를 소개하기 위해 만든 코드랩이다.
• WebGPU Fundamentals는 실시간 예제와 시각화를 곁들여 WebGPU 개념을 자세히 설명한다.
• Raw WebGPU는 튜토리얼이다.
• WebGPU: All the cores, none of the canvas는 컴퓨트 셰이더를 중심으로 다룬다.
• WebGPU Samples는 예제를 통해 배우는 데 유용하다.
• MDN 문서는 API 문서를 제공한다.
• WebGPU 사양은 상세한 참고 자료다.
• WGSL 사양은 WebGPU 사양과 함께 셰이딩 언어를 설명한다.

WebGPU 모범 사례

• 이미지·캔버스·비디오 텍스처 활용은 이미지, 캔버스, 비디오 요소에서 텍스처를 불러오는 방법을 다룬다.
• 버퍼 데이터 업로드는 여러 유형의 WebGPU 버퍼에 데이터를 전달하는 방법을 설명한다.
• 바인드 그룹은 바인드 그룹의 구조와 활용 방법을 다룬다.
• 동적 셰이더 구성은 WGSL에 전처리기 구문이 없는 상황에서 셰이더 변형을 만드는 패턴을 설명한다.
• 오류 처리는 WebGPU 앱의 오류 처리와 디버깅 개선에 쓰이는 여러 방법을 다룬다.
• 컴퓨트 셰이더에서 정점 데이터 사용은 정렬 제약을 고려해 컴퓨트 셰이더에서 정점 데이터나 비슷한 구조의 값을 다루는 패턴을 설명한다.
• 렌더 번들은 CPU 오버헤드를 줄이는 렌더 번들 사용법과 다양한 렌더링 요구에 대응하는 방법을 다룬다.
• WebGPU와 WebGL 성능 비교는 같은 콘텐츠의 WebGPU·WebGL 버전을 비교할 때 고려할 점을 설명한다.
• 간접 그리기는 간접 그리기의 모범 사례와 그 중요성을 다룬다.
• 디바이스 손실 처리는 디바이스 손실을 처리하는 방법을 설명한다.

프로파일링

• PIX는 Windows에서 Microsoft PIX로 Chrome의 WebGPU 페이지를 디버깅하고 프로파일링하는 방법을 다룬다.
• Xcode는 MacOS에서 Xcode로 Chrome의 WebGPU 페이지를 디버깅하고 프로파일링하는 방법을 설명한다.
• RenderDoc은 Chrome의 WebGPU 페이지를 디버깅하고 프로파일링하는 방법을 안내한다. 현재 지원 환경은 Windows의 D3D12뿐이다.

관련 장문 자료

WebGPU에서 glTF 모델을 효율적으로 렌더링하기: WebGPU 사례 연구는 glTF 파일을 WebGPU에서 표시하는 방법을 다룬 장문 자료다. 모범 사례 문서는 아니지만, WebGPU 팁과 패턴, 실행 가능한 예제를 포함한다.