WebGL

Разработка

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

Совместимость с браузерами

api.WebGLRenderingContext

BCD tables only load in the browser

api.WebGL2RenderingContext

BCD tables only load in the browser

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

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

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

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