WebGL

WebGL 1.0 основан на OpenGL ES 2.0 и реализует API для 3D-графики. Для работы используется элемент HTML5 canvas, а доступ осуществляется через DOM-интерфейсы.

WebGL 2.0 базируется на OpenGL ES 3.0. Он гарантирует наличие многих опциональных расширений WebGL 1.0 и предоставляет новые API. Автоматическое управление памятью (garbage collection) реализовано встроенными средствами JavaScript.

Подобно OpenGL ES 2.0, WebGL не поддерживает fixed-function-API, устаревшие в OpenGL 3.0. Необходимая для этого функциональность может быть реализована программистом на шейдерах и JavaScript.

Шейдеры для WebGL пишутся на языке GLSL и передаются в WebGL API как текстовые строки, которые компилируются для исполнения на GPU. Этот код выполняется для каждой вершины и каждого пикселя, выводимого на экран.

WebGL возник из экспериментов с 3D Canvas, начатых Владимиром Вукичевичем в Mozilla. Вукичевич впервые продемонстрировал прототип Canvas 3D в 2006 году. К концу 2007 года свои собственные реализации были у Mozilla^[4] и Opera^[5].

В начале 2009 года технологический консорциум Khronos Group основал рабочую группу WebGL, в которую изначально вошли Apple, Google, Mozilla, Opera и другие. Версия 1.0 спецификации WebGL была опубликована в марте 2011 года.

Одной из первых практических реализаций WebGL стала Zygote Body^[6].^[7] В ноябре 2012 года Autodesk анонсировала перенос большинства своих приложений в облако с использованием WebGL — среди них Fusion 360 и AutoCAD 360^[8].

Разработка спецификации WebGL 2 началась в 2013 году и завершилась в январе 2017 года^[9]. Спецификация основана на OpenGL ES 3.0^[10]. Впервые реализация появилась в Firefox 51, Chrome 56 и Opera 43^[11].

Almost Native Graphics Layer Engine (ANGLE) — открытый графический движок, реализующий поддержку WebGL 1.0 (и 2.0, близко к спецификации ES 3.0) и стандартов OpenGL ES 2.0 и 3.0. ANGLE является стандартным бэкендом для Google Chrome и Mozilla Firefox на Windows и работает посредством трансляции вызовов WebGL и OpenGL в специфичные для платформы API. На данный момент ANGLE предоставляет доступ к OpenGL ES 2.0/3.0 через desktop OpenGL, OpenGL ES, Direct3D 9 и 11^[12]. В частности, Chrome использует ANGLE для всего вывода графики на Windows, включая ускоренный Canvas2D и среду Native Client^[12].

WebGL широко поддерживается современными браузерами, но его доступность может зависеть и от поддержки со стороны GPU. На официальном сайте WebGL доступна простая страница для тестирования^[13]. Более подробную информацию (например, используемый рендерер и список поддерживаемых расширений) можно узнать на сторонних ресурсах^[14].^[15]

• Google Chrome — поддержка WebGL 1.0 на всех платформах с подходящей видеокартой и драйверами с версии 9 (февраль 2011)^[16].^[17] По умолчанию на Windows Chrome использует ANGLE для трансляции OpenGL ES в DirectX 9.0c или 11.0^[18]. На Linux и macOS — по умолчанию рендерер OpenGL^[19]. Также можно вручную включить OpenGL-рендерер на Windows^[18]. С сентября 2013 доступен рендерер на Direct3D 11 для новых видеокарт^[20].^[21] С версии 56 поддерживается WebGL 2.0.
• Firefox — поддержка WebGL 1.0 на всех платформах с подходящими драйверами и видеокартой с версии 4.0^[22]. С 2013 года на Windows реализована поддержка через ANGLE и DirectX^[18]. С версии 51 — поддержка WebGL 2.0.
• Safari — с версии 6.0 для OS X Mountain Lion, Mac OS X Lion, а также Safari 5.1 для Mac OS X Snow Leopard была реализована поддержка WebGL 1.0, по умолчанию отключённая до Safari 8.0^[23].^{[24][25][26][27]} В Safari 12 (на macOS Mojave) WebGL 2.0 доступен в виде экспериментальной функции. В Safari 15 WebGL 2.0 включён по умолчанию^[28].
• Opera — поддержка WebGL 1.0 реализована в Opera 11 и 12, но была отключена по умолчанию в 2014 году^[29].^[30] С версии 43 — поддержка WebGL 2.0.
• Internet Explorer — частичная поддержка WebGL 1.0 реализована в Internet Explorer 11^[31].^[32][33][34] Для предыдущих версий возможен внешний плагин IEWebGL^[35]. Начальная реализация IE не проходила большую часть тестов на совместимость, но в дальнейшем поддержка улучшилась — последняя версия движка (0.94) проходит ~97 % тестов Khronos^[36].
• Microsoft Edge — классическая версия Edge поддерживает WebGL 0.95 в виде приставки (experimental-webgl) и использует открытый транслятор GLSL → HLSL^[37]. C версии 10240+ поддерживается WebGL 1.0. В Edge на базе Chromium реализована поддержка WebGL 2.0.

• Google Chrome — поддержка WebGL 1.0 на Android с версии 25^[38]. WebGL 2.0 поддерживается в Android с Chrome 114^[39]. C Android 5 Chrome используется как веб-просмотрщик по умолчанию^[40].
• BlackBerry 10 — поддержка WebGL 1.0 с версии ОС 10.00^[41].
• BlackBerry PlayBook — WebGL 1.0 доступен через WebWorks и браузер с PlayBook OS 2.00^[42].
• Internet Explorer — WebGL 1.0 с приставкой доступен в Windows Phone 8.x (IE11+).
• Firefox для мобильных — поддержка WebGL 1.0 для Android и MeeGo начиная с Firefox 4^[43].^[44]
• Firefox OS^[44]
• Maemo — в Nokia N900 WebGL 1.0 доступен в браузере microB, начиная с прошивки PR1.2^[45].
• MeeGo — в штатном браузере поддержка отсутствует, но доступна в Firefox^[44].
• Microsoft Edge — с приставкой WebGL 1.0 в Windows 10 Mobile^[46].
• Opera Mobile — версия 12 поддерживает WebGL 1.0 (только на Android)^[47].
• Safari под iOS — WebGL 1.0 поддерживается с iOS 8^[48]. WebGL 2.0 — с iOS 15^[39]
• Sailfish OS — поддержка WebGL 1.0 в стандартном браузере.^[49].
• Tizen — поддержка WebGL 1.0^[50].

Низкоуровневый характер WebGL стал причиной создания множества библиотек более высокого уровня, которые абстрагируют распространённые операции (например, загрузку сценографов или 3D-объектов в определённых форматах, применение матричных преобразований к шейдерам или области видимости). Некоторые такие библиотеки были портированы на JavaScript с других языков. Примеры: A-Frame (VR), BabylonJS, PlayCanvas, three.js, OSG.JS, модель-вьюер Google и CopperLicht. Проект X3DOM от Web3D позволяет запускать X3D и VRML-контент через WebGL.

Появилось множество 2D и 3D игровых движков для WebGL^[51], таких как Unreal Engine 4 и Unity^[52]. Библиотека Stage3D/Flash Away3D портирована для WebGL через TypeScript^[20].^[53] Для векторной и матричной математики в WebGL используется лёгкая библиотека sylvester.js^[54].^[55] Она иногда сочетается с расширением glUtils.js^[54].^[56]

Существуют и 2D-библиотеки, такие как Cocos2d-x и Pixi.js, которые реализованы над WebGL для повышения производительности (по аналогии с Starling Framework над Stage3D во Flash). Если WebGL недоступен, большинство подобных библиотек возвращаются к отрисовке на HTML5 canvas^[57]. Рост производительности за счёт прямого доступа к GPU оголил и ограничения самих реализаций JavaScript, часть из которых была устранена с помощью asm.js и WebAssembly^[57].

Для работы с WebGL-сценами требуется 3D-редактор с экспортом в подходящий формат для библиотеки или просмотрщика. Можно использовать настольные 3D-редакторы, такие как Blender, Autodesk Maya или SimLab Composer. Например, Blend4Web позволяет экспортировать сцену из Blender в браузер в один клик, вплоть до самостоятельной web-страницы^[58]. Существуют и специализированные визуальные редакторы для WebGL, такие как CopperCube и онлайн-редактор Clara.io. Онлайн-платформы (Sketchfab, Clara.io) позволяют выкладывать собственные 3D-модели для просмотра через встроенный WebGL-видер.

Начиная с Firefox 27, Mozilla включает в Firefox встроенные WebGL-инструменты для живого редактирования вершинных и фрагментных шейдеров^[59]. Также существуют отдельные утилиты для отладки и профилирования^[60].