Menu

Технології віртуальної реальності на платформі WEBGL

Home / gallery

Технології доповненої і віртуальної реальності постійно розвиваються, але мало хто знає про таку технологію як WebGl, яка дозволяє розміщувати на своєму сайті цілий віртуальний світ, що складається з окремих 3D об’єктів. Без сумніву, вміння працювати з цією технологією є важливим для веб-розробників. Дизайнери, в свою чергу, розуміючи принцип її роботи та володіючи необхідним інструментарієм мають забезпечити появі нових ідей для 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.

Ось кілька прикладів, із застосуванням WebGl технології:

Галерея VR у Вашому браузері

У цьому прикладі ви опинитеся в картинній галереї і зможете вивчити творіння ще не найвідоміших художників у вікні свого браузера. Матеріали і текстури 3D галереї налаштовані дуже якісно, створюючи ефект віртуальної реальності. Використаний Unity WebGl.

img

3D вода в WebGl

Процес віртуального моделювання води, як складного природного середовища для 3D проектів і віртуальної реальності – це надзвичайно ємкісний математичний процес, що вимагає великої обчислювальної потужності. Однак з виходом WebGl дана функція стала доступна і для браузерів зі усією своєю красою і фізикою

img

Гра бластер від Mozilla

Невелика міні-гра шутер від відомого браузера. Що полягає в униканні літаючих ворогів. Стріляйте по ним у відповідь (використовуйте пробіл) і зберігайте своє життя якомога довше. Незважаючи на простоту розробки, гра захоплює своєю механікою і артом.

img

Konterball

Настільний теніс прямо у Вашому в браузері. Обирайте режим (одиночний або розрахований на багато користувачів) і починайте свою подорож в світ великого спорту. Грайте, вчіться і перемагайте. Використовуйте бібліотеки deepstream.io і three.js, cannon.js.

img

Гра Web Race

Ще один приклад з використанням бібліотеки three.js, в якому ви зможете управляти гоночними машинами в денному і нічному режимі. У Вас буде на вибір дві 3D моделі машин Gallardo і Veyron, виконані з високим ступенем деталізації. Міняйте камери огляду і створюйте свої гоночні трейлери.

img

Dance Time WebGl

Цей проект складно описати словами. Просто перейдіть по посиланню і Ви все зрозумієте. Цікавий нюанс – якщо у Вас є VR окуляри, ви зможете записати свій танець і помістити його в подібний проект.

img