A browser-based CFD platform that runs OpenFOAM simulations and interactive visualization entirely client-side. No server, no cloud compute — the solver runs in your browser.

Live demo: https://foam.roman01la.workers.dev

• In-browser solvers written in TypeScript:
  • 1D Jacobi Laplacian (heat diffusion)
  • 2D SIMPLE cavity flow (Navier-Stokes)
  • Scalar transport (advection-diffusion)
• Live residual convergence chart during solve
• WebGPU CG solver (for future OpenFOAM WASM integration)
• OpenFOAM compiled to WASM via Emscripten (laplacianFoam, ~11MB binary)

• 5-step wizard — solver selection → mesh → BCs → solver settings → review
• Case templates — heated plate, lid-driven cavity, backward-facing step, channel flow
• Parametric mesh generator — rectangular (with grading), cylindrical O-grid, L-shape
• OpenFOAM case import — drag-and-drop directory or file picker
• STL import — binary and ASCII formats
• Interactive BC editor — 12 BC types, scalar/vector values, per-patch highlighting, export to OpenFOAM format

• 3D viewport — Three.js via @react-three/fiber
• Field visualization — 5 color maps (jet, viridis, coolwarm, grayscale, plasma)
• Cut planes — axis-aligned slicing with gradient coloring
• Iso-surfaces — WebGPU compute shader with CPU fallback
• Streamlines — RK4 integration with spatial hash
• Arrow glyphs — InstancedMesh for vector fields
• Point probe — click-to-inspect
• Multi-viewport comparison — side-by-side with independent field/colormap

• CSV — mesh vertices + field values
• VTK (VTP XML) — ParaView-compatible
• JSON — structured mesh/field/BC/solver data
• Residuals CSV — convergence history
• Screenshots — PNG and high-res 2x

• React 19 + TypeScript + Vite
• Three.js 0.183 via @react-three/fiber and @react-three/drei
• Zustand for state management
• Recharts for convergence plots
• Allotment for split-pane layout
• lucide-react icons
• WebGPU compute shaders (WGSL)
• Emscripten for OpenFOAM → WASM compilation

cd ui
npm install
npm run dev

Open http://localhost:5173.

cd ui
npm run build

Output goes to ui/dist/.

Deployed as a Cloudflare Worker with static assets. From project root:

npx wrangler deploy

openfoam/
├── ui/                         # React web app
│   ├── src/
│   │   ├── components/         # React components
│   │   │   ├── viewport/       # Three.js visualization
│   │   │   ├── panels/         # Side panels
│   │   │   └── toolbar/        # Top toolbar
│   │   ├── lib/                # Core logic
│   │   │   ├── solverRunner.ts # JS solvers (Laplacian, cavity, transport)
│   │   │   ├── meshLoader.ts   # OpenFOAM case parser
│   │   │   ├── meshGenerator.ts # Parametric mesh builders
│   │   │   ├── templates.ts    # Pre-built case templates
│   │   │   ├── stlLoader.ts    # STL binary/ASCII parser
│   │   │   ├── webgpuCompute.ts # WebGPU compute wrapper
│   │   │   └── exporters.ts    # CSV/VTK/JSON export
│   │   └── store/              # Zustand state
│   └── dist/                   # Build output
├── webgpu/                     # WebGPU CG solver (Node.js + shaders)
│   └── shaders/                # WGSL compute shaders
├── stubs/                      # C++ stubs for WASM build
├── cases/                      # Example OpenFOAM cases
├── OpenFOAM-10/                # OpenFOAM source (submodule)
├── CMakeLists.txt              # WASM build config
└── wrangler.jsonc              # Cloudflare Worker config

The in-browser solvers use plain JavaScript. At current problem sizes (up to ~2,500 DOFs), this outperforms WASM and WebGPU alternatives because:

• GPU dispatch overhead (15-25ms per round-trip) exceeds the entire solve time for small grids
• WASM marshaling overhead negates gains for <2,500 DOFs
• V8 JIT optimizes typed array loops to near-native speed

For larger problems (>10K DOFs), the existing WebGPU CG solver in webgpu/gpu_solver.js becomes the right choice. For complex unstructured meshes, the OpenFOAM WASM binary is the target.

MIT (code) / GPL (OpenFOAM-10 submodule).