WebGPU는 2023년 주요 브라우저에서 안정화된 차세대 웹 그래픽/컴퓨팅 API다. WebGL을 대체하며 Vulkan, Metal, Direct3D 12 등 현대 GPU API를 웹에서 활용할 수 있게 한다. ML 추론, 고성능 시뮬레이션에도 활용된다.
WebGL과 WebGPU 비교
| 항목 | WebGL 2 | WebGPU |
|---|
| 기반 | OpenGL ES 3.0 | Vulkan/Metal/DX12 |
| 컴퓨트 셰이더 | 없음 | 지원 |
| 멀티스레딩 | 제한적 | 지원 |
| 오버헤드 | 높음 | 낮음 |
| 명령 버퍼 | 없음 | 지원 |
기본 사용법
javascript
// WebGPU 초기화
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const canvas = document.getElementById('canvas');
const context = canvas.getContext('webgpu');
const format = navigator.gpu.getPreferredCanvasFormat();
context.configure({ device, format });
// 컴퓨트 셰이더 (WGSL)
const shaderCode = `
@group(0) @binding(0) var<storage, read_write> data: array<f32>;
@compute @workgroup_size(64)
fn main(@builtin(global_invocation_id) id: vec3u) {
let i = id.x;
data[i] = data[i] * 2.0;
}
`;
const shaderModule = device.createShaderModule({ code: shaderCode });
// 버퍼 생성 및 파이프라인 실행
const buffer = device.createBuffer({
size: 1024 * 4,
usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
});
ML 추론 활용
WebGPU는 브라우저에서 직접 LLM/이미지 모델 추론에 활용된다:
- •WebLLM: LLaMA 등 모델을 브라우저에서 실행
- •ONNX Runtime Web: WebGPU 백엔드 지원
- •TensorFlow.js: WebGPU 백엔드
관련 개념
