Communitygithub.com

4ever-coder/ar-film-creator

재사용 가능한 Codex 스킬 및 Canvas 2D 템플릿으로, 손 추적 기반 AR 필름 효과를 구현합니다.

ar-film-creator란 무엇인가요?

이 스킬은 개발자가 브라우저 기반 증강 현실(AR) 필름 효과를 빠르게 생성할 수 있도록 설계된 Codex(예: Claude Code, Cursor 등)용 지침입니다. '4ever-coder/ar-film-creator'는 손 추적(MediaPipe Tasks Vision 사용)을 통해 3D 표면 위에 필름 효과를 오버레이하고, 사전 설정(preset) 기반 스타일 변경과 엔진 수준의 동작 수정을 모두 지원합니다. 새로운 프로젝트를 생성할 때는 제공된 PowerShell 스크립트를 통해 템플릿을 인스턴스화하며, 스타일 변경은 'filter-presets.js'에서 프리셋을 추가하는 방식으로 이루어집니다. 이 스킬의 핵심은 엔진 불변 속성(예: MediaPipe 모델, 손 위치 정렬, 합성 순서, 로컬호스트 시작)을 보호하면서도 유연한 커스터마이징을 허용하는 점입니다. 또한, 제공된 테스트 스크립트로 HTTP 상태, 모델 로딩, 데모 모드 동작, 프리셋 시각적 차이 등을 검증하여 안정성을 보장합니다. 사용자는 실험적인 AR 프로토타입 제작부터 완성도 높은 인터랙티브 필름 효과까지 이 스킬을 활용할 수 있습니다.

지원 대상~Claude Code✓Codex CLI~Cursor
npx skills add 4ever-coder/ar-film-creator

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

AR Film Creator

번들된 프로젝트를 새 프로젝트의 소스 진실(source of truth)로 사용하십시오. 사용자가 명시적으로 상호작용 변경을 요청하지 않는 한, 카메라, 추적, 지오메트리, 폐색(occlusion) 및 서버 파이프라인을 안정적으로 유지하십시오.

요청 분류

  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. 기존 프리셋을 알려진-정상(known-good) 폴백으로 유지하십시오.
  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 "<절대-프로젝트-경로>"

그런 다음 로컬 서버를 시작하고 다음을 확인하십시오:

  1. 루트, CSS, app.js 및 filter-presets.js가 HTTP 200을 반환합니다.
  2. 모델 로딩이 완료됩니다.
  3. 데모 모드가 네 개의 곡선 제어선과 세 개의 연결된 표면을 렌더링합니다.
  4. 요청된 프리셋이 시각적으로 구별됩니다.
  5. 비틀기 애니메이션이 멈춤 없이 양쪽 굽힘 방향을 교차합니다.
  6. 리셋 및 스무딩 컨트롤이 작동합니다.
  7. 브라우저 콘솔에 프로젝트 오류가 0입니다.

가능한 경우 실제 브라우저 자동화 도구를 사용하십시오. MediaPipe의 내부 "OpenGL error checking is disabled" 경고는 실제 오류가 동반되지 않는 한 정보 제공용으로 처리하십시오.

보고

다음을 보고하십시오:

  • 추가된 프리셋 또는 엔진 동작;
  • 변경된 파일;
  • 스타일 선택 및 사용 방법;
  • 완료된 검증;
  • 여전히 사용자가 수행해야 하는 카메라 또는 하드웨어 확인 사항.

관련 스킬