000%> establishing link_
R&D — Milestone 1real-time simulation engine

Visield

A high-performance social simulation MVP rendering 50,000+ NPCs in real-time on an HTML5 Canvas — exploring frontend architecture for large-scale interactive systems.

Visield preview
simulation
50,000Entities @ 60fps
O(log n)Picking complexity
// problem

What we were asked to solve.

Browser-based interactive systems hit a wall around a few thousand entities — main-thread jank, O(n) picking, GC churn. Visield is the proving ground for a stack that holds 60fps when the entity count moves from thousands to tens of thousands.

// architecture

How it's put together.

  • 01HTML5 Canvas as the render surface — no DOM nodes per entity, deterministic frame budget
  • 02Web Workers for off-main-thread position interpolation — pan/zoom stays smooth under load
  • 03Quadtree spatial partitioning for O(log n) point picking instead of O(n) brute force
  • 04Universe switching (Main World ↔ Clone Branch) with deterministic memory cleanup
  • 05Multi-panel HUD: Social Weather (sentiment gauges), Wiretap (thought logs), God Console
// stack
Next.js 15CanvasWeb WorkersZustand
// state

Shipped

  • Milestone 1 — visual engine: 50k orb rendering, Web Worker interpolation, Quadtree picking, pan/zoom
  • Multi-panel HUD shells (Social Weather, Wiretap, God Console)
  • Mock real-time pipeline (mock-server.js)

Next up

  • Milestone 2 — live Socket.io backend wiring
  • LOD / culling pass for very-far-zoom states
  • Memory-cleanup verification when switching universes under load
Building something similar?Two-week paid scoping. Written response in three working days.
Start a project