创建和发布 WebGL 文档

WebGL 是一个无需额外插件而可以在任何兼容浏览器中显示图形的开放 Web 标准。WebGL 完全集成到所有允许使用 GPU 加速进行图像处理的 Web 标准浏览器中，并作为 Web 页面画布的一部分发挥作用。WebGL 元素可以嵌入其他 HTML 元素中并与页面的其他部分实现合成。

尽管如今大多数浏览器都支持 WebGL，但若想了解到底是哪些版本支持，请访问此链接了解更多信息。

某些浏览器默认情况下不启用 WebGL。要在浏览器中启用 WebGL，请参阅此文章。

应确保在您的浏览器上启用 WebGL，因为某些浏览器默认情况下是禁用 WebGL 的。

使用 WebGL-glTF（测试版）文档类型

Animate 现有两种 WebGL-glTF 文档类型。可以使用 WebGL-glTF 标准文档类型，以便与任何标准 WebGL-glTF 包集成。它完全符合标准。

发布 WebGL-glTF 文件

将动画转换为 GLTF 和 GLB 格式

使用 WebGL-glTF 和 GLB 格式可缩减文件大小并减少运行时处理工作量。在 Animate 中，两种格式的文档都可以使用。想要让您的视频使用这两种格式？在本示例结尾观看教程并按照这些步骤操作。

如何使用 Animate 中的“WebGL GLTF 导出”生成高级动画

Animate 18.0 和更早版本

如果使用的是 Animate 18.0 或更早版本，则可参阅以下内容。

WebGL 文档类型

利用 Animate，可创建丰富的交互性内容并将其发布为 WebGL（Web Graphics Library，Web 图形库）格式。由于 WebGL 完全集成到浏览器中，因此作为 Web 页面画布的一部分，它允许 Animate 利用 GPU 加速进行图形处理和渲染。

利用此新文档类型，可创建内容并将其快速发布为 WebGL 输出。您可以利用 Animate 中的强大工具来创建丰富的内容，但渲染在任何兼容浏览器上运行的 WebGL 输出。这意味着您可以使用传统的 Animate 时间轴、工作区及绘画工具实现 WebGL 内容的本地创作和生成。大多数常用的浏览器都支持 WebGL，因此，这就使得 Animate 可以在大多数 Web 平台上显示内容。

仅在预览时支持 WebGL。Animate 的这一更新包含支持带有声音和脚本的基本动画，并提供一组交互性功能。随着 Animate 后续版本的发布，您将看到针对 WebGL 文档类型提供的更多功能。有关针对 WebGL 支持的 Animate 功能的完整列表，请参阅这篇知识库文章。

创建 WebGL 文档

在 Animate 中，使用 WebGL 文档可以快速创建和发布 WebGL 格式的内容。要创建 WebGL 文档：

1. 启动 Animate。
2. 在欢迎屏幕上，单击“WebGL（预览）”选项。也可以选择“文件”>“新建”菜单选项来显示“新建文档”对话框。单击“WebGL（预览）”选项。

在浏览器中预览 WebGL 内容

可以使用 Animate 的测试影片功能来预览或测试内容。预览操作如下：

1. 在 Animate 中，按 Ctrl+Enter (Windows) 或 CMD+Enter (MAC)。这将启动您的默认浏览器并显示 WebGL 内容。

将内容发布为 WebGL 格式

Animate 允许您在本地创建和发布 WebGL 内容。

要发布 WebGL 文档，可执行以下操作：

1. 选择“文件”>“发布设置”以显示“发布设置”对话框。如果已为 WebGL 指定了发布设置，也可以选择“文件”>“发布”。
2. 在“发布设置”对话框中，指定以下设置的值：

为输出提供一个有意义的名称。也可以浏览到或输入想要发布 WebGL 输出的位置。

允许您指定在每次发布 WebGL 项目时是否覆盖 HTML 包装器。如果对发布的 HTML 文件做过任何外部改动，并希望在对 Animate 中的动画或资源所做任何更改进行更新时保留它们，可以取消选中此选项。

在 WebGL 输出中包括所有隐藏图层。取消选择“包括隐藏图层”将不会把标记为隐藏的所有图层（包括嵌套在影片剪辑内的图层）导出到生成的 WebGL 文档中。这样，通过使图层不可见，您就可以测试不同版本的 WebGL 文档，非常简便。

内容到达最后一帧后再重复播放。取消选择此选项会使内容在到达最后一帧后停止播放。

3. 单击“发布”，将 WebGL 内容发布到指定位置。

对于在浏览上运行的 WebGL 内容，最大可为其指定 60FPS。

了解 WebGL 输出

发布的 WebGL 输出包含以下文件：

它包括调用资源以及初始化 WebGL 渲染器的运行时。该文件默认命名为 <FLA_name>.html。可以在“发布设置”对话框（“文件”>“发布设置”）中为该 HTML 文件提供另外的名称。

该 HTML 文件默认与 FLA 位于同一目录下。可以在“发布设置”对话框中提供另外的位置。

显示 WebGL 中发布的内容。发布在 WebGL 文档的 libs/ 文件夹中。该文件命名为：flwebgl-<version>.min.js

HTML 包装器利用此 JS 文件渲染 WebGL 内容。

存储所有（形状）颜色值，包括舞台上的位图实例。

向 WebGL 文档添加音频

您可以向 WebGL 文档导入和嵌入音频、使用同步设置控制播放（事件、开始及停止）以及在运行时播放时间轴音频。WebGL 目前仅支持 .wav 和 .mp3 格式。

有关使用音频的详细信息，请参阅在 Animate 中使用声音。

将现有内容移植到 WebGL 文档

您可以将 Animate 中的现有内容移植到 WebGL 文档。粗略地讲，Animate 允许您通过手动复制或导入实现内容移植。此外，在 Animate 中处理多个文档时，通常的做法是作为图层或库中的资源跨文档复制内容。尽管支持 Animate 的大多数功能，但为更好地适应 WebGL 格式，我们还是对某些内容类型进行了修改。

Animate 包含几个强大的功能，可帮助您生成具有丰富表现力的内容。不过，考虑到其中某些功能是 Animate 固有的，它们在 WebGL 文档中将不受支持。我们将 Animate 设计为将此类内容修改为受支持的格式，并在某个工具或功能不受支持时给出提示信息。

将内容（图层或库元件）从传统 Animate 文档类型（如 ActionScript 3.0、AIR for Android、AIR for Desktop 等）复制到 WebGL 文档中。这种情况下，将删除不支持的内容类型或将其转换为支持的默认类型。

例如，复制 3D 动画时，将删除对舞台上的对象应用的所有 3D 转换。

导入包含不支持内容的 PSD 或 AI 文件。这种情况下，将删除内容或将其转换为支持的默认类型。

例如，导入应用了模糊效果的 PSD 文件时，Animate 将删除该效果。

同时处理多个文档类型（如 ActionScript 3.0 和 WebGL）时，在选定工具或选项不受支持时切换文档。这种情况下，Animate 将显示信息，指示不支持该功能。

例如，您曾经在 ActionScript 3.0 文档中创建了一条虚线，现在想在线条工具仍处于选中状态下切换为 WebGL。观察鼠标指针和属性检查器，它们会显示相应的图标，表示在 WebGL 中不支持虚线。

您可以在“操作”面板中编写在播放器进入帧后将要执行的 Javascript 代码。帧脚本上下文中的“this”变量指 MovieClip 所属的实例。此外，帧脚本可以访问在容器 HTML 文件中声明的 Javascript 功能和变量。在您从 ActionScript 文档复制帧或图层然后粘贴到 WebGL 文档中时，系统将对脚本（如果有）添加注释。

移植之后对内容应用的更改

以下是在将原有内容移植到 WebGL 文档时所应用的更改类型。

HTML5 Canvas 不支持的内容类型会予以删除。例如：

不受支持。将删除该效果，形状改用实心填充。

支持内容类型或功能，但不支持功能的属性。例如：

被改为采用实心填充（使用原色）。

使用位图缓存改进呈现性能

运行时位图缓存有助于优化渲染性能，这是通过指定某个静态影片剪辑（如背景图像）或按钮元件在运行时缓存为位图来实现的。默认情况下，在每个帧中都会重绘矢量项。将影片剪辑或按钮元件缓存为位图则使得浏览器不必不断地重绘矢量项，这是因为图像是一个位图，其位置不会改变。这就使得 WebGL 内容渲染性能得以大幅提升。

例如，当您在复杂背景中创建动画时，将创建包含背景中包括的所有项目的影片剪辑。然后，在“属性”检查器中为背景影片剪辑选择“缓存为位图”。在播放期间，该背景呈现为存储在当前屏幕深度的位图。浏览器在舞台上快速绘制位图，且仅绘制一次，以使动画播放更加快速流畅。

位图缓存允许使用影片剪辑并自动将其冻结在当前位置上。 如果某个区域发生更改，则矢量数据可更新位图缓存。 此过程将最大程度减少浏览器必须执行的重绘次数，从而使渲染更加快速流畅。

要对影片剪辑元件启用“缓存为位图”属性，可选择该影片剪辑实例，然后从属性监视器（“窗口”>“属性”）中的“渲染”下拉菜单中选择“缓存为位图”。

使用“缓存为位图”需要注意的事项

对 WebGL 内容使用“缓存为位图”属性时应注意以下事项：

• 影片剪辑元件最大应限制为 2048x2048。请注意，可以缓存的影片剪辑实例的实际边界将小于 2048x2048，WebGL 会保留一些像素。
• 如果同一个影片剪辑有多个实例，Animate 将以其遇到的第一个实例的大小生成缓存。不过，即使影片剪辑有较大变形，缓存也不会重新生成，“缓存为位图”属性也不会被忽略。因此，如果影片剪辑元件在动画过程中有较大幅度的缩放，动画可能会呈像素化。