Віртуальна реальність у 2D


Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.

Розповідає Пітер ван дер Зей, автор блогу qfox.nl


Я, як і багато хто останнім часом, підхопив ідею віртуальної реальності. Ні, серйозно. За нею майбутнє. І моє в тому числі. Це майбутнє буде дуже великим. У цій статті я розповім про експеримент, який провів нещодавно. Я покращував демо методу “кидання променів” так, щоб працювати з Google Cardboard (дешевий спосіб випробувати віртуальну реальність на своєму досвіді, маючи під рукою тільки картонну коробку і смартфон).

Якщо Ви не хочете нічого читати, то ось тут лежить сам результат мого експерименту. Крім демонстрації методу “кидання променів”, там є ще декілька цікавих опцій, з якими можна пограти.

Якщо чесно, то я не думаю, що найближчим часом у мене вийде зробити так, щоб усе рендерилось з частотою 90 або 60 кадрів на секунду. Крім того, мобільні браузери накладають обмеження в 30 кадрів на секунду, але навіть на сучасних флагманах (наприклад, Galaxy Note 4) максимум, що мені вдавалося витиснути – 20 кадрів на секунду. Звичайно, цього вистачає для тестування і побіжного ознайомлення з віртуальною реальністю, але, очевидно, нічого серйозного зробити не вийде, навіть якщо це буде просто казуальний геймінг.

Як і раніше, я не використав жодних сторонніх бібліотек. Все написано на чистому JavaScript. У процесі розробки я розбирався з діжкоподібним оптичним спотворенням і методом “кидання променів” у цілому, API геймпада і деякими параметрами віртуальної реальності.

Подвійний рендеринг

Кожен кадр рендериться двічі з ледве видимою зміною положення об’єктів і кута їх бачення. Все це можна налаштувати на льоту. Відкрито скажу, що це демо не призначене для тестування деяких певних параметрів. Для отримання найкращого результату бажано дивитися в одному напрямі.

Камерам виділено окреме “полотно”. На ньому спочатку відображається все оточення. Статичні об’єкти: міні-мапа, меню, інформація для дебага, різні повідомлення – генеруються один раз, а потім увесь час відмальовуються в тому самому місці. Це дає приріст продуктивності.

API геймпада

Демо підтримує управління геймпадом, щоправда, працює поки що погано. Я тестував його тільки з Samsung GearVR joypad на Samsung Galaxy Note 4, і впевнений, що на інших пристроях деякі функції працювати не будуть. Крім того, я не маю уявлення, як управління працюватиме на інших операційних системах, на iOS, наприклад.

Для мене це був перший раз, коли я працював з геймпадним API, але без цього не можна було обійтися. Походити і оглядітися навколо можна і за допомогою геймпада, але для виконання складніших дій треба додаткове облаштування введення.

У своєму експерименті я обробляв введення з геймпада і клавіатури, і в цілому все працює пристойно, але, як було сказано раніше, введення з геймпада потребує доопрацювання. Врешті-решт, сінглтон Input об’єднає в собі інші, дрібніші сінглтони для різних пристроїв. Демо-версія, як їй і належить, лише показує загальні принципи, які потім перетворяться на щось більше.

Управління

За допомогою стрілок можна управляти рухом. Аналогові стики відповідають за регулювання “носа” – точки фокусу, куди Ви спрямовуєте свій погляд, коли дивитеся прямо. Правий – змінює кут камери, лівий – дистанцію “носа”.

Select перезавантажить сторінку (дуже зручно при розробці). Start відкриє меню. Кнопки R і L дозволяють перемикатися між різними опціями в меню.

Чотири кнопки – “ABXY” (чи “1234”): “А”, розташована нижче від усіх, відкриває меню відладки, в якому можна побачити, які клавіші геймпада виявлені й функціонують. Якщо ж ця панель не горить зеленим, то не був виявлений сам джойстик.

“В” (права) вимикає автоматичну зміну орієнтації, яка може заважати при відладці певних точок зору.

“Х” (ліва) перемикає набори текстур. Всього є три текстури, на кожній може бути написане слово “cat” з метою полегшення орієнтування. Також є текстури, взяті з гри Wolfenstein або забарвлені у випадковий колір.

“Y” вмикає мінікарту. Все просто.

У меню знаходяться п’ять опцій. Поки воно відкрите, Ви не можете рухатися.

FOV просто міняє кут огляду. Ще можна скоригувати оптичне викривлення під себе, якщо Ваш браузер підтримує WebGL.

“Cover” відображає зелене коло над “полотном”, стрілками можна вибрати його розмір, а також чи показуватиметься воно взагалі. Проведіть експеримент: увімкніть коло і збільшуйте його розмір до тих пір, поки все не стане зеленим. Потім вийміть смартфон з картону і подивіться, яку частину екрана Ви бачите насправді.

“Grid” дозволяє відображати сітку в шести різних режимах: rectangle – distorted, rectangle – straight, rectangle – mixed, circle – distorted, circle – straight і circle – mixed. Крім того, можна змінювати розмір сітки. Інакше кажучи, можна відмальовувати квадратну або колову сітку і вибирати, чи застосовується до неї викривлення. Заради інтересу можете вимкнути спотворення на одній камері й оцінити різницю. Ще можна змінювати спосіб промальовування променів: прямокутний або трапецієподібний. Останній дає кращу картинку, але набагато повільніший за прямокутний, оскільки малює по одній вертикальній піксельній смужці замість цілого променя відразу. Способу робити це по-іншому на 2D-полотні поки  що немає.

У “HMD” можна вибрати два типи налаштувань: “дерев’яний” і “повний” – вони відповідають за розмір камер. “Дерев’яний” робився для мого картону, при ньому камери займають тільки частину екрана. При “повному” камери займають увесь екран, проте це веде до зменшення FPS. Для пристроїв з великим екраном за умовчанням вибраний “дерев’яний”.

“View” дозволяє настроювати камери. Стрілками ліворуч-праворуч можна міняти їх ширину, вгору-вниз – висоту (я знаю, що при налаштуванні ширини ліве “полотно” підлагує, але не мав часу розв’язати цю проблему). Рухом ліворуч-праворуч правого аналогового стика змінюється величина викривлення (ідеальне значення для мене – 0.035), а вгору-вниз – відстань між камерами. Лівим аналоговим стиком можна пересувати камери по екрану.

“Info” просто відображає різну корисну інформацію, яку можна використати для створення конфігурацій для різних пристроїв.

Усім клавішам на джойстику відповідають клавіші на клавіатурі, дивіться сторінку демо для довідки.

Викривлення

Оскільки Ви дивитесь на екран через опуклі лінзи, необхідно коригувати зображення. Таке коригування називається діжкоподібним викривленням. Це відео детально розповідає про нього.

Щодо моєї реалізації, в ній є декілька каменів спотикання. Перший – WebGL. Тільки найновіші пристрої його підтримують. Другий – велика затримка. Треба отрендерити оточення, намалювати його на “полотні” й викривити. Достатньо довго й неефективно, як бачите.

Спотворення автоматично вимикається, якщо не може отримати доступ до WebGL. Ви можете ввімкнути його, натиснувши стрілку вгору в меню за вибраної опції “FOV”.

Та й мені самому не подобається моя реалізація. Викривлення занадто сильне в центрі і занадто слабке з боків. Хотілося б знати, як це виправити.

Важко сказати, який коефіцієнт кращий. Поки що мені найбільше подобається 1.035. Хотілося б зробити його трохи вище, проте при цьому центр викривляється надто сильно. Найгірше – вимкнення цього ефекту майже не впливає на зображення. Треба глибше розібратися буде в цій проблемі.

Метод “кидання променів”

Одна з найбільших проблем – недосконалість методу “кидання променів”. Я недбало поставився до написання коду, що призвело до проблем із числами з плаваючою точкою. Найпомітніший їх прояв – промені праворуч відмальовуввалися неправильно, і це призводить до появи артефактів і миготіння. Через помилку округлення і згладжування стіни при русі гравця поводяться дивно, що псує загальне враження від віртуальної реальності. Зверніть увагу, це навіть не реалістичне оточення, а звичайний лабіринт зі стін. Проте не поспішаю виправляти всі баги, оскільки це лише експеримент, що не перетвориться на кінцевий продукт.

Післямова

Що ще? Не знаю. Як я вже сказав, демо Ви можете знайти тут. Незабаром я додам його на сторінку зі своїми проектами. Все одно я не оновлював її вже два роки :р

Працювати над цим експериментом було весело. Я зайнявся математикою, дізнався, що треба і що не треба робити при роботі з віртуальною реальністю, і відкрив скриньку Пандори, наповнену моїми запитаннями за цією темою. Зараз я хочу відсунути це демо на задній план і працювати над чимось серйознішим – наприклад, WebGL. А може, взагалі відійду від веб-розробки.

Зараз я зрозумів, якщо хочу робити щось серйозне в цій галузі, то, швидше за все, доведеться відмовитися від браузерів. Їх розробники просто не докладають достатньо зусиль у цьому напрямі. Наскільки я знаю, на час написання цієї статті двоє людей з Google і Mozilla працюють над WebVR. Я ціную їх старання, але, очевидно, дві людини багато чого зробити не можуть. Крім того, у WebVR важливим є “залізо”. Воно має бути як в Oculus Rift, а не як в смартфоні, засунутому в картон.

Проте, я вважаю, що підхід з картоном має право на життя. Достатньо купити спеціальний кейс за $10, і Ви можете випробувати віртуальну реальність на собі, не витрачаючи сотні доларів. Звичайно, враження буде не таким сильним, як за використання Oculus і GearVR, але все ж таки спробуйте.

Думаю, незабаром я займуся написанням простої демонстрації можливостей WebGL. Подивимося, чи зможу я довести її до задовільного рівня в плані продуктивності.

Переклад статті “VR in 2d canvas”

Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?


Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *