Communitygithub.com

AR Film Creator

CodexスキルとCanvas 2Dテンプレートを再利用可能にし、手指追跡によるAR映画効果を作成します。

AR Film Creator とは?

AR Film Creatorは、CodexのようなAIエージェントが手指追跡型ARフィルムエフェクトを迅速に作成・カスタマイズできるように設計されたスキルです。このスキルは、ブラウザベースのテンプレート、プリセットフィルター、エンジン設定を提供し、開発者が新しいプロジェクトをゼロから始めたり、既存のスタイルを変更したり、動作を調整したりする際のガイドラインを提供します。主にMediaPipe Handsによる手指追跡を活用し、ローカルサーバーで動作し、カメラ権限の処理も組み込まれています。スキルを使用するには、新しいプロジェクトの作成、スタイルのカスタマイズ、エンジンの不変条件の保護、バリデーションの実行といった明確なワークフローに従います。これにより、開発者は複雑なARエフェクトをコードで表現し、フィルム製作のワークフローを効率化できます。

対応~Claude Code✓Codex CLI~Cursor
npx skills add 4ever-coder/ar-film-creator

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

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 "<絶対パス出力先>"

空の、または存在しない出力先が必要です。既存のプロジェクトを暗黙的に上書きしないでください。

スタイルのカスタマイズ

  1. 既存のプリセットを既知の正常動作するフォールバックとして保持します。
  2. src/filter-presets.js に新しい一意のケバブケースのプリセットIDを追加します。
  3. references/preset-contract.md で定義されたフィールドのみを変更します。
  4. ユーザーが明示的にエンジンレベルのレイヤー数変更を要求しない限り、レイヤー定義は正確に3つ保持します。
  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 "<絶対パスプロジェクト>"

次にローカルサーバーを起動して以下を確認します:

  1. ルート、CSS、app.js、filter-presets.js がHTTP 200を返す。
  2. モデルの読み込みが完了する。
  3. デモモードが4本の曲線コントロールラインと3つの接続されたサーフェスをレンダリングする。
  4. 要求されたプリセットが視覚的に区別できる。
  5. ツイストアニメーションがフリーズせずに両方の曲がり方向をクロスする。
  6. リセットとスムージングコントロールが機能する。
  7. ブラウザコンソールにプロジェクトエラーが0件である。

利用可能な場合は実際のブラウザ自動化ツールを使用してください。MediaPipe内部の「OpenGLエラーチェックが無効です」という警告は、実際のエラーが伴わない限り情報として扱ってください。

報告

以下を報告します:

  • 追加されたプリセットまたはエンジンの動作;
  • 変更されたファイル;
  • スタイルの選択と使用方法;
  • 完了した検証;
  • まだユーザーが必要とするカメラまたはハードウェアのチェック。

関連スキル