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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
WebGLRenderingContextChrome Полная поддержка 9Edge Полная поддержка 12
Замечания
Полная поддержка 12
Замечания
Замечания To access the WebGL context, use experimental-webgl rather than the standard webgl identifier.
Firefox Полная поддержка 4IE Полная поддержка 11
Замечания
Полная поддержка 11
Замечания
Замечания To access the WebGL context, use experimental-webgl rather than the standard webgl identifier.
Opera Полная поддержка 12Safari Полная поддержка 5.1WebView Android Полная поддержка ДаChrome Android Полная поддержка 25Firefox Android Полная поддержка ДаOpera Android Полная поддержка 12Safari iOS Полная поддержка 8.1Samsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Смотрите замечания реализации.
Смотрите замечания реализации.

WebGL 2

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
WebGL2RenderingContextChrome Полная поддержка 56Edge Нет поддержки НетFirefox Полная поддержка 51IE Нет поддержки НетOpera Полная поддержка 43Safari Нет поддержки НетWebView Android Полная поддержка 58Chrome Android Полная поддержка 58Firefox Android Полная поддержка 51Opera Android Полная поддержка 43Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 7.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.

Метки документа и участники

Метки: 
Внесли вклад в эту страницу: mdnwebdocs-bot, fscholz, vaiil, WalkInWay, sputnik1986, teoli, hazestalker
Обновлялась последний раз: mdnwebdocs-bot,