docs(10_Wiki): 위키 전체 재구성 — Topic_* 폴더를 4개 카테고리로 통합 + 대규모 중복 제거
Topic_Agent/Topic_Blog/Topics/Topics_Biz/Topics_Meeting/Topics_Rag의 마크다운 지식 문서를 Topic_General/Topic_Programming/Topic_Graphic/Topic_Business 4개 카테고리로 재분류. - 중복 제거: frontmatter의 status:duplicate/merged + duplicate_of/redirect_to 필드로 자기 자신을 중복으로 선언한 리다이렉트 stub 1032개 제거, 완전 동일 내용 파일 472개 제거, 동일 파일명·다른 내용 충돌 시 더 큰(완전한) 버전만 유지(162개 제거) — 총 1639개 중복 제거. - 분류: 폴더 단위로 명확한 항목(AI_and_ML/Coding/Architecture 등 → Programming, Comfyui/Visual_Effects → Graphic, Topics_Biz/Topics_Meeting/사업 등 → Business, Poetic_Blog_Writing/창의성/Game_Design 등 → General)은 폴더 우선순위로, 나머지 혼재 폴더(Topic_Agent/Topic_Blog/Topics 루트/Thinking & Reasoning/Other/UI_UX_Assets)는 title/tags 키워드 스코어링으로 파일 단위 분류(불명확한 경우 General로 폴백). 원본 폴더명은 "From_*" 서브폴더로 보존해 추적 가능성 유지. - 최종 배치: Programming 2784 / General 1608 / Graphic 285 / Business 249 = 4926개 문서. - 에이전트 운영 상태(.astra/.agent/.obsidian/sessions/memory/_company/docs/lessons/_shared/src)는 지식 콘텐츠가 아니므로 재분류 대상에서 제외하고 원위치 유지. - Topics/Topic_email(상위 보호 폴더 Topic_email과 파일명 100% 중복) 삭제 — 보호 폴더 자체는 미변경. - 완전히 비게 된 Topic_Agent/Topic_Blog/Topics_Biz/Topics_Rag 폴더 제거.
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,169 @@
|
||||
---
|
||||
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 정리 |
|
||||
Reference in New Issue
Block a user