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. ewgl-matrices Библиотека для работы с матрицами для WebGL glMatrix Библиотека для работы с матрицами и векторами, написанная на JavaScript, предназначенная для высокопроизводительных приложений на WebGL mjs Математическая библиотека для работы с векторами и матрицами, написанная на JavaScript, оптимизированная для использования с WebGL. Sylvester Библиотека с открытым исходным кодом для работы с векторами и матрицами. Не оптимизирована для WebGL, но производительная. WebGL площадка Онлайн инструмент для создания и публикации проектов на WebGL. Удобна для быстрого прототипирования и экспериментирования. Академия WebGL Редактор HTML/Javascript с учебными материалами для обучения основам программирования на webgl.

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

api.WebGLRenderingContext

Enable JavaScript to view this browser compatibility table.

api.WebGL2RenderingContext

Enable JavaScript to view this browser compatibility table.

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

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

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

webgl.min_capability_mode

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

webgl.disable_extensions

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