Animate bietet zwei WebGL-glTF-Optionen.
Die Standardoption ermöglicht die Integration mit Three.js, Babylon.js oder einem Wiedergabepaket für Standard-glTF.
Sie ist vollständig standardkonform.
Hier ist eine einfache Animation eines Koalas mit einem Schwert.
Die Erstellung von Content für diese neue Plattform funktioniert ähnlich wie für Flash Player oder HTML5 Canvas.
Ich rufe die Veröffentlichungseinstellungen (Publish Settings) auf für diese WebGL-glTF-Standard-Datei.
Hier kann ich Ausgabenamen (Output name) und -speicherort angeben sowie das Ausgabeformat: GLB oder GLTF.
Ich kann die Bildauflösung (Image Resolution) eingeben und festlegen, ob Leerzeichen in der JSON-Datei entfernt werden sollen (Remove white spaces in JSON file).
Standardmäßig ausgewählt sind „Zeitleistenschleife“ (Loop timeline) und „Ausgeblendete Ebenen einschließen“ (Include hidden layers).
Ich gebe als Ausgabenamen „koala“ ein und wähle „Veröffentlichen“ (Publish).
Und schon wurde der Content veröffentlicht.
Ich habe sandbox.babylonjs.com aufgerufen.
Hier kann ich nun eine glTF- oder GLB-Datei hineinziehen, um sie standardkonform wiederzugeben.
Ich navigiere zu den veröffentlichten Dateien.
Unter „assets“, „koala“, „Scene_1“ ist die GLB-Datei, die ich vorhin erstellt habe.
Ich ziehe die Datei ins Wiedergabefenster.
Und hier ist mein Koala.
Dateien vom Typ „WebGL glTF Standard“ lassen sich auf konformen Plattformen wiedergeben.
Es gibt aber Einschränkungen.
Nehmen wir diese Animation als Beispiel.
Sie zeigt einen älteren Mann, der tanzt.
Auch für diese Animation will ich eine GLB-Datei veröffentlichen.
Ausgeblendete Ebenen sollen nicht eingeschlossen werden.
Ich wähle „Veröffentlichen“ (Publish).
OK.
Bei der Wiedergabe mit babylon.JS sehen wir den alten Mann, aber sein Fuß ist losgelöst von seinem Knöchel.
Es gibt auch einige Probleme mit Ebenen.
Solche Fehler können auftreten, während die Unterstützung ausgebaut wird.
Sie lassen sich aber umgehen.
Mit Funktionen in Animate lassen sich Elemente beispielsweise teilen oder in Bitmaps konvertieren, anstatt sie zu transformieren und zu neigen, was der Grund für das Problem eben war.
Das ist dieselbe Animation auf Basis von „WebGL glTF Extended“.
Wie der Name schon sagt, wurde die Funktionalität erweitert, im Dokumenttyp „WebGL glTF Extended“.
Die erweiterte Version ist speziell auf Animate ausgerichtet, also auf erweiterte Animation mit Interaktivität, Unterstützung für Filter und Transformationen wie Neigung, die Probleme wie vorhin verursachen können, bei der Standardversion.
Das will ich jetzt testen.
Ich wähle „Steuerung“ (Control), „Testen“ (Test).
Da ist er.
Das Ergebnis der Veröffentlichung mit Animate ist eine flüssige Animation.
