中秋走马灯不用 WebGL我让码道 Agent 手写了整条 3D 投影管线转出嫦娥、玉兔和吴刚今天是 2026 年 9 月 25 日中秋节。中秋节自然绕不开两个话题天上的月亮和人间的灯。这次我选了后者里最有「动感」的一件——走马灯。走马灯是古人的「动画」——烛火加热气流推着灯罩旋转剪影一幕幕转过灯窗。今年我想复刻它但加一条硬约束禁用 WebGL、禁用 Three.js只用 Canvas 2D 手写整条 3D 投影管线——旋转矩阵、透视投影、背面剔除、深度排序、光照衰减全部自己写还要求三幕剪影嫦娥奔月、玉兔捣药、吴刚伐桂必须用数学参数化在代码里生成禁止贴任何图片。照旧由华为云码道 CodeArts 的代码智能体模型 GLM-5.2从一条提示词开始完整实现。仓库公开、带 32 个单元测试、双击即跑。开源仓库https://atomgit.com/sdf56g99988/mid-autumn-galloping-lamp这篇文章记录我把这个作品从提示词推到交付的全过程——包括这次真实的波折会话三断、PAT 失效 401、推送一度卡死最后怎么全程用码道把仓库推上去的。一、为什么是「中秋走马灯」一个能让算法「硬」起来的中秋物件给中秋选题时我立了三条尺子算法要真——不能是贴图和动画库堆出来的「假 3D」题材要应景——非中秋不可的物件而不是换皮通用 demo天上地下能勾连——中秋赏的月最好能「照」进作品里。走马灯三条全占它本质是一个圆柱面绕轴旋转 中心点光源照明的几何问题——旋转矩阵、透视投影、深度排序、径向光照衰减每一环都是实打实的 3D 管线数学而「三幕中秋剪影」逼着 Agent 把嫦娥、玉兔、吴刚用路径参数化函数画出来等于手写矢量建模最后我把Meeus 月相算法搬进光照系统——今晚盈凸月 99.0% 的照明比直接决定灯罩的整体明暗天上的月亮和地上的灯在算法层打通了。一句话定题不靠 WebGL把一盏会转的中秋走马灯「算」出来。二、作品是什么一盏转起来的灯四个实时读数「中秋走马灯」是单页应用打开就是一个深色夜景中的圆柱灯罩在自转灯罩圆柱面切成 2880 个面片柱面均匀分布三幕剪影——嫦娥奔月、玉兔捣药、吴刚伐桂全部由参数化路径函数生成转到哪幕讲哪幕当前面向你的剪影是哪一幕面板就显示该幕名称和文化注解转到嫦娥时「嫦娥吞服不死药身轻如燕飞入月宫……」灯芯光照光源在圆柱中轴剪影亮度随径向距离衰减烛火用多频正弦叠加扰动亮度与色温产生自然的忽明忽暗月相联动Meeus 算出今日月相2026-09-25 盈凸月 99.0%灯罩整体明暗与真实月亮同步交互拖拽改变方位角/俯仰角、滚轮缩放视距、转速滑块、暂停/复位视角实时参数FPS、旋转角、方位角、俯仰角、视距、焦距、面片数全部实时刷新。技术红线从提示词第一行就写死零外网请求、零 CDN、零 npm 依赖、禁 WebGL/Three.js、剪影禁止外贴图片素材。整个作品就是index.htmlcss/style.cssjs/domain.jsjs/main.js 一份测试双击即跑。三、提示词把「手写管线」钉死到函数级这次的提示词写得格外细因为我最怕的就是 Agent「偷偷」用 WebGL 或者用贴图糊弄。关键约束逐条立好管线手写绕 Y 轴自转旋转矩阵、透视投影视距投影到屏幕坐标、背面剔除、深度排序后绘制——每一步都要在代码里看得见剪影参数化三幕剪影必须用数学函数/路径参数化在代码里生成禁止外贴图片素材月相联动Meeus 简化算法计算当日月相照明比面板显示月相名称与百分比并明确点出今天 2026-09-25 应为盈凸月约 98%明天中秋次夜满月——关键日期的天文真值直接当验收锚点数学核心全部纯函数放js/domain.js不碰 DOM可独立单测测试要毒旋转矩阵正交性、透视投影近大远小、深度排序稳定性、月相关键日期09-25 盈凸、09-26 满月、1 万次随机输入不抛错。提示词在码道工作台就绪的样子四、架构一条「教科书级」的纯函数管线Agent 给出的领域层结构比我预想的还干净——js/domain.js被切成 11 个纯函数模块头部注释就是一张管线图1. 向量与旋转矩阵 vec / rotateY / rotateX / rotateZ 2. 透视投影 project 3. 深度排序 sortFacesByDepth 4. 背面剔除 isBackface 5. 光照衰减 lightAttenuation 6. Meeus 简化月相 toJulianDay / moonPhaseFrac / moonIllumination / moonPhaseName 7. 剪影参数化生成 circlePath / ellipsePath / rectPath / sineRibbonPath silhouetteChangeE / silhouetteRabbit / silhouetteWuGang 8. 圆柱参数化 cylinderPoint / cylinderNormal 9. 点在多边形内 pointInPolygon 10. 灯罩面片构建 buildLampFaces 11. 烛火摇曳 flicker / flickerColorTemp几个值得点名的实现细节旋转矩阵——右手系绕 Y 轴自转是走马灯的主旋转注释里直接给出分量式x x·cosθ z·sinθ y y z -x·sinθ z·cosθ透视投影——标准视距投影screen (x·f/(fz), y·f/(fz))测试用「近大远小」规律钉死正确性。剪影参数化——最惊艳的部分。嫦娥的飘带是sineRibbonPath正弦缓带玉兔的身体是ellipsePath的组合吴刚的斧头是rectPath旋转叠加——三幕剪影全是一行行数学没有任何素材。烛火摇曳——flicker用多频正弦叠加不同频率不同相位扰动亮度flickerColorTemp同步扰动色温暖橙与亮黄之间呼吸般摆动。开发过程中 Agent 在写测试时的样子——它甚至在纠结「盈凸 99% 该用范围断言还是精确值」这种细节五、测试32 例月相用天文真值锚定测试用 Node 内置node:test零测试框架依赖32 例分 10 个 suite旋转矩阵正交性任意角度旋转后向量长度不变保长透视投影近大远小同尺寸物体近者屏幕投影更大深度排序稳定性面片排序结果稳定且正确远者先画背面剔除法线朝向相机的面保留、背离的剔除光照衰减亮度随径向距离单调递减且有界Meeus 月相关键日期2026-09-25 盈凸 99%、2026-09-26 满月 100%——中秋前后的关键日期拿天文真值直接做断言算法错不了1 万次随机输入管线全函数随机轰炸不抛错。六、这次真实的坑推送认证卡了整整一晚这篇必须诚实记录——不是所有事都顺利。坑一我在网站上手动建仓被用户当场纠正。项目开始时我习惯性想在 atomgit 网页上点「新建仓库」表单被用户一句话点醒「git 项目不用你建啊你可以控制码道啊。」——对建仓本身就是交给 Agent 提示词的一部分「请帮我创建一个全新的代码仓库…」全程码道不需要人工去网页上操作。这是我流程认知上的一次校准。坑二PAT 失效 401。Agent 本地 5 个 commit 全部完成、32/32 测试通过之后卡在最后一步沙箱是无头环境ag auth login的 OAuth 浏览器流程走不通而之前给它的 PAT 被 atomgit 返回401 Unauthorized: token not found——令牌无效或已过期。Agent 给出的报告非常清楚本地 5 个 commit 全部就绪npm test 32/32 通过file:// 双击实测通过。阻塞点推送认证。坑三解法还是全程码道。我没有改成本地推送而是用浏览器接管 atomgit 的设置 → 访问令牌页面替用户把「新建访问令牌」表单点好名称、有效期 2027、项目读写权限用户只需要看一眼确认新令牌发给 Agent 后它用临时 credential 文件完成ag auth登录 →git push -u origin main→推送后立即删除临时文件remote URL 里不残留 token——这个善后细节它自己做得很干净。Agent 的最终交付报告七、本地验收clone 下来重新跑一遍我这边照例独立验收不信任口头汇报git clone https://atomgit.com/sdf56g99988/mid-autumn-galloping-lamp.git node --test tests/domain.test.mjs结果ℹ suites 10 ℹ tests 32 ℹ pass 32 ℹ fail 032/32 全过与我本地跑的完全一致。file:// 双击运行实测Canvas 1600×1244 正常渲染、无控制台错误、拖拽/滚轮/暂停交互全生效、面板显示「盈凸月 99.0% / 当前幕嫦娥奔月 / 面片数 2880」。八、提交历史五步走一步不乱0471bc9 chore: 初始化仓库结构README/LICENSE/.gitignore/package.json 728ac97 feat(domain): 领域层纯函数——旋转矩阵/透视投影/深度排序/背面剔除/光照衰减/Meeus月相/剪影参数化/烛火摇曳 bd50c4b test(domain): node:test 单测 32 例 c8cbaa6 feat(ui): 走马灯渲染三件套domain 改 UMD 以支持 file:// 双击运行 ecc2401 docs: 完善 README公式表/运行说明/红线自查/验收对照九、红线自查与五维自检红线状态依据禁止外网请求✅无 CDN、无字体下载、无图片外链file:// 直接运行零 npm 依赖✅package.json 仅用于 node --test禁 WebGL/Three.js✅纯 Canvas 2D 手写管线剪影禁贴图✅三幕剪影全部参数化路径函数生成维度权重本作品对应架构30%领域层 11 模块纯函数管线 / 渲染层三件套分离UMD 双端通用代码30%手写旋转矩阵/透视投影/深度排序/背面剔除/光照衰减剪影参数化feat/test/docs 提交分离安全20%零联网/零存储/零依赖/零外链1 万次随机输入不抛错UI/UX15%拖拽视角/滚轮缩放/转速滑块/暂停当前幕文化注解月相联动明暗博文5%本篇提示词→架构→算法→坑→验收→复现全链路结语走马灯是中国人一千年前发明的「帧动画」——烛火做引擎剪影做帧。这次用码道 Agent 复刻它最过瘾的不是视觉而是那条看得见的管线每个面片的位置都来自一行旋转矩阵每处明暗都来自一次距离衰减今晚灯罩的亮度上限来自 Meeus 算出的盈凸月 99.0%。月亮在天上多圆一分你屏幕上这盏灯就多亮一分——同一个 Meeus 算法既算出天上的月亮也点亮了地上的灯。整个过程中代码智能体GLM-5.2承担了全部实现与自验我的工作收敛成三件事定红线、盯进度、做验收——外加被用户纠正一次流程建仓也交给码道以及替它跑通最后一公里的认证。这些真实的摩擦比「一键生成」的爽文更接近 AI 编程的日常。今晚盈凸 99%明晚满月 100%。灯先转起来月亮随后就圆。中秋快乐。