Liquid chrome

Create a React application using react-three-fiber and three.js that renders a full-screen, interactive liquid surface simulation.

Core Simulation Logic:

• Implement a GPU-based 'Ping-Pong' FBO (Frame Buffer Object) simulation to solve the wave equation.
• Use a Simulation Shader that tracks height (Red channel) and velocity (Green channel). It should propagate waves using a neighbor-average (Laplacian) approach and apply viscosity damping.
• Mouse clicks or touch drag events should write to the simulation texture to create ripples.

Rendering & Aesthetics:

• Use a Render Shader that calculates surface normals dynamically based on the simulation height map.
• Implement 11 distinct visual modes, switchable via Arrow Keys. The modes must include:
  1. Dark Chrome: Cinematic metallic look with subtle film grain.
  2. Holographic: Iridescent rainbow colors based on Fresnel angle with faint digital noise.
  3. Molten Gold: High-contrast gold with sharp specular highlights.
  4. Midnight Ocean: Deep blue/teal colors.
  5. Vaporwave: Pink-to-cyan gradient, a retro grid reflection effect, heavy CRT static fuzz, and scanlines.
  6. Radioactive Slime: Glowing toxic green.
  7. Oil Slick: Dark surface with turbulent interference patterns and gritty texture.
  8. Magma: Cracks of hot glowing lava cooling into dark rock.
  9. Glacial: Icy white/blue with sharp refraction.
  10. Deep Space: Dark nebula look with sparkling stars and high ISO sensor noise.
  11. Thermal Burst: A specific grainy aesthetic featuring a deep blue background transitioning to electric blue, magma orange, and core white based on wave height, overlaid with heavy animated film grain.

Technical Constraints:

• The simulation resolution should be around 512x512.
• Include a generic noise/grain function in the shader to apply retro 'fuzz' to specific modes (Vaporwave, Oil Slick, Deep Space, etc.).
• Ensure the canvas is full-screen and handles device pixel ratio correctly.

‍

‍