Саша Море
2 764

Прототипирование 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 x 230 LCD и палитрой в 256 цветов.

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

Следующее устройство, который я хотел бы упомянуть, — SEOS 120/40 HMD. Интересна цена на это устройство — $70 тысяч. Характеристики: 1280 x 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.

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

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

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

Не все серверы хороши для хранения ассетов. Я использовал Glitch

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

Переменный для моделей
Скрываем подсказки по клику
Поворачиваем модели (по классу)
Три режима приближения модели
Кнопка переключения. Тут мы просто скрываем одну модель и показываем другую. Индикация по флагу

Финальный результат

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

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

Framer и AR.js

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

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

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

  • У нас будут разделённые файлы: A-Frame-разметка и Framer-проект. Это удобно для редактирования.
  • Будет подсветка синтаксиса.
  • Не нужно думать о JavaScript-зависимостях.
  • Настоящий AR с разметкой, канвасом и videolayer.

A-Frame в Framer через i-frame

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

Объясняю, что тут происходит. У нас есть 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.

Добавляем A-Frame i-frame в Framer

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

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

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

Заключительная часть

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

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

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

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

Как это тестировать

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

  • Рекомендованный браузер на десктопе — Google Chrome.
  • Если вы тестируете на iPhone, удостоверьтесь, что у вас установлена iOS11, так как только на ней есть webRTC.
  • Браузер на iPhone — только Safari. Поскольку только Safari имеет доступ к медиаресурсам (webRTC). Остальные браузеры не подойдут, как и любые webView и Framer preview app в том числе.
  • Локалхост от Framer не работает. Вместо этого установите Prepros, у него есть всё, что нужно: подходящий локалхост, livereload и livepreview в браузере. Просто переместите ваш проект внутрь приложения. Но удостоверьтесь, что отключили автоматическую компиляцию для .cofee и .js файлов.
  • Не заливайте ваш прототип на Framer.cloud, так как он в этом случае будет иметь баннер Install me now, который нельзя убрать (привет отделу маркетинга).
  • Вместо этого используйте Github Pages или Glitch, или новую фичу от Codepen по созданию целых проектов.

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

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

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

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

{ "author_name": "Саша Море", "author_type": "self", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d","\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430"], "comments": 10, "likes": 24, "favorites": 19, "is_advertisement": false, "section_name": "default", "id": "30977", "is_wide": "" }
{ "is_needs_advanced_access": false }

Комментарии Комм.

Популярные

По порядку

0

Прямой эфир

Подписаться на push-уведомления
[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } } ]