Communitygithub.com

AR Film Creator

Wiederverwendbare Codex-Fertigkeit und Canvas 2D-Vorlage für handverfolgte AR-Filmeffekte.

Was ist AR Film Creator?

AR Film Creator ist eine spezialisierte Fertigkeit für KI-Agenten (Codex), die die Erstellung und Anpassung von Augmented-Reality-Filmeffekten auf Basis der Handverfolgung ermöglicht. Sie enthält ein gebündeltes Browser-AR-Projekt mit einer stabilen Pipeline für Kamera, Tracking, Geometrie, Okklusion und Server – ideal für Entwickler, die schnell AR-Prototypen oder Filmfilter erstellen möchten. Die Fertigkeit unterstützt neue Projekte, Stiländerungen (über Filter-Presets), Verhaltensanpassungen (Geometrie/Bewegung) und Engine-Modifikationen. Sie folgt strengen Invarianten, wie der Beibehaltung der Kompositionsreihenfolge (Hintergrund, Filme, Hände/Unterarme, Steuerelemente) und der lokalen Server-Startprozedur. Validierung erfolgt über ein PowerShell-Testskript und manuelle Überprüfung im Browser. Ideal für Entwickler, die mit Tools wie Claude Code, Cursor oder Codex arbeiten, um interaktive AR-Filmeffekte ohne tiefe 3D-Engine-Kenntnisse zu realisieren.

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

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Was macht AR Film Creator?

Verwenden Sie das gebündelte Projekt als Grundlage für neue Projekte. Behalten Sie die Kamera-, Tracking-, Geometrie-, Okklusions- und Server-Pipeline stabil, sofern der Benutzer nicht explizit Interaktionsänderungen wünscht.

Anfrage leiten

  1. Klassifizieren Sie die Anfrage:
    • Neues Projekt: Instanziieren Sie assets/browser-ar-template.
    • Nur Stiländerung: Bearbeiten Sie src/filter-presets.js.
    • Verhaltensänderung: Bearbeiten Sie zuerst die voreingestellten Geometrie- oder Bewegungswerte.
    • Engine-Änderung: Bearbeiten Sie src/app.js nur, wenn die voreingestellten Felder die Anfrage nicht ausdrücken können.
  2. Lesen Sie für jede Stil- oder Verhaltensänderung references/preset-contract.md.
  3. Lesen Sie beim Übersetzen einer visuellen Vorgabe in Parameter references/filter-recipes.md.
  4. Lesen Sie references/architecture.md, bevor Sie Tracking, Geometrie, Rendering-Reihenfolge, Maskierung, Start oder Dateistruktur ändern.

Projekt erstellen

Führen Sie aus:

powershell.exe -NoProfile -ExecutionPolicy Bypass -File scripts/New-ArFilmProject.ps1 -Destination "<absoluter-ausgabepfad>"

Erfordert einen nicht vorhandenen oder leeren Zielordner. Überschreiben Sie kein bestehendes Projekt implizit.

Stil anpassen

  1. Behalten Sie ein vorhandenes Preset als bekannten sicheren Fallback bei.
  2. Fügen Sie eine neue eindeutige Preset-ID im Kebab-Case in src/filter-presets.js hinzu.
  3. Ändern Sie nur die Felder, die in references/preset-contract.md definiert sind.
  4. Behalten Sie genau drei Ebenen-Definitionen bei, es sei denn, der Benutzer fordert explizit eine engine-seitige Änderung der Ebenenanzahl.
  5. Testen Sie das Preset über ?preset=<preset-id>.
  6. Bestätigen Sie, dass eine unbekannte Preset-ID auf transparent-film zurückfällt.

Engine-Invarianten schützen

  • Behalten Sie die fest zugewiesenen URLs der MediaPipe Tasks Vision und das Fallback-Verhalten der Modelle bei.
  • Behalten Sie die Sortierung der beiden Hände nach Bildschirmposition bei.
  • Behalten Sie die Steuerzeilen 4, 8, 12 und 20 bei.
  • Behalten Sie die gemeinsamen Grenzen zwischen benachbarten Oberflächen bei.
  • Erlauben Sie Falt- und Drehübergänge; führen Sie kein Einfrieren bei Selbstüberschneidung wieder ein.
  • Behalten Sie die Kompositionsreihenfolge bei: Hintergrund, Filme, Hände/Unterarme, Steuerelemente.
  • Behalten Sie den Start über localhost und die Fehlerbehandlung der Kameraberechtigung bei.
  • Halten Sie das abgeleitete Projekt build-frei, es sei denn, der Benutzer fordert explizit einen anderen Stack.

Validieren

Führen Sie aus:

powershell.exe -NoProfile -ExecutionPolicy Bypass -File scripts/Test-ArFilmProject.ps1 -ProjectPath "<absoluter-projektpfad>"

Starten Sie dann den lokalen Server und überprüfen Sie:

  1. Root, CSS, app.js und filter-presets.js geben HTTP 200 zurück.
  2. Modelle laden vollständig.
  3. Der Demo-Modus rendert vier gebogene Steuerlinien und drei verbundene Oberflächen.
  4. Das angeforderte Preset ist visuell unterscheidbar.
  5. Die Drehanimation überschreitet beide Biegerichtungen ohne Einfrieren.
  6. Reset- und Glättungs-Steuerelemente funktionieren.
  7. Die Browserkonsole enthält keine Projektfehler.

Verwenden Sie ein echtes Browser-Automatisierungswerkzeug, sofern verfügbar. Behandeln Sie MediaPipes interne Warnung „OpenGL error checking is disabled“ als informativ, es sei denn, sie wird von einem tatsächlichen Fehler begleitet.

Bericht

Berichten Sie:

  • das hinzugefügte Preset oder Engine-Verhalten;
  • geänderte Dateien;
  • wie der Stil ausgewählt und verwendet wird;
  • durchgeführte Validierung;
  • Kamera- oder Hardwareprüfungen, die noch vom Benutzer durchgeführt werden müssen.

Verwandte Skills