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

Ресурсы

Спецификация WebGL: Спецификация WebGL.
Официальный сайт WebGL: Веб-сайт разработчиков WebGL - Khronos Group.
Изучение WebGL: Веб-сайт с уроками, посвященными использованию WebGL.
Основы 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.

Возможность	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Поддержка основных возможностей	4.0 (2.0)	9	Нет	Нет	Nightly build
Имя контекста	`experimental-webgl`	`experimental-webgl`	n/a	n/a	`experimental-webgl`
`OES_texture_float`	6.0 (6.0)	?	?	?	?
`OES_standard_derivatives`	10.0 (10.0)	?	?	?	?
`EXT_texture_filter_anisotropic`	13.0 (13.0)	?	?	?	?
`WEBGL_compressed_texture_s3tc`	15.0 (15.0)	?	?	?	?
`drawingBufferWidth` and `drawingBufferHeight` attributes	9.0 (9.0)	?	?	?	?

Возможность	Firefox Mobile (Gecko)	Android	IE Mobile	Opera Mobile	Safari Mobile
Поддержка основных возможностей	?	?	?	?	?
Имя контекста	?	?	?	?	?
`OES_texture_float`	6.0 (6.0)	?	?	?	?
`OES_standard_derivatives`	10.0 (10.0)	?	?	?	?
`EXT_texture_filter_anisotropic`	13.0 (13.0)	?	?	?	?
`WEBGL_compressed_texture_s3tc`	15.0 (15.0)	?	?	?	?
`drawingBufferWidth` and `drawingBufferHeight` attributes	9.0 (9.0)	?	?	?	?

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

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

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

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

HTML5 Documentation

HTML	Audio/Video Canvas WebGL SVG MathML WebForms AppCache Microformats SemanticTags
JavaScript	Storage IndexedDB WebSockets WebWorkers Events Drag/Drop ProtocolHandler Geolocation Focus
CSS	NewSelectors Typography Visual Effects