Claude-of-Duty 是一个基于 Three.js r180 和 WebGL2 的浏览器第一人称射击游戏 Demo，目标是用纯代码生成接近 3A FPS 的视觉和玩法体验。项目没有美术资源，纹理、网格、动画、音效全部在加载时程序化生成，运行时主要依赖 three。仓库的亮点不仅是游戏本身，也包括一套面向视觉回归、性能剖析和自动化截图的工程工具链。对于中国开发者来说，它更适合作为 Three.js/WebGL 高级渲染、程序化内容生成、AI 辅助开发流程和浏览器游戏工程架构的学习样例，而不是可直接商业化发布的完整 FPS 产品。
适用领域
WebGL 游戏开发 / Three.js 高级渲染 / 浏览器 FPS 游戏 / 程序化内容生成 / 实时图形学 / 游戏物理与角色控制 / Web Audio 音频合成 / AI 辅助软件工程 / 性能分析与视觉回归测试
配置难度
高。该项目涉及 WebGL2、Three.js 高级渲染、实时阴影、后处理、程序化材质、物理引擎、FPS 控制、AI、音频合成和性能分析等多个复杂领域。普通前端开发者可以运行和体验，但要深入理解或二次开发，需要较强的图形学、游戏引擎和浏览器性能优化基础。
商业价值
中等偏高，主要体现在技术展示、研发学习和工具链参考，而非直接商业发行。它可以作为 Web 端 3D 游戏能力展示、AI 代码生成案例、程序化内容生成实验平台或图形学教学项目。对于商业游戏团队，其代码和工具可提供灵感，但若要做正式产品，仍建议结合成熟引擎、美术资产管线、稳定物理中间件和更完善的性能适配方案。
01
技术亮点
- 无美术资源：所有纹理、模型、动画和音效都由代码程序化生成，适合研究 procedural generation
- 渲染管线复杂：包含 HDR、级联阴影、MRT prepass、GTAO、TAA、motion blur、bloom、EV100 metering、LUT、AgX composite 等现代实时渲染技术
- 物理系统从零实现：包括 BVH、swept-capsule 角色控制器、刚体、CCD、PBD ragdoll、多层子弹穿透等
- 浏览器端实现较完整 FPS 子系统：玩家移动、武器、AI、UI、音频、粒子、贴花、爆炸效果等均有覆盖
- 工具链质量较高：提供截图、固定 baseline、像素级 imagediff、性能 profile、脚本化 playtest 等工程工具
- 对性能问题有清晰记录：README 详细解释了 shader lazy compile 导致的卡顿，以及通过 shader pre-warm 解决的问题
- MIT 许可，便于学习、修改和二次实验
- README 对项目不足有诚实评估，便于开发者判断技术边界和真实质量
02
目标用户
- 希望学习 Three.js/WebGL2 高级渲染管线的前端或图形开发者
- 正在研究浏览器端 3D 游戏架构的游戏开发者
- 对程序化纹理、程序化网格、程序化音效感兴趣的技术美术或独立开发者
- 想了解 AI Agent 如何协作生成大型代码库的研发团队
- 需要参考自动化截图、图像 diff、性能 profiling 工具链的工程团队
- 高校图形学、游戏开发、Web 3D 课程的学习者或教师
03
配置要求
- 需要支持 WebGL2 的现代浏览器，例如 Chrome、Edge 或较新的 Chromium 内核浏览器
- 需要 Node.js 与 npm 环境
- GPU 性能要求较高，集成显卡或低端设备可能帧率较低
- 在高 DPR 屏幕，例如 Retina 屏幕上渲染压力明显增大
- 项目主要运行依赖为 three，但开发、测试和工具脚本还可能依赖 npm 安装的配套包
- 若使用截图、baseline、profile、playtest 等工具，需要本地可运行 headless Chromium 或相关浏览器自动化环境
- 当前 README 未提到后端服务、数据库、云服务或 API Key 配置，整体偏纯前端本地运行
04
适用场景
- 作为 Three.js 大型项目架构参考，学习 render、materials、physics、player、weapons、ai、ui、audio 等子系统如何拆分
- 研究浏览器中实现 HDR、阴影、GTAO、TAA、motion blur、bloom、LUT、AgX composite 等渲染技术
- 学习程序化生成材质、纹理、武器模型、城市街区、粒子、声音的工程实现方式
- 参考无外部资源依赖的 Web 游戏 Demo 制作方式
- 学习如何构建可复现截图、像素级图像回归测试和 WebGL 性能分析工具
- 作为 AI 生成大型游戏代码的案例研究，分析多 Agent 协同开发的收益与问题
- 基于 MIT 许可进行二次实验、课程演示或技术博客拆解
05
部署与配置
- 确保本机已安装 Node.js，建议使用较新的 LTS 版本
- 克隆仓库：git clone https://github.com/mshumer/Claude-of-Duty.git
- 进入项目目录：cd Claude-of-Duty
- 安装依赖：npm install
- 启动开发服务器：npm run dev
- 浏览器打开 http://127.0.0.1:5173
- 点击画布锁定鼠标指针后开始操作
- 基础操作：WASD 移动，鼠标瞄准，左键开火，右键瞄准，R 换弹，Shift 冲刺，Ctrl 蹲伏，Space 跳跃，Q/E 倾斜，Esc 释放鼠标
06
风险与注意事项
- 项目虽然目标是接近现代 Call of Duty，但作者明确说明尚未达到商业 3A 水平，视觉质量仍有明显差距
- 帧率压力较大，在 Apple silicon Retina DPR 2 的 ultra preset 下优化后也约为 28-30 fps，低端设备体验可能较差
- 代码规模较大，约 55k 行并包含 11 个子系统，新开发者理解和改造成本较高
- 程序化纹理在近距离可能显得像噪声，难以替代真实扫描或手工制作的高质量贴图
- 角色、手部、间接光、武器材质等方面仍存在明显短板
- 由于是 AI Agent 生成和协作开发的案例，代码一致性、长期可维护性、隐藏 bug 需要进一步审查
- 自研物理、AI、渲染系统虽然适合学习，但若用于生产项目，风险高于成熟引擎方案
- 浏览器 WebGL2 技术栈受设备、浏览器、驱动影响较大，跨平台稳定性需要额外测试
- 仓库 topics 为空，生态定位和社区文档可能不如成熟框架清晰
2026-08-01
第2名
新收录 · github_search
2026-07-31
第2名
新收录 · github_search
2026-07-30
第3名
新收录 · github_search
2026-07-29
第4名
新收录 · github_search
2026-07-28
第4名
新收录 · github_search
2026-07-27
第11名
新收录 · github_search
