Прототипирование VR и AR в браузере

Дизайнер Павел Лаптев рассказал о способах создания 3D-моделей дополненной и виртуальной реальности и проверил их на практике.

Способов прототипирования виртуальной и дополненной реальности достаточно много. Но мы поговорим о Web VR и о том, что сейчас есть на этом рынке, а также о программе для прототипирования Framer.

Недавно я уже писал о том, как сделать интерактивную 3D-модель с поддержкой PBR, управлять её цветом, материалом, анимацией и много чем ещё, используя API Sketchfab и контролы через JavaScript.

В этом материале я опишу, как прототипировал мобильное приложение, используя Framer, так как эта библиотека включает в себя все нужные функции для HD-прототипирования под мобильные версии. Конечно под веб я его использовать не советую.

Статья выше может быть полезна, если нужно сделать что-то не слишком сложное и кастомное с точки зрения моделей и действий. Но если мы хотим сделать что-то сложнее — не только 3D-модели, но и целые сцены — тогда лучше использовать библиотеку Three.js. Чтобы настроить Three.js, может понадобиться немного больше, чем пара строк кода.

В таком случае я бы посоветовал использовать A-Frame. Это качественный 3D-фреймворк от Mozilla.

Перед практической частью — краткая история виртуальной реальности. Для некоторых это может быть долгим путешествием перед практической частью, поэтому, если не хочется читать много теории, воспользуйтесь оглавлением. Также большинство вещей, о которых я напишу, можно посмотреть у Дмитрия Бачило.

На данный момент я могу выделить следующие (хотя гибридов больше):

Все они разные, но суть одна и та же.

Обратимся к этимологии термина. Определение на момент конца 14 века: vertu — влияющее на физические достоинства или способности, эффективное в отношении присущих природным качествам». Слово происходит от средневекового латинского virtualis и латинского virtus — превосходство, сила, действительный. Буквально это означает «мужественность, зрелость» (см. также virtue).

В наши дни значение слова поменялось, теперь это «имеющее эффект, но не являющееся реальностью».

Виртуальная реальность прошла долгий путь и началась далеко не с Oculus Rift. Человечество мечтало о виртуальной реальности долгое время. И эти мечты стали воплощаться в жизнь в 1838 году с изобретением стереоскопа.

Первые робкие шаги к виртуальной реальности. Конечно, в этот период ещё не появились такие понятия как VR и AR. Но люди уже понимали, что могут обмануть разум, играть с ним.

В 1935 году Стенли Г. Вейнбау описывает очки виртуальной реальности в книге «Очки Пигмалиона»:

— Какой же дьявол помог вам это сделать?

— Какой? Мой жидкий позитив, затем — мои магические очки. Я составил сложный раствор, понимаете? Я добавляю в него вкус химическими средствами и звук — электрическими. И когда сюжет записан, я помещаю раствор в свои очки-кинопроектор. И в этом растворе есть сюжет, зрелище, вкус, запах, звук, — всё!

— А осязание?

— Если вы достаточно захвачены сюжетом, ваш мозг его добавляет, — нетерпение зазвучало в его голосе.

В 1956 году Мортон Хейлиг делает «Сенсораму» — симулятор реальности, который может имитировать ветер, стереокартинку, запах и прочее (опционально).

Выглядит «Сенсорама» немного громоздко, но это ещё один шаг к виртуальной реальности. Это примерно то, что в наше время называют «Кинотеатр 99D» в парках развлечений.

Как и в любой индустрии, маркетинг старается продать тебе то, что, скорее всего, тебе и не нужно, а ещё преувеличить и описать продукт лучше, чем он есть на самом деле.

Более известный как первый шлем виртуальной реальности. Его создал в 1968 году американский учёный в области информатики и пионер интернета Айван Сазерленд вместе с помощником — студентом Бобом Спроуллом.

«Дамоклов меч» мог проецировать простую вертексную 3D-графику, но важнее то, что это было настоящее 3D, а не 2D, которое пытается быть похожим на 3D.

Это устройство было настолько тяжёлым и массивным что в итоге получило название «Дамоклов меч».

Или ретро Google maps. Ещё один эксперимент, который также можно отнести к сфере VR. Aspen Movie Map была революционной гипермедиа-системой, разработанной в MIT командой, работающей с Эндрю Липпманом в 1978 году.

Aspen Movie Map — это стоп-моушен тур через снятые кадр за кадром картинки, в котором пользователь мог выбирать направление движения. Карта включала в себя и целую трехмерную карту Аспена.

После того, как известная всем «Атари» закрылась, её отделение Atari Research выделилось в новую команду VPL Research (Visual Programming Languages). Это была одна из первых компаний, которая не только разрабатывала и исследовала VR, но и продавала продукты. VPL разработали Data Glove, EyePhone и Data Suit.

Долгое время виртуальная реальность рассматривалась только с точки зрения академических упражнений или разрабатывалась в медицинских, научных целях, а не для широкой публики. Но картина начала меняться в 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.

В период между 1995 и 2011 годами было создано достаточно много шлемов виртуальной реальности. Но, наверное, самым отличительным был VFX1 Headgear 1995 года. Этот шлем был оснащён сенсорами, встроенными динамиками, джойстиками и довольно просто активировался.

VFX1 стоил бы вам $695 с характеристиками 263 x 230 LCD и палитрой в 256 цветов.

Только посмотрите на рекламу VFX1.

Следующее устройство, который я хотел бы упомянуть, — SEOS 120/40 HMD. Интересна цена на это устройство — $70 тысяч. Характеристики: 1280 x 1024 LCD, 120-градусный угол обзора.

В течении 2000 годов появилось много разных шлемов виртуальной реальности. Вы можете посмотреть на первую и вторую таблицы с информацией о них.

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. Люди снова начали верить в светлое и сияющее будущее этой технологии.

В 2014 году Google выпустил Google Cardboard. Это просто размеченный кусок картона, но, если сложить его в несколько частей, то можно испытать настоящий VR-экспириенс (всё зависит от характеристик телефона).

Стоит это удовольствие всего пять баксов. Конечно, Google Cardboard имеет некоторые ограничения по сравнению с дорогими VR-шлемами, но это VR у тебя в кармане.

В 2014 у нас уже был Three.js и несколько других JavaScript-библиотек, работающих с 3D. Но только в 2015 году появляется A-Frame.

A-Frame — это опенсорсный фреймворк для web-VR. Поддерживается браузером Mozilla и WebVR-сообществом. Это система компонентов, основанная на Three.js, где разработчик может создавать 3D- и VR-сцены, используя HTML.

В 2016 году Mozilla и Google анонсировали первый релиз WebVR API.

Вместе с web-VR мы получаем мобильный VR. А с таким инструментом как A-Frame у нас есть возможность создать VR-опыт достаточно просто. Даже дизайнерам, едва знакомым с кодом.

Я сделал свой пример простой VR-сцены. Так как мой доклад готовился для Framer-митапа, все примеры будут вокруг этой темы. Я использовал несколько компонентов A-Frame:

У дизайнера есть много инструментов для прототипирования, но большинство из них закрыты. И мы не можем сделать ничего нового и свежего до тех пор, пока разработчики не выкатят нам новую версию с новыми фичами.

Есть всего пара сервисов-исключений. 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. Я покажу, как можно получить AR с A-Frame и с Framer.

Дополненная реальность — это когда мы привносим что-то виртуальное в реальность. В нашем случае это 3D-модели. И данное дополнение упрощает работу над этим вместе с A-Frame.

Насколько это легко? Всего десять строчек кода.

Для того, чтобы получить AR, нам понадобится:

Я протестировал библиотеку на Codepen просто для того, чтобы удостовериться, что всё работает как нужно. Для этого я сделал две простых модели, диорамы Лондонского и Киевского сообществ Framer.

Дальше нужно включить модели внутрь <a-marker> тега. И всё.

Но, чтобы удостовериться, что мы можем менять атрибуты модели, я сделал три кнопки: вращение моделей, увеличение моделей и переключение модели.

Я разметил структуру нашей AR-страницы.

И теперь JavaScript-часть. Я буду использовать jQuery для выборки элементов, но это необязательно. Можно использовать и ванильный document.querySelector на JavaScript.

(Тестовый практический вариант прототипа находится в конце оригинального материала Павла Лаптева. — прим. ред.)

Мне кажется, что это прикольно. Но что, если нужно делать прототип для мобильного приложения? Или если нужно что-то более сложное, чем три кнопки? Просто с простым HTML и JavaScript, даже используя jQuery, это может быть сложно, так как нужно с нуля писать для них контролы и анимацию. Гораздо проще использовать для этой цели уже существующий фреймворк, который включает всё это в себя. Я говорю о Framer.

Есть несколько путей включить A-Frame в Framer. Мы можем включить тег <script> c src AR.js в index.html из корневой папки Framer и написать HTML внутри Framer app, но это плохая идея, поскольку весь код A-Frame нужно будет брать в кавычки.

Ещё вам придётся сражаться с зависимостями и асинхронностью, и вы потеряете всю подсветку синтаксиса для A-Frame разметки. Это нарушит целостность Framer-проекта.

Оптимальным вариантом тут будет i-frame. HTML внутри HTML. Я нахожу в этом много преимуществ:

Структура проекта будет выглядеть внутри следующим образом:

Объясняю, что тут происходит. У нас есть Frame-проект (корневая папка) и внутри папки находится много Frame-реквизитов, например, папки app.coffee, framer, images и modules. Внутри корневой папки мы создадим aframe-папку, в которой будем хранить iframe.html, содержащий ссылки на A-Frame.js и AR.js, а также содержать A-Frame-разметку. В дополнение внутри aframe-папки мы можем создать папку models, в которой можно хранить модели и текстуры. В примере ниже я буду использовать мои старые ссылки с гитхаба на модели и текстуры.

Теперь давайте сделаем прототип. Мы будем делать прототип, в котором с помощью боковых свайпов можно вращать и скейлить модель. Это только демонстрация, вы можете выполнять и другие действия, почти всё, что угодно.

Это то, что мы будем делать. Позже я сделаю запись с моего старенького iPhone 6, чтобы протестировать прототип на реальном устройстве.

Я хотел полного погружения в AR-экспириенс, поэтому решил удалить все видимые контролы. Вместо этого мы будем использовать левый свайп для поворота и правый свайп для увеличения.

Просто и чисто, но нам также нужно показать, как этим пользоваться. Любые типы событий (например, свайпы или драг) можно легко воспроизвести в Framer.

Я сделал свой дизайн в design mode в Framer.

В итоге у нас есть четыре экрана: Please rotate your device, скрытые контролы, Use Hiro-marker и обучающий скрин Swipe to close.

Нужно чистить консоль при каждой перезагрузке. Также добавим слушателей для отслеживания ориентации девайса.

Далее мы создаём AR-layer — фреймеровский слой. Внутри слоя мы пишем HTML-код, где указываем путь до iframe.html. ТОчень важно держать этот слой всегда под остальными слоями, то есть на бэкграунде, а UI наверху, поэтому напишем ARlayer.sendToBack()

Наша структура слоев будет выглядеть так:

Создаём i-frame-переменную, будем выбирать iframe по имени тега. Ещё создадим переменную londonModel для её контроля. Сейчас она undefined, так как iframe ещё не подгружена.

Для того, чтобы забрать контент из iframe, нам нужно подождать, пока iframe не подгрузится. И только после того, как iframe-контент будет загружен, мы сможем его взять и переписать переменную londonModel.

Теперь мы готовы управлять и передавать новые параметры, а также менять текущие.

Часть с функциями для контроллеров не очень большая:

Важный вопрос: куда заливать и как тестировать прототип.

Это все рекомендации.

И финальный прототип.

Вывод: оказалось не так сложно замиксовать разные фреймворки и сервисы. Можно достичь неплохих результатов и высоко проработанных прототипов.

#дизайн #разработка