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

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

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
wiki-2026-0508-시뮬레이션-simulation	시뮬레이션(Simulation)	10_Wiki/Topics	verified	self	Frontend Simulation Browser Physics Simulation WebGL Simulation Particle System	none	A	0.84	applied	frontend simulation webgl webgpu physics particle canvas		2026-05-10	pending	language framework TypeScript / GLSL / WGSL 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)

// 매 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)

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)

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)

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

// 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)

// 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

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 Worker (웹 워커) · 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