306
26/05/2020Технології доповненої і віртуальної реальностей постійно розвиваються, але мало хто знає про таку можливість як WebGL, яка дозволяє за допомогою різних адаптивних блоків розміщувати на своєму сайті як цілий 3D світ, так і окремі 3D об’єкти. Використання Web VR збільшує час перебування користувачів на сайті і тим самим підвищує сайт в пошуковій видачі, завдяки поведінковому фактору, що робить цю технологію відмінним інструментом для SEO фахівця.
Що таке WebGL
Згідно вікіпедії, WebGL (Web-based Graphics Library) - багатоплатформний API для 3D-графіки в браузері, що розробляється некомерційною організацією-консорціумом Khronos Group, куди, до речі, входять такі провідні розробники браузерів як Google (Chrome), Mozilla ( Firefox), і Apple (Safari).
Простими словами WebGl - це JavaScript API, що дозволяє відтворювати 3D об’єкти (з усіма параметрами світла, текстури і матеріалів) без використання сторонніх плагінів і дозволяє використовувати пристрої віртуальної реальності (Goolge Cardboard, HTC Vive, Oculus і інші) для перегляду VR контенту прямо в браузері . При цьому, якщо у користувача немає обладнання віртуальної реальності, він без проблема може насолоджуватися контентом в режимі перегляду 360.
Ми підготували ТОП 10 прикладів, із застосуванням WebGl технології.
1. Палац Спонца
Неймовірні можливості по запіканню світла і текстур від фреймворка Baylon.js. У цьому прикладі ви побачите частина палацу Спонца в Хорватії, відтвореного в браузері без необхідності завантажувати будь-які програми або утиліти. Пориньте у світ віртуальної реальності без спеціального обладнання.
Наочний приклад того, якими можливостями володіє фреймворк Babylon.js. Тут ви виявите приголомшливу реалістичну графіку, причому вона буде коректно відображатися у всіх демоверсії WebVR.
Посиланная на проект Палац Спонца
2. 3D Web модель з можливістю кастомізації
У цьому прикладі представлена 3D модель взуття, яку можна видозмінювати відповідно до власних уподобань, реалізуючи свої приховані дизайнерські таланти. Відмінне рішення для демонстрацій 3D моделей, яких просто ще не існує. Написано за допомогою Babylon.js.
3. Гра бластер від Mozilla VR
Невелика міні-гра шутер від відомого браузера. Уникайте літаючих ворогів, стріляйте по ним у відповідь (використовуйте пробіл) і зберігайте своє життя якомога довше. Незважаючи на простоту розробки, гра захоплює своєю механікою і артом.
Посилання на гру VR від Mozilla
4. Konterball
Настільний теніс прямо у Вас в барузері. Обирайте режим (одиночний або розрахований на багато користувачів) і починайте свою подорож в світ великого спорту. Грайте, вчіться і перемагайте. Використовуйте бібліотеки deepstream.io і three.js, cannon.js.
Посилання на проект Konterball
5. Галерея VR у Вас в браузері
Зараз, в умовах карантину, відвідування місць скупчення людей вкрай небажано, але прагнення до великого ніхто не відміняв. У цьому прикладі ви опинитеся в картинній галереї і зможете вивчити творіння ще не найвідоміших художників у вікні свого браузера. Матеріали і текстури 3D галереї налаштовані дуже якісно, створюючи ефект віртуальної реальності. Використаний Unity WebGl.
6. Opera North
Як прорекламувати театральну виставу, не розкриваючи спойлерів і створивши відчуття таємничості? Яскраве рішення з використанням бібліотеки thee.js занурить Вас в чарівний світ гостросюжетного трилера в віртуальної реальності.
Посилання на проект Opera North
7. Гра Web Race
Ще один приклад з використанням бібліотеки three.js, в якому ви зможете управляти гоночними машинами в денному і нічному режимі. У Вас буде на вибір дві 3D моделі машин Gallardo і Veyron, виконані з високим ступенем деталізації. Міняйте камери огляду і створюйте свої гоночні трейлери.
Посилання на проект гри WebRace
8. Dance Time WebGl
Цей проект складно описати словами. Просто перейдіть по посиланню і Ви все зрозумієте.
Цікавий нюанс - якщо у Вас є VR окуляри, ви зможете записати свій танець і помістити його в подібний проект.
Посилання на проект Dance Time Web Gl
9. Веб-гра Вчимося літати
Квадратні будівлі, ніч, Ви граєте за незрозумілу тварину, яка вчиться літати. Керуйте стрілками, уникайте зіткнень і пролетіть як можна довше. Гра не відрізняється якісною 3D графікою, але захоплює своєю простою механікою. Чергова міні-гра на технології WebGl.
Посилання на веб-гру “Вчимося літати”
10. 3D Вода в WebGL
Процес створення води для 3D проектів і віртуальної реальності - це завжди складний послідовний математичний процес, що вимагає великої обчислювальної потужності. Однак з виходом WebGL дана функція стала доступна і для браузерів зі усією своєю красою і фізикою.
Висновок
Розвиток технологій доповненої і віртуальної реальностей створює нові течії в науковому середовищі, запускаючи розробку експериментальних рішень по розширенню можливостей не тільки додатків, але і браузерів.
Якщо Вас зацікавив цей напрям і ви думаєте, як можна застосувати цю технологію для свого бізнесу, залиште замовлення на нашому сайті і ми обов’язково підкажемо найкраще рішення по використанню WebGl для ваших проектів.
