chore(brain): ASTRA 성장 자산 동기화 — 기능 인벤토리·growth(약점프로필/학습큐)·일화기억·장기기억·회의록 원문

2026-06-12 16:37:41 +09:00
parent a97fc7be07
commit 89fb05a28a
781 changed files with 138546 additions and 47 deletions
@@ -0,0 +1,158 @@
+---
+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 |