Чому слід робити доповнену реальність, якщо ви розробник JavaScript - і як розпочати

Якщо ви кодувач JavaScript, який все ще спізнюється скласти остаточний перелік резолюцій на 2019 рік, дозвольте мені допомогти вам: Почніть з’ясовувати, як потрапити в доповнену реальність (AR).

Комбінована доповнена / змішана / віртуальна реальність (AR / MR / VR) отримала шалене зростання з 2016 року, від граничної ринкової вартості трохи більше 6 мільярдів доларів до тієї, яка може досягти 210 мільярдів доларів продажів (включаючи обладнання) до 2022 року Зрештою, доповнена реальність переживає постійне зростання.

Спочатку розробник JavaScript (веб), який бажає потрапити в AR-катер, може почуватись знеохоченим при пошуку звичайних необхідних навичок; а потім хтось запитує машинне навчання чи Інтернет речей. Однак якщо ви в основному розробник JavaScript, вважайте себе благословенним: мова періодично згадується як та, яку ви повинні знати для входу в цей сектор. Причина? Зараз велика кількість розробок AR іде в Інтернеті . І тут панує JavaScript.

Розширені завдання для шанувальників JavaScript - справді?

Можливо, не надто швидко. Є багато прикладів, коли AR / MR / VR світить сам по собі, особливо на нішевих ринках, але галузь не до кінця з’ясувала всю цінність технології для загального споживача. Як тільки це буде вирішено, галузь, безумовно, буде виробляти більше продуктів AR / MR / VR, що призведе до збільшення кількості робочих місць.

Для деяких аналітиків AR, як очікується, матиме найпоширеніший вплив, частково тому, що він не вимагає реалізації конкретних пристроїв та умов, як це вимагає VR.

AR має корисність майже для всього, накладаючи корисну та відповідну інформацію про навколишній світ. AR може бути всеохоплюючим таким чином, що VR не може. - Девід Маккуїн - Стратегічна аналітика - з інтерв'ю Twice

Це покладається на галузь, щоб знайти, як зробити AR більш повсякденним життям. На думку деяких компаній, особливо у сфері мобільних телефонів, краще використання потенціалу AR зменшується до відомого правила: ПРОСТОТА .

Незважаючи на те, що Unity став типовим шляхом для створення додатків AR, все більша кількість людей потребує лише посилення AR. - зі статті Бенджаміна Дівайна, Homestory AR

У багатьох випадках використання ресурсів провідних інструментів AR може бути надмірним. Натомість купу хороших функцій, керованих UX, над деякими 2D / 3D об’єктами може бути більш ніж достатнім для створення вражаючих продуктів. Щось, що розробник JavaScript регулярно робить.

Тоді можливо, що будь-який розробник JavaScript буде вбудовувати (не) стандартні функції AR / VR як продовження своїх традиційних обов’язків у майбутньому. І якщо потрібно, JavaScript є достатньо надійним для більш складних завдань. Небо - межа.

Становлення до JavaScript

Перш ніж почати, я б запропонував поглянути на кілька платформ та стандартів AR. Ті самі технічні обмеження, що впливають на галузь, також відображаються у світі АР.

Наприклад, існує кілька платформ, по одній для кожного Big Tech (Google = ARCode, Apple = ARKit, MS = ChakraCore, Facebook = AR Studio, React 360, Mozilla = aframe).

Швидко оглянувши варіанти, розпочати повністю доповнені реалізацією JavaScript проекти відносно просто. Ви можете почати з того, що використовуєте будь-яку структуру веб-розробників / додатків, таку як Cordova, Ionic, React Native або Vue Native, щоб вставити AR-структуру за вашим вибором - і розмістити 3D-ресурси на вершині реального світу.

Якщо ви хочете розгорнути в Інтернеті, використовуючи здебільшого AR на основі маркерів, ви можете використовувати репозиторії GitHub, такі як AR.js (безкоштовно), argon.js (безкоштовно, але обмежено) або awe.js (платний PaaS, але зі старим GitHub репозиторій все ще доступний). Є кілька спеціально підібраних, які важче для новачка, багато з них зосередилися на таких речах, як розпізнавання обличчя / голови (наприклад, track.js та headtrackr).

Або ви можете розширити можливості свого проекту, якщо зможете перенести доступні SDK, виготовлені компаніями, пов’язаними з AR. Є багато API, які також відображаються як AR у браузері. Наприклад, Mapbox слідує цим шляхом, і він розроблений на JavaScript.

Я б запропонував вам залишити його простим, але інтерактивним.

Однак якщо ваші амбіції вказують на освоєння дизайну та анімації в JavaScript, вам остаточно доведеться вивчити принаймні один пакет 3D Javascript, а ТРИ.js - найпопулярніший. Зачекайте, поки ви не отримаєте хорошу базу JavaScript та OpenGl, а також геометрію, тригонометрію, лінійну алгебру чи фізику. І не чекайте більшої допомоги від існуючих графічних інтерфейсів 3D JS; зокрема, THREE.js не має жодного. Складно, але захоплююче!

Бонусний приклад

Я хотів підготувати коротку демонстраційну версію, лише щоб вивчити технологію, тому я взяв приємний CodePen і модифікував його, щоб відповідати веб-відтвореній AR-анімації на основі маркерів, перенесеної в клоні великої роботи Стемкоскі з AR.js.

Щоб ви побачили приклад, вам потрібен мобільний пристрій з камерою та Інтернетом (телефон або планшет), а також роздрукована копія маркера або інший пристрій, щоб показати його на екрані.

Готові? Тепер відкрийте це посилання за допомогою браузера на своєму мобільному пристрої:

//evaristoc.github.io/ARexample/

Дайте дозвіл використовувати вашу камеру та наведіть камеру на маркер, як показано нижче , надрукований або на іншому екрані.

ПРИМІТКА: працює на Android та Chrome - може не працювати для інших пристроїв та браузерів?

Щасливого Нового року!

Сподіваюся, ця технологія виявиться такою ж захоплюючою, як і я. Якщо так, не залишайтеся наодинці: зв’яжіться з нами на форумі freeCodeCamp і поділіться своїми запитаннями та ідеями.

І якщо вам сподобалась ця стаття, не забудьте дати їй? і ділитися нею в соціальних мережах.

Дякуємо за читання, насолоджуйтесь AR та Happy Coding !!