2nd/10_Wiki/Topics/Frontend/Wonder.md

---
id: wiki-2026-0508-wonder
title: Wonder
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Wonder Editor, Wonder.js, Wonder ECS]
duplicate_of: none
source_trust_level: B
confidence_score: 0.75
verification_status: applied
tags: [wonder, ecs, web3d, engine]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: TypeScript / ReScript
  framework: Wonder
---

# Wonder

## 매 한 줄
> **"매 ECS-first web 3D — functional core"**. Wonder 매 ReScript/TypeScript 기반 ECS architecture 3D engine — Wonderland 와 별도의 OSS lineage. 2026 매 niche — Three.js / Babylon / Wonderland Engine 의 dominant 매 main alternative.

## 매 핵심

### 매 design
- **ECS (Entity Component System)**: data-oriented — entity (ID) + component (data) + system (logic).
- **Functional core**: ReScript 의 immutable / pattern matching 의 사용.
- **WebGL2 backend**: GPU draw — WebGPU 매 future direction.
- **Editor**: web-based scene editor — separate from runtime.

### 매 vs Three.js
- **Three.js**: scene-graph imperative OOP — vast ecosystem.
- **Wonder**: ECS data-oriented — 매 cache-friendly bulk update.
- **Tradeoff**: Wonder 매 less plugins / smaller community / steeper learning.

### 매 응용
1. **Data-heavy 3D**: thousands of entities — particle / RTS-like.
2. **Functional codebase**: ReScript shop 의 fit.
3. **Educational**: ECS pattern 의 reference impl.
4. **Custom rendering pipeline**: 직접 control 의 필요한 case.

## 💻 패턴

### ECS basic
```typescript
import { World, defineComponent, defineSystem } from 'wonder-ecs';

const Position = defineComponent({ x: 'f32', y: 'f32', z: 'f32' });
const Velocity = defineComponent({ x: 'f32', y: 'f32', z: 'f32' });

const world = new World();
const entity = world.createEntity();
world.addComponent(entity, Position, { x: 0, y: 0, z: 0 });
world.addComponent(entity, Velocity, { x: 1, y: 0, z: 0 });

const movement = defineSystem([Position, Velocity], (entities, dt) => {
  for (const e of entities) {
    const p = world.getComponent(e, Position);
    const v = world.getComponent(e, Velocity);
    p.x += v.x * dt; p.y += v.y * dt; p.z += v.z * dt;
  }
});

function tick(dt) { movement(world.query([Position, Velocity]), dt); }
```

### Mesh + render system
```typescript
const Mesh = defineComponent({ geometryId: 'u32', materialId: 'u32' });

const renderSystem = defineSystem([Position, Mesh], (entities) => {
  for (const e of entities) {
    const p = world.getComponent(e, Position);
    const m = world.getComponent(e, Mesh);
    renderer.draw(m.geometryId, m.materialId, p);
  }
});
```

### SoA storage 매 cache-friendly
```typescript
// 매 Wonder ECS internally 매 SoA — 매 manual 의 example
class PositionSoA {
  x: Float32Array; y: Float32Array; z: Float32Array;
  constructor(capacity: number) {
    this.x = new Float32Array(capacity);
    this.y = new Float32Array(capacity);
    this.z = new Float32Array(capacity);
  }
}
// 매 tight loop 매 cache hit — AoS 보다 2-5x faster
```

### ReScript 매 functional system
```rescript
// 매 ReScript syntax
let movement = (world, dt) => {
  let entities = World.query(world, [Position.id, Velocity.id])
  entities->Belt.Array.forEach(e => {
    let pos = World.getComponent(world, e, Position.id)
    let vel = World.getComponent(world, e, Velocity.id)
    World.setComponent(world, e, Position.id, {
      x: pos.x +. vel.x *. dt,
      y: pos.y +. vel.y *. dt,
      z: pos.z +. vel.z *. dt,
    })
  })
}
```

### Asset loading
```typescript
const assets = await Wonder.loadGLTF('scene.gltf');
for (const node of assets.nodes) {
  const e = world.createEntity();
  world.addComponent(e, Position, node.translation);
  world.addComponent(e, Mesh, { geometryId: node.meshId, materialId: node.materialId });
}
```

## 매 결정 기준
| 상황 | Engine choice |
|---|---|
| Mainstream web 3D | Three.js |
| AAA-style + editor | Babylon.js / Wonderland Engine |
| ECS / data-heavy | Wonder / bitECS + Three.js |
| ReScript codebase | Wonder |
| Massive entity count | ECS + InstancedMesh |

**기본값**: Three.js + bitECS — Wonder 매 specific ECS-first / ReScript 의 case.

## 🔗 Graph
- 부모: [[ECS]]
- 변형: [[Threejs]] · [[Babylon.js]] · [[Wonderland Engine]]
- 응용: [[bitECS]]
- Adjacent: [[WebGL API]] · [[WebGPU]]

## 🤖 LLM 활용
**언제**: ECS-first 3D web project / ReScript 사용 codebase / large entity count + custom systems.
**언제 X**: standard 3D scene — Three.js 매 더 ecosystem / artist-friendly editor 필요 — Wonderland / Babylon.

## ❌ 안티패턴
- **OOP scene-graph mindset in ECS**: parent-child mutation 매 anti-ECS — entity hierarchy 의 component 의 모델.
- **Per-entity allocation in tick**: GC pressure — pool / SoA.
- **Wonder + Three.js mix**: rendering 매 conflict — choose one renderer.

## 🧪 검증 / 중복
- Verified (Wonder OSS docs / GitHub).
- 신뢰도 B (smaller community — verify against latest repo).

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — ECS arch, ReScript, SoA, vs Three.js |