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

22.08.2023 alexxlab

Содержание

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

WebGL (Web Graphics Library) — программная библиотека для языка JavaScript предназначенная для визуализации интерактивной трёхмерной графики и двухмерной графики в пределах совместимости веб-браузера без использования плагинов. WebGL приносит в веб трёхмерную графику, вводя API, который построен на основе OpenGL ES 2.0, что позволяет его использовать в элементах canvas HTML5 .

Поддержка WebGL присутствует в Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ и Internet Explorer 11+. Однако помимо поддержки WebGL браузером, необходима также его поддержка графическим процессором клиента.

Начало работы с WebGL: Как настроить контекст WebGL .
Добавление 2D контента в контекст WebGL: Как отобразить простую плоскую фигуру с помощью WebGL.
Использование шейдеров для назначения цвета в WebGL: Демонстрирует как добавить цвет фигурам, используя шейдеры.
Анимация объектов с помощью WebGL: Показывает как повернуть и перемещать объекты для создания простой анимации.
Создание 3D объектов с помощью WebGL: Показывает как создавать и анимировать 3D объект (в данном случае куб).
Использование текстур в WebGL: Демонстрирует как разместить текстуры на гранях объекта.
Освещение в WebGL: Как имитировать эффекты освещения в контексте WebGL .
Анимация текстур в WebGL: Показывает как анимировать текстуры; в данном случае путём размещения видео Ogg на гранях вращающегося куба.
WebGL: советы по применению на практике: Советы и предложения по улучшению контента, созданного вами при помощи WebGL.
Текстуры с других доменов: Информация о загрузке текстур с других доменов, отличных от того, с которого загружается ваш контент.
Использование расширений: Как использовать расширения, доступные в WebGL.

Ресурсы

Спецификация WebGL: Спецификация WebGL.
Официальный сайт WebGL: Веб-сайт разработчиков WebGL — Khronos Group.
Изучение WebGL: Веб-сайт с уроками, посвящёнными использованию WebGL.
Основы WebGL: Учебные материалы по основным возможностям WebGL.
Матрицы в WebGL: Введение в использование матриц в двухмерной графике на WebGL. На этом ресурсе объясняется математическая основа перспективы в трёхмерной графике.
Советы по использованию WebGL: Веб-сайт с советами по написанию кода на WebGL.
ewgl-matrices: Библиотека для работы с матрицами для WebGL
glMatrix: Библиотека для работы с матрицами и векторами, написанная на JavaScript, предназначенная для высокопроизводительных приложений на WebGL
mjs: Математическая библиотека для работы с векторами и матрицами, написанная на JavaScript, оптимизированная для использования с WebGL.
Sylvester: Библиотека с открытым исходным кодом для работы с векторами и матрицами. Не оптимизирована для WebGL, но производительная.
WebGL площадка: Онлайн инструмент для создания и публикации проектов на WebGL. Удобна для быстрого прототипирования и экспериментирования.
Академия WebGL: Редактор HTML/Javascript с учебными материалами для обучения основам программирования на webgl.

WebGL 1

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

WebGL 2

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Замечания по Gecko

Отладка и тестирование WebGL

Начиная с Gecko 10.0, имеются две настройки, позволяющие вам управлять возможностями WebGL для тестирования своего кода:

webgl. min_capability_mode

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

false.

webgl.disable_extensions

Свойство типа Boolean которое, при значении true отключает все расширения WebGL. Значением по умолчанию для это свойства является значение false.

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 17 февр. 2023 г. by MDN contributors.

Улучшения отрисовщика WebGL в Internet Explorer 11

Internet Explorer 11 Еще…Меньше

Предупреждение: Устаревшее и не поддерживаемое классическое приложение Internet Explorer 11 было окончательно отключено с помощью обновления Microsoft Edge в некоторых версиях Windows 10. Дополнительные сведения см. в статье Часто задаваемые вопросы о прекращении использования классических приложений Internet Explorer 11.

Об этом обновлении

Это обновление обеспечивает улучшенную производительность и новые функции для отрисовщика WebGL. В следующем списке перечислены новые улучшения для отрисовщика WebGL:

16-разрядные текстуры для arrayBuffer, CanvasImageData, элемента canvas и входных данных HTMLImageElement.
Instancing, использующий расширение ANGLE_instanced_arrays для отправки одной геометрии и выполнения одного запроса на рисование для GPU, чтобы затем воспроизвести ее.
LINE_LOOP в качестве типа фигуры для API drawArrays, drawArraysInstancedANGLE, drawElements и drawElementsInstancedANGLE.
UNSIGNED_BYTE массивы элементов в виде индексов в буферы вершин.
Вентиляторы треугольников для API drawArrays, drawArraysInstancedANGLE, drawElements и drawElementsInstancedANGLE.
С плавающей матрицей в дополнение к атрибутам float и float vector в качестве входных данных для вершинного шейдера.
Управление созданием контекста на основе производительности системы.
Обновления веб-драйверов для Windows 7 с пакетом обновления 1 (SP1), которые отображают отрисовщик WebGL в аппаратном режиме.

Сведения о отрисовщике WebGL

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

Сведения об обновлении

Усовершенствования отрисовщика WebGL были представлены в бюллетене майкрософт по безопасности MS14-051.

Сведения об установке последнего накопительного обновления для системы безопасности для Internet Explorer см. в разделе Центр обновления Майкрософт.

Технические сведения о последнем накопительных обновлениях для системы безопасности для Internet Explorer см. на следующем веб-сайте Майкрософт:

http://www.microsoft.com/technet/security/current.aspx

Дополнительные сведения

Дополнительные сведения см. на следующих веб-сайтах:

Руководство по Internet Explorer 11 для разработчиков

Справочник по API WebGL

Ресурсы WebGL

Улучшения средства визуализации WebGL в Internet Explorer 11

Internet Explorer 11 Больше…Меньше

Предупреждение: Устаревшее, неподдерживаемое настольное приложение Internet Explorer 11 было окончательно отключено с помощью обновления Microsoft Edge в некоторых версиях Windows 10. Дополнительные сведения см. в разделе Часто задаваемые вопросы об прекращении использования настольного приложения Internet Explorer 11.

Об этом обновлении

Это обновление обеспечивает повышенную производительность и новые функции средства визуализации WebGL. В следующем списке перечислены новые улучшения средства визуализации WebGL:

16-битные текстуры для ArrayBuffer , CanvasImageData, элемента canvas и ввода HTMLImageElement.
Экземпляр, который использует расширение ANGLE_instanced_arrays для загрузки одной геометрии и выполнения одного запроса на отрисовку для графического процессора, чтобы затем воспроизвести ее.
org/ListItem»>
LINE_LOOP в качестве типа фигуры для API drawArrays, drawArraysInstancedANGLE, drawElements и drawElementsInstancedANGLE.
UNSIGNED_BYTE Массивы элементов в качестве индексов в буферах вершин.
Треугольные вееры для API drawArrays, drawArraysInstancedANGLE, drawElements и drawElementsInstancedANGLE.
Матрицы с плавающей запятой в дополнение к атрибутам с плавающей запятой и вектора с плавающей запятой в качестве входных данных для вершинного шейдера.
Управление созданием контекста на основе производительности системы.
Обновления веб-драйвера для Windows 7 с пакетом обновления 1 (SP1), которые отображают средство визуализации WebGL в аппаратном режиме.

О средстве визуализации WebGL

WebGL — это API JavaScript, который позволяет разработчикам создавать динамическую 2D- и 3D-графику для игр и интерактивного контента.

Обновление информации

Улучшения средства визуализации WebGL были представлены в бюллетене Microsoft по безопасности MS14-051.

Чтобы узнать, как установить самое последнее накопительное обновление безопасности для Internet Explorer, прочитайте инструкции в Центре обновления Майкрософт.

Технические сведения о самом последнем накопительном обновлении безопасности для Internet Explorer см. на следующем веб-сайте Microsoft:

http://www. microsoft.com/technet/security/current.aspx

Дополнительная информация

Для получения дополнительной информации посетите следующие веб-сайты:

Руководство по Internet Explorer 11 для разработчиков

Справочник по API WebGL

Ресурсы WebGL

Создание и публикация документа WebGL

Руководство пользователя Отмена

Поиск

Что такое WebGL?

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

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

В некоторых браузерах по умолчанию не включен WebGL. Чтобы включить WebGL в вашем браузере, см. эту статью.

Убедитесь, что вы включили WebGL в своем браузере, поскольку некоторые браузеры отключают WebGL по умолчанию.

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

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

Чтобы создать документ на основе WebGL-glTF, выберите WebGL-glTF Standard или WebGL-glTF Extended из Advanced намерения главного экрана.
Тип документа WebGL-glTF
Укажите ширину, высоту и единицы измерения в соответствии с вашими требованиями и нажмите Создать .

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

Нажмите Настройки публикации из Инспектора свойств.
Опубликовать файл WebGL-glTF
Введите имя в текстовом поле Имя вывода .
Выберите GLB или GLTF в опции Формат.
Укажите десятичное число в диапазоне от 1 до 3 в текстовом поле «Разрешение изображения».
Проверьте Удалить пробелы в файле JSON , чтобы уменьшить размер файла.
По умолчанию стандартные параметры Зациклить временную шкалу и Включить скрытые слои включены. Вы можете снять их, чтобы найти небольшие ошибки.
Нажмите кнопку Опубликовать , чтобы опубликовать файл.

Преобразование анимации в форматы GLTF и GLB

WebGL-glTF и GLB уменьшает размер файла и время выполнения. В Animate можно использовать документы в обоих форматах. Хотите использовать свои видео в обоих форматах? Посмотрите руководство в конце этого примера и выполните следующие действия.

В свойствах нажмите Параметры публикации .
Введите имя в текстовом поле Имя вывода .
Выберите GLB или GLTF в опции Format .
Укажите десятичное число с диапазоном 3 в текстовом поле Разрешение изображения .
Установите флажок Удалить пробелы в файле JSON , чтобы уменьшить размер файла.

Как создавать сложные анимации с помощью экспорта WebGL GLTF в Animate

Посмотрите видео, чтобы узнать, как анимация выглядит в форматах 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:
Запустить Animate.
На экране приветствия выберите параметр WebGL (предварительный просмотр). Либо выберите пункт меню «Файл» > «Новый», чтобы отобразить диалоговое окно «Новый документ». Выберите параметр WebGL (предварительный просмотр).
Предварительный просмотр содержимого WebGL в браузерах
Вы можете использовать функцию Test Movie в Animate для предварительного просмотра или тестирования своего содержимого. Для предварительного просмотра выполните следующие действия:
В Animate нажмите Ctrl+Enter в Windows и CMD+Enter в Mac. Это запустит ваш браузер по умолчанию и отобразит содержимое WebGL.
Animate требуется веб-сервер для запуска содержимого WebGL. Animate имеет встроенный веб-сервер, настроенный для запуска содержимого WebGL через порт № 8090. Если сервер уже использует этот порт, Animate автоматически обнаружит и устранит конфликт.
Публикация контента в формате WebGL
Animate позволяет создавать и публиковать контент WebGL изнутри.
Чтобы опубликовать документ WebGL, выполните следующие действия:
Выберите Файл > Настройки публикации , чтобы открыть диалоговое окно Настройки публикации. Либо выберите «Файл» > «Опубликовать». если вы уже указали параметры публикации для WebGL.
В диалоговом окне «Параметры публикации» укажите значения для:
Выходной файл
Укажите значимое имя для вывода. Кроме того, найдите или введите место, где вы хотите опубликовать выходные данные WebGL.
Перезаписать HTML
Позволяет указать, следует ли перезаписывать HTML-оболочку каждый раз при публикации проекта WebGL. Вы можете снять этот флажок, если вы внесли какие-либо внешние изменения в опубликованный HTML-файл и хотите сохранить их при обновлении любых изменений, внесенных в анимацию или ресурсы в Animate.
Включить скрытые слои
Включает все скрытые слои в вывод WebGL. Если снять флажок «Включить скрытые слои», все слои (включая слои, вложенные во фрагменты роликов), помеченные как скрытые, не будут экспортированы в результирующий файл WebGL. Это позволяет легко тестировать различные версии документа WebGL, делая слои невидимыми.
Хронология цикла
Повторяет содержимое, когда оно достигает последнего кадра. Отмените выбор этого параметра, чтобы остановить воспроизведение содержимого, когда оно достигает последнего кадра.
Нажмите «Опубликовать», чтобы опубликовать содержимое 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 создает кеш с размером первого обнаруженного экземпляра.