2nd/10_Wiki/Topics/Frontend/Wonder.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-wonder	Wonder	10_Wiki/Topics	verified	self	Wonder Editor Wonder.js Wonder ECS	none	B	0.75	applied	wonder ecs web3d engine		2026-05-10	pending	language framework TypeScript / ReScript 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

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

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

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

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

• 부모: Web 3D Engines · ECS
• 변형: Threejs · Babylon.js · Wonderland Engine · PlayCanvas
• 응용: bitECS · ReScript
• 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