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

api.WebGL2RenderingContext

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

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

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

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

Help improve MDN

Learn how to contribute

This page was last modified on ⁨17 дек. 2024 г.⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content