Что такое WebGL?

WebGL — это открытый веб-стандарт для визуализации графики в любом поддерживаемом браузере без использования дополнительных подключаемых модулей. WebGL полностью интегрирован во все веб-стандарты браузеров, что позволяет использовать аппаратное ускорение для обработки изображений и эффектов на холсте веб-страницы. Элементы WebGL можно встраивать вместе с другими элементами HTML. Они могут использоваться в комбинации с другими элементами страницы.

Хотя большинство современных браузеров поддерживают WebGL, перейдите на эту страницу, чтобы получить дополнительные сведения о том, какие именно версии поддерживаются.

В некоторых браузерах поддержка WebGL не включена по умолчанию. Инструкции по включению WebGL в браузере см. в этой статье.

Примечание.

Обязательно проверьте, включена ли поддержка WebGL в браузере, так как в некоторых браузерах она выключена по умолчанию.

Использование типа документов WebGL-glTF (бета-версия)

Animate CC теперь включает два типа документов WebGL-glTF. Тип документа WebGL-glTF (стандартный) интегрируется с любыми пакетами с WebGL-glTF (стандартный). Он полностью совместим со стандартами.

  1. Чтобы создать документ на основе WebGL-glTF, выберите WebGL-glTF (стандартный) или WebGL-glTF (расширенный) в меню Дополнительно начального экрана. 

    Тип документа WebGL-glTF
    Тип документа WebGL-glTF
  2. Укажите необходимые единицы, ширину и высоту, затем щелкните Создать.

Публикация файла WebGL-glTF

  1. Щелкните Параметры публикации в инспекторе свойств.

    Публикация файла WebGL-glTF
    Публикация файла WebGL-glTF
  2. Введите имя в текстовое поле Имя выходного файла.

    Диалоговое окно «Параметры публикации» для типа документов WebGL-glTF (стандартный)
    Диалоговое окно «Параметры публикации» для типа документов WebGL-glTF (стандартный)
  3. В меню «Формат» выберите GLB или GLTF.

  4. Укажите десятичное число от 1 до 3 в текстовом поле «Разрешение изображения».

  5. Чтобы уменьшить размер файла, установите флажок Удалить пробелы в файле JSON.

  6. По умолчанию установлены флажки Временная шкала цикла и Включить скрытые слои. Их можно снять, чтобы найти мелкие ошибки.

  7. Нажмите кнопку Опубликовать, чтобы опубликовать файл.

Видеоруководство по экспорту WebGL-glTF (стандартный и расширенный)

Видеоруководство по экспорту WebGL-glTF (стандартный и расширенный)
Видео с демонстрацией использования экспорта WebGL-glTF (стандартный и расширенный)

Animate CC 18.0 и более ранние версии

Если используется Animate CC 18.0 и более ранние версии Animate CC, см. следующие ресурсы.

Тип документа WebGL

Animate CC позволяет создавать и публиковать расширенное интерактивное содержимое в формате Web Graphics Library (WebGL). Так как поддержка WebGL полностью интегрирована в браузеры, это позволяет Animate применять аппаратное ускорение для обработки и визуализации графики в пределах холста веб-страницы.

Этот новый тип документа позволяет создавать содержимое и быстро публиковать его в формате WebGL. Можно создавать содержимое с использованием мощных инструментов Animate, а затем выполнять визуализацию для вывода WebGL с целью воспроизведения в любом совместимом браузере. Это означает, что можно использовать традиционную временную шкалу Animate, рабочую среду и инструменты рисования для создания и публикации содержимого WebGL. Большинство популярных браузеров поддерживают WebGL, благодаря чему Animate может выполнять визуализацию содержимого почти на всех платформах.

Примечание.

Поддержка WebGL доступна только в рамках предварительного просмотра. В этом обновлении Animate была добавлена возможность использовать стандартные анимации со звуком и поддержкой сценариев, а также различные интерактивные функции. В будущих выпусках Animate для типа документа WebGL будут поддерживаться и другие функции. Полный список функций Animate, поддерживаемых для WebGL, см. в этой статье базы данных.

Создание документа WebGL

В Animate CC документ WebGL позволяет быстро создавать и публиковать содержимое для формата WebGL. Чтобы создать документ WebGL, выполните следующие действия.

  1. Запустите Animate CC.
  2. В окне приветствия выберите вариант WebGL (Просмотр). Можно также выбрать пункт меню Файл > Создать, открыв окно Создать документ. Выберите вариант WebGL (Просмотр).

Предварительный просмотр содержимого WebGL в браузере

Для предварительного просмотра или тестирования содержимого можно использовать функцию Animate «Тестировать ролик». Для предварительного просмотра выполните следующие действия.

  1. В Animate CC нажмите клавиши Ctrl+Enter в ОС Windows или CMD+Enter в ОС Mac. При этом запускается браузер по умолчанию для визуализации содержимого WebGL.
Для выполнения содержимого WebGL программе Animate CC требуется веб-сервер. Animate CC имеет встроенный веб-сервер, настроенный для выполнения содержимого WebGL через порт № 8090. Если сервер уже использует этот порт, Animate автоматически обнаруживает и устраняет конфликт.

Публикация содержимого в формате WebGL

Animate позволяет создавать и публиковать содержимое WebGL с использованием встроенных средств.

Чтобы опубликовать документ WebGL, выполните следующие действия.

  1. Выберите Файл > Параметры публикации, чтобы вызвать окно «Параметры публикации». Также можно выбрать Файл > Публикация, если для WebGL уже заданы параметры публикации.
  2. В диалоговом окне «Параметры публикации» задайте следующие параметры:

Выходной файл

Введите описательное имя для вывода. Также выберите или введите папку, в которую требуется опубликовать вывод WebGL.

Перезаписать HTML

Позволяет указать, следует ли перезаписывать файл-оболочку HTML или нет при каждой публикации проекта WebGL. Этот флажок можно снять, если в опубликованный HTML-файл внесены изменения извне и требуется сохранить их в процессе синхронизации изменений, внесенных в анимацию или ресурсы в Animate CC.

Включить скрытые слои

Включает все скрытые слои в вывод WebGL. Когда флажок «Включить скрытые слои» снят, в итоговый файл WebGL не выполняется экспорт слоев, помеченных как скрытые. Это упрощает тестирование различных версий документов WebGL.

Временная шкала цикла

Повторяет содержимое до тех пор, пока не будет достигнут последний кадр. Отключите этот параметр, чтобы остановить содержимое после достижения последнего кадра.

webGL_publishSettings
  1. Нажмите кнопку «Опубликовать» для публикации содержимого WebGL в указанное место.

Примечание.

Максимальная частота кадров для содержимого WebGL, исполняемого в браузерах, составляет 60 кадров/с.

Общие сведения о выводе WebGL

Опубликованный вывод WebGL содержит следующие файлы:

Файл-оболочка HTML

Он включает среду выполнения, вызовы ресурсов, а также инициализирует модуль визуализации WebGL. По умолчанию файлу присваивается имя <имя_FLA>.html. Можно указать другое имя для HTML-файла в диалоговом окне «Параметры публикации» («Файл» > «Параметры публикации»).

HTML-файл помещается в тот же каталог, который по умолчанию используется для FLA. Можно указать другую папку в диалоговом окне «Параметры публикации».

Файл JavaScript (среда выполнения WebGL)

Выполняет визуализацию опубликованного содержимого на платформе WebGL. Публикуется в папку libs/ документа WebGL. Файлу присваивается имя: flwebgl-<версия>.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 для Android, AIR для компьютера и т. д.) в документ WebGL. В этом случае неподдерживаемые типы содержимого будут либо удалены, либо преобразованы в поддерживаемые типы по умолчанию.

Например, при копировании 3D-анимации удаляются все 3D-преобразования, примененные к объектам на рабочей области.

Импорт

файла PSD или AI с неподдерживаемым содержимым. В этом случае содержимое будет либо удалено, либо преобразовано в поддерживаемые типы по умолчанию.

Например, при импорте PSD-файла, в котором применены эффекты размытия, Animate удаляет эффект.

Работа

с различными типами документов одновременно (к примеру, с ActionScript 3.0 и WebGL), если переключиться между документами, когда выбран неподдерживаемый инструмент или параметр. В этом случае Animate CC визуально подскажет, что выбранная функция не поддерживается.

Например, вы создали пунктирную линию в документе ActionScript 3.0 и переключились в режим WebGL, когда был все еще выбран инструмент «Линия». Изучите указатель и инспектор свойств — в них визуально указывается, что пунктирная линия не поддерживается в WebGL.

Сценарии

На панели «Действия» можно разместить код Javascript, в таком случае он будет выполняться после того, как воспроизведение дойдет до этого кадра. Переменная this в контексте сценариев кадров относится к тому же экземпляру объекта MovieClip, что и данный кадр. Кроме того, сценарии кадров получают доступ к функциям и переменным Javascript, объявленным в HTML-файле-контейнере. При копировании кадра или слоя из документа ActionScript в документ WebGL имеющиеся сценарии будут закомментированы.

Изменения, примененные к содержимому после переноса

Ниже перечислены типы изменений, которые применяются при переносе устаревшего содержимого в документ WebGL.

Содержимое удаляется

Типы содержимого, не поддерживаемые в HTML5 Canvas, удаляются. Например:

Фильтры

не поддерживаются. Эффект удаляется, а фигура заполняется сплошной заливкой.

Filters
Эффект размытия удаляется и заменяется сплошной заливкой.

Содержимое изменяется в соответствии с поддерживаемым значением по умолчанию

Тип содержимого или функция поддерживается, а свойство элемента — нет. Например:

 

Радиальный градиент

изменяется: заполняется сплошной заливкой основным цветом.

Radial Gradient
Радиальный градиент меняется на сплошную заливку с использованием основного цвета.

Полный список неподдерживаемых элементов и их резервных значений во время переноса см. в этой статье.

Ускорение визуализации благодаря кэшированию растровых изображений

Установка для статического фрагмента ролика (например, фонового изображения) или символа кнопки кэширования растровых изображений во время выполнения позволяет повысить скорость визуализации. По умолчанию векторные элементы отрисовываются заново для каждого кадра. Кэширование фрагмента ролика или символа кнопки в качестве растрового изображения позволяет предотвратить непрерывное перерисовывание элементов браузером, поскольку изображение является растровым и его расположение не изменяется. Это обеспечивает значительное повышение производительности при визуализации содержимого WebGL.

Например, при создании анимации со сложным фоном создайте фрагмент ролика, в котором все элементы включены в фон. Затем в инспекторе свойств выберите команду «Сохранить в кэше как растровое изображение» для фонового фрагмента ролика. Во время воспроизведения фон визуализируется как растровое изображение, сохраненное на текущей глубине экрана. Браузер прорисовывает растровое изображение в рабочей области быстро и только единожды, что способствует более быстрому и плавному воспроизведению анимации.

Кэширование растровых изображений позволяет автоматически зафиксировать фрагмент ролика на одном месте. При изменении области кэш растрового изображения обновляется в соответствии с векторными данными. Это процесс минимизирует число перерисовок, которые должен выполнить браузер, обеспечивая плавность и быстроту визуализации.

Чтобы включить свойство Кэшировать как растровое изображение для символа Movieclip, выберите нужный экземпляр Movieclip и установите значение «Кэшировать как растровое изображение» в поле «Визуализация» окна «Инспектор свойств» (Окно > Свойства).

CacheAsBitmap

Советы по использованию параметра «Сохранить в кэше как растровое изображение»

При установке свойства «Кэшировать как растровое изображение» для содержимого WebGL примите во внимание следующие замечания.

  • Максимальный размер символа Movieclip — 2048 x 2048. Обратите внимание, что реальное ограничение на размер кэшируемых фрагментов ролика будет меньше 2048 x 2048, поскольку WebGL резервирует некоторые пиксели.
  • При наличии нескольких экземпляров одного объекта Movieclip, Animate формирует кэш с размером первого встреченного экземпляра. Даже если размеры фрагмента ролика сильно вырастут при преобразовании, кэш не формируется заново и все так же будет действовать свойство «Кэшировать как растровое изображение». По этой причине, если символ Movieclip сильно вырастет в размерах в ходе анимации, на изображении станут видны пиксели.

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет