WebGL

WebGL (Web Graphics Library) - це JavaScript API для відображення інтерактивної 3D та 2D графіки в будь-якому сумісному веб-переглядачі без використання плагінів. WebGL робиць це вводячи API, яке точно відповідає OpenGL ES 2.0 та може бути використане в HTML5 <canvas> елементах.

Підтримка WebGL присутня в Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ and Internet Explorer 11+; проте, користувацький пристрій має також мати апаратне забезпечення, яке підтримує ці функції.

Елемент <canvas> також використовується Canvas 2D для побудови 2D графіки на веб-сторінках.

Посилання

Стандартні інтерфейси

Розширення

Події

Константи і типи

Керівництва і навчальні сторінки

Детальні керівництва

  • WebGL model view projection: Детальне пояснення трьох основних матриць, які переважно використовуються для представлення 3D виду об'єкту: матриця моделі, виду та проекції.
  • Matrix math for the web: Корисне керівництво про те, як працюють матриці 3D перетворення, та як вони можуть бути використані в web - як для розрахунків WebGL, так і для CSS3 перетворень .

Ресурси

  • Raw WebGL: An introduction to WebGL Розмова Ніка Дізолнірс який знайомить з основами WebGL. Це відмінне місце, щоб почати, якщо ви ніколи не займались низькорівневим програмуванням графіки.
  • Khronos WebGL site Основний веб-сайт WebGL на Khronos Group.
  • Learning WebGL Сайт з керівництвами про використання WebGL.
  • WebGL Fundamentals Базове керівництво про основи WebGL.
  • WebGL playground An online tool for creating and sharing WebGL projects. Good for quick prototyping and experimenting.
  • WebGL Academy Редактор HTML/JavaScript з керівництвами для вивчення основ програмування під WebGL.
  • WebGL Stats Сайт зі статистикою про можливості WebGL в веб-переглядачах на різних платформах.

Бібліотеки

  • glMatrix JavaScript-бібліотека матриці і вектору для WebGL додатків з високою ефективністю.
  • Sylvester Бібліотека з відкритим початковим кодом для маніпулювання векторами і матрицями. Не оптимізована для WebGL але надзвичайно міцна.

Специфікації

Специфікація Статус Коментар
WebGL 1.0 Recommendation Початкове визначення. Базується на OpenGL ES 2.0
WebGL 2.0 Editor's Draft Будується поверх WebGL1. На основі OpenGL ES 3.0.
OpenGL ES 2.0 Standard  
OpenGL ES 3.0 Standard  

Сумісність

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Функція Firefox (Gecko) Chrome Internet Explorer Opera Safari
Базова підтримка 4.0 (2.0) 9 11 12[1] 5.1[1]
Функція Firefox Mobile (Gecko) Chrome for Android IE Mobile Opera Mobile Safari Mobile
Базова підтримка 4 25[1] No support 12[1] 8.1

[1] Реалізація цієї функції є експериментальною.

Зауваження по сумісності

На додаток до веб-переглядача, сам графічний процесор також має підтримувати цю функцію. Так, наприклад, стиснення текстур S3 (S3TC) доступне тільки для планшетів на основі Tegra . Більшість браузерів роблять контекст WebGL доступним через контекстне ім'я webgl, але старішим також потрібно experimental-webgl. Крім того, майбутній WebGL 2 повністю сумісний і матиме ім'я контексту webgl2.

Зауваження 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 за замовчуванням.

Дивіться також