Virtual & Really.Ru - Реально о Виртуальном

Виртуальная реальность и 3D Стерео Технологии

Вы здесь: Новости VR и 3D Софт Прототипирование VR и AR в браузере

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

Печать PDF

Дизайнер Павел Лаптев  рассказал о способах создания 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.

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

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

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

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

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

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

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

 

(Тестовый практический вариант прототипа находится в конце //medium.com/@PavelLaptev/58bc6a642b4" rel="nofollow noopener" target="_blank" style="margin: 0px; padding: 0px; border-width: 0px 0px 1px; border-top-style: initial; border-right-style: initial; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: rgb(160, 208, 245); border-left-color: initial; border-image: initial; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; box-sizing: inherit; color: rgb(16, 89, 144);">оригинального материала Павла Лаптева. — прим. ред.)

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

Framer и AR.js

Есть несколько путей включить A-Frame в Framer. Мы можем включить тег

AddThis Social Bookmark Button