WebGPU는 웹페이지가 GPU(Graphics Processing Unit)를 써서 그림을 그리고 범용 계산을 하게 해 주는 브라우저 API다. WebGL의 후속이다. 그래픽 전용이던 WebGL과 달리 컴퓨트 셰이더(compute shader)로 행렬 곱 같은 계산을 직접 맡길 수 있다. 그래서 브라우저 안에서 ML 모델을 돌리는 라이브러리(ONNX Runtime Web, transformers.js)가 WebGPU로 GPU 가속을 한다.
쓰기 전에 확인할 것
- 보안 컨텍스트에서만 열린다. HTTPS나 localhost가 아니면
navigator.gpu자체가 없다. 휴대폰에서 개발 서버를http://192.168…:3000처럼 IP로 열면 최신 브라우저에서도 쓸 수 없다. 이때는 HTTPS 프리뷰 주소로 확인한다 → HTTP와 HTTPS - 속성이 있다고 쓸 수 있는 것은 아니다.
navigator.gpu.requestAdapter()는 알맞은 어댑터가 없으면null을 돌려준다.'gpu' in navigator만 보고 판단하지 말고 어댑터를 실제로 요청해 본다
async function requireWebGPU() {
if (!isSecureContext) throw new Error('WebGPU는 HTTPS 주소(또는 localhost)에서만 쓸 수 있습니다.')
const adapter = await navigator.gpu?.requestAdapter().catch(() => null)
if (!adapter) throw new Error('이 브라우저는 WebGPU를 쓸 수 없습니다.')
}ML 모델을 돌릴 때
- CPU에서 도는 WebAssembly(wasm) 백엔드도 있다. 다만 양자화 모델이 쓰는 전용 연산을 백엔드가 지원하지 않으면 모델을 올리지 못한다. 이 사이트에서는 4비트·8비트 임베딩 모델이 wasm에서 세션을 만들지 못하고 WebGPU에서만 돌았다
- 모델 파일은 수백 MB에서 수 GB에 이르므로 지연 로딩이 기본이다. 사용자가 기능을 켤 때 받고, 파일별 진행률을 합쳐 보여 준다
- 받은 모델은 Cache Storage에 남아 다음 방문에 다시 받지 않는다. 다만 출처(origin)마다 따로 저장되므로 서브도메인이 다른 두 사이트는 같은 모델을 따로 받는다
- 메모리가 작은 휴대폰에서는 큰 모델을 받다가 탭이 닫힐 수 있다. 기기에 따라 기능을 나누는 편이 안전하다
명세: WebGPU (W3C) 출처: WebGPU API MDN · GPU: requestAdapter() MDN · Secure contexts MDN · Transformers.js Hugging Face