Pose Animator는 2D 벡터 일러스트를 촬영하고 PoseNet 및 FaceMesh의 인식 결과를 기반으로 포함 곡선을 실시간으로 애니메이션 합니다. 

컴퓨터 그래픽에서 스켈레톤 기반 애니메이션 아이디어를 빌려 벡터 문자에 적용합니다.

이것은 TensorFlow.js를 사용하여 브라우저에서 실시간으로 실행됩니다. 더 멋진 TF.js 데모를 확인하십시오.

https://github.com/yemount/pose-animator 

공식적으로 지원되는 Google 제품이 아닙니다.

스켈 레탈 애니메이션에서 캐릭터는 두 부분으로 나타납니다.

1. 캐릭터를 그리는 데 사용되는 표면
2. 표면에 애니메이션을 적용하는 데 사용되는 상호 연결된 뼈의 계층 집합.

포즈 애니메이터에서 표면은 입력 SVG 파일의 2D 벡터 경로로 정의됩니다. 뼈 구조의 경우 Pose Animator는 PoseNet 및 FaceMesh의 키포인트를 기반으로 설계된 사전 정의 된 리그 (뼈 계층 구조) 표현을 제공합니다. 

이 뼈 구조의 초기 포즈는 캐릭터 일러스트와 함께 입력 SVG 파일에 지정되며 실시간 뼈 위치는 ML 모델의 인식 결과에 의해 업데이트 됩니다.

// TODO : 블로그 게시물 링크를 추가합니다. 기술 설계에 대한 자세한 내용은 이 블로그 게시물을 확인하십시오.

데모 1 : 카메라 피드 

카메라 데모는 웹캠 비디오 스트림에서 2D 아바타를 실시간으로 애니메이션 합니다.

데모 2 : 정적 이미지 

정적 이미지 데모는 단일 이미지에서 위치 된 아바타를 보여줍니다.

Build And Run 

종속성을 설치하고 빌드 디렉토리를 준비하십시오.

yarn

파일 변경 사항을 보고 dev 서버를 시작하려면

yarn watch

플랫폼 지원 

데모는 Desktop Chrome 및 iOS Safari에서 지원됩니다.

지원은 아직 테스트 되지 않았지만 Android의 Chrome 및 잠재적으로 더 많은 Android 모바일 브라우저에서 실행되어야 합니다.

자신 만의 디자인을 애니메이션 

1. 여기에서 샘플 골격 SVG를 다운로드하십시오.

2. 선택한 벡터 그래픽 편집기에서 새 파일을 만듭니다. 위 파일에서‘skeleton’이라는 그룹을 작업 파일로 복사하십시오. 노트 :

 -, 이 그룹에서 관절 (원)을 추가, 제거 또는 이름을 바꾸지 마십시오. 포즈 애니메이터는 이 명명 된 경로를 사용하여 골격의 초기 위치를 읽습니다. 관절이 없으면 오류가 발생합니다.

 -, 그러나 관절을 움직여 일러스트레이션에 삽입 할 수 있습니다. 4 단계를 참조하십시오.

3. 새 그룹을 만들고 '골격'그룹 옆에 '일러스트'라고 이름을 지정하십시오. 이것은 그림의 모든 경로를 넣을 수 있는 그룹입니다.

 -, '그림'에 경로 요소 만 포함되도록 모든 하위 그룹을 병합합니다.

 -, 현재 복합 경로는 지원되지 않습니다.

 -, 작업 파일 구조는 다음과 같아야 합니다.

    [Layer 1]
    |---- skeleton
    |---- illustration
          |---- path 1
          |---- path 2
          |---- path 3

4. 관절을 움직여 '골격'그룹의 샘플 골격을 그림에 삽입합니다.

5. 파일을 SVG 파일로 내 보냅니다.

6. 포즈 애니메이터 카메라 데모를 엽니 다. 모든 것이 로드 되면 SVG 파일을 브라우저 탭에 놓습니다. 당신은 그것이 삶에 온 것을 볼 수 있어야 합니다 : D