Build · shipped

Interactive Visual Instance

Game Engine Architecture for Systems Builders: Bridging Unity, Three.js, and WebGL 2D

How distributed systems engineers can master game building — dissecting the 16.67ms 60FPS frame loop, Scene Graphs vs ECS, shaders, and choosing between Three.js, Unity, and Phaser 4.

4 min read
#build#game-dev#unity#threejs#phaser#webgl#shaders#architecture#ecs
Interactive Game Architecture Instance · Unity · Three.js · Phaser 4

Real-Time 60FPS Frame Pipeline & Engine Architecture Comparison

FRAME BUDGET: 16.67ms Every game engine is a deterministic state machine running inside a 16.67ms tick: Poll Input → Fixed Physics Step → ECS/Scene Update → Shader Draw Calls.
DETERMINISTIC REAL-TIME GAME LOOP · 60 FPS = 16.67ms PER FRAME BUDGET ENGINE ARCHITECTURE MATRIX · THREE.JS vs UNITY vs PHASER 4 requestAnimationFrame / VSync Next Frame Tick (Δt) 1. Input & Events WASD / Touch / Raycast Command Buffer Queue Budget: ~0.5ms 2. Fixed Physics (Δt) Colliders, Raycasts & A* Deterministic Timestep Budget: ~3.0ms 3. ECS & Scene Graph Transforms, AI State, Tweens World Matrix Hierarchy Budget: ~4.5ms 4. GPU Render Pass Cull -> Batch -> Shaders Vertex + Fragment GLSL Budget: ~8.0ms Three.js (WebGL2 / WebGPU) Browser-Native 3D & Interactive Teaching • Scene + PerspectiveCamera + Mesh • BufferGeometry + ShaderMaterial (GLSL) • InstancedMesh for 10k+ 60fps objects • Zero install: runs inline in Astro/HTML Best for: Interactive 3D Web Visualizers Unity Engine (C# / DOTS) Full 3D/2D Production & Simulation • GameObject / MonoBehaviour + Prefabs • DOTS ECS + C# Job System + Burst • URP / HDRP Shader Graph & Lightmaps • Targets Desktop, Mobile, Console, WebGL Best for: Heavy 3D Worlds & Physics Sims Phaser 4 (2D WebGL World) Powers DivineForge's "The Emporium" • Top-Down Tilemap + Depth Y-Sorting • Procedural Canvas Sprite Generation • NPC Sentinel State Machine & A* Path • Hybrid HTML DOM Drawer + WebGL Canvas Live on site: /emporium (Playable Now) Distributed Systems ↔ Game Engines: Event Loops = Game Loops · Actor/CSP = ECS · Load Balancers = Spatial Hash Grids

Why Systems Engineers Make Dangerous Game Builders

If you have built concurrent Go services, Kubernetes controllers, or event-driven pipelines, you already understand 70% of game engine architecture — the vocabulary just wears different clothes:

Distributed Systems Concept Game Engine Equivalent Why It Exists
Reconciliation / Event Loop The Game Loop (Update / requestAnimationFrame) Converges world state once every 16.67ms (60 FPS) instead of on HTTP request boundaries.
Actor Model / Go Channels ECS (Entity-Component-System) & Event Buses Decouples data (Components) from behavior (Systems) so thousands of entities update without cache misses.
Database Sharding / Indexing Spatial Hashing / Quadtrees / BVH Avoids $O(N^2)$ collision checks by partitioning 2D/3D space into addressable buckets.
Connection Pooling Object Pooling (Bullets, Particles, Sprites) Prevents garbage-collector pauses (GC spike) that drop frame rates below 60 FPS.
Batch RPCs Draw Call Batching / InstancedMesh Minimizes CPU-to-GPU driver overhead by drawing 5,000 meshes in a single GPU draw call.

1. Inside the 16.67ms Frame Budget

In backend engineering, a 40ms p99 response time is celebrated. In real-time graphics and game building, 40ms per frame is 25 FPS — visibly stuttery. To hit a locked 60 FPS, your entire frame must finish in 16.67 milliseconds (8.33ms at 120Hz).

Click ⚡ 60FPS Frame Loop (16.6ms) in the visual instance above to trace the four mandatory stages of every frame:

  1. Input Sampling (~0.5ms): Poll keyboard (WASD), pointer coordinates, gamepad axes, or touch D-pad events into an immutable frame input struct. Never mutate world state directly inside DOM/OS input callbacks.
  2. Fixed Timestep Physics (FixedUpdate, ~3.0ms): Physics solvers must be deterministic regardless of whether the monitor runs at 30Hz or 144Hz. Engines accumulate deltaTime and step physics in fixed increments (e.g., FixedTimestep = 0.02s / 50Hz in Unity), resolving AABB/capsule collisions and raycasts.
  3. Simulation & Scene Graph Update (Update, ~4.5ms): Run NPC state machines, A* pathfinding, camera spring damping, animation timelines, and hierarchy transform matrices (LocalMatrix × ParentWorldMatrix).
  4. Culling, Batching & GPU Shaders (~8.0ms): Frustum-cull off-screen objects, sort transparent geometry back-to-front, upload uniform buffers, and execute Vertex (position projection) and Fragment (pixel lighting/color) shaders on the GPU.

2. Choosing Your Engine: Three.js vs. Unity vs. Phaser 4

Switch between the 🌐 Three.js, 🧊 Unity, and 🕹️ Phaser 4 tabs in the diagram above to compare how each stack approaches the pipeline.

Three.js (WebGL2 / WebGPU) — Browser-Native 3D

When your goal is interactive 3D teaching visualizations, shader experiments, or instant-load browser games, Three.js is unmatched:

  • Core Primitives: A Scene tree holds Mesh nodes (BufferGeometry + Material), rendered through a PerspectiveCamera or OrthographicCamera by WebGLRenderer.
  • Performance Secret: Never create 2,000 separate THREE.Mesh objects in a loop. Use THREE.InstancedMesh and update per-instance $4\times4$ transformation matrices on a single draw call.
  • Zero-Friction Distribution: Embeds directly inside Astro or React components with zero installer friction.
// Minimal Three.js 60FPS deterministic loop with deltaTime clamping
const clock = new THREE.Clock();

function animate() {
  requestAnimationFrame(animate);
  // Clamp delta so tab-switching doesn't explode physics integration
  const dt = Math.min(clock.getDelta(), 0.1);

  playerMesh.rotation.y += 1.5 * dt;
  controls.update();
  renderer.render(scene, camera);
}

Unity (C# / DOTS / URP) — Heavy 3D Production & Cross-Platform Worlds

When building full-scale 3D/2D commercial games, complex physics simulations, or multi-platform builds (Steam, iOS/Android, Console), Unity provides the complete authoring toolchain:

  • Dual Architecture: Start with GameObject + MonoBehaviour components for rapid prototyping and level design; migrate hot loops (10,000+ units, boids, projectile swarms) to DOTS (Data-Oriented Technology Stack) using Entities (ECS), the C# Job System, and the Burst Compiler for SIMD-vectorized native machine code.
  • Universal Render Pipeline (URP) & Shader Graph: Author custom HLSL/visual shaders (toon shading, holographic forcefields, water caustics) without boilerplate.
  • ScriptableObjects: Use data-driven ScriptableObject assets as immutable config manifests (analogous to Kubernetes ConfigMaps).

Phaser 4 (2D WebGL) — Powering DivineForge's "The Emporium"

Our own interactive virtual world, The Emporium (/emporium), runs on Phaser 4 + TypeScript:

  • Procedural Sprite Atlases: Instead of shipping megabytes of external PNG sheets, TextureGenerator.ts synthesizes pixel-art character spritesheets on an offscreen HTML5 Canvas at boot and registers them into WebGL textures.
  • Grid Pathfinding + Y-Depth Sorting: Tile coordinates map deterministically to world pixels (TopDownConfig.ts), with setDepth(y) ensuring characters naturally walk behind and in front of lab furniture.
  • Hybrid DOM + Canvas Chrome: The 60FPS world renders in WebGL, while dialogs, roster selectors, and consultation forms use crisp, accessible HTML/CSS overlays.

3. Where We Go Next

Our game-building track on DivineForge bridges systems architecture and interactive graphics:

  1. Interactive 2D World (/emporium): Walk the floor with the 6 Stacky Sentinels in Phaser 4 today.
  2. Three.js 3D Architecture Visualizers: Interactive 3D cluster topologies, shader studies, and spatial data structures running right inside articles.
  3. Unity Systems Patterns: C# ECS, deterministic lockstep networking, state machines, and Golang multiplayer backend servers (WebSockets / QUIC / gRPC).

    / or Ctrl K to open ↓ ↑ to move, Esc to close