Web gl: WebGL — Интерфейсы веб API

Посмотрите видео, чтобы узнать, как анимация выглядит в форматах WebGL GLTF, GLB.

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

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

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

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

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

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

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

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

1. Запустить Animate.
2. На экране приветствия выберите параметр WebGL (предварительный просмотр). Либо выберите пункт меню «Файл» > «Новый», чтобы отобразить диалоговое окно «Новый документ». Выберите параметр WebGL (предварительный просмотр).

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

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

1. В Animate нажмите Ctrl+Enter в Windows и CMD+Enter в Mac. Это запустит ваш браузер по умолчанию и отобразит содержимое WebGL.

Публикация контента в формате WebGL

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

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

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

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

Укажите значимое имя для вывода. Кроме того, найдите или введите место, где вы хотите опубликовать выходные данные WebGL.

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

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

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

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

Хронология цикла

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

3. Нажмите «Опубликовать», чтобы опубликовать содержимое WebGL в указанном месте.

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

Понимание выходных данных WebGL

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

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

Включает среду выполнения, вызывает ресурсы, а также инициализирует средство визуализации WebGL. По умолчанию файл называется .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 визуально указывает, что функция не поддерживается.

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

Скрипты

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

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

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

Контент удален

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

Фильтры

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

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

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

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

изменен для использования сплошной заливки с использованием основного цвета.

Повышение производительности рендеринга с помощью кэширования растровых изображений

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

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

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

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

Особенности использования кэша в качестве растрового изображения

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

• Максимальный размер символа фрагмента ролика ограничен 2048×2048. Обратите внимание, что фактические границы фрагмента ролика, который можно кэшировать, меньше 2048×2048, WebGL резервирует некоторые пиксели.
• Если существует несколько экземпляров одного и того же фрагмента ролика, Animate создает кеш с размером первого обнаруженного экземпляра.