DesignScience
1.06K subscribers
1.48K photos
122 videos
109 files
1K links
CX/UX/product design, product analytics, психология восприятия и немного о будущем. Делимся инсайтами и экспертизой, анонсим мероприятия. Связь: @mr_uiux @orekhovoux
Download Telegram
#bookmarks #vr #ar #webvr

Небольшая подборочка свежих материалов о VR в браузере


Только представьте!
Игры не нужно будет скачивать и устанавливать (в классическом варианте), прямо через браузер можно будет погружаться в виртуальный мир. Изменятся интернет-магазины, социальные сети, развлекательные видео-сервисы, видео-чаты/конференции, появится множество обучающих сервисов с погружением. Даже прикладные сервисы и сервисы для работы изменятся (финтех, офисные облачные сервисы и прочие).
Пытаться адаптироваться нужно уже сегодня, чтобы завтра быть впереди планеты всей.



1) Спецификации:

WebVR API (Editor’s Draft, 12 December 2017, но уже можно пытаться в prod)

WebVR API — это программный интерфейс для работы с устройствами. WebVR API позволяет абстрагировать доступ к устройствам, позволяя разработчикам передавать информацию о местоположении и движения с дисплея в движение вокруг 3D-сцены. Данное API предоставляет инструменты для получения информации об устройстве, его возможностях и технических характеристиках, но саму картинку и 3D мир нужно рисовать, используя уже ставшие привычными веб-технологии, такие как: HTML, CSS, WebGL, Canvas и так далее.

Legacy WebVR API 1.1 specification for JavaScript API for accessing VR displays. Development of the WebVR API has halted in favor of being replaced the WebXR Device API. Several browsers will continue to support this version of the API in the meantime.
https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API (en)
https://developer.mozilla.org/ru/docs/Web/API/WebVR_API (ру)

Обратите внимание: Разработка WebVR API прекратилась в пользу нового, более продвинутого WebXR API! Но, по словам разработчиков, некоторые браузеры все же будут поддерживать старое API.


WebXR Device API (замена WebXR, Editor’s Draft, 25 July 2018) — Main specification for JavaScript API for accessing VR and AR devices, including sensors and head-mounted displays. Учтите, это экспериментальная технология, она еще будет много раз меняться (так и написано в спеке: The version of the WebXR Device API represented in this document is incomplete and may change at any time).
https://immersive-web.github.io/webxr/


Gamepad API (W3C Editor's Draft 16 July 2018) — Introduces a low-level JS API interface for accessing gamepad devices.
https://w3c.github.io/gamepad


Gamepad Extensions API (W3C Editor's Draft 16 July 2018) — Extends the Gamepad API to enable access to more advanced device
https://w3c.github.io/gamepad/extensions.html



2) Туториал для старта (ру)
VR/AR в браузере. Как быстро влиться и сделать свое первое приложение, используя WebVR API
https://habr.com/company/tuturu/blog/324570/


3) О поддержке, как всегда, можно узнать на caniuse:
WebVR: https://caniuse.com/#search=WebVR
А также тут в разрезе девайсов: https://webvr.rocks



4) WebVR инструменты, фреймворки

A-Frame
Фреймворк от Mozilla. (HTML and Entity-Component Works on Vive, Rift, Daydream, GearVR, desktop). А тут все что связано с разработками в области VR от Mozilla и не только https://mixedreality.mozilla.org
Workshop: WebVR with A-Frame - Getting started
https://aframe.io

Сборка инструментов для разработки на WebVR (тут даже есть примеры с исходниками):
https://webvr.info

React-360
Позволяет создавать 360-панорамы и VR интерфейсы на React'е:
https://facebook.github.io/react-360

ArgonJS
Фреймворк позволяет добавлять VR/AR в веб-приложение:
https://www.argonjs.io

Сборка полезных инструментов для разработки VR веб-приложений:
https://createwebvr.com/

Отличный boilerplate VR-приложения на WebVR API + ThreeJS
https://github.com/MozVR/vr-web-examples/tree/master/threejs-vr-boilerplate



5) Для вдохновения:

What is WebVR?
https://www.youtube.com/watch?v=Le8pTXQqM3s

Building Virtual Reality on the Web with WebVR (Google I/O '17)
https://www.youtube.com/watch?v=jT2mR9WzJ7Y

What's new in AR (Google I/O '18)
https://www.youtube.com/watch?v=MeZcQguH124