BIOBLOB: ARCHITECTING EXTREME-SCALE INTERACTIVE SIMULATIONS
Engineering a living digital ecosystem: From 44,000 physics-simulated cells to GPU-accelerated rendering at 60 FPS.
The problem worth engineering
BioBlob represents the intersection of graphics programming, distributed computing, and systems engineering. The core challenge was rendering and simulating 44,000+ interactive biological entities in real-time while maintaining 60 FPS on consumer hardware.
This required architecting a multi-threaded rendering pipeline where physics calculations run in Web Workers, GPU shaders handle instanced rendering (reducing 44,000 draw calls to 1), and a custom spatial hash grid enables O(N) collision detection instead of O(N²). The simulation features a complex lifecycle: Cells form Consolidations, which evolve into Entities, which bond to create new Cells—a recursive biological loop requiring careful state management and synchronization.
Beyond rendering, the project implements ultrasonic data transmission using ggwave (encoding chat messages into audio frequencies), a custom WebGL post-processing pipeline with retro glitch effects, and a real-time chat interface synchronized with audio playback. Built with Next.js 15, Three.js, Matter.js physics engine, and a MongoDB backend running autonomous simulation cycles via cron jobs.
- Architected a GPU-Accelerated Instanced Rendering System: Reduced 44,000 individual draw calls to a single instanced mesh using custom GLSL shaders. Implemented per-instance attributes (drift parameters, time offsets, speed) to ensure each cell has unique behavior while sharing the same geometry, achieving a 99.97% reduction in GPU overhead.
- Engineered a Multi-Threaded Physics Pipeline: Offloaded all position calculations to a dedicated Web Worker running Matter.js physics engine. Implemented a 'Star Topology' constraint system where origin cells (Cell-0) anchor consolidation groups, preventing drift while allowing organic clustering. Used spatial hash grids for O(N) collision resolution instead of naive O(N²) pairwise checks.
- Built Custom WebGL Shaders for Bio-Luminescent Aesthetics: Designed fragment shaders using Simplex noise and turbulent FBM (Fractal Brownian Motion) to create liquid plasma effects. Implemented multi-directional flow fields with rotating coordinates to simulate swirling organic movement. Each cell features dynamic Fresnel rim lighting and pulsing hot spots for visual depth.
How it was built, system by system

Interface documentation
Click any screen to inspect it full size.
Related Projects
Explore more of my work

Goods&U | Full-Stack Bilingual (Arabic-RTL) E-Commerce Platform

Polary | Cinematic 3D Narrative Landing Experience

Diagnostics Elite | Cinematic Bilingual MedTech Platform (WebGL + Sanity)

Fix Vision | Interactive High-Performance Creative Agency Platform

IQ Academy | Full-Stack Arabic EdTech Learning Platform

TMT Eye | Enterprise Intelligent Transport Operating System

Goods&U | Full-Stack Bilingual (Arabic-RTL) E-Commerce Platform

Polary | Cinematic 3D Narrative Landing Experience

Diagnostics Elite | Cinematic Bilingual MedTech Platform (WebGL + Sanity)

Fix Vision | Interactive High-Performance Creative Agency Platform

IQ Academy | Full-Stack Arabic EdTech Learning Platform

