~/content/07-web-platform-and-performance.mdā¼
No pages yet. In Files, use "Set as Page" on a markdown or HTML file.
Frontmatter
{
"title": "Chapter 7: Web Platform Breakdown & Performance Engineering",
"created": "1970-01-01T00:00:00Z",
"updated": "1970-01-01T00:00:00Z",
"slug": "web-platform-and-performance"
}š Chapter 7: Web Platform Breakdown & Performance Engineering
Welcome to Chapter 7! Block Garden is designed as a primary reference implementation for treating the modern browser not merely as a rendering runtime, but as a full Operating Environment. This chapter explores the 16+ native Web APIs power-housing Block Garden, performance optimization techniques, and secret developer tools.
š 1. The Browser-as-an-OS Paradigm
Unlike conventional web games that rely on heavy WASM runtimes or monolithic framework bundles, Block Garden maps native browser infrastructure directly to core game engine subsystems:
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā Modern Web Browser (OS) ā
āāāāāāāā¬āāāāāāāāāāāāāāāāāāāāāā¬āāāāāāāāāāāāāāāāāāāā¬āāāāāāāāāāāāā
ā ā ā
ā¼ ā¼ ā¼
āāāāāāāāāāāāāāāāāāāā āāāāāāāāāāāāāāāāāāāā āāāāāāāāāāāāāāā
ā Web Worker Pool ā ā IndexedDB Store ā ā URL Params ā
ā (Multithreading) ā ā (File System) ā ā (Control) ā
āāāāāāāāāā¬āāāāāāāāāā āāāāāāāāāā¬āāāāāāāāāā āāāāāāāā¬āāāāāāā
ā ā ā
ā¼ ā¼ ā¼
āāāāāāāāāāāāāāāāāāāā āāāāāāāāāāāāāāāāāāāā āāāāāāāāāāāāāāā
ā Chunk Synthesis ā ā Compressed Saves ā ā Seed & Load ā
āāāāāāāāāāāāāāāāāāāā āāāāāāāāāāāāāāāāāāāā āāāāāāāāāāāāāāā
- Multithreading via Workers: Off-thread terrain generation delegates computation to
terrain.worker.mjsinstances matched dynamically tonavigator.hardwareConcurrency. - Content-Addressable File System: IndexedDB (
localforage) paired with nativeCompressionStream("gzip")acts as an offline persistent drive for voxel chunks. - Declarative Control Plane:
URLSearchParamsallows seed injection, automatic PDF save loading (?gameSave=...), and headless execution. - Unbundled Philosophy: Available as unbundled raw ES6 modules (
index_unbundled.html) utilizing native browser Import Maps, making code inspectable and moddable live without build steps.
š ļø 2. Comprehensive Web API Inventory
Block Garden intentionally exercises a vast array of standard Web Platform APIs without external framework shims:
| Web API / Feature | Engine Subsystem | Practical Implementation & Value |
|---|---|---|
| ES Modules & Import Maps | Bootstrapping & Scripting | Native runtime dependency resolution; hot-swappable unbundled modules (index_unbundled.html). |
| Custom Elements (Web Components) | Component Architecture | Encapsulated custom element <block-garden> with lifecycle hooks. |
Shadow DOM (mode: 'open') | UI Isolation | Style isolation preventing CSS bleeding between UI and canvas rendering. |
| CSS Custom Properties | Dynamic Theming | Native variables (--bg-color-*) driving dynamic time-of-day palettes and custom block styles. |
| WebGL & Shaders | 3D Rendering Pipeline | Hardware-accelerated GPU rendering with opaque, transparent, and animated water shader passes. |
Web Workers (Worker) | Terrain Synthesis | Off-thread 3D Simplex noise terrain generation without blocking the 60fps main UI thread. |
IndexedDB & localforage | Offline Storage | Asynchronous, structured binary storage of gzip-compressed chunk data across sessions. |
| CompressionStream ("gzip") | Data Compression | Native browser gzip stream compression reducing save file sizes by over 90%. |
| Pointer & Touch Events | Input & Mobile | Unified pointer lock for desktop 3D camera alongside touch gesture handling via Hammer.js. |
| URLSearchParams & History API | Deep Linking | Deep-linking game seeds, direct PDF save loading, and non-destructive session parameters. |
| Service Worker & PWA Manifest | Offline Resilience | Service Worker asset caching (sw.js) enabling 100% offline play and Add to Home Screen. |
| Web Share Target API | OS File Handlers | Native OS share integration receiving .bgs and .pdf save files directly into the engine. |
pdf-lib & Canvas API | PDF Game Saves | PNG tEXt chunk creation embedding gzip game state into self-describing PDF postcards. |
TC39 signal-polyfill | Fine-Grained Reactivity | Signal.State and Signal.Computed driving microscopic DOM updates without VDOM overhead. |
ā” 3. Performance Engineering & Hot-Path Optimizations
To maintain a consistent 60 FPS (~16.6ms frame budget) on both mobile devices and high-refresh desktop monitors, Block Garden employs strict performance patterns in src/core/systems/game/loop.mjs:
- Greedy Quad Meshing: Merges contiguous coplanar block faces in chunk meshes, reducing geometry vertex counts by up to 85%.
- TypedArray Allocation Limits: Reuses pre-allocated
Float32Arrayvertex buffers andUint8Arraylight maps to prevent garbage collection pauses during high-speed movement. - Fixed-Timestep Simulation: Decouples game physics and plant ticks from rendering framerates, ensuring deterministic physical movement across varying hardware.
- Boundary-Limited BFS Updates: Breadth-first search light propagation only recalculates neighbor chunks when block edits fall within
MAX_LIGHT_RADIUSof a chunk border.
š 4. Secret Dev Mode (Konami Code)
Block Garden includes a hidden developer control panel unlocked by entering the classic Konami Code sequence on keyboard:
$$\text{Up } \rightarrow \text{Up } \rightarrow \text{Down } \rightarrow \text{Down } \rightarrow \text{Left } \rightarrow \text{Right } \rightarrow \text{Left } \rightarrow \text{Right } \rightarrow \text{B } \rightarrow \text{A}$$
Unlocked Developer Capabilities:
- ā” Fast Growth & Planting: Accelerates
plantGrowth.mjsticks to instantly mature crops and trees. - š Ore Locator: Scans nearby chunk geometry and renders directional markers pointing toward deep Coal, Iron, Gold, and Diamond deposits.
- šļø Ambient Occlusion & Cloud Debug: Toggles solid clouds rendering and visualizes per-vertex AO ambient shadowing calculations.
- š Super Fast Movement: Increases player walk, sprint, and free-flight velocity.
- šØ Live Palette Customization: Opens custom color property inspectors to customize block hues dynamically.
ā¬ ļø Previous Page | ā”ļø Next Page