Interactive Along the River During the Qingming Festival

它是什么

《清明上河图》互动版是 Xian | 弦 开发的一款纯客户端横向网页体验。它没有把静态古画切成条块或做平移浏览，而是借助 AI 生成的素材、动态分层渲染与浏览器原生的 Canvas 2D，重建出一整条可行走的北宋街市。用户操控画面中央的角色，穿行于三个繁华城区，途中会遇到自主行动的市民、被触发的叙事事件、变化的天气，以及河上的行船。

核心价值主张

该项目把一幅被动观看的鸟瞰长卷，转化为可以走进去的、地面视角的鲜活世界：

• 可穿行的 2D 多层世界：在 6,516 世界单位内渲染 141 个动态岸上角色、分层的店铺内景、桥梁与水路，且不依赖笨重的 3D 运行时。
• 贴合环境的物理：落脚点会依据桥面高度与透明精灵轮廓计算，避免移动时出现悬空或穿地。
• 叙事事件编排：NPC 之间的物品交接——如送茶、递布、集市讨价还价——共用单实例道具渲染，避免重复道具的显示 bug。
• 互动行船（「过虹桥」）：用户拖动带有张力反馈的纤绳，帮助货船穿过桥拱，并解锁可收藏的画稿。

它可能替代谁

当前现实与局限

• 纯客户端状态：项目没有后端服务，用户进度、已解锁画稿与自定义交互状态无法跨设备或跨会话同步。
• 优化前曾掉帧：岸上角色密集且未做剔除时，帧率一度跌到 25 FPS，后来才加入视口剔除与更新频率限制。
• 偶发精灵排序边界情况：严格的 2D 层级顺序需要针对性手动修补，以防角色穿进家具或从桥栏上脱离。
• 没有完整 3D 纵深：由于相机采用正交 2D 投影，用户无法拐进支巷，也无法探索临街立面背后的空间。

结论

首要建议 这是数字文化遗产保护与 vibe coding 的一个鼓舞人心的标杆。它证明：把 AI 视觉合成与 Canvas 2D 分层结合，无需重型 3D 引擎的负担，也能把古典艺术变成可响应、可互动的游乐场。

开发历程与迭代闭环

作者从功能体验目标出发，而非先定稿美术设定，并向 Codex 提出核心规则：横向滚动形式、可行走的街市、独立的 NPC 行为、宋代主题。在 Codex 生成一套统一的美术基线模板（沉静的水墨渲染与低饱和土色）之后，其余场景沿着三个连续区域逐步扩展。

数据与变现

• 用户触达：发布到 X 数小时内获得 3,400+ 次浏览与数十次转发/收藏。
• 变现：免费网页实验，无变现、无付费墙、无后端依赖。
• 规模：横跨 3 个主要城区（6,516 坐标单位），包含 141 个独立 NPC 与 7 段脚本化的交易与生活遭遇。
• 渲染性能：从最初 25 FPS 的瓶颈优化到标准浏览器上约 55 FPS 的流畅表现。

社区反响与关键争议

社交平台上的最初反响，称赞它把静态数字博物馆档案变成了鲜活、可探索的游戏化体验。网页开发者之间的讨论聚焦于选择 Canvas 2D 而非 Three.js，不少人称赞其轻量架构与移动端快速加载。也有人注意到它在 AI 辅助素材一致性上的巧妙平衡：生成的美术既保持了北宋绘画的克制氛围，又不至于像拼贴的通用 AI 作品。