DeepWeather Globe
Rescuing a 3D weather snow globe from an AI Studio export — custom GLSL shaders, FBM terrain, Google Maps grounding, and learning when to cut features.
DeepWeather Globe — FBM noise procedural island terrain and glowing building geometry inside a reflective glass sphere.
A 3D weather snow globe built in Google AI Studio and rescued through the ais- export pipeline. Type a city name, Gemini 2.5 Flash queries Google Maps for real-time weather data, and the globe rebuilds — FBM noise sculpts terrain across 4 types (island, coastal, mountain, inland), tiered buildings light their windows at night via custom GLSL pseudo-random shaders, and GPU-driven particle systems produce snow, rain, and volumetric clouds with sphere-containment fading. The Veo 3.1 video studio generates text-to-video or image-to-video clips alongside it. The rescue involved fixing hallucinated package versions from the export, upgrading to React Three Fiber 9 + Drei 10 for React 19 compatibility, and cutting an Imagen image-generation tab that had nothing to do with the core experience. 10 source files, 1,541 lines of code, 2 commits, shipped in a single evening.
Timeline
Cracked open another AI Studio export expecting the usual hollow scaffold — found a 3D weather snow globe with 4 custom GLSL shaders, FBM terrain generation, and Google Maps grounding actually wired up. Mapped 10 source files across a Vite + React 19 + Three.js stack: WeatherSystem.tsx (432 lines) holds snow, rain, and volumetric cloud particle systems all driven by hand-written vertex/fragment shaders with sphere-containment fading and FBM noise carving. IsometricCity.tsx (391 lines) does procedural terrain with 4 terrain types (island, coastal, mountain, inland), rejection-sampled tree placement, and tiered buildings with a custom shader that lights up windows at night using per-cell pseudo-random functions. The geminiService.ts calls Gemini 2.5 Flash with { googleMaps: {} } tool config to pull real-time weather for any city — temperature, condition, terrain type, building style — and extracts grounding metadata chunks for source attribution links in the UI. Three Gemini API features total: grounded weather, Imagen 4.0 image generation, and Veo 3.1 video generation. Hallucinated package versions in the original export needed fixing, but the architecture was real — not scaffolded, not hollow.
Halfway through the rescue, the agent got sidetracked into thinking DeepWeather was an image generator — I had to pull it back. The AI Studio export came with three Gemini-powered tabs: the 3D weather globe (the actual app), a Veo 3.1 video studio, and an Imagen 4.0 prompt box. The agent latched onto the Imagen tab as if that was the product. It's not. It's a generic text-to-image input that has nothing to do with procedural weather visualization — just a corollary that got exported alongside the real feature. Ripped out ImagenStudio.tsx, its enum value, its service function, and its orphaned screenshot. The nav went from three tabs to two: Globe and Veo. The demo GIF capture also hit a wall — the Chrome DevTools MCP kept dropping the connection when interacting with WebGL pages, so the final recording used macOS screencapture -v as a fallback and got cropped/converted with ffmpeg. The GIF shows the default globe rotating but not a full city-search-and-transform cycle, because that required sustained browser interaction the MCP couldn't maintain. Shipped to GitHub as-is — the live app is the demo.
First boot threw a black screen and a fatal reconciler crash, but one dependency bump brought 1,541 lines of custom shaders to life with live Gemini weather grounding. The crash was Cannot read properties of undefined (reading 'ReactCurrentOwner') — React 19 removed the internal that @react-three/[email protected] depended on through [email protected]. Bumping R3F to ^9.7.0 and @react-three/drei to ^10.7.7 while ditching orphaned three-stdlib instantly cleared the console and booted the Three.js canvas. Feeding a live API key into geminiService.ts activated Gemini 2.5 Flash with { googleMaps: {} } tool grounding. Searching "Reykjavik" returned 10°C cloudy night conditions and dynamically re-parameterized the scene: uNight flipped the procedural building shader to illuminate windows, FBM noise carved volumetric clouds drifting across the sphere, and snow particle shaders faded out smoothly at the glass boundary. Verified the live Google Maps attribution chips in the UI, patched the dead API key banner in VeoStudio.tsx, and captured the hero state across 10 source files without a single runtime error.