Frontend demo: raymarched Metaballs with WebGPU
A frontend lead shared a live Metaballs demo built with raymarching, TSL, React, Next.js and Three.js—and published full source on GitHub for portfolio reuse shared. It’s a clear example of shipping advanced WebGL/WebGPU graphics as a web‑native portfolio piece.
Pavel Mazhuga’s GitHub profile [lists 15 public repositories]github.com and his portfolio repo [contains a large src/app/lab tree with WebGPU/TSL experiments]github.com. The demo appears as a dedicated lab page at pavelmazhuga.com/lab/metaballs [lab page]t.co while the same portfolio repo exposes per-demo source files under /src/app/lab (demo.ts, README.md) for several WebGPU experiments.github.com The portfolio includes a WebGPU integration component named WebGPUCanvas.tsx that shows Three.js + WebGPU wiring in [TypeScript WebGPUCanvas.tsx]github.com and a particles-morphing-2 sample explicitly labeled “Particles morphing (TSL, compute)” in its folder listing.github.com Comparable open-source Metaballs work on GitHub includes toji/webgpu-metaballs (≈95 commits, ~97 stars) which provides a WebGPU Metaballs demo and [source toji/webgpu-metaballs]github.com and gnikoloff/webgpu-compute-metaballs (compute-shader marching-cubes, ~69 commits) which implements GPU marching cubes and deferred rendering.github.com The WebGPU Samples collection lists a Metaballs example hosted at webgpu.github.io [WebGPU Samples: Metaballs]webgpu.github.io, and WebKit documents WebGPU availability in Safari Technology Preview and Safari 26 (developer builds) for testing and demoing WebGPU content.webkit.org Practical tutorial and tooling references used by these projects include a Codrops raymarching + Three.js/TSL guide (July 2024) and a React Three Fiber + WebGPU/TSL walkthrough (March 2025), both of which map directly to the demo’s use of raymarching, TSL nodes, and R3F integration.tympanus.net
