Skip to main content
GRAPHICS ENGINEERING & REAL-TIME SYSTEMS

BIOBLOB: ARCHITECTING EXTREME-SCALE INTERACTIVE SIMULATIONS

Engineering a living digital ecosystem: From 44,000 physics-simulated cells to GPU-accelerated rendering at 60 FPS.

05
Engine systems
03
Data systems
04
Interface systems
neural-network-visiulization-9fyj.vercel.app
Watch on LinkedIn
01 — Overview

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.
02 — Deep-Dive Modules

How it was built, system by system

01 / 12
Engineered a Multi-Threaded Physics Pipeline
Core Engine & Business LogicModule 02

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.

Core Engine & Business Logic5
Data, State & Performance3
Interface, Motion & Accessibility4

Related Projects

Explore more of my work

smoke
logo

"If Your Dreams do not scare you, they are too small !"

Got a project? Let’s vibe together and
make it ninjaa-precise—get in touch!

Call Me Now !

mail

noordragon2004@gmail.com

address

from egypt,mansoura

phone

+20 1145838187