Прототипирование VR и AR в браузере
Дизайнер Павел Лаптев рассказал о способах создания 3D-моделей дополненной и виртуальной реальности и проверил их на практике.
В избранное
В избранном
Способов прототипирования виртуальной и дополненной реальности достаточно много. Но мы поговорим о Web VR и о том, что сейчас есть на этом рынке, а также о программе для прототипирования Framer.
Недавно я уже писал о том, как сделать интерактивную 3D-модель с поддержкой PBR, управлять её цветом, материалом, анимацией и много чем ещё, используя API Sketchfab и контролы через JavaScript.
В этом материале я опишу, как прототипировал мобильное приложение, используя Framer, так как эта библиотека включает в себя все нужные функции для HD-прототипирования под мобильные версии. Конечно под веб я его использовать не советую.
Статья выше может быть полезна, если нужно сделать что-то не слишком сложное и кастомное с точки зрения моделей и действий. Но если мы хотим сделать что-то сложнее — не только 3D-модели, но и целые сцены — тогда лучше использовать библиотеку Three.js. Чтобы настроить Three.js, может понадобиться немного больше, чем пара строк кода.
В таком случае я бы посоветовал использовать A-Frame. Это качественный 3D-фреймворк от Mozilla.
Перед практической частью — краткая история виртуальной реальности. Для некоторых это может быть долгим путешествием перед практической частью, поэтому, если не хочется читать много теории, воспользуйтесь оглавлением. Также большинство вещей, о которых я напишу, можно посмотреть у Дмитрия Бачило.
Оглавление
Как много реальностей у нас есть
На данный момент я могу выделить следующие (хотя гибридов больше):
- VR — virtual reality (виртуальная реальность).
- AV — augmented virtuality (дополненная виртуальность).
- AR — augmented reality (дополненная реальность).
- MR — mixed reality (смешанная реальность).
Все они разные, но суть одна и та же.
История VR
Обратимся к этимологии термина. Определение на момент конца 14 века: vertu — влияющее на физические достоинства или способности, эффективное в отношении присущих природным качествам». Слово происходит от средневекового латинского virtualis и латинского virtus — превосходство, сила, действительный. Буквально это означает «мужественность, зрелость» (см. также virtue).
В наши дни значение слова поменялось, теперь это «имеющее эффект, но не являющееся реальностью».
Виртуальная реальность прошла долгий путь и началась далеко не с Oculus Rift. Человечество мечтало о виртуальной реальности долгое время. И эти мечты стали воплощаться в жизнь в 1838 году с изобретением стереоскопа.
1838–1935 годы
Первые робкие шаги к виртуальной реальности. Конечно, в этот период ещё не появились такие понятия как VR и AR. Но люди уже понимали, что могут обмануть разум, играть с ним.
В 1935 году Стенли Г. Вейнбау описывает очки виртуальной реальности в книге «Очки Пигмалиона»:
— Какой же дьявол помог вам это сделать?
— Какой? Мой жидкий позитив, затем — мои магические очки. Я составил сложный раствор, понимаете? Я добавляю в него вкус химическими средствами и звук — электрическими. И когда сюжет записан, я помещаю раствор в свои очки-кинопроектор. И в этом растворе есть сюжет, зрелище, вкус, запах, звук, — всё!
— А осязание?
— Если вы достаточно захвачены сюжетом, ваш мозг его добавляет, — нетерпение зазвучало в его голосе.
1956 год, Sensorama
В 1956 году Мортон Хейлиг делает «Сенсораму» — симулятор реальности, который может имитировать ветер, стереокартинку, запах и прочее (опционально).
Выглядит «Сенсорама» немного громоздко, но это ещё один шаг к виртуальной реальности. Это примерно то, что в наше время называют «Кинотеатр 99D» в парках развлечений.
Как и в любой индустрии, маркетинг старается продать тебе то, что, скорее всего, тебе и не нужно, а ещё преувеличить и описать продукт лучше, чем он есть на самом деле.
1968 год, «Дамоклов меч»
Более известный как первый шлем виртуальной реальности. Его создал в 1968 году американский учёный в области информатики и пионер интернета Айван Сазерленд вместе с помощником — студентом Бобом Спроуллом.
«Дамоклов меч» мог проецировать простую вертексную 3D-графику, но важнее то, что это было настоящее 3D, а не 2D, которое пытается быть похожим на 3D.
Это устройство было настолько тяжёлым и массивным что в итоге получило название «Дамоклов меч».
1978 год, Аспенская интерактивная видеокарта
Или ретро Google maps. Ещё один эксперимент, который также можно отнести к сфере VR. Aspen Movie Map была революционной гипермедиа-системой, разработанной в MIT командой, работающей с Эндрю Липпманом в 1978 году.
Aspen Movie Map — это стоп-моушен тур через снятые кадр за кадром картинки, в котором пользователь мог выбирать направление движения. Карта включала в себя и целую трехмерную карту Аспена.
1987 год, Data glove и eye phone
После того, как известная всем «Атари» закрылась, её отделение Atari Research выделилось в новую команду VPL Research (Visual Programming Languages). Это была одна из первых компаний, которая не только разрабатывала и исследовала VR, но и продавала продукты. VPL разработали Data Glove, EyePhone и Data Suit.
И тут пришли 1990 годы
Долгое время виртуальная реальность рассматривалась только с точки зрения академических упражнений или разрабатывалась в медицинских, научных целях, а не для широкой публики. Но картина начала меняться в 1990 годах, поскольку они пришли вместе с уже довольно сильным игровым рынком.
И тут было много маркетингового скама от таких больших компаний, как Sega и Nintendo.
Но тут были и первые шаги к настоящему покупателю. Их сделала компания Virtuality. То, что сделала Virtuality не было домашней консолью, это был большой атракцион с VR-шлемом, дата-перчатками, специальной кабиной, кокпитом. Можно сказать, что это был настоящий VR с сенсорами и иногда с настоящей 3D-графикой.
Крысиные гонки рынка
Как я упомянул ранее, VR пришла на рынок, но жадные корпорации и их отделы маркетинга всё испортили. Очевидно, что железо и софт не были готовы для полного погружения в VR на дому, но в рекламе всё было не так.
Результатом крысиной гонки, когда корпорации спешили выталкивать на рынок сырые продукты, стало разочарование в виртуальной реальности. В общем, большинство концептов, которые готовились для серийной продажи, никогда не были выпущены.
Посмотрите поближе на Sega VR, Nintendo VirtualBoy и Atari Jeguar VR.
Пока игровые компании пытались продать их виртуальную реальность, Silicon Graphics Inc начала разразработку OpenGL и в январе 1992 году выпустила первую версию.
Open Graphics Library (OpenGL) — это кроссплатформенный язык программирования с такими же API для рендеринга 2D- и 3D-графики. Это очень важная точка не только потому, что разработчикам игр больше не нужно было заботиться о совместимости драйверов, но и потому, что это был проект open source (и, как это обычно бывает с годными проектами, OpenGL очень широко распространился) и без OpenGL у нас бы сейчас не было WebGL.
Сохраняйте спокойствие и создавайте VR
Были и приятные исключения, всё ещё не очень хорошие с точки зрения тактико-технических характеристик, но мы всё ближе и ближе к настоящей VR.
В период между 1995 и 2011 годами было создано достаточно много шлемов виртуальной реальности. Но, наверное, самым отличительным был VFX1 Headgear 1995 года. Этот шлем был оснащён сенсорами, встроенными динамиками, джойстиками и довольно просто активировался.
VFX1 стоил бы вам $695 с характеристиками 263×230 LCD и палитрой в 256 цветов.
Только посмотрите на рекламу VFX1.
Следующее устройство, который я хотел бы упомянуть, — SEOS 120/40 HMD. Интересна цена на это устройство — $70 тысяч. Характеристики: 1280×1024 LCD, 120-градусный угол обзора.
В течении 2000 годов появилось много разных шлемов виртуальной реальности. Вы можете посмотреть на первую и вторую таблицы с информацией о них.
2006 год, WebGL
WebGL эволюционировал из экспериментов с 3D на Canvas Владимира Вукичевича (Vladimir Vukićević) из Mozilla, разработавшего прототип Canvas 3D в 2006 году. В конце 2007 года и Mozilla, и Opera создали свои собственные отдельные реализации.
В начале 2009 года Mozilla и Khronos организовали рабочую группу WebGL при участии Apple, Google, Mozilla, Opera и других.
Итак, теперь у нас есть единая библиотека для 3D-графики в вебе. Спасибо за это Mozilla. Это интересно в контексте того, что позже мы будем говорить об A-Frame.
Теперь давайте возьмём небольшой перерыв, чтобы упомянуть Палмера Лаки, который пришёл с Kickstarter со шлемом Oculus Rift DK1. И это очень существенный шаг, потому что Oculus даёт новый импульс всей VR. Люди снова начали верить в светлое и сияющее будущее этой технологии.
Начало эры мобильной VR
В 2014 году Google выпустил Google Cardboard. Это просто размеченный кусок картона, но, если сложить его в несколько частей, то можно испытать настоящий VR-экспириенс (всё зависит от характеристик телефона).
Стоит это удовольствие всего пять баксов. Конечно, Google Cardboard имеет некоторые ограничения по сравнению с дорогими VR-шлемами, но это VR у тебя в кармане.
В 2014 у нас уже был Three.js и несколько других JavaScript-библиотек, работающих с 3D. Но только в 2015 году появляется A-Frame.
2015 год, A-Frame
A-Frame — это опенсорсный фреймворк для web-VR. Поддерживается браузером Mozilla и WebVR-сообществом. Это система компонентов, основанная на Three.js, где разработчик может создавать 3D- и VR-сцены, используя HTML.
Почему A-Frame такой классный
- У A-Frame простой язык разметки. Вам не нужно писать длинную и сложную установку. Вместо этого вы можете просто написать сцену так, как будто вы пишите HTML-страницу.
- У A-Frame есть множество готовых к использованию компонентов и аддонов: звук, вёрстка, картинки, шаблонизаторы, AR и много чего ещё.
- Так как A-Frame основан на Three.js, вы можете использовать его более комплексно, расширяя возможности.
- Хорошая документация и сильное комьюнити, а также «недели A-Frame».
В 2016 году Mozilla и Google анонсировали первый релиз WebVR API.
Прототипирование VR/AR
Вместе с web-VR мы получаем мобильный VR. А с таким инструментом как A-Frame у нас есть возможность создать VR-опыт достаточно просто. Даже дизайнерам, едва знакомым с кодом.
Я сделал свой пример простой VR-сцены. Так как мой доклад готовился для Framer-митапа, все примеры будут вокруг этой темы. Я использовал несколько компонентов A-Frame:
- aframe-animation-component;
- aframe-event-set-component;
- aframe-layout-component;
- aframe-template-component.
У дизайнера есть много инструментов для прототипирования, но большинство из них закрыты. И мы не можем сделать ничего нового и свежего до тех пор, пока разработчики не выкатят нам новую версию с новыми фичами.
Есть всего пара сервисов-исключений. Sketch app, потому что он позволяет писать дополнительные плагины и Framer Studio, потому что это инструмент, базирующийся на JavaScript (это значит, что ты можешь делать всё, что способен представить).
На Marvellapp опубликовано несколько интересных материалов о том, как делать дизайн для VR.
Framer — это весьма утончённый инструмент, это JavaScript-фреймворк для дизайнеров с уже подготовленными функциями для красивой анимации и целых флоу.
Вот почему я думаю, что интегрировать VR в Framer, не используя все эти функции, было бы грехом. Мы не можем использовать A-Frame для VR в Framer, это будет абсолютно бессмысленно, поскольку программа работает с HTML DOM, а A-Frame просто транслирует HTML-разметку в canvas. Но у неё есть прикольный модуль для VR.
В данный момент это 360-градусное фото без стереоскопического эффекта. Вы не можете использовать ваш прототип для картборда, но зато вся анимация и функции Framer будут доступны.
Для A-Frame, помимо прочего, существует удобное дополнение AR.js.
Это дополнение работает с A-Frame и всеми включёнными в него компонентами. И примерно месяц назад я начал думать, как можно получить дополненную реальность с Framer.js и A-Frame, поскольку в данном случае нам не нужен стереоскопический эффект. Нам будет доступно всё, что может предложить нам Framer.js.
AR.js и A-Frame
«Ну, наконец-то!» — думает нетерпеливый читатель. Да, наконец-то мы начинаем копать в сторону AR. Я покажу, как можно получить AR с A-Frame и с Framer.
Дополненная реальность — это когда мы привносим что-то виртуальное в реальность. В нашем случае это 3D-модели. И данное дополнение упрощает работу над этим вместе с A-Frame.
Насколько это легко? Всего десять строчек кода.
Для того, чтобы получить AR, нам понадобится:
- Hiro-маркер. Это специальная метка для камеры. С помощью этого маркера AR.js будет знать, как именно проецировать сцену. AR.js имеет несколько шаблонов для этого маркера, но можно сделать и свой собственный. Маркер необязательно должен быть распечатан.
- A-Frame разметка в HTML. Добавить AR.js в A-Frame.
Я протестировал библиотеку на Codepen просто для того, чтобы удостовериться, что всё работает как нужно. Для этого я сделал две простых модели, диорамы Лондонского и Киевского сообществ Framer.
Дальше нужно включить модели внутрь
Но, чтобы удостовериться, что мы можем менять атрибуты модели, я сделал три кнопки: вращение моделей, увеличение моделей и переключение модели.
Я разметил структуру нашей AR-страницы.
И теперь JavaScript-часть. Я буду использовать jQuery для выборки элементов, но это необязательно. Можно использовать и ванильный document.querySelector на JavaScript.
Финальный результат
(Тестовый практический вариант прототипа находится в конце оригинального материала Павла Лаптева. — прим. ред.)
Мне кажется, что это прикольно. Но что, если нужно делать прототип для мобильного приложения? Или если нужно что-то более сложное, чем три кнопки? Просто с простым HTML и JavaScript, даже используя jQuery, это может быть сложно, так как нужно с нуля писать для них контролы и анимацию. Гораздо проще использовать для этой цели уже существующий фреймворк, который включает всё это в себя. Я говорю о Framer.
Framer и AR.js
Есть несколько путей включить A-Frame в Framer. Мы можем включить тег
