零依赖单文件 HTML 的 GPU 霓虹流体模拟器
Claude Opus 5.5 写出了 WebGL 流体模拟:拖动光标会注入发光染料并卷成漩涡,玻璃质感面板可调节物理参数。
Claude Code + 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.如何使用这条提示词
把提示词粘贴到 Claude Opus 5.5(聊天或 Claude Code),保存生成的 HTML 文件。
按需修改配色、主题名称、背景色或滑块种类,做出自己的风格。
在浏览器中打开并拖动光标,再让模型继续加主题或音效等改动。
原帖你是作者吗? 请联系我们修改或删除此页面
相似的提示词
浏览全部提示词
Claude Opus 5.5皮筋捆西瓜实验:可挤压、会爆开的 3D 浏览器小玩具
林悦己Cheer
Claude Opus 5.5带岩浆房的交互式 3D 火山剖面模拟
Konstantin Saifoulline
Claude Opus 5.5WebGPU 果冻压机玩具:水果软糖被液压机压碎
Vib3Coded
Claude Opus 5.5WebGPU果冻压机玩具:压碎软糖水果片并抓取投掷
Vib3Coded
Claude Opus 5.5滚动即可拆解的机械腕表:纯WebGPU单HTML文件
Paruchh
Claude Opus 5.5单文件交互式 SVG 地球图集:地球仪、六大考察与内部剖面
Gadgetify
