docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동
최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치. 콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서 전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한 업데이트0615/무제 3.canvas 뿐).
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,300 @@
|
||||
---
|
||||
id: wiki-2026-0508-compute-shader
|
||||
title: Compute Shader (WebGPU)
|
||||
category: 10_Wiki/Topics
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: [compute shader, WebGPU compute, GPGPU, WGSL, GPU-driven rendering, indirect draw]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.9
|
||||
verification_status: applied
|
||||
tags: [webgpu, compute-shader, gpgpu, wgsl, gpu-driven-rendering, three-js, particle-system, simulation]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
tech_stack:
|
||||
language: WGSL / WebGPU
|
||||
framework: Three.js / Babylon.js / wgpu-rs
|
||||
---
|
||||
|
||||
# Compute Shader
|
||||
|
||||
## 매 한 줄
|
||||
> **"매 GPU thousand core 의 parallel"**. 매 WebGPU 의 introduce → 매 web 의 GPGPU 의 가능. 매 particle, 매 fluid sim, 매 culling, 매 ML inference. 매 CPU 30ms (10K particle) → 매 GPU 2ms (100K particle) — 매 150× faster.
|
||||
|
||||
## 매 핵심
|
||||
|
||||
### 매 use case
|
||||
1. **Particle system**: 매 millions.
|
||||
2. **Fluid simulation**: 매 SPH, 매 grid-based.
|
||||
3. **Cloth / soft-body**.
|
||||
4. **Procedural terrain**.
|
||||
5. **GPU-driven rendering**: 매 culling, 매 indirect draw.
|
||||
6. **Compute skinning**: 매 GPU 의 vertex transform.
|
||||
7. **Image processing**: 매 blur, 매 filter.
|
||||
8. **GPGPU**: 매 ML inference, 매 numerical.
|
||||
|
||||
### 매 vs vertex / fragment shader
|
||||
- **Vertex**: 매 per-vertex.
|
||||
- **Fragment**: 매 per-pixel.
|
||||
- **Compute**: 매 arbitrary computation, 매 storage R/W.
|
||||
|
||||
### 매 핵심 concept
|
||||
|
||||
#### Workgroup
|
||||
- 매 thread group (e.g., 8×8×1 = 64 threads).
|
||||
- 매 shared memory.
|
||||
- 매 hardware-mapped (warp / wavefront).
|
||||
|
||||
#### Storage buffer / texture
|
||||
- 매 read + write (vs sampled texture only read).
|
||||
- 매 fluid sim 등 의 essential.
|
||||
|
||||
#### Workgroup variable (shared memory)
|
||||
- 매 매 thread group 의 share.
|
||||
- 매 10-100× faster than global.
|
||||
- 매 reduction, prefix sum 의 base.
|
||||
|
||||
#### Indirect draw
|
||||
- 매 GPU 의 draw command 의 generate.
|
||||
- 매 CPU-GPU sync 의 minimize.
|
||||
|
||||
### 매 WGSL (WebGPU Shading Language)
|
||||
- 매 syntax: 매 Rust-like.
|
||||
- 매 type-strict.
|
||||
- 매 vertex / fragment / compute 의 unified.
|
||||
|
||||
### 매 sync / async
|
||||
- 매 GPU 의 async by default.
|
||||
- 매 dependency 의 explicit barrier.
|
||||
- 매 readback 의 expensive (avoid).
|
||||
|
||||
### 매 modern application
|
||||
- **Three.js WebGPU renderer**: 매 v160+.
|
||||
- **Babylon.js**.
|
||||
- **wgpu-rs**: 매 native + web.
|
||||
- **Hokusai** (Expo 2025 Osaka): 매 1M particle fluid.
|
||||
- **Million-component BIM platform**.
|
||||
|
||||
## 💻 패턴
|
||||
|
||||
### Basic compute shader (WGSL)
|
||||
```wgsl
|
||||
// 매 add two arrays
|
||||
@group(0) @binding(0) var<storage, read> input_a: array<f32>;
|
||||
@group(0) @binding(1) var<storage, read> input_b: array<f32>;
|
||||
@group(0) @binding(2) var<storage, read_write> output: array<f32>;
|
||||
|
||||
@compute @workgroup_size(64)
|
||||
fn main(@builtin(global_invocation_id) id: vec3<u32>) {
|
||||
let idx = id.x;
|
||||
if (idx >= arrayLength(&input_a)) { return; }
|
||||
output[idx] = input_a[idx] + input_b[idx];
|
||||
}
|
||||
```
|
||||
|
||||
### JavaScript dispatch (WebGPU)
|
||||
```js
|
||||
const adapter = await navigator.gpu.requestAdapter();
|
||||
const device = await adapter.requestDevice();
|
||||
|
||||
// 매 buffer
|
||||
const inputA = device.createBuffer({
|
||||
size: data.byteLength,
|
||||
usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
|
||||
});
|
||||
device.queue.writeBuffer(inputA, 0, data);
|
||||
|
||||
// 매 pipeline
|
||||
const module = device.createShaderModule({ code: wgslSource });
|
||||
const pipeline = device.createComputePipeline({
|
||||
layout: 'auto',
|
||||
compute: { module, entryPoint: 'main' },
|
||||
});
|
||||
|
||||
const bindGroup = device.createBindGroup({
|
||||
layout: pipeline.getBindGroupLayout(0),
|
||||
entries: [
|
||||
{ binding: 0, resource: { buffer: inputA } },
|
||||
{ binding: 1, resource: { buffer: inputB } },
|
||||
{ binding: 2, resource: { buffer: output } },
|
||||
],
|
||||
});
|
||||
|
||||
// 매 dispatch
|
||||
const encoder = device.createCommandEncoder();
|
||||
const pass = encoder.beginComputePass();
|
||||
pass.setPipeline(pipeline);
|
||||
pass.setBindGroup(0, bindGroup);
|
||||
pass.dispatchWorkgroups(Math.ceil(data.length / 64));
|
||||
pass.end();
|
||||
device.queue.submit([encoder.finish()]);
|
||||
```
|
||||
|
||||
### Particle system (Three.js WebGPU)
|
||||
```js
|
||||
import { Fn, instanceIndex, storage, attribute } from 'three/webgpu';
|
||||
|
||||
const positionsAttribute = new Float32Array(N_PARTICLES * 3);
|
||||
const positionsBuffer = renderer.computeAsync(
|
||||
Fn(() => {
|
||||
const i = instanceIndex;
|
||||
const pos = storage(positionsAttribute, 'vec3', N_PARTICLES);
|
||||
pos.element(i).addAssign(velocity.element(i).mul(dt));
|
||||
pos.element(i).y.assign(pos.element(i).y.sub(gravity * dt));
|
||||
// 매 boundary
|
||||
If(pos.element(i).y.lessThan(0), () => {
|
||||
pos.element(i).y.assign(0);
|
||||
velocity.element(i).y.mulAssign(-0.8);
|
||||
});
|
||||
})().compute(N_PARTICLES)
|
||||
);
|
||||
```
|
||||
|
||||
### Fluid simulation (SPH-style)
|
||||
```wgsl
|
||||
// 매 매 particle 의 neighbor 의 search + 매 force compute
|
||||
@group(0) @binding(0) var<storage, read_write> particles: array<Particle>;
|
||||
@group(0) @binding(1) var<uniform> params: SimParams;
|
||||
|
||||
@compute @workgroup_size(64)
|
||||
fn step(@builtin(global_invocation_id) id: vec3<u32>) {
|
||||
let i = id.x;
|
||||
if (i >= arrayLength(&particles)) { return; }
|
||||
|
||||
var force = vec3<f32>(0.0, -9.8, 0.0);
|
||||
|
||||
// 매 neighbor sum (simplified — real SPH uses spatial grid)
|
||||
for (var j = 0u; j < arrayLength(&particles); j++) {
|
||||
if (j == i) { continue; }
|
||||
let r = particles[j].pos - particles[i].pos;
|
||||
let d = length(r);
|
||||
if (d < params.smoothing_length) {
|
||||
force += sph_force(particles[i], particles[j], r, d);
|
||||
}
|
||||
}
|
||||
|
||||
particles[i].vel += force * params.dt;
|
||||
particles[i].pos += particles[i].vel * params.dt;
|
||||
}
|
||||
```
|
||||
|
||||
### GPU-driven culling (frustum)
|
||||
```wgsl
|
||||
@group(0) @binding(0) var<storage, read> instances: array<InstanceData>;
|
||||
@group(0) @binding(1) var<storage, read_write> draw_args: array<DrawArgs>;
|
||||
@group(0) @binding(2) var<uniform> camera: Camera;
|
||||
|
||||
@compute @workgroup_size(64)
|
||||
fn cull(@builtin(global_invocation_id) id: vec3<u32>) {
|
||||
let i = id.x;
|
||||
if (i >= arrayLength(&instances)) { return; }
|
||||
|
||||
if (in_frustum(instances[i].bounding_box, camera.frustum)) {
|
||||
let slot = atomicAdd(&draw_args[0].instance_count, 1u);
|
||||
visible_indices[slot] = i;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Compute skinning (vertex transform pre-pass)
|
||||
```wgsl
|
||||
@group(0) @binding(0) var<storage, read> bone_matrices: array<mat4x4<f32>>;
|
||||
@group(0) @binding(1) var<storage, read> base_vertices: array<Vertex>;
|
||||
@group(0) @binding(2) var<storage, read_write> skinned: array<vec4<f32>>;
|
||||
|
||||
@compute @workgroup_size(64)
|
||||
fn skin(@builtin(global_invocation_id) id: vec3<u32>) {
|
||||
let i = id.x;
|
||||
let v = base_vertices[i];
|
||||
|
||||
var pos = vec4<f32>(0.0);
|
||||
for (var b = 0u; b < 4u; b++) {
|
||||
pos += bone_matrices[v.bone_idx[b]] * vec4<f32>(v.position, 1.0) * v.bone_weight[b];
|
||||
}
|
||||
|
||||
skinned[i] = pos;
|
||||
}
|
||||
|
||||
// 매 매 render pass 의 skinned 의 read.
|
||||
```
|
||||
|
||||
### Workgroup shared memory (reduction)
|
||||
```wgsl
|
||||
var<workgroup> shared: array<f32, 64>;
|
||||
|
||||
@compute @workgroup_size(64)
|
||||
fn sum_reduce(
|
||||
@builtin(local_invocation_id) lid: vec3<u32>,
|
||||
@builtin(global_invocation_id) gid: vec3<u32>,
|
||||
) {
|
||||
shared[lid.x] = input[gid.x];
|
||||
workgroupBarrier();
|
||||
|
||||
// 매 tree reduction
|
||||
for (var stride = 32u; stride > 0u; stride >>= 1u) {
|
||||
if (lid.x < stride) {
|
||||
shared[lid.x] += shared[lid.x + stride];
|
||||
}
|
||||
workgroupBarrier();
|
||||
}
|
||||
|
||||
if (lid.x == 0u) {
|
||||
output[workgroup_id.x] = shared[0];
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Async render (Three.js)
|
||||
```js
|
||||
// 매 compute pass 의 finish 후 의 render
|
||||
async function frame() {
|
||||
await renderer.computeAsync(particleUpdate);
|
||||
await renderer.renderAsync(scene, camera);
|
||||
}
|
||||
```
|
||||
|
||||
## 🤔 결정 기준
|
||||
| 상황 | Approach |
|
||||
|---|---|
|
||||
| 100K+ particle | Compute shader |
|
||||
| Fluid sim | Compute + storage texture |
|
||||
| Frustum culling | GPU-driven culling |
|
||||
| ML inference (browser) | WebGPU + WGSL |
|
||||
| Image processing | Compute + storage texture |
|
||||
| Skinned mesh (many) | Compute skinning |
|
||||
| < 10K particle | CPU OK |
|
||||
| < 1000 instance | CPU instance |
|
||||
|
||||
**기본값**: WebGPU + Three.js v160+ for web. wgpu-rs for native.
|
||||
|
||||
## 🔗 Graph
|
||||
- 부모: [[WebGPU]] · [[Computer-Graphics]]
|
||||
- 변형: [[WGSL]] · [[GPU-driven Rendering]] · [[Indirect Draw]]
|
||||
- 응용: [[Three.js]] · [[Particle-System]]
|
||||
- Adjacent: [[CSS Animations]] · [[Web-Performance]] · [[Bottlenecks]] · [[Bioenergetics]] (energy-efficient)
|
||||
|
||||
## 🤖 LLM 활용
|
||||
**언제**: 매 web GPU compute. 매 large particle / sim. 매 GPU-driven rendering. 매 browser ML.
|
||||
**언제 X**: 매 small task (CPU OK). 매 WebGL only fallback 필요.
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **CPU-GPU readback every frame**: 매 sync stall.
|
||||
- **Workgroup size 의 wrong** (e.g., 8): 매 underutilization.
|
||||
- **No barrier**: 매 race condition.
|
||||
- **Storage texture 의 use w/o WebGPU**: 매 unsupported.
|
||||
- **Sync compute + render**: 매 stall.
|
||||
- **No fallback (older browser)**: 매 break.
|
||||
|
||||
## 🧪 검증 / 중복
|
||||
- Verified (WebGPU spec, Three.js webgpu, Hokusai exhibition).
|
||||
- 신뢰도 A.
|
||||
- Related: [[CSS Animations]] · [[Web-Performance]] · [[Bottlenecks]] · [[Baseline (Web Platform Features)]] · [[20k skinned instances demo]].
|
||||
|
||||
## 🕓 Changelog
|
||||
| 날짜 | 변경 |
|
||||
|---|---|
|
||||
| 2026-04-19 | Auto-mapped |
|
||||
| 2026-05-08 | Phase 1 |
|
||||
| 2026-05-10 | Manual cleanup — workgroup + 매 WGSL / Three.js / fluid / culling / skinning code |
|
||||
Reference in New Issue
Block a user