Exporting glTF from Animate

Hi, I am Ram Kulkarni, an Engineering Manager in Adobe Animate team . Though I have been with Adobe for more than a decade, I joined Adobe Animate team and took over engineering development responsibility almost an year and half ago. This is my first blog on Adobe Animate and I intend to write about Animate fairly regularly and give users a bit more insight into the technologies behind the features. Also, feel free to have a look at my personal blog.

Adobe Animate is a popular application for creating animations for variety of purposes. For example, character animation, interactive animation, advertisements and education content . Animate was formerly known as Flash Professional, which was primarily used for exporting animation as SWF (for Flash Player) or video. In recent years, Adobe Animate has been rearchitected to decouple authoring from the output formats. This has enabled us to add support for newer output formats such as ‘HTML5 Canvas’, SVG, Animated GIF and so on. While adding new output formats, we have retained the same authoring experience that users have relied upon since Flash Professional days. Our attempt at adding support for glTF output is a step in the direction of helping users take their workflows to 3D world.

In the last release of Adobe Animate, we added two additional export formats:

• WebGL-glTF Standard (Standard) and
• WebGL-glTF Extended (Extended).

These formats allow animations created from Animate to run in Web Browsers. As the names suggest, these formats use two specifications – WebGL for rendering and glTF for storing assets and animation data.

• WebGL provides GPU based rendering APIs in JavaScript for Web Browsers
• glTF is a specification for transmission of 3D models. However, this can also be used to store timeline based animations.

Why glTF?

When Animate team was evaluating formats for exporting Animation for WebGL, there were two main requirements :

1. format should be generic enough and not tied to any one runtime/player, so that users have option to run animations in a variety of applications.
2. it should be extensible.

glTF satisfied the above requirements. The specification is created with the active participation of number of organisations, including Adobe. And there are a number of glTF renderers available for a variety of platforms and languages. It also helped that one of the product teams in Adobe, Dimension, chose glTF as one of its export formats.

What can you do with glTF?

You can run the animation exported from Adobe Animate in glTF format in any application that can render glTF. Adobe Animate packages runtime to run glTF animation when you publish the document. It creates an HTML page with required JavaScript code to render glTF animation. You can either use the same HTML page, or render the glTF in your own web page with any player that can render glTF. Some of the JS libraries that can render glTF are BabylonJS, three.js etc. You can find more glTF loaders and engines here.

How to export to glTF format from Adobe Animate?

Broadly there are two ways to export animation in glTF format from Animate.

1. If you are creating a new document, select WebGL glTF Standard or ‘WebGL glTF Extended’ document type. Then you can test, using menu Control->Test, or publish, using menu File->Publish, your animation just as you would do for any other document type in Animate.

2. If you had started with a document of other document type (than WebGL glTF) then you can convert to glTF document type by selecting menu File->’Convert To’ and then selecting either ‘WebGL glTF Extended’ or ‘WebGL glTF Standard’ option.

Following video also explains how to export glTF animation from Animate. You can download the assets used in the tutorial from this Adobe Help page.

Publishing Vector Output to glTF

Adobe Animate is primarily a vector authoring tool, though you can certainly import images, video and sound. The following figure shows how vector shapes in Animate document are exported to glTF.

glTF exporter in Animate scans the timeline and converts vector shapes to images. You have an option to set scale factor for the exported images in the ‘Publish Settings’ dialog (go to File ->Publish Settings menu). Note that if a shape is not changed (deformed) between frames then only one image is created for the shape. In the glTF document, shapes are saved as nodes and meshes and transformations on shapes are specified in ‘animation’ section. Though as an Animate user you do not need to understand the format of glTF document, refer to glTF 2.0 specification if you are curious to know how shapes and animation data are stored.

glTF Document Types – Standard vs extended

As mentioned earlier, Adobe Animate provides two new document types for glTF – WebGL glTF Standard and WebGL glTF Extended. The standard document type strictly follows glTF specification. If you are planning to run animation outside the player/runtime provided by Animate, then you should use standard document type. For example, if you want to use glTF published from Animate in players like BabylonJS or three.js, then use standard document type.

However, if you want to create interactive animation (using scripts), then you should use extended document type. Animation published from extended document type may not work properly in external glTF players.

Limitations of standard doc type

• glTF format does not support scripting or event handling out of the box. Therefore animation published from standard doc type does not support interactivity.
• Skew transformation is not supported, because glTF specification lacks support for it.
• Animate is a 2D authoring tool, but glTF is a format for 3D models. In Animate, objects on the same layer are placed at the same Z depth. The runtime is expected to render 2D objects on the same layer, in the order they are drawn. However glTF specification does not specify rendering order for objects. Animate glTF publisher adds a small Z-offset for objects on the same layer. This works fine when camera is close to the objects. But could cause flickering (Z-fighting) if camera is moved far away from the objects.
• No support for audio, again because glTF does not support it

All the above limitations are addressed in Extended Doc Type. Adobe Animate inserts additional metadata in the published glTF document that allows Animate runtime to render glTF animation without above limitations. Extended doc type also allows animators to use rich set of APIs and Events to interact with assets.

Conclusion

WebGL glTF document types in Adobe Animate 2019 allow you to create animations and render them in the web browser. glTF player packaged with Animate uses WebGL, which allows animation to take advantage of GPU acceleration.

Two doc types are supported for glTF publishing – Standard and Extended.

• Use standard doc type if you expect animation to run in external players.
• Use extended doc type if you want to create interactive animation – but note that extended glTF publishing would run best in the runtime provided by Animate.

Both standard and extended Doc types are marked as Beta, because they lack support for some of the more commonly used features of Animate. For example masks and filter effects are not supported. Support for these features will be added in the future releases.

We look forward to your feedback on this feature.