2nd/10_Wiki/Topics/Frontend/시뮬레이션(Simulation).md

---
id: wiki-2026-0508-시뮬레이션-simulation
title: 시뮬레이션(Simulation)
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Frontend Simulation, Browser Physics Simulation, WebGL Simulation, Particle System]
duplicate_of: none
source_trust_level: A
confidence_score: 0.84
verification_status: applied
tags: [frontend, simulation, webgl, webgpu, physics, particle, canvas]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: TypeScript / GLSL / WGSL
  framework: Three.js, WebGPU, matter.js, rapier.js, p5.js
---

# 시뮬레이션(Simulation)

## 매 한 줄
> **"매 frontend 의 simulation — 매 real-time interactive computation: physics, particle, fluid, agent-based, financial — 매 main thread 의 X, 매 GPU compute / Worker 의 offload"**. 매 2026 의 modern stack: WebGPU compute shader (10-100× WebGL), Rust→WASM physics (rapier), Three.js + WebGPU renderer.

## 매 핵심

### 매 Simulation 의 categories
- **Physics simulation** — rigid body, soft body, cloth (rapier, matter.js, cannon.js).
- **Particle system** — fire, smoke, snow (GPU instancing).
- **Fluid simulation** — Navier-Stokes (compute shader, SPH).
- **Agent-based** — boids, crowd, traffic.
- **Financial / Monte Carlo** — option pricing, risk simulation.
- **Cellular automata** — Game of Life, Reaction-Diffusion.

### 매 Performance Architecture
- **Main thread** — DOM, input handling 만.
- **Worker** — physics step, integration (Rust→WASM).
- **GPU compute (WebGPU)** — particle update, fluid, large array.
- **OffscreenCanvas** — 매 worker 의 직접 render.
- **SharedArrayBuffer** — main↔worker 의 zero-copy state.

### 매 2026 의 key tech
- **WebGPU** — Chrome 113+, Safari 18+, Firefox 130+.
- **Compute shader (WGSL)** — 매 general-purpose GPU 계산.
- **Rapier 0.x** — Rust physics, 10× cannon.js.
- **Three.js r170+** — WebGPURenderer 의 stable.

## 💻 패턴

### Pattern 1: WebGPU Compute (particle update)
```ts
// 매 100k particle 의 GPU 의 update
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter!.requestDevice();

const computeShader = device.createShaderModule({
  code: `
    struct Particle { pos: vec2f, vel: vec2f };
    @group(0) @binding(0) var<storage, read_write> particles: array<Particle>;
    @group(0) @binding(1) var<uniform> dt: f32;

    @compute @workgroup_size(64)
    fn main(@builtin(global_invocation_id) id: vec3u) {
      let i = id.x;
      if (i >= arrayLength(&particles)) { return; }
      var p = particles[i];
      p.vel += vec2f(0, -9.81) * dt;
      p.pos += p.vel * dt;
      if (p.pos.y < 0) { p.vel.y *= -0.8; p.pos.y = 0; }
      particles[i] = p;
    }
  `
});
```

### Pattern 2: Rapier (Rust→WASM physics)
```ts
import RAPIER from '@dimforge/rapier3d-compat';
await RAPIER.init();

const world = new RAPIER.World({ x: 0, y: -9.81, z: 0 });
const groundDesc = RAPIER.RigidBodyDesc.fixed();
const ground = world.createRigidBody(groundDesc);
world.createCollider(RAPIER.ColliderDesc.cuboid(10, 0.1, 10), ground);

const ballDesc = RAPIER.RigidBodyDesc.dynamic().setTranslation(0, 5, 0);
const ball = world.createRigidBody(ballDesc);
world.createCollider(RAPIER.ColliderDesc.ball(0.5).setRestitution(0.7), ball);

function step() {
  world.step();
  const t = ball.translation();
  mesh.position.set(t.x, t.y, t.z);
  requestAnimationFrame(step);
}
```

### Pattern 3: Three.js Particle System (instancing)
```ts
import * as THREE from 'three';

const count = 100_000;
const geometry = new THREE.BufferGeometry();
const positions = new Float32Array(count * 3);
for (let i = 0; i < count; i++) {
  positions[i*3]   = (Math.random() - 0.5) * 100;
  positions[i*3+1] = Math.random() * 50;
  positions[i*3+2] = (Math.random() - 0.5) * 100;
}
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));

const material = new THREE.PointsMaterial({ size: 0.1, color: 0xffaa00 });
const points = new THREE.Points(geometry, material);
scene.add(points);
```

### Pattern 4: Boids (agent-based)
```ts
function update(boids: Boid[], dt: number) {
  for (const b of boids) {
    let coh = vec(0,0), sep = vec(0,0), alg = vec(0,0);
    let n = 0;
    for (const o of boids) {
      const d = dist(b.pos, o.pos);
      if (d > 0 && d < 50) {
        coh = add(coh, o.pos);
        alg = add(alg, o.vel);
        if (d < 20) sep = sub(sep, sub(o.pos, b.pos));
        n++;
      }
    }
    if (n > 0) {
      coh = scale(sub(scale(coh, 1/n), b.pos), 0.01);
      alg = scale(scale(alg, 1/n), 0.05);
    }
    b.vel = add(b.vel, add(coh, add(sep, alg)));
    b.vel = limit(b.vel, 200);
    b.pos = add(b.pos, scale(b.vel, dt));
  }
}
```

### Pattern 5: Worker offload + OffscreenCanvas
```ts
// main.ts
const canvas = document.querySelector('canvas')!;
const off = canvas.transferControlToOffscreen();
const worker = new Worker('./sim.worker.ts', { type: 'module' });
worker.postMessage({ canvas: off }, [off]);

// sim.worker.ts
self.onmessage = ({ data }) => {
  const ctx = data.canvas.getContext('webgpu') as GPUCanvasContext;
  // ... initialize WebGPU + run sim loop entirely off main thread
};
```

### Pattern 6: Reaction-Diffusion (cellular)
```ts
// Gray-Scott equation 의 step (compute shader pseudo)
@compute @workgroup_size(8, 8)
fn step(@builtin(global_invocation_id) id: vec3u) {
  let p = vec2i(id.xy);
  let A = textureLoad(input, p, 0).r;
  let B = textureLoad(input, p, 0).g;
  let lapA = laplacian_r(input, p);
  let lapB = laplacian_g(input, p);
  let dA = Da*lapA - A*B*B + f*(1.0 - A);
  let dB = Db*lapB + A*B*B - (k + f)*B;
  textureStore(output, p, vec4f(A + dA, B + dB, 0, 1));
}
```

### Pattern 7: Fixed Timestep with Interpolation
```ts
const FIXED_DT = 1/60;
let acc = 0, prevState: State, state: State;

function frame(now: number) {
  const dt = (now - lastT) / 1000;
  lastT = now;
  acc += Math.min(dt, 0.25);
  while (acc >= FIXED_DT) {
    prevState = clone(state);
    state = step(state, FIXED_DT);
    acc -= FIXED_DT;
  }
  const alpha = acc / FIXED_DT;
  render(lerp(prevState, state, alpha));
  requestAnimationFrame(frame);
}
```

## 매 결정 기준
| 시뮬레이션 | Tech |
|---|---|
| Rigid body 3D | Rapier (Rust→WASM) |
| 2D physics game | matter.js |
| Particle 100k+ | WebGPU compute |
| Particle <10k | Three.js Points |
| Fluid | WebGPU compute (SPH) |
| Crowd / boids | Worker + Float32Array |
| Cellular automata | WebGPU compute texture |

**기본값**: Worker 의 simulation step + WebGPU compute (대규모) + OffscreenCanvas 의 render + fixed timestep.

## 🔗 Graph
- 부모: [[Frontend]] · [[WebGL]]
- 변형: [[WebGPU]] · [[Three.js]] · [[Game Loop]]
- 응용: [[Particle System]] · [[Physics Engine]]
- Adjacent: [[Web Workers]] · [[OffscreenCanvas]] · [[Monte Carlo Simulation]]

## 🤖 LLM 활용
**언제**: simulation algorithm 의 selection (Verlet vs Euler), WebGPU compute shader 의 boilerplate 생성, fixed timestep 의 패턴 권고.
**언제 X**: 매 GPU driver-specific 의 issue — 매 actual hardware 의 test 의 필요.

## ❌ 안티패턴
- **변동 dt 의 sim step**: 매 deterministic 의 X, 매 instability.
- **Main thread 의 100k particle**: 매 jank 의 보장.
- **DOM element 의 particle 의 render**: 매 reflow 폭발.
- **Per-frame allocation**: 매 GC pause, 매 stutter.
- **Naive O(n²) collision**: 매 spatial hash / quadtree 의 사용.

## 🧪 검증 / 중복
- Verified (WebGPU spec, Rapier docs, Three.js r170 docs, Glenn Fiedler "Fix Your Timestep" 2026).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — simulation categories, WebGPU compute, Rapier, fixed timestep |