· Claude Fable 5.1 + Claude Code · 同题横评:百万粒子形态变换

DNA、星系、环面结、立体文字:Fable 5.1 + Claude Code 的形态变换

同一道形态变换题,Claude Code 里的 Fable 5.1 跑了 65 轮、64 次工具调用、$4.68。四轮迭代的每一条都记着修了什么:过曝洗白、环面结被相机压成一个「8」、过渡态像一团均匀的雾、窄视口裁切。停留态平均亮度压到 0.04–0.06。

百万粒子构成的 DNA 双螺旋形态,深色背景上呈蓝紫渐变
运行演示 WebGL · 会占用显卡
拖动旋转 · 滚轮缩放 · 空格暂停 · 1/2/3 切配色 在新窗口全屏打开 ↗

这是怎么做出来的

模型
Claude Fable 5.1 + Claude Code
us.anthropic.claude-fable-5-1
方式
Agent 自主迭代
Claude Code 2.1.266
思考档位
high
对话轮数
65
工具调用
64 次
输出 token
52.5k
耗时
17 分 48 秒
成本
$4.68
产物
598 行单文件 HTML
人工修复

四种形态是 DNA 双螺旋(t=2)、旋涡星系(t=8)、环面结(t=14)、立体文字 ASTRA(t=20), 过渡态在 t=5 / 11 / 17 / 23,能看到爆散再聚合的过程。100 万粒子,det=1 的确定性检查跑了三次都过。

四轮迭代修的东西,每一条都是只有把页面渲染出来才可能发现的问题

  1. 功能全跑通,但 additive 叠加过曝、DNA 被洗成白色、星尘过密。单粒子亮度从 0.28 降到 0.075。
  2. 环面结在 t=14 时相机正好从侧面看,形状压成一个「8」。把结绕 Y 轴转 90° 并略微倾斜, 粒子更偏向管壁;四种形态密度差异很大,于是加了按形态的亮度补偿。
  3. 过渡态像一团均匀的雾。把每粒子的错峰启动幅度加大到 50%,爆散方向更偏径向、幅度减小, 让过渡中能同时看到源形态与目标形态的碎片。
  4. 强调色比例微调,为窄视口加了保持水平视场的 FOV 自适应,做最终回归。

第 2 条尤其说明问题:「环面结从这个机位看是个 8」不是任何静态检查能发现的,也不是模型 “想清楚”就能避免的——它得先把那一帧画出来、看见,才知道要转 90°。

实现上,4 组目标位置在 CPU 端用固定 seed 的 mulberry32 一次性生成,存进 position / aP1 / aP2 / aP3 四个 BufferAttribute;文字形态用离屏 Canvas2D 绘制后采样像素再挤出厚度, 并带了无字体时的兜底。形态索引、进度、缓动、爆散、噪声扰动、颜色与近大远小全部在顶点着色器里 由 uTime 算出来。停留态平均亮度 0.04–0.06,过渡态 0.09–0.11,既没有黑屏也没有泛光洗白。

操作:拖动旋转、滚轮缩放、空格暂停、1/2/3 切配色(含 Solar Ember、Deep Ocean)、?t= 停在任意时刻。

同组对比

演示用的 three.js r170 由本站自己托管,运行时不请求任何第三方域名。 作者以个人身份发布,测试自付费用,内容不代表任何雇主立场。