Soap bubble shader playground

1 test · 1 finished runs (1 agent, 0 raw one-shot) · 1 live demo

The prompt

Build a single self-contained index.html (Three.js from a CDN) showing interactive soap bubbles. Each bubble uses a custom shader for thin-film iridescence (colour changes with view angle and film thickness), plus a fresnel rim and a reflection from a procedural environment. Click to blow a new bubble from the cursor. Bubbles drift on a gentle noise wind field, bounce softly off each other, and pop with a small particle burst when they touch the floor or are clicked. Include a UI slider for film thickness, wind strength and bubble count (max 60), and an FPS readout. One file, no build step, no external assets. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.