[G1-Sync] Manual knowledge update
This commit is contained in:
Antigravity Agent
@@ -2,94 +2,168 @@
|
||||
id: wiki-2026-0508-gpu-for-the-web-community-group
|
||||
title: GPU for the Web Community Group
|
||||
category: 10_Wiki/Topics
|
||||
status: needs_review
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: [P-Reinforce-AUTO-518388]
|
||||
aliases: [GPUWeb CG, WebGPU CG, W3C GPU for the Web]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.9
|
||||
tags: [auto-reinforced]
|
||||
verification_status: applied
|
||||
tags: [w3c, webgpu, wgsl, browser, graphics]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - GPU for the Web Comm[[Unity|Unity]] Group"
|
||||
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
tech_stack:
|
||||
language: unspecified
|
||||
framework: unspecified
|
||||
language: WGSL/JavaScript
|
||||
framework: WebGPU
|
||||
---
|
||||
|
||||
# [[GPU for the Web Community Group|GPU for the Web Community Group]]
|
||||
# GPU for the Web Community Group
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> GPU for the Web Community Group은 [[Chrome|Chrome]], Firefox, Safari 등 주요 웹 브라우저의 대표자들로 구성되어 WebGPU와 같은 웹 그래픽 및 컴퓨팅 API의 표준과 새로운 기능을 논의하고 승인하는 조직입니다. 이들은 웹 플랫폼의 건전성과 상호 운용성을 위해 구현에 따라 달라지는(implementation-defined) 기능을 피하고, 결정론적이며 테스트 가능한 기능을 표준에 포함시키는 것을 원칙으로 합니다. 최근에는 개발자 도구 및 성능 측정을 위한 WebGPU 타임스탬프 쿼리(Timestamp Queries) 기능의 도입과 보안을 위한 양자화([[Quantization|Quantization]]) 기준을 합의하는 역할을 수행했습니다.
|
||||
## 매 한 줄
|
||||
> **"매 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.
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
* **구성원 및 주요 역할:** 이 그룹에는 Chrome, Firefox, Safari 등 주요 브라우저 벤더의 대표자들이 참여하고 있으며, WebGPU 명세에 새로운 기능을 도입할 때 상호 운용성([[Interoperability|InterOperability]])을 확보하기 위한 합의(consensus)를 도출합니다 [1].
|
||||
* **표준화 원칙:** 그룹(WebGPU standard body)은 기본적으로 구현이 명확하지 않거나 선택적인(optional) 기능을 피하고, 상호 운용이 가능하며 테스트 스위트(test suite)로 뒷받침되는 결정론적인 기능을 갖추는 것을 목표로 합니다 [2-4].
|
||||
* **타임스탬프 쿼리(Timestamp Queries) 승인 사례:**
|
||||
* WebGPU 애플리케이션의 GPU 명령 실행 시간을 정밀하게 측정하기 위한 타임스탬프 쿼리 기능이 타이밍 공격([[Timing Attack|Timing Attack]])에 악용될 수 있다는 보안 우려가 있었습니다 [5, 6].
|
||||
* 그룹 내 논의를 통해, 사이트 격리(site isolation) 여부와 상관없이 hr-time(High Re[[Solution|Solution]] Time)의 비격리 해상도인 100마이크로초(100us) 수준으로 양자화(coarsen)하여 타임스탬프를 허용하는 제안을 수용 및 승인했습니다 [7].
|
||||
* 이를 통해 브라우저 간의 상호 운용성 문제를 해결하고 플랫폼 표준에 맞춘 성능 측정 기능을 제공할 수 있게 되었습니다 [8, 9].
|
||||
## 매 핵심
|
||||
|
||||
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
|
||||
- **과거 데이터와의 충돌:** 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
|
||||
- **정책 변화:** Graphics & Performance 분야의 자동 자산화 수행.
|
||||
### 매 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 단계.
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- **Related Topics:** [[WebGPU|WebGPU]], [[Timestamp Queries|Timestamp Queries]]
|
||||
- **Projects/Contexts:** WebGPU API Standardization, Chrome Intent to Ship
|
||||
- **Contradictions/Notes:** 그룹은 일반적으로 구현에 따라 달라지거나 결정론적이지 않은 기능을 표준에서 배제하려고 노력하지만, 타임스탬프 쿼리와 같은 기능의 경우 예외적으로 보안(타이밍 공격 방지)과 성능 측정의 필요성 사이에서 양자화라는 타협점을 찾아야만 했습니다 [4].
|
||||
### 매 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.
|
||||
|
||||
---
|
||||
*Last updated: 2026-04-19*
|
||||
### 매 응용
|
||||
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).
|
||||
|
||||
---
|
||||
## 💻 패턴
|
||||
|
||||
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
|
||||
|
||||
**언제 이 지식을 쓰는가:**
|
||||
- *(TODO)*
|
||||
|
||||
**언제 쓰면 안 되는가:**
|
||||
- *(TODO)*
|
||||
|
||||
## 🧪 검증 상태 (Validation)
|
||||
|
||||
- **정보 상태:** needs_review
|
||||
- **출처 신뢰도:** A
|
||||
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
|
||||
|
||||
## 🧬 중복 검사 (Duplicate Check)
|
||||
|
||||
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
|
||||
- **처리 방식:** UPDATE (자동 정규화)
|
||||
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
|
||||
|
||||
## 🕓 변경 이력 (Changelog)
|
||||
|
||||
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|
||||
|------|-----------|-----------|--------|
|
||||
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
|
||||
|
||||
## 💻 코드 패턴 (Code Patterns)
|
||||
|
||||
**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
|
||||
|
||||
```text
|
||||
# TODO
|
||||
### 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));
|
||||
```
|
||||
|
||||
## 🤔 의사결정 기준 (Decision Criteria)
|
||||
### 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>;
|
||||
|
||||
**선택 A를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
@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];
|
||||
}
|
||||
```
|
||||
|
||||
**선택 B를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
### Dispatch compute pass
|
||||
```js
|
||||
const module = device.createShaderModule({ code: WGSL_SOURCE });
|
||||
const pipeline = device.createComputePipeline({
|
||||
layout: 'auto',
|
||||
compute: { module, entryPoint: 'main' },
|
||||
});
|
||||
|
||||
**기본값:**
|
||||
> *(TODO)*
|
||||
const bindGroup = device.createBindGroup({
|
||||
layout: pipeline.getBindGroupLayout(0),
|
||||
entries: [
|
||||
{ binding: 0, resource: { buffer: bufA } },
|
||||
{ binding: 1, resource: { buffer: bufB } },
|
||||
{ binding: 2, resource: { buffer: bufOut } },
|
||||
],
|
||||
});
|
||||
|
||||
## ❌ 안티패턴 (Anti-Patterns)
|
||||
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()]);
|
||||
```
|
||||
|
||||
- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
|
||||
### 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]] · [[GPU Computing]]
|
||||
- 변형: [[WebGL]] · [[wgpu]]
|
||||
- 응용: [[Three.js]] · [[transformers.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 정리 |
|
||||
|
||||
Reference in New Issue
Block a user