Веб-технології міцно увійшли в наше повсякденне життя. Ми проводимо у всесвітній павутині досить велику кількість часу - дивимося новини, здійснюємо покупки, спілкуємося і працюємо. Індустрія послуг і розваг в мережі Інтернет стрімко розвивається, провідні розробники програмного забезпечення покращують підтримку тривимірної графіки в своїх продуктах. Традиційно її підтримка обмежувалася високопродуктивними комп'ютерами або спеціалізованими ігровими консолями, а програмування вимагало застосування складних алгоритмів. Однак завдяки зростанню продуктивності персональних комп'ютерів і розширенню можливостей браузерів стало можливим створення і відображення тривимірної графіки із застосуванням веб-технологій.
На відміну від інших технологій для роботи з тривимірною графікою (таких як OpenGL та Direct3D), WebGL призначена для використання у веб-сторінках і не потребує встановлення спеціалізованих розширень або бібліотек. Одна з переваг WebGL - програми конструюються як веб-сторінки, тобто одна і та ж програма буде успішно виконуватися на самих різних пристроях (наприклад, на смартфонах, планшетних комп'ютерах і ігрових консолях). Це означає, що WebGL буде надавати все більш посилюється вплив на спільноту розробників і стане одним з основних інструментів програмування графіки.
Переваги WebGL
З розвитком HTML розробники отримали можливість створювати все більш складні веб-програми. На зорі свого розвитку мова HTML пропонувала тільки можливість відображення статичного контенту, але з додаванням підтримки JavaScript стало можливим реалізовувати більш складні взаємодії елементів і відображення динамічного контенту. Впровадження стандарту HTML5 дозволило використовувати нові можливості, включаючи підтримку двомірної графіки у вигляді тегу canvas. Створення технології WebGL дозволило відображати та маніпулювати тривимірною графікою на веб-сторінках за допомогою JavaScript. За допомогою WebGL розробники можуть створювати абсолютно нові інтерфейси користувача, тривимірні ігри та використовувати тривимірну графіку для візуалізації різної інформації. Незважаючи на значні можливості, WebGL відрізняється від інших технологій доступністю і простотою використання, що сприяє її швидкому поширенню.
Підтримка переглядачами
Зараз WebGL підтримується наступними браузерами:
Десктопні переглядачі
- Mozilla Firefox (з 4-ї версії)
- Google Chrome (з 9-ї версії)
- Safari (за замовчуванням підтримка WebGL вимкнена)
- Opera (з 12-ї версії, за замовчуванням підтримка WebGL вимкнена)
- IE (з 11-ї версії, для інших версій можна скористатися сторонніми плагінами, наприклад, IEWebGL)
Мобільні браузери і платформи
- Android-браузер (підтримує WebGL тільки на деяких пристроях)
- Opera Mobile (починаючи з 12-ї версії і тільки для ОС Android)
- IOS (повна підтримка з версії 8.1)
- Firefox for mobile (з 4-ї версії)
- Google Chrome для Android (з 25-ї версії)
Переваги використання WebGL:
- Кросбраузерність і відсутність прив'язки до певної платформи. Windows, MacOS, Linux - все це неважливо, головне, щоб ваш браузер підтримував WebGL.
- Використання мови JavaScript, яка досить поширена.
- Автоматичне керування пам'яттю. На відміну від OpenGL, у WebGL не слід виконувати спеціальні дії для виділення та очищення пам'яті.
- Оскільки WebGL для візуалізації графіки використовує графічний процесор на відеокарті (GPU), для цієї технології характерна висока продуктивність, яка порівнянна з продуктивністю нативних програм.
Історія створення
Найбільш поширеними технологіями відображення комп'ютерної графіки на персональних комп'ютерах є Direct3D і OpenGL.
Direct3D - складова частина пакету технологій Microsoft DirectX.
Альтернативна їй технологія OpenGL, завдяки її відкритості, отримала набагато більш широке поширення. Реалізація OpenGL доступна для різних операційних систем та апаратних платформ. Специфікація OpenGL була розроблена компанією Silicon Graphics Inc і опублікована як відкритий стандарт у 1992 році. Технологія справила величезний вплив на розвиток тривимірної графіки.
WebGL сягає корінням OpenGL, проте назвати його прямим нащадком не можна. Безпосереднім прототипом WebGL прийнято вважати OpenGL ES (for Embedded Systems для вбудовуваних систем), створена в 2003--2004 роках і оновлена в 2007-му (ES 2.0) і в 2012-му (ES 3.0) роках. Перехід до версії OpenGL 2.0 позначився появою нової важливої особливості - підтримкою програмних шейдерів. Ця підтримка була перенесена в OpenGL ES 2.0 і стала одним з основних елементів специфікації WebGL 1.0.
На початку 2009 року консорціум Khronos Group (некомерційний промисловий консорціум, утворений для розробки, публікації і просування різних відкритих стандартів) заснував робочу групу WebGL і запустив процес стандартизації WebGL на основі OpenGL ES 2.0. 2011-го під його егідою випустили першу версію WebGL. Однак у червні того ж року корпорація Microsoft висловила свою стурбованість безпекою технології WebGL, пославшись на надмірні права доступу до обладнання і ненадійність механізмів захисту. Віце-президент Mozilla Марк Шавер відкинув критику Microsoft, назвавши побоювання перебільшеними. У той час корпорація Microsoft володіла власною 3D веб-технологією Silverlight 5, заснованою на тих же принципах, що і WebGL, яку, тим не менш, корпорація вважала досить надійною. Пізніше Microsoft змінила своє ставлення до технології WebGL, реалізувавши її підтримку в своєму браузері Internet Explorer 11. Корпорація Apple прийняла рішення про підтримку WebGL у браузері Safari на конференції WWDC у 2014 році.
Огляд кадру для розробки на WebGL
Технологія WebGL використовує низькорівневе API, цей аспект полегшує впровадження технології розробниками браузерів у свої продукти, але створює досить великі труднощі при створенні інтерфейсів. Велику кількість часу і сил було вкладено в розробку бібліотек, фреймворків і сторонніх програмних засобів, які спростили роботу розробникам сайтів.
Бібліотека WebGLU
Першою загальнодоступною бібліотекою стала WebGLU - набір утиліт низького і високого рівня для розробки додатків на WebGL. WebGLU сконструйований таким чином, що розробник може зосередитися на кінцевому результаті з мінімумом метушні і коду, але бібліотека не обмежує розробників, які хочуть більше контролю. Це досягається за рахунок можливості використання низькорівневих функцій для роботи з WebGL API.
Неповний список функцій:
- Можна завантажити шейдери безпосередньо з .frag/.vert/.vp/.fp файлів
- Автоматичне завантаження і налаштування шейдера
- Всі компіляції та компонування обробляються автоматично
- Автоматичне встановлення будь-якої проекції та вигляду моделі
- Забезпечує проекції та матриці-стіки вигляду моделі, які приблизно відповідають режимам матриці в OpenGL
- Автоматично створює при необхідності масив/елемент буферів і пов'язує їх у міру необхідності під час візуалізації
- Кожному об'єкту може бути призначена окрема шейдерна програма
- Зберігання даних атрибутів шейдера, простий виклик
- Частковий .obj аналізатор реалізований для завантаження об'єктів
- Підтримує ієрархію об'єктів
- Статичні зображення та відео текстури
- Підтримка процедурної анімації
- Підтримка анімації покадрів
- Можливість змішувати типи анімації та ієрархію об'єктів
- GameGLU - бібліотека компаньйон забезпечує легке відстеження подій клавіатури
Бібліотека GLGE
Достатньо іменита бібліотека для розробки програм з використанням WebGL. Бібліотека орієнтована більше на динамічну зміну сцени. Однак останні зміни в репозиторії датовані 2014 роком, тому є причини засумніватися в актуальності бібліотеки на сьогоднішній день.
Неповний список функцій:
- Анімація покадрів
- Підтримка загального освітлення, спрямованого освітлення (spot) і точкових джерел світла
- Підтримка карти нормалів
- Анімація матеріалів
- Скелетна анімація
- Підтримка формату Collada
- Підтримка карт зсуву
- Рендеринг тексту
- Туман
- Глибина тіней
- Карти середовища
- Відбиття/заломлення
- Анімація Collada
- 2d фільтри
- Culling - вилучення прихованих частин сцени з процесу обробки
- Підтримка рівнів деталізації об "єкта LOD
- Фізика
Бібліотека Three JS
Найбільш популярна бібліотека, що активно розвивається, на сьогоднішній день. Детальна і доступна документація і величезна кількість робочих прикладів роблять цю бібліотеку одним з лідерів серед аналогічних систем.
Неповний список функцій:
- Рендерери - Canvas, SVG або WebGL
- Додавання та видалення об'єктів у режимі реального часу
- Туман
- Перспективна або ортографічна камери
- Каркасна анімація, різні види кінематики, покадрова анімація
- Декілька типів світла - зовнішній, спрямований, точковий
- Покинуті й отримані тіні
- Шейдери (GLSL)
- Об'єкти - мережі, частинки, спрайти, лінії, скелетна анімація і так далі
- Безліч встановлених типів геометрії - площина, куб, сфера, тор, 3D текст і так далі
- Активна підтримка модифікаторів - тканина, витиснення
- Можливість завантаження багатьох типів даних - двійковий, зображення, JSON і сцена
- Експорт та імпорт об'єктів Blender, openCTM, FBX, 3D Studio Max і Wavefront .obj файл
Бібліотека Babylon JS
Бібліотека з відкритим кодом для створення повноцінних 3D-програм та ігор, що працюють у веб-переглядачі без використання сторонніх плагінів і розширень. Babylon JS за своїми можливостями близький до ThreeJS, однак має в своєму арсеналі деякі вбудовані функції, недоступні в Three JS з коробки. До таких приємних особливостей належать вбудований фізичний движок oimo.js - досить простий спосіб створити реалістичний ландшафт, використовуючи карту висот. Зрозуміло, у three js також присутні такі можливості, але реалізовані вони за допомогою різних додаткових програм. Однак за функціональність бібліотеки доводиться платити нескромною вагою в 800 кб.
Список функцій:
- Сцена - використання готових мішів, туман, скайбокси
- Фізичний рушій (модуль oimo.js)
- Згладжування
- Анімаційний рушій
- Звуковий рушій
- Система частинок (партіклів)
- Апаратне масштабування
- Підтримка LOD-ів
- Покрокове завантаження сцени
- Автоматична оптимізація сцени
- Панель зневадження
- 4 джерела освітлення - точковий, випромінюваний всюди, прожектор і реалістичне
- Матеріали користувача і шейдери
- Широкі можливості текстурування
- SSAO
- Бліки
- 9 видів камери, в тому числі і для сенсорного управління
- Експортери для 3ds Max, Blender, Unity3D, Cheetah 3d
- Карта висот
Все більш активне впровадження комп'ютерної графіки в повсякденну діяльність користувачів вимагає від розробників освоєння нових горизонтів. Зрозуміло, різні завдання потребують індивідуального підходу до реалізації додатків. Представлені в статті бібліотеки - це всього лише вершина айсберга.
Кожен розробник може вибрати бібліотеку під свої конкретні потреби - комусь важлива скелетна анімація, комусь - реалістичне світло або фізика, а хтось є дійсно ортодоксальним професіоналом, який не визнає нічого крім найчистішого WebGL API і пише шейдери в блокноті. Однак усіх об'єднує бажання створити якісні, легкі та продуктивні веб-програми, що активно використовують можливості тривимірної графіки.
