Interactive WebGL Scene Playground
Type a prompt, get a scene. A real-time WebGL playground built around fast iteration: shape, palette, render engine, post FX, audio reactivity, and a custom GLSL shader editor — with PNG / WebM / GIF export and shareable URLs for any state.
VFX Studio is a browser-native WebGL scene playground. The goal is the shortest possible distance between an idea ("cyberpunk portal, beat-burst particles") and a finished frame, clip, or share URL.
A natural-language prompt parses into a scene config — palette, shape, slider deltas — with detected-token chips showing exactly what the parser caught. Every parameter remains a live control, so a prompt is a starting point, not a black box.
The full state of the studio — scene, palette, render engine, post FX, camera, motion, audio bindings — is encoded in the URL hash and persisted to localStorage. Reload, share, or paste a config; the scene comes back identical.
Type a scene description, hit submit. The parser maps tokens to a palette, a shape, and slider deltas. Detected-token chips make the mapping visible and editable.
Every parameter is a live control. Render engine, post FX, motion, camera, audio bindings — all under sliders, toggles, and one-click style packs.
PNG (1× / 2× / 4×), WebM video, GIF, or PNG sequence ZIP. Picture-in-picture and an embed snippet generator for sharing in other tools.
The URL hash encodes the entire state. Copy, paste, send — the recipient lands on the exact same scene, ready to remix.
VFX Studio is a Vite-built React app on top of @react-three/fiber for the Three.js layer. The render pipeline supports seven built-in engines — distort, PBR, toon, matcap, wireframe, x-ray, neon — plus a custom GLSL fragment shader editor that compiles user code at runtime.
Audio reactivity comes from a 3-band spectrum split (bass / mid / treble) with beat detection driving particle bursts and slider modulation. Web MIDI is wired in as an alternative input, with learn-mode binding from any controller knob to any slider.
Heavier dependencies are lazy-loaded on demand — gifenc for GIF export and jszip for PNG sequence bundling — so the initial bundle stays lean. The full app deploys to GitHub Pages via a CI workflow that builds with the production base path.
Natural language seeds the scene; sliders carry it the rest of the way. The prompt parser is fast and predictable, never a black box that fights the user’s next move.
localStorage persistence, URL-hash share, copy / paste config, JSON export, and 50-step undo / redo. State is never trapped inside a single tab or session.
Style packs — Vaporwave, Cyberpunk, Holographic, Liquid Mercury, Cathode, Brutalist, Dreamcore, Plasma — collapse a full visual identity into a single click before the tuning starts.
Every export route assumes the user wants a clean frame: hide-UI mode, aspect-ratio letterbox, composition grids, and stat overlays that vanish when it matters.
Prompt-driven WebGL, audio-reactive scenes, custom GLSL, and one-click capture — in the browser.