# 超时空要塞:可曾记得爱 WebGL3D 还原 **Repository Path**: az13js/macross-dyrl-3d ## Basic Information - **Project Name**: 超时空要塞:可曾记得爱 WebGL3D 还原 - **Description**: 让DeepSeek V4.1 Flash根据动画MV,复原《超时空要塞:可曾记得爱》主题曲。代码文件全部0人工,由AI自行实现。仓库不含《超时空要塞:可曾记得爱》剧场版主题曲.mp4文件。 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-09-22 - **Last Updated**: 2026-09-22 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 超时空要塞 · 可曾记得爱 — WebGL 3D 还原 把《超时空要塞:可曾记得爱》剧场版主题曲(6:23)用**浏览器内的程序化 3D**重建为一段跟随音乐播放的 音乐影像。 不是逐帧描摹,而是:**分析原片 → 提取主体与配色 → 用代码搭出可复用的 3D 部件 → 编排成分镜时间线 → 对齐到歌曲节拍 → 在浏览器里播放**,并用无头浏览器反复做视觉检验。 > **关于本项目** > > 主体代码由 **DeepSeek V4.1 Flash** 生成。诚实说,目前的视觉效果还比较**粗糙**—— > 部件到位了,但审美还没到位:比例、光影、情绪浓度都还在"能跑"而非"好看"的区间。 > > 这份 README 记录的是**工程过程**(怎么分析、怎么测、怎么调出一个能跑的系统), > 而不是**艺术结论**。如果有人接手并想把它做到"值得看",最值得花时间的地方是: > 配色微调、材质质感、动画节奏的呼吸感、以及每一下闪光和每个部件的入场缓动。 > > 代码本身是干净的、可测试的、结构清晰的;但"结构清晰"不等于"好看"—— > 它只是一个让人能继续打磨的起点。 ``` 原片 1920×1080 / 23.976fps / 6:23 │ ├─ ffmpeg 场景检测 ──▶ 343 个剪辑点、344 个镜头(中位数 0.25s) ├─ 音频分析 ──▶ 109.05 BPM(置信度 0.98)、696 拍 ├─ 主体裁切 ──▶ 人物 / 标志 / 舞台 / 光斑 / 机械 └─ 配色聚类 ──▶ 采样色(k-means)+ 目测色(可追溯来源) │ ▼ 22 个精选分镜(覆盖全曲)· 14 个 3D 场景 · 25 个可复用部件 ``` --- ## 快速开始 ```bash npm install # 只装 three(已用国内镜像 registry.npmmirror.com) npm test # 299 个单元测试(纯 Node,不需要 GPU) npm run smoke # 22 项端到端检查:真实浏览器里跑活页面(需 firefox + geckodriver) npm run serve # http://127.0.0.1:8080/web/index.html ``` 播放页支持实时调节画质档位、分辨率上限、细节倍率与音频开关。时间轴可拖动。 **URL 即配置**(这让任何一帧都可被精确复现,也是自动化视觉检验的基础): | 参数 | 含义 | | --- | --- | | `?t=93.4` | 渲染该时刻的单帧后停止(静帧模式) | | `?shot=closeup` | 渲染该分镜的中点 | | `?tier=draft` | `draft` / `low` / `medium` / `high` / `ultra` | | `?w=1280&h=720` | 强制画布尺寸 | | `?detail=0.6` | 细节倍率 0.1–3 | | `?maxPixels=230400` | 渲染缓冲像素上限 | | `?audio=0` `?ui=0` | 关闭音频 / 关闭界面(用于截图) | --- ## 目录结构 ``` src/ core/ 纯逻辑,无 DOM / 无 three.js 依赖,全部可单测 easing.js 缓动、插值、与帧率无关的阻尼 rng.js 确定性随机(保证同一场景每次生成完全一致) timeline.js 分镜时间线、节拍吸附、摄影机采样 quality.js 画质档位、渲染尺寸解析、自适应分辨率 palette-data.js 重建配色表(每个色值都标注来源) engine.js WebGL 渲染器与分镜生命周期(唯一有浏览器依赖的模块) parts/ 可复用 3D 部件(只造几何,不知道分镜与时间) kit.js 赛璐璐材质、描边、几何工厂、动画钩子 stage.js 标志圆盘、聚光灯、舞台 space.js 金色光斑、星空、地球、星云 minmay.js 主角(比例表 + 姿势表 + 面部) mecha.js VF-1 女武神、SDF-1 马库罗斯、Regult zentradi.js 天顶星战士、生物战舰、巨像 fx.js 开场递物、能量光束、爆炸、HUD interior.js 舰桥、弹射甲板、战术网格 shots/ 编排层 scenes.js 把部件组合成“有灯光的布景” timeline-data.js 22 个分镜的数据、节拍网格 web/ 静态站点(无构建步骤,用 importmap 直接跑 ES 模块) tools/ 可复用的 Node 命令行工具(分析任意视频) scripts/ 静态服务器、无头截图、场景探针 test/ 299 个单元测试 scripts/smoke.mjs 活页面端到端检查(22 项) docs/ 架构、视觉风格、分镜表、工具说明 skills/ 可跨 Agent 复用的技能文档 ``` --- ## 三层验证,各有一个盲区 | 层 | 命令 | 覆盖 | 盲区 | | --- | --- | --- | --- | | 单元测试 | `npm test` | 纯逻辑、几何、时间线、DSP | 看不见 DOM | | 静帧截图 | `npm run capture` | 渲染结果、构图、配色 | 跑 `?ui=0`,不建控制面板、不走播放 | | 活页面 smoke | `npm run smoke` | 面板、播放、跳转、画质切换、id 唯一性、控制台 | 不检查画面好不好看 | 补上第三层是因为前两层有一个共同空洞,而一个真实缺陷正好落在里面: `index.html` 调了 `boot()`,`app.js` 又自动 boot 了一次,应用初始化两遍。第二次把 `getElementById('audio')` 解析成第一次刚注入面板的「Audio」复选框(id 重复,且复选框在文档顺序里更靠前)。 后果不止是点击 Play 抛 `audioEl.play is not a function` —— 复选框的 `paused` 是 `undefined`, 于是第二个渲染循环每帧把 `undefined` 写进节目时钟,**播放和跳转其实完全不动**(`t` 恒为 0)。 当时的临时验证脚本用了 `?audio=0`,恰好绕开了出错分支。 教训:验证脚本的参数不能恰好避开你要验证的代码 —— 现在 `smoke.mjs` 特意开着音频, 并断言「时钟确实前进了」,而不只是「没抛异常」。 ## 工具(对任意视频都可复用) ```bash # 一次性结构分析:元数据 + 剪辑点 + 接触表 + 主体裁切 + 配色 + 节拍 node tools/analyze.mjs "