Animate에는 두 개의 WebGL-glTF 옵션이 있습니다.
표준 옵션을 선택하면 Three.js, Babylon.js 등 표준 glTF 재생 패키지와 통합할 수 있고 표준을 완벽하게 준수합니다.
여기 코알라가 칼을 들고 움직이는 기본 애니메이션이 있는데요.
이 새로운 플랫폼용 콘텐츠를 만들어보죠.
Flash Player 또는 HTML5 Canvas를 대상으로 변환할 때와 동일한 방식입니다.
제작 설정을 살펴보죠.
이는 WebGL-glTF Standard 파일인데요.
제작 설정에서 출력 이름과 위치를 지정합니다.
출력 포맷은 GLB와 glTF 중에서 선택할 수 있죠.
이미지 해상도를 지정하고 'JSON 파일에서 공백 제거' 여부를 설정할 수 있습니다.
표준에서는 타임라인 반복과 숨겨진 레이어 포함을 선택할 수 있죠.
출력 이름을 koala라고 입력하고 제작을 누르면 자동으로 제작됩니다. sandbox.babylonjs.com에서 glTF 또는 GLB 파일을 표준 준수 재생에 놓을 수 있습니다.
방금 제작한 파일이 있는 위치는 assets로 이동하여 koala Scene_1 폴더로 이동하면 방금 만든 GLB 파일이 있습니다.
이 파일을 재생에 바로 놓아 보겠습니다.
코알라가 나타났네요.
WebGL-glTF 표준은 표준 준수 재생에서 재생되지만 제한 사항이 있습니다.
예를 들어 이 애니메이션을 사용해 보죠.
재생해 보면 남자가 춤추고 있습니다.
이 애니메이션에 대한 GLB 파일을 제작해 보겠습니다.
이번에는 숨겨진 레이어를 포함하지 않고 제작을 클릭하고 확인을 클릭합니다. babylon.JS 재생으로 다시 돌아가 보겠습니다.
어르신을 보면 발이 발목에 제대로 붙어 있지 않네요.
몇 가지 레이어 문제도 있습니다.
지원이 진화함에 따라 이러한 유형의 문제를 보게 될 것입니다.
이때 이 문제를 해결할 수 있는데 Animate의 기존 기능을 사용하면 됩니다.
분리하거나 비트맵으로 변환하지만 이 문제를 일으키는 변형 왜곡을 사용하지 않습니다.
WebGL-glTF Extended를 사용한 동일한 애니메이션이 있습니다.
이름에서 알 수 있듯이 glTF 기능을 확장한 것으로 glTF 확장 문서 유형입니다.
확장 버전은 Animate만을 위한 옵션으로 고급 애니메이션에 집중하는데 인터랙티브 요소, 필터 지원, 표준 버전에서 이 발의 문제를 일으킨 왜곡과 같은 변형이 포함되어 있습니다.
이제 테스트해 보죠.
컨트롤 메뉴에서 테스트를 클릭합니다.
제대로 움직이네요.
Animate로 제작하면 캐릭터가 매끄럽게 움직이는 결과를 얻을 수 있습니다.
