Kage

它是什么

Kage 是一次可交互的、纯浏览器运行的五章式京都山寺夜行。它由 Meng To 构思并担任美术指导，与 Claude 协作完成，把 Three.js 的程序化 3D 元素与 AI 生成的 2D 背景场景板、分层前景抠图融合在一起，带来完全由页面滚动驱动的沉浸式叙事体验。

核心价值主张

该项目展示了如何在不依赖笨重 3D 资产管线或运行时构建系统的前提下，把生成式图像素材与程序化 WebGL 渲染结合起来。

• 零构建的静态架构：打包进单个独立的 index.html，使用内置的 Three.js r149，不用 npm 包、打包器或远程运行时依赖。
• 2D/3D 混合景深分层：把运行时程序化几何体（地形、寺庙建筑、鸟居、灯笼）与保留透明通道的 WebP 抠图和高分辨率背景板结合。
• 滚动同步编排：将 WebGL 相机位移、动态天气效果（雾、雨、飘落的树叶）与光照直接绑定到滚动进度。
• 电影级后期处理：集成了克制的泛光管线、暗角、动态景深模糊，以及为移动端与桌面端都做了适配的排版。

它可能替代谁

当前现实与局限

• 严格线性叙事：交互受限于滚动位置与指针轨迹，没有自由漫游的相机控制或分支叙事路径。
• 素材生成不一致：把静态 2D 生成图与运行时 3D 元素叠加，需要细致的人工美术指导，以避免透视错位。
• 授权受限：底层 Three.js 库仍是 MIT，但仓库并未对 Kage 原有的代码与视觉素材授予公开复用或再分发许可。
• 程序化范围固定：场景几何与建筑变化是为这一段特定行走程序化生成的，而非通用场景生成器。

结论

首要建议 Kage 是给希望打造高保真交互叙事的网页设计师与创意技术人的一份标杆研究。它证明：把 AI 图像合成与有针对性的 WebGL 程序化渲染结合，既能产出电影级效果，又能绕开庞大的素材管线与复杂构建环境。

开发历程与迭代闭环

代码库通过 Meng To 与 Claude 的人机协作结对完成，借助 PROMPT.md 中记录的明确提示词来定义布局规则、运动语言与程序化场景参数。

数据与变现

• GitHub 热度：发布首月内获得 1.6k stars 与近 300 次 fork。
• 分发成本：零服务器运行成本；设计为可直接从 GitHub Pages 或任意静态文件托管服务提供，无需后端基础设施。
• 商业模式：免费的公开网页实验；作为开放的技术展示，以及模块化网页 agent 技能的基础研究。

社区反响与关键争议

该项目凭精致的美学与轻量的技术足迹，在创意编程与 AI 设计社区迅速获得关注。讨论常聚焦于其「免构建、单文件」的理念，开发者称赞用 python3 -m http.server 就能直接运行和阅读代码的简单。也有少量讨论提到源码的专有许可限制，与网页创意编程实验通常的开放精神形成对比。