Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
  1. Главная >
  2. Блог >
  3. UI/UX >
  4. Руководство по виртуальной реальности для веб-разработчиков

Руководство по виртуальной реальности для веб-разработчиков

Руководство по виртуальной реальности для веб-разработчиков

В последнее время появляется все больше веб-браузеров с поддержкой виртуальной реальности (virtual reality, VR). В этой статье мы рассмотрим, как именно обстоят дела в этой сфере на сегодняшний день.

Состояние технологий виртуальной реальности и интернета

Ранее интернет-сообщество уже экспериментировало с виртуальной реальностью, а именно с VRML (англ. Virtual Reality Modeling Language — язык моделирования виртуальной реальности), но затем появился WebVR, представляющий собой совершенно иной подход к виртуальной реальности, более подходящий для современного интернета. Благодаря выпуску WebGL в 2011 году нам удалось ускорить работу с трехмерной графикой в сети. Теперь виртуальная реальность возможна и в интернете благодаря новым веб-интерфейсам API, использующим преимущества VR-устройств.

Благодаря этим API стало возможным отображение WebGL контента в 3D с помощью VR-гарнитуры. Они также предоставляют данные отслеживания гарнитуры и контроллера для создания эффекта присутствия пользователя в виртуальном мире.

WebVR был разработан в 2014 году компанией Mozilla. В 2016 году более ранняя версия стандарта была доступна для десктопных браузеров Chrome, Firefox и браузера Samsung с поддержкой виртуальной реальности (Samsung Internet for Gear VR).

Сегодня стандарт хорошо поддерживается на телефонах и десктопных компьютерах большинством основных гарнитур:

Сегодня стандарт хорошо поддерживается на телефонах и десктопных компьютерах большинством основных гарнитур

Поддержка WebVR (по состоянию на июнь 2017 года)

WebVR — стандарт с открытым исходным кодом, над которым трудятся такие компании как Mozilla, Google, Samsung, Oculus, Microsoft, и с недавнего времени также Apple.

Это означает, что на любом сайте, использующем WebVR, может быть создана сцена с эффектом присутствия, и доставлена затем одновременно на все основные платформы виртуальной реальности, как десктопные, так и мобильные.

Способность интернета воспроизводить VR-контент позволяет легко делиться опытом виртуальной реальности через URL и просматривать ее в браузере без необходимости скачивать сложные приложения.

Дополнительные API в Samsung Internet

Эти API не являются частью WebVR API, но полезны при просмотре контента с эффектом погружения на традиционных веб-сайтах в иммерсивном браузере без использования WebGL.

Данные API разрабатываются для браузера Samsung Internet for Gear VR, но мы надеемся, что разработчики других браузеров также обратят на них внимание и они будут стандартизированы.

1. Панорамное видео

Речь идет о возможности воспроизводить панорамные видео (panoramic videos) (моноскопические и стереоскопические) с эффектом присутствия, установив атрибут type="dimension=360;" тега video. Панорамные видео позволяют пользователю перемещаться внутри видео, передвигая изображение кончиками пальцев.

Возможные значения:

dimension=3d-lr: side-by-side 3D video
dimension=3d-tb: top-to-bottom 3D video
dimension=360: 360-degree video
dimension=360-lr: side-by-side 3D 360-degree video
dimension=360-tb: top-to-bottom 3D 360-degree video
dimension=180: 180-degree video
dimension=180-lr: side-by-side 3D 180-degree video
dimension=180-tb: top-to-bottom 3D 180-degree video

<video src="/360.webm" type="video/webm; dimension=360;"></video>

2. Изменение фона

Другой API, доступный в Samsung Internet for Gear VR, — это JavaScript API для изменения фонового изображения (background image) VR-браузера.

Вы по-прежнему будете видеть ваш традиционный 2D-сайт, но фон будет изменен на более соответствующий его среде.

window.SamsungChangeSky({ sphere: '//site.com/blue-sky.jpg' });

Что такое WebVR?

WebVR — это набор кроссбраузерных API-интерфейсов, предоставляющих множество VR утилит для помещения пользователя в иммерсивную среду, сгенерированную при помощи WebGL.

Эти API успешно справляются с отображением неискаженных 3D-стерео изображений.

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

Состояние WebVR API

Текущая версия API известна как версия 1.1. В версии 2.0 изменятся названия некоторых методов и исчезнет ряд неиспользуемых методов. Также появятся дополнительные возможности для некоторых устройств и вариантов использования (use cases), которые не предвидели во время первой итерации API.

В целом, WebVR API обеспечивает следующие возможности:

  • Гарнитуры с технологиями отслеживания позволяют пользователю, находящемуся в виртуальной среде, оглядываться по сторонам. Благодаря встроенной кадровой интерполяции (frame interpolation) отслеживаются все движения головы.
  • Поддержка «шести степеней свободы» и «трех степеней свободы» позволяет контроллерам, как у HTC Vive и Gear VR, работать в виртуальной реальности. Это позволяет человеку использовать руки для взаимодействия с виртуальной средой.
  • Предоставляется информация о том, как должна быть отображена 3D-информация для гарнитуры. Например: видимая область и как обеспечить рендеринг для каждого глаза в canvas.
  • Новый параметр requestAnimationFrame синхронизируется с частотой обновления экрана гарнитуры.
  • Существует метод отправки подготовленных кадров на гарнитуру в форме элемента canvas поддерживаемого WebGL.
Диаграмма, описывающая цикл VR.

Диаграмма, описывающая цикл VR. Гарнитура предоставляет данные о положении и вращении; разработчик использует эти данные для рендеринга сцены с пользовательского ракурса, а затем отправляет подготовленные данные на гарнитуру, где они искажаются соответствующим образом и отображаются пользователю

Создание иммерсивного опыта WebVR

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

1. Быстрый старт

Одной из самых больших проблем интернета на сегодняшний день является производительность сети. Решение этой проблемы крайне важно, поскольку:

  • продолжительность концентрации внимания пользователей (attention span) сокращается,
  • сети становятся все более перегруженными, а сайты — все больше.

Сайты WebGL и WebVR, безусловно, не являются исключением. Они также могут быть довольно увесистыми.

Конкретно сейчас виртуальная реальность имеет преимущество над традиционным контентом, поскольку для пользователей он в новинку и достаточно интересен, в связи с чем они готовы ждать большее количество времени. Тем не менее, все же важно, чтобы ваш 3D опыт загружался в течение нескольких секунд, поскольку пользователи становятся все более нетерпеливыми.

Пока ваш сайт с поддержкой виртуальной реальности не загрузился, для пользователя это не более, чем 2D-сайт и обещание чего-то интересного в будущем.

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

Даже если вы просто покажете размытый 360-градусный skybox и какой-то low-poly контент, позволяющие пользователю осмотреться вокруг, это подарит вам драгоценные секунды вовлеченности (engagement), чтобы дозагрузить дополнительный контент и улучшить вовлечение.

Показать что-то простое, но быстро — гораздо лучше, чем потерять пользователя из-за того, что они устали ждать завершения загрузки.

Но имейте в виду, что сетевые операции могут иметь интенсивную вычислительную нагрузку на центральный процессор и блокировать основной поток (main thread). Если это будет происходить очень часто, это может вылиться в плохой пользовательский опыт (user experience).

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

Эффективное использование Service Worker и Cache API для кэширования статических файлов и соответственно более быстрой загрузки страницы при повторном обращении к ней — отличный способ сделать так, чтобы пользователи возвращались снова и снова.

2. Прогрессивное улучшение (progressive enhancement)

Две основные платформы виртуальной реальности являются полными противоположностями: высокопроизводительные десктопные компьютеры с усовершенствованными контроллерами (controllers) и среднего/высокого уровня мобильные телефоны, имеющие либо один единственный контроллер вращения (rotation-tracked controller), либо вообще ни одного.

Фотография очков виртуальной реальности HTC Vive с контроллером положения, а также гарнитур Samsung Gear VR, Google Daydream и Google Cardboards на заднем плане

Фотография очков виртуальной реальности HTC Vive с контроллером положения, а также гарнитур Samsung Gear VR, Google Daydream и Google Cardboards на заднем плане

Это ставит перед нами две проблемы:

  • поддержание постоянной скорости передачи кадров (frame rate) на платформах с совершенно разными возможностями,
  • обеспечение хорошего пользовательского опыта на VR устройствах с различными параметрами.

Пока что телефоны имеют самый большой охват благодаря популярности Gear VR и Daydream, а также дешевизне и высокой доступности гарнитуры Google Cardboard.

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

Некоторые библиотеки, такие как Universal Controls из A-Frame Extras, стараются сделать все возможное с тем, что есть в наличии.

Веб-совместимые контроллеры

Веб-совместимые контроллеры (слева направо): отслеживание взгляда, традиционные игровые контроллеры, контроллеры вращения, контроллеры положения и вращения, распознавание жестов

Веб-совместимые контроллеры

3. Ассиметричное воспроизведение

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

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

Например, VR-приложение для создания виртуальной реальности может использовать контроллеры отслеживания на мощных машинах; на мобильном телефоне же пользователь сможет все просматривать, но не сможет редактировать.

Другим примером может служить многопользовательская сетевая игра виртуальной реальности, в ходе которой игроки используют контроллеры отслеживания; мобильный зритель может наблюдать за игрой, выбирая тот или иной ракурс при помощи устройства отслеживания взгляда.

4. Тестирование по мере разработки

В любом современном веб-дизайне ключевым моментом является разработка оптимизированного сайта в первую очередь для мобильного телефона, так называемый подход Mobile first («сначала мобильные»). В процессе создания сцены регулярно тестируйте ее на реальных смартфонах среднего уровня без контроллеров, чтобы гарантировать ее работу для большинства ваших пользователей.

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

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

Для улучшения графики вы можете предоставить пользователю возможность выбора качества до начала использования им WebVR. Если пользователь запрашивает высокое качество (high quality), загружайте крупную или трудную для отображения графику.

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

Когда вы улучшаете свою сцену, вы можете сделать несколько вещей:

  • увеличить дальность прорисовки (draw distance),
  • загружать и использовать модели или текстуры с высоким разрешением,
  • использовать более сложные ретушеры (shaders).

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

Не стоит забывать также, что для отличной сцены нужно гораздо больше, чем просто точность имитации визуальной обстановки (visual fidelity). Высоко стилизованные игры, такие как Team Fortress 2, по-прежнему выглядят великолепно сегодня, тогда как «реалистичные» игры того же периода — уже не так хорошо.

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

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

Что привносит интернет в виртуальную реальность?

Интернет пытается решить некоторые из насущных проблем виртуальной реальности.

Одна из самых больших проблем заключается в том, что пользователь должен взять на себя большое обязательство (commitment) для разового опыта, к которому он, возможно, не захочет вернуться.

В случае с нативной мобильной и десктопной виртуальной реальностью человеку требуется загрузить специальное приложение из магазина приложений, такого как например Oculus store для Gear VR или Steam для HTC Vive или Oculus Rift.

Такой вариант хорошо подойдет для дорогих видеоигр, в которые пользователи уже инвестировали какое-то количество денег и они будут возвращаться к ним вновь и вновь. Но для разового опыта, как покупка, просмотр фильма или знакомство с новой социальной платформой, это может стать высоким «входным барьером» (barrier to entry).

Как правило, пользователям не нравится иметь кучу приложений на своем устройстве, которые лишь зря занимают место или расходуют большое количество интернет-трафика для загрузки. Особенно эта мысль не по душе тем пользователям, чьи мобильные устройства имеют ограниченное дисковое пространство (disk space) или ограниченный предел передачи данных в сети (network data caps).

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

Конечно, для этого необходимо, чтобы разработчик создал VR-сайт, который не будет храниться в виде единого гигантского пакета (bundle); в противном случае, те выгоды, которые способен предоставить интернет, могут быть упущены.

Доставляя файлы виртуальной реальности динамически и по отдельности, подобно файлам веб-страницы, вы сможете воспользоваться «умным кэшированием» (smart caching) (начиная от CDN, заканчивая HTTP-кэшированием и Cache API).

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

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

Виртуальной реальностью можно делиться посредством URL-адреса, который может распространяться в социальных сетях или по электронной почтой, или даже быть написан на стене или отображаться на телевизоре. Это увеличит вероятность того, что ваш VR-контент станет вирусным благодаря низкому «входному барьеру».

1. Извлечение максимальной выгоды из быстрого интернета

Одна из особенностей большинства сайтов WebVR заключается в том, что перед входом в виртуальную реальность пользователь может просматривать сцену и взаимодействовать с ней на своем 2D-экране. С вращением телефона одновременно вращается и вид на экране, создавая таким образом видимость «волшебного окна» в виртуальное пространство.

Это «волшебное окно» — мощный паттерн. Он дает пользователю возможность предварительно увидеть сцены виртуальной реальности без использования VR-гарнитуры. Это может пригодится в тех случаях, когда у пользователей нет при себе VR-гарнитуры или при нахождении в общественном транспорте.

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

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

Многие web API, о которых вы, возможно, слышали или использовали их, стали более актуальными в контексте виртуальной реальности:

  • WebSockets. Они используются для передачи текстовых и двоичных данных на сервер в режиме реального времени. В случае с виртуальной реальностью они могут использоваться для синхронизации сотен пользователей в режиме реального времени и обеспечения таким образом опыта совместного использования и возможности просматривать аватары друг друга.
  • WebRTC. Для улучшения опыта совместного использования виртуальной реальности также можно использовать WebRTC. Он позволяет передавать двоичные данные, видео и аудио между равноправными узлами. Это может быть использовано для обеспечения голосового чата между двумя аватарами или синхронизации положения и позы аватара без прохождения через центральный сервер. Таким образом можно одновременно подключить от шести до восьми пользователей.
  • WebAudio. Один из самых мощных API. В браузере содержится все необходимое для управления и анализа аудио. Можно даже использовать узел паннера (panner node) для трехмерного пространственного звучания в виртуальной реальности. Для создания виртуальных сред с эффектом присутствия WebAudio важен как никогда раньше.
  • SpeechRecognition. Современные браузеры содержат встроенный механизм распознавания речи (speech recognition). Его можно использовать для голосовых команд и голосового ввода текста в тех случаях, когда использование реальной или виртуальной клавиатуры по каким-либо причинам затруднительно.

Какое влияние может оказать виртуальная реальность на интернет в долгосрочной перспективе?

Виртуальная реальность уже повлияла на веб-платформу; WebVR API были реализованы на многих платформах; и сейчас обсуждается вопрос создания рабочей группы WebVR внутри W3C.

Виртуальная реальность становится все более популярной, и с распространением устройств дополненной (augmented) и гибридной реальности (mixed reality), важно, чтобы интернет был готов воспользоваться преимуществами новых платформ.

WebVR, каким мы знаем его сегодня, целиком зависит от WebGL. Оптимизация под WebGL означает для поставщиков браузеров необходимость увеличить скорость рендеринга. Скорость важна, поскольку пропуск кадров в виртуальной реальности может иметь ужасные последствия, вплоть до того, что пользователю может стать плохо!

В скором времени WebGL 2 станет появляться на стабильных версиях браузеров. Версия 2 приближает WebGL к спецификации OpenGL ES 3.0. Большая визуальная точность и более быстрое воспроизведение продвинутой графики сделают виртуальную реальность действительно невероятным визуальным опытом.

Для более точного преобразования звука в 3D (известного как моделирование восприятия звука) и обеспечения таким образом высококачественного 3D-звука, требуемого высокообюджетными проектами, может потребоваться WebAudio. Хороший 3D-звук будет будет иметь важное значение для обеспечения высококачественного иммерсивного видеоконтента, такого как фильмы в формате «360 градусов» и иммерсивные аудиоролики.

Выполнение скриптов (scripting) в интернете также выиграет от значительных улучшений производительности. На стадии разработки находится множество JavaScript API, которые смогут быть использованы для повышения производительности в интернете.

Сам JavaScript можно оптимизировать и предварительно скомпилировать. Другой вариант — компилировать другие языки в WebAssembly (WASM). Это может ускорить работу по всем направлениям, обеспечив пакет, который будет гораздо меньше для загрузки и более быстрый для интерпретации и выполнения. При разумном и модульном подходе WASM может быть использован для создания основного механизма рендеринга WebVR опыта, с которым мы по-прежнему можем взаимодействовать при помощи JavaScript, как мы это делаем сегодня.

Браузер может использовать веб-работников (web workers) для произведения расчетов, не блокирующих основной поток (main thread). Это хорошо, поскольку основной поток используется, главным образом, для рендеринга. Веб-работники полезны для управления большими объемами данных с интенсивными вычислениями, нагружающими процессор. Таким образом, будучи изолированными от основного потока, эти вычисления с меньшей вероятностью спровоцируют пропуск кадров (frame drops).

К сожалению, отправка и получение данных от веб-работников для использования их в основном потоке связаны с определенными расходами. Частично их можно уменьшить с помощью передаваемых объектов (transferable objects). Передаваемые объекты, такие как ArrayBuffers, позволяют изменять владельца объекта, но сама передача этого объекта может стать сложной задачей, в ходе которой возможно возникновение ошибок.

Новый API, SharedArrayBuffer, обеспечит возможность совместного использования работниками одного и того же ArrayBuffer, что в данном случае целесообразно.

Что касается веб-работников, то часть проблемы заключается в том, что в данный момент поток, отображающий веб-страницу, должен также использоваться для рендера сцены WebGL. Таким образом, любые побочные эффекты другого кода, запускаемого в основном потоке, например, очистка памяти или задачи, интенсивно использующие процессор (CPU-bound), могут привести к пропуску кадров.

OffscreenCanvas позволяет выполнять рендеринг в веб-работнике. Это поможет изолировать очень важный и чувствительный цикл рендеринга от других потоков.

Другим важным вариантом использования рендеринга является предварительно записанные 2D и 3D видео. Они могут использоваться в качестве текстур в WebGL, но у них отсутствуют более тонкие настройки. Так же, как мы имеем в JavaScript элемент audio и AudioContext, нам нужно будет добавить videoContext, чтобы сделать управление видео более эффективным и содействовать проигрыванию видео формата «360 градусов» в 3D.

Область, в которой виртуальная реальность в настоящее время конфликтует с интернетом — это рендеринг документов. Рендеринг документов — это основная функция веб-платформы, но отображение документа в WebGL практически невозможно без очень медленного и умного ре-рендера.

Было бы здорово примирить их, заставив браузер раскрывать содержимое DOM технологии WebGL. Это позволило бы нам использовать преимущества интернета для 2D интерфейсов, но с другой стороны это представляло бы потенциальную угрозу нарушения конфиденциальности.

Другой путь

Виртуальная реальность на основе WebGL не обязательно должна стать будущим виртуальной реальности в интернете. Необходимость воспроизводить даже самый простой вариант использования WebVR в WebGL кажется недальновидной в лучшем случае и может потенциально привести к гибели виртуальной реальности в интернете в долгосрочной перспективе.

Одной из сильной сторон интернета является то, что HTML является декларативным языком (declarative language). Браузеры могут интерпретировать язык в соответствии с платформой. Сайт на вашем десктопном компьютере не будет выглядеть так же, как он выглядит на телефоне или телевизоре. Виртуальная реальность — это еще одна платформа среди всего многообразия медиаресурсов, чтобы использовать интернет.

Будучи декларативной, как HTML или CSS, виртуальная реальность в интернете может автоматически производить рендеринг для сбалансирования скорости рендеринга и визуальной точности. Высокопроизводительный компьютер может использовать продвинутые ретушеры и детализированные модели; а маломощный мобильный телефон автоматически использовать простой ретушер и low-poly модели — подобно тому, как элемент picture может загружать изображения правильного разрешения, а затем кадрировать их для конкретного устройства.

HTML может быть расширен, включив в себя некоторые распространенные варианты использования виртуальной реальности, такие как воспроизведение видео и изображений в формате 360 градусов и 3D, отображение 3D-моделей, и перемещение части веб-страницы за пределы области 2D просмотра (2D viewport) в 3D-пространство.

Samsung начал работу по некоторым из этих вариантов использования в веб-браузере Samsung Internet for Gear VR.

Он имеет встроенную поддержку 3D-видео с помощью элемента video. Отображение 3D стерео видео в формате «360 градусов» требует всего лишь следующего HTML-тега:

<video controls src="360video.mp4" type="video/mp4; dimension=360-lr;">

Средний путь

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

Extensible Web manifesto основан на идее, что интернет не должен жертвовать расширяемостью (extensibility) ради простоты использования и что сообщество может использовать инструменты низкого уровня, предоставленные для расширения веб-платформы с использованием библиотек.

Виртуальная реальность — это тот случай, когда такой подход представляется весьма актуальным. У нас уже есть инструменты низкого уровня WebGL и WebVR API.

Библиотека A-Frame предоставляет пользовательские элементы HTML для создания 3D-сцен на основе WebGL. A-Frame можно использовать как самостоятельно, так и совместно с такими популярными платформами, как React и Angular.

A-Frame позволяет любому веб-разработчику с опытом в HTML описывать 3D-сцены виртуальной реальности и управлять ими, используя знакомый им JavaScript. Даже такие инструменты, как jQuery, Angular и React, могут использоваться для изменения сцены, поскольку в конечном счете это все еще HTML.

Заключение

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

И хотя мы находимся еще только на начальном этапе развития виртуальной реальности в интернете, сейчас самое время начинать ее создавать и смотреть, что работает, а что нет.

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

Начав создавать VR-опыт в интернете уже сегодня, мы сможем гарантировать, что виртуальная реальность в интернете станет надежным стандартом, открывающим безграничные возможности для будущих разработчиков.

Даже если вы не считаете виртуальную реальность еще достаточно зрелой, то, что мы создаем сегодня, завтра будет по-прежнему актуальным. Паттерны интерфейсов, создаваемые нами для виртуальной реальности, применимы ко всем иммерсивным площадкам. Не дайте себя обойти.

Вместе мы построим интернет завтрашнего дня.

Высоких вам конверсий! 

По материалам: smashingmagazine.com Источник картинки: DU Internal Photos

blog comments powered by Disqus
Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
copyright © 2011–2024 Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "Центр рекламных бюджетов". ИНН:5902052888, КПП:590201001, ОГРН: 1195958009730, Пермь, ул. Окулова, д. 75 к. 8 офис 501Б

ООО «Центр рекламных бюджетов» — IT-компания с многолетним опытом работы, разрабатывающая инновационные решения для управления процессом лидогенерации (пост-клик маркетинг). Разработанное нами технологическое программное решение LPGENERATOR позволяет создавать целевые страницы в визуальном редакторе и управлять заявками (лидами) в CRM-системе в целях проведения эффективных, высококонверсионных рекламных кампаний