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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

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

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

@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

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)

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)

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

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 정리