MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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.

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

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