Files

T

Antigravity Agent 9a135bd19d docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동

최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치.
콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서
전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한
업데이트0615/무제 3.canvas 뿐).

2026-07-05 00:44:01 +09:00

5.4 KiB

Raw Blame History

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

title

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.

매 응용

ML inference in browser (transformers.js + WebGPU).
3D scene rendering (Three.js WebGPURenderer, Babylon.js).
Real-time video filter (compute shader).
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 정리

5.4 KiB Raw Blame History