VR in WEB

HollyJS 2017
- Martin Splitt - WebVR is the next frontier
- Денис Радин - web-приложение в виртуальную реальность
Google Chrome Developers chanel
- Designing a WebVR game with A-Frame
Google I/O 17
- Building Virtual Reality on the Web with WebVR

зачем?
кому это нужно?

caniuse webgl

https://caniuse.com/#feat=webgl

WebVR

placeholder

navigator.getVRDisplays
- VRDisplay.requestAnimationFrame
- VRDisplay.getImmediatePose
- VRPose.position
- VRPose.orientation
- Gamepad.displayId
https://webvr.info/
chrome://flags/#enable-webvr

caniuse webVR

https://caniuse.com/#search=WebVR

A-FRAME

placeholder

https://aframe.io/
Features
- Simple, Declarative HTML
- entity-component-system (ECS)
- visual 3D inspector
Base on
- three.js

price & quality experience

placeholder

PC base
- HTC vive - 44 990
- playstation vr - 22 999
- Oculus Rift - 25 000 (399$)
Mobile base
- Google Daydream - 8600
- Gear-vr - 8200 (130$)
- Cardboard - 300

VR sales 2016

SuperData Research 2016

VR sales 2016 with Cardboard

MWC 2017 Google Cardboard - 10 млн

money in PC VR

placeholder

Корпоративные тренажеры
парки - VR аттракцион

money in mobile VR

placeholder

360 видео
- Kaspersky Земля 2050
- Сбербанк
Маркетинг

webVR use case

placeholder

Порно
- camasutravr
Маркетинг
Продажа недвижимости
- matterport
- archilogic.com

Требование рынка к webVR это
интерактивные панорамы

AFrame - 360° Image

demo

<!DOCTYPE html>
<html>
<head>
  <title>AFrame - 360° Image</title>
</head>
<body>
<a-scene>
  <a-sky src="puydesancy.jpg" rotation="0 -130 0"></a-sky>
</a-scene>
<script src='https://aframe.io/releases/0.7.0/aframe.min.js'></script>
</body>
</html>

https://storage.googleapis.com/cardboard-camera-converter/index.html

https://glitch.com/edit/#!/cardboard-camera-360

Отображение данных OSM в webVR - osm-to-aframe
aframe-school - https://aframe.io/aframe-school
Martin Splitt — WebVR with A-Frame

Контакты

Петр Лаптев

Руководитель разработки moscowfresh

+7 (922) 755-66-59

compsober@yandex.ru

@bastsoft

petrilaptev