Creating and publishing a WebGL document

WebGL is an open web standard for rendering graphics on any compatible browser, without the need for additional plug-ins. WebGL is integrated completely into all the web standards of the browser allowing GPU accelerated usage of image processing and effects as part of the web page canvas. WebGL elements can be embedded with other HTML elements and composited with other parts of the page.

Although, most modern-day browsers support WebGL, visit this link to know more details about the exact versions that are supported.

Some browsers do not have WebGL enabled by default. To enable WebGL on your browser, see this article.

Animate CC now has two WebGL-glTF document types. You can use WebGL-glTF Standard document type to allow integration with any of the standard WebGL-glTF packages. It is is completely standards-compliant.

You can refer to the following content if you are using Animate CC 18.0 or any of the earlier versions of Animate CC.

Animate CC allows you to create and publish rich interactive content to the Web Graphics Library (WebGL) format. Since WebGL is fully integrated into browsers, it allows Animate to leverage GPU accelerated usage of graphics processing and rendering, as part of the web page canvas.

This new document type allows you to create content and quickly publish to a WebGL output. You can leverage powerful tools within Animate to create rich content, but render WebGL output that runs on any compatible browser. This means that you can use the traditional Animate timeline, workspace, and drawing tools to natively author and produce WebGL content. Most commonly used browsers support WebGL, there by, allowing Animate to render content on most web platforms.

In Animate CC, the WebGL document allows you to quickly create and publish content for the WebGL format. To create a WebGL document:

1. Launch Animate CC.
2. On the Welcome Screen, click the WebGL(Preview) option. Alternatively, select File > New menu option to display the New Document dialog. Click the WebGL(Preview) option.

You can use the Test Movie feature of Animate to preview or test your content. To preview, do the following:

1. Within Animate CC, press Ctrl+Enter on Windows and CMD+Enter on MAC. This launches your default browser and renders the WebGL content.

Animate allows you to create and publish WebGL content natively from within.

To publish your WebGL document, do the following:

1. Select File > Publish Settings to display the Publish Settings dialog. Alternatively, select File > Publish. if you have already specified Publish Settings for WebGL.
2. On the Publish Settings dialog, specify values for:

3. Click Publish to publish WebGL content to the specified location.

The published WebGL output contains the following files:

You can import and embed audio to the your WebGL document, control the playback using the sync settings (event, start, and stop), and play timeline audio at runtime. WebGL currently supports only .wav and .mp3 formats.

For more information on working with audio, see Using Sounds in Animate.

You can migrate existing content within Animate to a WebGL document. To its end, Animate allows you to migrate via copying or importing content manually. Also, when working with multiple documents within Animate, it is a common practice to copy content across documents as Layers or assets in the Library. Although, most features of Animate are supported, some content types are modified to better accommodate the WebGL format.

Animate contains several powerful features that help produce visually rich content. However, considering that some of these features are native to Animate, they will not be supported in a WebGL document. Animate has been designed to modify such content to a supported format, and visually indicate when a tool or feature is not supported.

The following are the types of changes that are applied when you migrate legacy content to an WebGL document.

For a full list of features that are not supported and their fallback values during migration, see this article.

Runtime bitmap caching lets you optimize rendering performance by specifying that a static movie clip (for example, a background image) or button symbol be cached as a bitmap at runtime. By default, vector items are redrawn in every frame. Caching a movie clip or button symbol as a bitmap prevents the browser from having to continually redraw the item, because the image is a bitmap and its position does not change. This provides a significant improvement in performance of rendering WebGL content.

For example, when you create an animation with a complex background, create a movie clip containing all the items included in the background. Then select Cache as Bitmap for the background movie clip in the Property inspector. During playback, the background is rendered as a bitmap stored at the current screen depth. Browser draws the bitmap on the Stage quickly and only once, letting the animation play faster and more smoothly.

Bitmap caching lets you use a movie clip and freeze it in place automatically. If a region changes, vector data updates the bitmap cache. This process minimizes the number of redraws that browser must perform, and provides smoother, faster rendering performance.

To enable Cache as Bitmap property for a movieclip symbol, select the movieclip instance, and select Cache as Bitmap from the Render drop-down on Properties Inspector (Window > Properties).

When using Cache as Bitmap property on WebGL content, consider the following:

• Maximum size of the movieclip symbol is limited to 2048x2048. Note that the actual bounds of the movie clip instance that can be cached are lesser than 2048x2048, WebGL reserves some pixels.
• If there is more than one instance of the same movieclip, Animate generates the cache with the size of the first instance encountered. However, the cache is not re-generated and Cache as Bitmap property is not ignored, even if the transform of the movie clip changes to a large extent. And hence, if the movieclip symbol is greatly scaled during the course of animation, the animation may appear pixelated.