Mitochondrial Pearling Digital Twin

Interactive 3D visualization of the Rayleigh-Plateau instability in mitochondria. Transform scientific papers into explorable 3D scenes with full source provenance.

Three.js WebGL Shaders Source Provenance PDF Sync
Key Insight
The visualization is not the product. The traceability is the product.
A scientist must be able to click any 3D shape and read the exact sentence from the paper that justifies it. Everything else — shaders, animations, UI — serves that single purpose.
10
Panel Views
100%
Source Traced
GLSL
Custom Shaders
PDF
Side-by-Side
Live Interactive Visualization
Drag to rotate · Scroll to zoom · Click presets to simulate biological conditions
* Goal
▼

Transform scientific papers into interactive 3D visualizations where every visual element traces back to its source text, enabling researchers and students to explore complex spatial concepts with verifiable accuracy.

The Problem
Scientific papers describe spatial and temporal phenomena in text. Readers must mentally reconstruct 3D processes from 2D descriptions. A sentence like "cylindrical tubes undergo shape changes to a string of pearls" requires readers to imagine something most have never seen.
The Solution
Interactive 3D visualization with provenance — click any shape, read the exact sentence that justifies it. The cognitive burden shifts from imagination to exploration.
+ Concepts That Work
▼
  • 1
    Provenance Tracking: Links every visual element to source text, creating trust. Click any 3D object to see the paper sentence that justifies it.
  • 2
    Emphasis Scoring: Allocates visual complexity by scientific importance. Key concepts get more detail; supporting elements stay simple.
  • 3
    Causality Layout: LEFT → CENTER → RIGHT spatial logic matches how processes unfold. Cause on left, effect on right.
  • 4
    Trigger-Response Maps: Encodes cause-effect relationships as data, enabling interactive exploration of biological cascades.
  • 5
    Story Mode: Sequential reveal makes complex processes digestible. Users step through the science at their own pace.
  • 6
    Manifest-Driven Architecture: Separates content from presentation, enabling flexibility. Same renderer, different data.
  • 7
    Domain Ontology Separation: Same engine works across biology, physics, economics. The visualization layer is domain-agnostic.
! Challenges
▼
Monolithic Codebase
Difficult to maintain, debug, or extend. Single files grew to thousands of lines.
LLM Extraction Variability
Same paper produces different results each run. Non-deterministic outputs complicated testing.
Scope Creep
Built features (audit systems, 10+ states) that were never used. Over-engineered before validating core value.
No Error Boundaries
One bad input crashes the entire application. No graceful degradation.
Misleading Terminology
Called shader animations "physics simulation" — created false expectations about fidelity.
Missing Infrastructure
No tests, no documentation, no design system. Technical debt accumulated from day one.
→ Next Steps
▼
Architecture
  • +
    Modular file structure with single-responsibility components
  • +
    Manifest-driven rendering (no hardcoded visuals)
  • +
    Explicit dependency passing (no global state)
  • +
    Error boundaries at every pipeline stage
Extraction
  • +
    Deterministic baseline extraction (reliable without LLM)
  • +
    Optional LLM enhancement layer
  • +
    Human review interface for production use
  • +
    Documented unit conversion formulas
Quality
  • +
    Automated testing (unit, integration, visual regression)
  • +
    JSON Schema validation for all manifests
  • +
    Performance budgets (frame rate, load time)
  • +
    Accessibility compliance (keyboard navigation, screen readers)
Documentation
  • +
    Architecture decision records
  • +
    Manifest authoring guide
  • +
    API documentation per module
  • +
    Domain ontology expansion guides
User Experience
  • +
    Coherent visual design system
  • +
    Responsive layout for multiple devices
  • +
    Export capabilities (static HTML, video, images)
  • +
    Shareable URLs with state
M MVP Scope
▼
Requirements (Shipped)
Load manifest → render 3D scene
Click entity → show source sentence
Causality layout (left-to-right flow)
Story mode (sequential reveal)
PDF panel (side-by-side reference)
Deferred
Automatic LLM extraction
Real physics simulation
Advanced interaction modes
Collaboration features
Mobile optimization
</> Technology Stack
▼
3D Rendering
Three.js for scene management, camera controls, and mesh rendering.
Shaders
Custom GLSL (WebGL 2) for pearling deformation, membrane dynamics, and provenance highlighting.
PDF Display
PDF.js for side-by-side paper reference with synchronized highlighting.
Build System
Vite for fast development and optimized production builds.
Language
TypeScript for type safety and better tooling support.
Hosting
Vercel for static deployment with global CDN.
A Technology Audit
▼

Assessment of current approach and recommended alternatives for scientific visualization with source provenance.

Current Stack Assessment
Three.js + GLSL
Verdict: Keep. Best choice for web-based interactive 3D. Lightweight, accessible, well-documented.
LLM Extraction
Verdict: Supplement. Add deterministic baseline extraction. Use LLM as enhancement layer, not primary.
Tools Evaluated
  • -
    ComfyUI / Stable Diffusion: Not suitable for scientific viz. No accuracy guarantees. Use only for concept art exploration.
  • -
    NVIDIA Omniverse: Overkill for web app. Real-time physics accurate but requires GPU, not web-native.
  • -
    Unity/Unreal: Wrong tool. Game engines don't model membrane biophysics. Not web-native.
  • +
    WASM Physics (Cannon.js): Consider for v2. Lightweight, Three.js compatible, can approximate membrane dynamics.
  • +
    Custom Helfrich Solver: Ideal for accuracy. Implement membrane energy minimization in WebGL compute shaders.
  • +
    VTK.js: Consider for EM data. Volume rendering for FIB-SEM datasets like Figure 4F.
Key Recommendations
  • 1
    Source Provenance First: Every 3D element must link to exact paper sentence. Click mesh → see quote.
  • 2
    Quantitative Accuracy: Use exact values from paper. Pearl width 320-480nm, spacing 0.8-1.3µm, transition 2 seconds.
  • 3
    Terminology Correction: Current shaders are "physics-inspired animation" not "simulation." Add disclaimer.
  • 4
    Confidence Levels: Color-code visuals: Green=CITED (from paper), Yellow=INFERRED, Red=ESTIMATED.
  • 5
    Deterministic Extraction: Regex-based baseline. LLM as enhancement only. Version-lock outputs.
Accuracy Audit (Sturm et al. Paper)
  • ?
    Core Mechanism: Does viz show Rayleigh-Plateau instability (tension vs elasticity balance)?
  • ?
    Three Pathways: Are osmotic pressure, mechanical tension, and reduced elasticity all shown?
  • ?
    Two Classes: Class I (calcium, shrinking) and Class II (stretching, no calcium) distinct?
  • ?
    Ruled-Out Mechanisms: Does viz avoid misattributing to DRP1, ER alone, or ROS?
  • ?
    Double Membrane: Are both inner and outer membranes shown transitioning?

Based on Sturm et al., Mol Biol Cell 2025 • Live Visualization