В прошлый четверг я имел честь говорить о VR Web, теме, близкой и дорогой моему сердцу, на Coldfront, однонаправленной конференции, посвященной интерфейсу, в Копенгагене, Дания. Несмотря на то, что я боролся с остатками особенно ужасной простуды, мой доклад в Coldfront был одним из моих любимых, которые я когда-либо произносил. Почему? Публика была замечательная, организаторы замечательные, но что меня действительно взволновало в этом выступлении, так это то, что я написал это с помощью A-Frame.

Мы переживаем захватывающее время с VR Web. Ожидается, что WebVR 1.0 появится в Chrome 55 в декабре, а также в ночных сборках Firefox. Спецификации пыли (видите, что я там сделал? Нет?) очищаются, и браузерный API виртуальной реальности рассматривается как стандарт W3C для Интернета будущего. Я подумал, что сейчас самое подходящее время, чтобы посмотреть, выдержит ли он испытание: 45-минутную презентацию на сцене перед примерно 300 людьми. Готов ли мой ноутбук к этому вызову?

[идентификатор подписи = ”attachment_8971 align = ”aligncenter” ширина =” 1429]

Я слышал, вам нравится WebVR, поэтому вот изображение приложения A-Frame, показывающее видео приложения WebVR на мобильном устройстве виртуальной реальности[/caption]

Собственно говоря, так оно и было. Я точно знаю, что я не первый, кто пытается это сделать (кстати, один такой пионер сидел в аудитории!), но было очень весело выступить с докладом о виртуальной реальности использование 3D-среды в моей презентации. Я буквально прошелся по своей презентации, затем открыл код и показал, как происходит волшебство.

Создание грубого (и это похоже на черновую графику эпохи до Nintendo) приложения A-Frame для представления виртуальной реальности было поучительным опытом.

Планирование и структура проекта

  • Я начал с базового файла index.html, в котором была свернута библиотека A-Frame. Я использовал встроенные примитивы, чтобы создать грубый план того, как должен выглядеть мой опыт.
  • Я разделил контент, который хотел охватить, на несколько разных сегментов — это были бы группы слайдов или разделы в традиционной презентации, но я немного сократил отображаемый контент в целях производительности. Я не думаю, что кто-то это пропустил.
  • Каждое ведро контента стало объектом «сущность», в котором я мог содержать всю информацию. Например: моей первой областью контента было введение, которое содержало мою фотографию, название доклада и мое имя. Все это были объекты A-Frame, которые были дочерними элементами родительского элемента ‹a-entity id=”introduction”›.
  • Я создал скрипт PageComponents.js, который вызывал AFRAME.Register для объектов в моей сцене, с которыми я хотел иметь возможность взаимодействовать. Я написал несколько функций, многие из которых скрывали или показывали следующую порцию контента, и большинство из них выглядело довольно похоже на компонент «воспроизведение видео»:

  • Я использовал библиотеку текстовых компонентов A-Frame, которую написал Кевин Нго, чтобы добавить текстовые поля, чтобы помочь определить различные разделы контента.
  • Я использовал несколько разных скайбоксов для демонстрации 360-градусных фотографий и текстуру видео для воспроизведения клипа другого приложения WebVR, которое я написал с использованием платформы .NET.

Представление на сцене

  • У меня была готова резервная колода слайдов, которую я загрузил на свой iPad, чтобы использовать в качестве заметок по проекту. Было странно проводить презентацию без определенных заметок докладчика, но наличие дополнительного устройства для прокрутки для получения большего контекста помогло мне придерживаться своих пунктов без необходимости выводить их все на экран.
  • Я использовал браузер Edge для навигации по своему опыту. Есть несколько вещей, которыми я хочу поделиться, кроме заявления об отказе от ответственности, что я, помнится, работаю в Microsoft:
  • Я никогда не полагаюсь на Wi-Fi для конференций. Мне все равно, кто проводит мероприятие, каждый из моих примеров, которые я планирую использовать, будет расположен локально на моей машине. Если я хочу продемонстрировать что-то, что требует прямого доступа к конечной точке, это, вероятно, будет видео. Я также избегаю запуска локальных веб-серверов. Это означает, что я не использую Chrome для представления большинства своих приложений, потому что примерно неделю назад я никогда не мог получить работающий веб-сервер*, отличный от IIS, для моих сборок Unity WebGL, а Chrome недоволен локально размещенные ресурсы из-за CORS. Это далеко не все, что я хочу сказать: между Firefox и Edge Edge справлялся с отображением контента WebGL в течение 45 минут лучше, чем Firefox. Моя метрика — это то, насколько громко работал вентилятор моего ноутбука, YMMV. Я знаю, там очень специфическое тестирование производительности.
  • Я продолжаю надеяться, что если я притворюсь, что Edge поддерживает API WebVR, однажды он волшебным образом поддержит API WebVR. (Привет, команда Edge! Мой псевдоним Ливьерик, если хотите поболтать!)
  • Пока я не получу один из этих блестящих новых ноутбуков Nvidia с графической картой для настольных ПК, я все равно не смогу представить настольную виртуальную гарнитуру, поэтому возможность стереоскопического рендеринга в любом случае является спорным вопросом. Кроме того, на сцене людям все равно, стереоскопический ли это фильм, они все равно видят его на гигантском проекторе.
  • Хотя это никак не связано с WebVR, я носил свой GearVR на голове все 45 минут. Это служило нескольким целям: когда я как спикер показываю, что не отношусь к себе слишком серьезно, это помогает аудитории чувствовать себя непринужденно, а выступление доставляет массу удовольствия. По сути, я играл в свое выступление как в видеоигру, поэтому аксессуар помог задать тон. У меня тоже было удобное место для хранения, пока я не говорил о гарнитурах Mobile VR. Самое интересное было после — кто-то из зрителей упомянул, что это помогло им избавиться от клейма ношения VR-шлема, что, по моему мнению, было довольно круто.
  • Закончив изучение приложения, я зашел в исходный код и показал аудитории, как я написал приложение. В итоге получилось около 300 строк кода для всего этого. Довольно шикарно!

Я склонен чередовать технологии Unity и WebVR, но я по-прежнему увлечен ими обоими, даже когда торгуюсь. У каждого подхода есть много преимуществ, и в последнее время я провел много времени в Unity для разработки HoloLens, поэтому было здорово вернуться в веб-экосистему, чтобы построить свое выступление. Я был впечатлен тем, как развивалась A-Frame и как развивались вокруг нее инструменты — спасибо Кевину Нго за добавление текстового компонента, эта библиотека невероятно полезна.

На мой взгляд, всегда полезно что-то поменять. Я постоянно смущаюсь, когда пытаюсь написать ванильный код JS и не могу понять, как перебирать переменную или сравнивать строки. Также невероятно приятно бороться с чем-то и видеть, как это работает. Это дает вам возможность работать над расширением границ.

[идентификатор подписи = ”attachment_8991 align = ”aligncenter” ширина =” 1183]

По умолчанию современная библиотека Electron не поддерживает WebVR из-за используемой версии браузера Chromium. Когда позже в этом году появится поддержка WebVR API, я надеюсь, что Electron может показать некоторые перспективы для JS-приложений виртуальной реальности для настольных компьютеров.[/caption]

Приложение, которое я создал, будет развиваться со временем. У меня есть неделя, чтобы отполировать его и представить на фестивале Full Stack Fest в Барселоне в эту пятницу, и по мере развития веб-инструментов для виртуальной реальности будут развиваться и мои эксперименты. После ряда неудачных прошлых попыток я был мотивирован, чтобы наконец настроить среду Node, чтобы я мог обернуть свой сайт A-Frame в пакет Electron, что-то, что работало абсолютно прекрасно и побудило меня углубиться в открытый исходный код. Когда позже в этом году спецификация WebVR будет перенесена в Chrome/Chromium, Electron может стать действительно захватывающим способом создания настольных VR-приложений на JS.

Объединение такой библиотеки, как Electron, с экспериментальным браузерным движком Mozilla Servo, многопоточным, ориентированным на GPU движком, было бы действительно интересным способом начать разработку высокопроизводительных JS-приложений для настольных ПК. Веб-маяки как механизм доставки и обнаружения для иммерсивного веб-опыта станут совершенно новым способом демонстрации опыта, связанного с местоположением. Я буду первым, кто скажет, что я понятия не имею, как все это становится технически осуществимым, но я могу сказать, что я никогда не был так взволнован потенциалом иммерсивных технологий на основе браузера и миром, который развивается. вокруг них.

Будущее фантастическое.