· Claude Fable 5.1 + Claude Code · 同题横评:分形 Raymarching 隧道

六轮才把隧道壁照亮:Fable 5.1 + Claude Code 的分形海绵

同一道分形隧道题,Fable 5.1 在 Claude Code 里跑了 69 轮、$4.80、六轮渲染校验。前五轮都在过曝和「尘埃看不见」之间来回,第六轮换成相机前方点光加半 Lambert,才解决隧道壁掠射角过暗的问题。

紫粉色调的高密度分形隧道内部,Menger 海绵孔洞层层向纵深收束,白色尘埃颗粒散布其间
运行演示 WebGL · 会占用显卡
拖动旋转 · 滚轮缩放 · 空格暂停 · 1/2/3 切配色 在新窗口全屏打开 ↗

这是怎么做出来的

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

六轮渲染校验,前五轮的记录基本是一条曲线:

  1. 严重过曝——尘埃薄雾叠发光项太强。
  2. – 3. 曝光修正了,但尘埃变得看不见,光照也偏平。
  3. – 5. 加强纵深与雾,让尘埃「少数亮、多数暗」。
  4. 定稿:改成相机前方点光加半 Lambert,解决了隧道壁在掠射角下过暗的问题。

第 6 轮那个诊断值得单独说:「掠射角下墙面太暗」是一个照明模型的问题,不是参数没调好。 前五轮一直在调曝光和雾的数值,直到第六轮才换了光照的算法。这种「调参调不出来、得换方法」的判断, 只可能来自反复看渲出来的画面。

定稿指标:__DEMO_READY=true__DEMO_ERROR=null、无页面/控制台/请求错误; ?t=7.5&det=1 两次哈希一致;首帧 1.8–3.1 秒,SwiftShader 下约 1.1 FPS; raymarch 默认跑 50% 分辨率(640×360),平均约 21 步/光线;t=7.5 / t=30 / 实时三种模式 平均亮度 0.27–0.35,既不黑屏也不过曝,远端隧道正确变暗,尘埃火花可见且被分形正确遮挡。

实现上:分形是 Menger 海绵的 KIFS 变体(旋转 → 折叠 → 排序 → 缩放),按 4 单位周期平铺, 再沿 simTime 驱动的弯曲路径挖出隧道,scale、折叠偏移、旋转都随时间缓慢「呼吸」。 raymarch 渲进 HalfFloat 渲染目标(rgb 存颜色、a 存命中距离),合成 pass 放大后把距离换算写入 gl_FragDepthEXT,100 万粒子尘埃据此做深度测试——和 Astra 那一版是同一个思路,密度和配色不同。

还留了几个 URL 参数可以自己调:rm(raymarch 分辨率比例)、stepsiterdust

操作:鼠标视差、滚轮缩放、空格暂停、1/2/3 切配色(Abyssal Neon / Ember Core / Verdant Circuit)、?t= 锁帧。

同组对比

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