2nd/10_Wiki/Topics/Backend/GPU for the Web Community Group.md

---
id: wiki-2026-0508-gpu-for-the-web-community-group
title: GPU for the Web Community Group
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [GPUWeb CG, WebGPU CG, W3C GPU for the Web]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [w3c, webgpu, wgsl, browser, graphics]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: WGSL/JavaScript
  framework: WebGPU
---

# GPU for the Web Community Group

## 매 한 줄
> **"매 W3C 의 WebGPU + WGSL 표준 의 incubator"**. 2017 부터 매 Apple/Google/Mozilla/Microsoft 의 collaboration 으로 매 modern GPU API (Metal/Vulkan/D3D12) 를 web 에 expose. 2023 Chrome 113 ship, 2024 Safari 18 / Firefox 141 follow — 2026 현재 매 cross-browser baseline 의 confirmed.

## 매 핵심

### 매 group mission
- **API design**: 매 WebGL 의 successor — 매 explicit, low-overhead, compute-capable.
- **WGSL** (WebGPU Shading Language): 매 SPIR-V/HLSL/MSL 의 portable layer.
- **Security**: 매 sandbox 안의 GPU access — robust buffer access, timeline fence.
- **Specification**: 매 W3C Recommendation track — 2026 매 CR 단계.

### 매 architecture pillars
- **Adapter → Device → Queue**: 매 explicit lifecycle.
- **Bind group**: 매 Vulkan descriptor set 의 web flavor.
- **Render pipeline / Compute pipeline**: 매 separate, immutable.
- **Command encoder**: 매 deferred recording, queue submission.

### 매 응용
1. ML inference in browser (transformers.js + WebGPU).
2. 3D scene rendering (Three.js WebGPURenderer, Babylon.js).
3. Real-time video filter (compute shader).
4. Scientific viz (volume rendering).

## 💻 패턴

### Init device + adapter
```js
const adapter = await navigator.gpu?.requestAdapter({
  powerPreference: 'high-performance',
});
if (!adapter) throw new Error('WebGPU unavailable');
const device = await adapter.requestDevice({
  requiredFeatures: ['shader-f16'],
  requiredLimits: { maxBufferSize: 1 << 30 },
});
device.lost.then(info => console.error('Device lost:', info));
```

### Compute shader (WGSL) — vector add
```wgsl
@group(0) @binding(0) var<storage, read> a : array<f32>;
@group(0) @binding(1) var<storage, read> b : array<f32>;
@group(0) @binding(2) var<storage, read_write> out : array<f32>;

@compute @workgroup_size(64)
fn main(@builtin(global_invocation_id) gid : vec3<u32>) {
    let i = gid.x;
    if (i >= arrayLength(&out)) { return; }
    out[i] = a[i] + b[i];
}
```

### Dispatch compute pass
```js
const module = device.createShaderModule({ code: WGSL_SOURCE });
const pipeline = device.createComputePipeline({
  layout: 'auto',
  compute: { module, entryPoint: 'main' },
});

const bindGroup = device.createBindGroup({
  layout: pipeline.getBindGroupLayout(0),
  entries: [
    { binding: 0, resource: { buffer: bufA } },
    { binding: 1, resource: { buffer: bufB } },
    { binding: 2, resource: { buffer: bufOut } },
  ],
});

const encoder = device.createCommandEncoder();
const pass = encoder.beginComputePass();
pass.setPipeline(pipeline);
pass.setBindGroup(0, bindGroup);
pass.dispatchWorkgroups(Math.ceil(N / 64));
pass.end();
device.queue.submit([encoder.finish()]);
```

### Render pipeline (triangle)
```js
const pipeline = device.createRenderPipeline({
  layout: 'auto',
  vertex:   { module, entryPoint: 'vs_main', buffers: [vbLayout] },
  fragment: { module, entryPoint: 'fs_main', targets: [{ format }] },
  primitive: { topology: 'triangle-list' },
});
```

### Buffer mapping (CPU → GPU)
```js
const buf = device.createBuffer({
  size: data.byteLength,
  usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
  mappedAtCreation: true,
});
new Float32Array(buf.getMappedRange()).set(data);
buf.unmap();
```

### Async readback
```js
const stagingBuf = device.createBuffer({
  size, usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST,
});
encoder.copyBufferToBuffer(gpuBuf, 0, stagingBuf, 0, size);
device.queue.submit([encoder.finish()]);
await stagingBuf.mapAsync(GPUMapMode.READ);
const out = new Float32Array(stagingBuf.getMappedRange().slice(0));
stagingBuf.unmap();
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| In-browser ML inference | WebGPU + WGSL compute (transformers.js) |
| 3D scene | Three.js WebGPURenderer (auto fallback) |
| Legacy device | WebGL2 fallback 의 detect |
| Native parity needed | wgpu (Rust) — 매 same WGSL |
| Mobile (iOS Safari) | feature-detect + lower limits |

**기본값**: WebGPU first, WebGL2 fallback, navigator.gpu feature-detect.

## 🔗 Graph
- 부모: [[W3C]]
- 변형: [[WebGL]]
- 응용: [[Three.js]]
- Adjacent: [[WGSL]] · [[Vulkan]] · [[Metal]]

## 🤖 LLM 활용
**언제**: API surface lookup, WGSL syntax, pipeline boilerplate, fallback strategy.
**언제 X**: 매 cutting-edge proposal — spec churn 매 fast, source 의 cross-check.

## ❌ 안티패턴
- **WebGPU 의 assume present**: 매 feature-detect 필수 — 2026 mobile 매 still partial.
- **Sync mapping on render thread**: 매 jank — `mapAsync` 의 use.
- **One bind group per draw**: 매 overhead — group by frequency-of-change.
- **WebGL idiom**: GL state machine 의 mental model 의 X — WebGPU 매 explicit, immutable.

## 🧪 검증 / 중복
- Verified (W3C GPU for the Web CG charter; WebGPU CR 2024-12; gpuweb/gpuweb GitHub).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — WebGPU/WGSL pipeline + dispatch 정리 |