Communitygithub.com

4ever-coder/ar-film-creator

可复用的 Codex 技能和 Canvas 2D 模板,用于创建基于手势追踪的 AR 胶片效果。

ar-film-creator 是什么?

AR Film Creator 是一个面向开发者的 Codex 技能与 Canvas 2D 模板,专门用于构建基于手部追踪的增强现实(AR)胶片效果。其核心价值在于将复杂的 AR 视觉特效开发流程标准化、可复用,避免了每次从零搭建项目。该技能支持通过 PowerShell 脚本快速创建新项目,并提供了预设风格(preset)系统与引擎级行为修改的清晰路径。它基于 MediaPipe Tasks Vision 实现手部追踪,并严格保护引擎的关键不变性,如屏幕位置排序、图层组成顺序、启动流程等。用户可以通过编辑 `src/filter-presets.js` 或 `src/app.js` 来定制视觉效果或交互逻辑。该技能适用于 Codex 或类似 AI 编码代理(如 Claude Code、Cursor)环境,旨在提升 AR 特效开发的效率和可靠性。

兼容平台~Claude Code✓Codex CLI~Cursor
npx skills add 4ever-coder/ar-film-creator

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

AR Film Creator

将捆绑的项目作为新项目的唯一真实来源。保持相机、追踪、几何体、遮挡和服务器流水线稳定,除非用户明确请求更改交互。

路由请求

  1. 对请求进行分类:
    • 新项目:实例化 assets/browser-ar-template。
    • 仅样式更改:编辑 src/filter-presets.js。
    • 行为更改:首先编辑预设几何体或运动值。
    • 引擎更改:仅在预设字段无法表达请求时编辑 src/app.js。
  2. 对于每次样式或行为更改,请阅读 references/preset-contract.md。
  3. 当将视觉需求转换为参数时,请阅读 references/filter-recipes.md。
  4. 在更改追踪、几何体、渲染顺序、遮罩、启动或文件结构之前,请阅读 references/architecture.md。

创建项目

运行:

powershell.exe -NoProfile -ExecutionPolicy Bypass -File scripts/New-ArFilmProject.ps1 -Destination "<absolute-output-path>"

要求目标路径不存在或为空。不要隐式覆盖现有项目。

自定义样式

  1. 保留一个现有预设作为已知良好的回退方案。
  2. 在 src/filter-presets.js 中添加一个新的唯一 kebab-case 预设 ID。
  3. 只更改 references/preset-contract.md 定义的字段。
  4. 保持正好三个图层定义,除非用户明确请求引擎级别的层数更改。
  5. 通过 ?preset=<预设-id> 测试预设。
  6. 确认未知的预设 ID 会回退到 transparent-film。

保护引擎不变量

  • 保留 MediaPipe Tasks Vision 的固定 URL 和模型回退行为。
  • 保留两只手的屏幕位置排序。
  • 保留控制行 4、8、12 和 20。
  • 保留相邻表面之间的共享边界。
  • 允许折叠和扭曲过渡;不要重新引入自相交冻结。
  • 保留合成顺序:背景、胶片、手/前臂、控件。
  • 保留 localhost 启动和相机权限错误处理。
  • 保持派生项目无构建过程,除非用户明确请求其他技术栈。

验证

运行:

powershell.exe -NoProfile -ExecutionPolicy Bypass -File scripts/Test-ArFilmProject.ps1 -ProjectPath "<absolute-project-path>"

然后启动本地服务器并验证:

  1. 根路径、CSS、app.js 和 filter-presets.js 返回 HTTP 200。
  2. 模型加载完成。
  3. 演示模式渲染出四条弯曲的控制线和三个连接的表面。
  4. 请求的预设视觉效果明显不同。
  5. 扭曲动画在两个弯曲方向上都正常进行,不会冻结。
  6. 重置和平滑控件正常工作。
  7. 浏览器控制台没有项目错误。

当可用时,使用真实的浏览器自动化工具。将 MediaPipe 内部的“OpenGL 错误检查已禁用”警告视为信息性消息,除非伴随有实际错误。

报告

报告:

  • 添加的预设或引擎行为;
  • 更改的文件;
  • 如何选择和使用的样式;
  • 完成的验证;
  • 仍然需要用户进行的相机或硬件检查。

相关技能