WebGPU — 브라우저가 로컬 GPU를 직접 쓰는 방법
WebGL의 후속, Vulkan/Metal/DX12 수준의 저수준 GPU API가 브라우저에 들어왔다
WebGPU는 navigator.gpu로 접근하는 브라우저 내장 API다. 별도 설치 없이 JavaScript에서 로컬 GPU를 직접 제어할 수 있다.
WebGL과 뭐가 다른가
WebGL은 2011년에 나왔다. OpenGL ES 2.0을 브라우저에 래핑한 건데, 1990년대 설계 기반이라 GPU의 최신 기능을 쓸 수 없었다. 컴퓨트 셰이더가 없고, 상태 관리가 암묵적이라 드라이버 오버헤드가 크다.
WebGPU는 2023년부터 나온 차세대 API다. Vulkan, Metal, DirectX 12 같은 2015년 이후 설계를 기반으로 한다. GPU에 더 직접적으로 접근하고, 컴퓨트 셰이더를 지원하며, 커맨드를 여러 스레드에서 준비할 수 있다.
브라우저 → OS별 매핑
navigator.gpu.requestAdapter()를 호출하면 브라우저가 내부적으로 OS별 네이티브 API에 매핑한다.
Windows → DirectX 12
macOS → Metal
Linux → Vulkan
개발자는 이 차이를 모른다. 같은 JavaScript/WGSL 코드가 모든 OS에서 돌아간다.
어떤 작업에 쓰이는가
- 영상 편집 — 프레임마다 이펙트를 GPU 셰이더로 합성 (Tooscut 등)
- 3D 게임/렌더링 — Three.js도 WebGPU 백엔드 추가
- AI 추론 — 브라우저에서 모델 실행 (ONNX Runtime Web 등)
- 과학 시뮬레이션 — 대규모 병렬 연산 (유체, 입자 시뮬레이션)
CPU는 코어 8~16개로 순차 처리하지만, GPU는 수천 코어로 동일 연산을 한 번에 돌린다. 모든 픽셀에 같은 함수를 적용하는 작업이 딱 이 패턴이라 GPU 가속 효과가 크다.
WebGL은 죽었나
WebGL은 거의 모든 브라우저에서 돌아간다. WebGPU는 아직 Chrome/Edge 정도. Safari와 Firefox는 미완성이다. 3D 그래픽만 필요하면 WebGL이 호환성 면에서 아직 안전하다. 컴퓨트 셰이더나 최신 GPU 기능이 필요하면 WebGPU가 유일한 선택이다.
동작 흐름
navigator.gpu.requestAdapter() → GPU 어댑터 요청 (브라우저가 OS별 네이티브 API에 매핑)
adapter.requestDevice() → GPU 디바이스(연결) 획득
device.createShaderModule({ code: WGSL }) → WGSL 셰이더 컴파일
device.createRenderPipeline() → 버텍스/프래그먼트 셰이더 + 블렌딩 설정
commandEncoder → renderPass → draw() → GPU가 수천 코어로 병렬 실행
장점
- ✓ 설치 불필요 — navigator.gpu 한 줄로 GPU 접근
- ✓ 컴퓨트 셰이더 지원 — 그래픽뿐 아니라 범용 GPU 계산 가능
- ✓ 크로스 플랫폼 — 같은 WGSL 코드가 Windows/macOS/Linux에서 동작
- ✓ Rust/WASM과 결합 시 네이티브 앱에 근접하는 성능
단점
- ✗ Chrome/Edge만 완전 지원 — Safari 미지원, Firefox 불안정
- ✗ WebGPU 1.0 명세가 최신 GPU 기능을 전부 커버하지 않음
- ✗ WebGL 대비 학습 곡선이 높음 — 파이프라인/바인드그룹 등 저수준 개념 필요
- ✗ 디바이스별 GPU 성능 편차가 큼 — 내장 GPU vs 외장 GPU