· Claude Fable 5.1 + Claude Code · 同题横评:赛博朋克雨夜城市

五处 smoothstep 边界写反,SwiftShader 直接当常量:雨为什么不见了

同一道雨夜城市题,Fable 5.1 在 Claude Code 里跑了 82 轮、$6.43,六轮渲染校验。最值得记的是第三、四轮那个 bug:五处 smoothstep 的边界参数写反了,这个 SwiftShader 构建把它当常量求值,于是 100 万颗雨一颗都看不见。

俯视角度的赛博朋克雨夜城市,方块状高楼带青紫窗光,一道探照灯光束斜穿画面,地面湿滑反光
运行演示 WebGL · 会占用显卡
拖动旋转 · 滚轮缩放 · 空格暂停 · 1/2/3 切配色 在新窗口全屏打开 ↗

这是怎么做出来的

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

这是整个演示栏目里最值得读的一次调试记录,因为它踩的是一个只在特定实现上才暴露的坑。

六轮渲染校验,每轮都检查 readydemoError、页面与控制台错误、__DEMO_INFO、像素统计、 det=1 的确定性、key=2/key=3 的配色切换,以及不带 t 的自由运行:

  1. 一个 TDZ bug:let 声明排在 init() 之后。提升解决。
  2. 整幅过曝,平均亮度 0.59。降雨滴 alpha、bloom 强度与阈值、窗光亮度、曝光。
  3. – 4. 找到雨为什么不见了:五处 smoothstep 的两个边界参数写反了,而这个 SwiftShader 构建对边界反序的 smoothstep 直接按常量求值。它先做了一份强制点大小与 alpha 的调试副本 确认现象,然后把每一处都改写成 1.0 - smoothstep(lo, hi, x)
  4. – 6. 抬环境光与雾,让没有任何一帧被纯黑主导;把探照灯沿航线铺开,并在 t=66 确认了一束完整光柱。

定稿:平均亮度 0.13–0.21,93% 以上像素非黑,t=7.5 两次哈希一致,软件渲染约 3 FPS。

第 3、4 轮那个 bug 是本组最好的论据:**它既不是语法错误,也不是逻辑错误,在符合规范的实现上 甚至可能正常工作。**没有一个静态检查会报它,模型「想清楚」也躲不开——只有把画面渲出来、 发现雨不见了、再写一份调试副本去隔离,才可能找到。

场景本身比 Astra 那一版更重:5,422 栋楼由单个 InstancedMesh 加固定 seed 布局生成,每五格一条街,沿相机航线挖出 60 米飞行走廊,市中心更高;窗光、随机闪烁、 霓虹招牌带、边缘灯条和楼顶信标全在片元着色器里按距离 LOD 绘制;湿地面采样一张半分辨率反射 渲染目标,叠流动扰动、两层扩散雨环、水洼遮罩和 Fresnel。指标更高,但机位偏高、整体偏暗, 构图的「城市感」不如 Astra 那一版。

操作:鼠标移动视差、滚轮缩放视角、空格暂停、1/2/3 切配色(霓虹夜雨 Neon Noir 等)、 拖动可临时自由查看,松手回到航线。

同组对比

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