WebGL 是什么?                  

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

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

某些浏览器默认情况下不启用 WebGL。要想在您的浏览器上启用 WebGL,请参阅此文章。

注意:          

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


WebGL 文档类型                  

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

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

创建 WebGL 文档                  

在 Flash Professional CC 中,使用 WebGL 文档可以快速创建和发布 WebGL 格式的内容。要创建 WebGL 文档:

  1. 启动 Flash Professional CC。

  2. 在欢迎屏幕上,单击“WebGL(预览)”选项。也可以选择“文件”>“新建”菜单选项来显示“新建文档”对话框。单击“WebGL(预览)”选项。

在浏览器中预览 WebGL 内容                  

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

Flash Professional CC 需要一个 Web 服务器才能运行 WebGL 内容。它具有一个内置的 Web 服务器,配置为在 8090 端口上运行 WebGL 内容。如果其他服务器已在使用此端口,Flash Pro 会自动检测并解决此冲突。

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

将内容发布为 WebGL 格式                

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

要发布 WebGL 文档,可执行以下操作:

  1. 选择“文件”>“发布设置”以显示“发布设置”对话框。如果已为 WebGL 指定了发布设置,也可以选择“文件”>“发布”

  2. 在“发布设置”对话框中,指定以下设置的值:

输出文件


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


发布 HTML


如果选中,则发布 HTML 包装器文件。


包括隐藏图层


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


循环时间轴


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


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

注意:          

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


了解 WebGL 输出                

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

HTML 包装器文件


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


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




JavaScript 文件 (WebGL Runtime)


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

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


纹理图谱


存储所有(形状)颜色值,包括舞台上的位图实例。


向 WebGL 文档添加音频                

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

有关使用音频的更多信息,请参阅在 Flash 中使用声音。

将现有内容移植到 WebGL 文档                  

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

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

复制


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

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


导入


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

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


同时处理


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

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


脚本


将删除 ActionScript 组件,且无法在动作面板中编辑代码。例如,当复制包含按钮的图层时,将把按钮转换为图形元件,且相应代码不可编辑。

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


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

以下是将原来的内容移植到 WebGL 文档时,应用了更改的类型。

将内容删除


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


滤镜


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


删除模糊滤镜效果,用实心填充代替。

将内容修改为支持的默认值


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


径向渐变


被改为采用实心填充(使用原色)。


将径向渐变改为采用实心填充(使用原色)。

有关移植期间不支持的功能及其回退值的完整列表,请参阅此文章。

使用位图缓存改进渲染性能                

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

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

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

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

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

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

  • 影片剪辑元件最大应限制为 2048x2048。请注意,可以缓存的影片剪辑实例的实际边界将小于 2048x2048,WebGL 会保留一些像素。

  • 如果同一个影片剪辑有多个实例,Flash Professional 将以其遇到的第一个实例的大小生成缓存。不过,即使影片剪辑有较大变形,缓存也不会重新生成,“缓存为位图”属性也不会被忽略。因此,如果影片剪辑元件在动画过程中有较大幅度的缩放,动画可能会呈像素化。

,