零代码做出零重力水滴玩具:Claude Code 产出 2200 行单文件 WebGL
AlexisDC · reddit · 2026-09-28
一位无技术背景的作者完全靠 Claude Opus 5.5 + Claude Code 用 prompt 做出一个「零重力形变水滴」数字玩具：80mm 的水滴悬浮失重，可戳、拉、切割，在水和水银间切换，还能变成方块、不可能三角或字母 A，全部约 2200 行代码装在一个 HTML 文件里，作者一行代码没写。
技术实现（据 Claude 自述）：
- 无流体模拟、无 3D 网格——水面由约 150 个球谐波形叠加而成，各自按真实频率摆动（Rayleigh 模式），水的主摆频 0.48Hz 与教科书值吻合
- 用自定义 GLSL shader 逐像素 ray marching 绘制形状，因此能变成带孔洞的字母 A
- 每种颜色的光在水中折射角不同，地面亮斑来自光线追踪
- 基于 WebGL 2，Three.js 只负责初始化，手机笔记本都能跑
坦白的作弊：真实水滴摆动衰减太快，作者让摆动衰减加快 12 倍、涟漪放慢到 40% 以便观看。
改进方向（Claude 建议）：纯球体时改用普通 mesh 降低手机端 ray marching 开销、去掉 Three.js 改裸 WebGL 2 加快加载、迁移 WebGPU 做真流体模拟让水滴可分裂。
作者的迭代方式也值得参考：从球体+材质滑块起步，满意后再逐步加形状、涟漪、物理和音效。
「编程与Agent」频道最新
- Gemini 可替 Pixel 用户致电商家订位查货,AI 表明身份 — rvp · 2026-09-28
- Anthropic 硬件标准 MHS 能否打通工厂旧设备与 AI 的连接 — burhop · 2026-09-28
- IndicBankBench：799 例基准测银行 AI 助手，最高可靠率仅 58.2% — NPCI · 2026-09-28
- Grok 4.8 曝光:已现身 Cursor 服务端模型列表,距 4.7 发布仅一周 — gaganghotra_ · 2026-09-28
- 让 AI 边干活边教学:把 ELI5 写进记忆的实用工作流 — thejasminejade · 2026-09-28
- Claude Code 一小时速成课：学会用 AI 构建与自动化一切 — anthara_ai · 2026-09-28