getting started with web vr
TRANSCRIPT
Web VRSaurabh Badhwar
mozilla Mozpacers
What is VR?
Visual Immersion + Input Immersion
Visual Immersion
+
Input Immersion
So what is Web VR?
Render Web Content in VR
Access to Devices Being Used for VR
Device-agnostic VR in Web Browser
Focus on Head Mounted DisplaysAnd Sensor Devices
Web Content in VR
Focus on Visual Immersion
Support both Web GL and HTML/CSS Content
And the goals…
Allow High End Experience with VR in the Browser- Asm.js
- Emscripten- Game Engines
Allow Web Experience with VR- CSS 3D
- Responsive Sites- VR Browsing
Who supports Web VR
Web VR API
Basic Interface
Call getVRDevices() which returns a promise…
navigator.getVRDevices().then(vrDeviceCallBack);
The vrDeviceCallback() receives the list of all available VR Devices
function vrDeviceCallback(vrDevices) {//Some stuff here
}
VR Devices
For every VR Device
hardwareUnitIdUnique identifier per Hardware Device
deviceIdUnique ID for specific sensor/device on hardware
deviceNameUser-readable name identifying the sensor
Setting FOV
Configure the FOV that rendering device will use
setFieldOfView(left, right, znear, zfar)
Get the recommended and maximum FOV the device can render
getRecommendedEyeFieldOfView(whichEye)getMaximumEyeFieldOfView(whichEye)getCurrentEyeFieldOfView(whichEye)
Too much work to do?
Introducing A-Frame https://aframe.io
What is A-Frame?
A web framework for building VR Experiences
And It works on…
Let’s get started with A-Frame
Include the latest build in your Web Page
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
Setting up the Scene
<a-scene> </a-scene>
Creating a Box
<a-box color=“617354” height=“10” width=“4” depth=“2” position=“-10 2 -5” rotation=“0 0 45” scale=“2 0.5 3”> </a-box>
Giving Box a Texture
<a-box color=“617354” height=“10” width=“4” depth=“2” position=“-10 2 -5” rotation=“0 0 45” scale=“2 0.5 3” src=“texture.png”> </a-box>
Leveraging Asset Management
<a-assets> </a-assets>
Adding Image Assets
<a-assets><img id=“img1” src=“logo.png”>
</a-assets>
Using Assets
<a-box color=“617354” height=“10” width=“4” depth=“2” position=“-10 2 -5” rotation=“0 0 45” scale=“2 0.5 3” src=“#img1”> </a-box>
Adding Animations
<a-animation attribute="rotation" repeat="indefinite" to="0 360 0">
</a-animation>
Adding Background
<a-sky color=“#73f7dd”></a-sky>
Adding Background Image
<a-sky src=“room.jpg”></a-sky>
Let’s add some music
<a-entity sound=“src: #bg-music; autoplay: true; volume: 10; loop: true”></a-entity>
Where to head next
A-Frame Website: https://aframe.io
MozVR: https://mozvr.com
Web VR Slack channel: https://webvr-slack.herokuapp.com
