Development & Technology
PHOBOSIA was built over approximately two and a half months of dedicated solo development. Discover the rendering optimizations, architectural patterns, and performance considerations.
~2.5 Months of Intensive Authoring
From raw NASA PDS terrain download and Blender module modeling to Three.js first-person physics and the complete SOL 1–11 mission state machine.
Core Technologies & Tooling
Real-time 3D Graphics
Core WebGL rendering engine, scene graph, PBR shaders, and camera controller
Lossless/near-lossless compression reducing multi-hundred MB GLB meshes to streaming chunks
Renders 100,000+ rocks and procedural scatter with a single draw call
Frontend & Web Architecture
Modular page routing, static site generation, and optimized metadata
Component state management, strict type checking, and modular HUD overlays
Zero-runtime utility styling system with custom space-dark tokens
Geospatial & 3D Modeling
Custom architectural modeling, UV unwrap, PBR material creation, and LOD management
Raw NASA PDS elevation clipping, GeoTIFF reprojection, and slope matrix generation
High-speed binary storage for 100k rock coordinate matrices and elevation tables
Key Engineering Challenges & Solutions
1. Delivering High-End 3D on Modest Hardware (MX350)
The developer's primary testing rig featured a modest NVIDIA GeForce MX350 GPU with only ~2 GB VRAM. Loading uncompressed 4K textures and high-polygon meshes immediately triggered WebGL context losses.
Implemented aggressive texture atlasing (combining multiple screens and wall panels into unified 2048x2048 sheets), converted heavy geometry to Draco-compressed GLBs, and utilized Three.js InstancedMesh for all repetitive ground debris.
2. Uneven Terrain Collision & Player Grounding
Authentic NASA elevation models contain natural ridges, crater lips, and micro-channels that cause standard AABB (axis-aligned bounding box) physics controllers to jitter, float, or clip into the ground.
Engineered a dual-query grounding algorithm: a downward raycast constantly samples exact heightfield surface normals, interpolating vertical camera offset with spring damping to simulate natural walking over rough regolith.
3. Decoupled Mission State Machine (SOL 1–11)
Hardcoding mission objectives inside Three.js render loops would lead to spaghetti code and brittle progression bugs.
Architected a declarative JSON-driven mission system (`src/jsons/Missions/sol-*.json`). Each SOL defines strict task trees, prerequisite validations, active screen registries, and completion triggers independently of 3D asset files.
4. Physical Consoles within a 3D World
Rendering 20+ dynamic 2D screens inside a 3D scene can drastically inflate draw calls if every monitor is a separate canvas texture.
Implemented a shared emissive shader pipeline where inactive screens use baked low-resolution textures, and active screens mount interactive HTML/WebGL DOM layers only when the player enters the 2.5m interaction sphere.