零依赖单文件 HTML 的 GPU 霓虹流体模拟器

Claude Opus 5.5 写出了 WebGL 流体模拟:拖动光标会注入发光染料并卷成漩涡,玻璃质感面板可调节物理参数。

Claude Code + Three.js(仅代码)Wandy 2
真实模型 · 360°两者都基于同一张照片:左边是 Claude Code(Opus 5.5)用 Three.js 代码建模的一次未经修改的运行结果;右边是 Wandy 2。

创建精细的 3D 模型

单靠代码只能做出简单的形状。Wandy 2 能用一张照片生成带纹理的 3D 模型,直接用在同一个场景里。

Claude Opus 5.5 提示词

Write a complete, single-file HTML document containing a high-performance, GPU-accelerated interactive Eulerian Neon Fluid Simulation.

Strict Technical & Aesthetic Requirements:

1. Architecture & Performance:
   - Single-file: All HTML, CSS, and JavaScript/GLSL shaders inline.
   - Zero external dependencies: Pure WebGL 1.0 or 2.0 (no Three.js, no Pixi, no external libraries).
   - GPU-Computed Fluid Dynamics: The simulation must run entirely via ping-pong Framebuffer Objects (FBOs) using custom fragment shaders for:
     a) Advection (velocity & dye)
     b) Divergence calculation
     c) Pressure Poisson solver (Jacobi iteration, 20-30 iterations per frame)
     d) Gradient subtraction / velocity projection
     e) Vorticity confinement (adds turbulent swirls and prevents the fluid from turning into dull, blurry mush).

2. Visual Fidelity (The "Neon Smoke" Look):
   - Pitch-black void background (`#050508`).
   - Additive / High-Dynamic-Range blending for dye injection.
   - Dynamic palette: Each cursor flick or touch drag injects high-luminosity neon dye that cycles smoothly through vivid cyber hues (electric cyan `#00F0FF`, hot magenta `#FF007F`, deep ultraviolet, and radiant gold).
   - Display shader enhancements: Include a post-processing pass directly in the final render shader that applies subtle bloom/glow, tone mapping, and chromatic aberration around the swirling edges of the fluid.

3. Interaction:
   - Mouse & Touch: Rapid cursor movement or dragging injects velocity proportional to mouse speed, along with dense glowing dye.
   - Passive Ambient Motion: When idle, generate subtle procedural curl noise or gentle drifting vortices so the canvas is never completely static.
   - Controls: A sleek, ultra-minimal glassmorphism HUD tucked into a corner (with auto-hide on inactivity):
     * Viscosity slider
     * Dye dissipation / persistence slider
     * Splat radius slider
     * "Clear Canvas" button
     * Toggle button to cycle color themes (Cyberpunk, Thermal Inferno, Bioluminescent Deep).

4. Production Polish:
   - Automatically handle high-DPI displays and `resize` events without stretching or clearing the FBO textures.
   - Graceful fallback check for floating-point texture support (`OES_texture_float` / `OES_texture_half_float`).
   - Clean, bug-free, fully implemented code with zero placeholders or truncated comments.

Return only the fully populated HTML file ready to run directly in Chrome/Safari/Firefox.

如何使用这条提示词

  1. 把提示词粘贴到 Claude Opus 5.5(聊天或 Claude Code),保存生成的 HTML 文件。

  2. 按需修改配色、主题名称、背景色或滑块种类,做出自己的风格。

  3. 在浏览器中打开并拖动光标,再让模型继续加主题或音效等改动。

原帖你是作者吗? 请联系我们修改或删除此页面