Web VR is an emerging technology that enables the rendering of VR content in the web. The content can be targeted to different platforms using a simple API consisting of HTML, CSS and JavaScript. The presentation covers how to get started with Web VR using A-Frame which enables you to create new content for Web VR with ease.

1. Web VR
Saurabh Badhwar
mozilla Mozpacers

2. What is VR?

3. Visual Immersion + Input Immersion

4. Visual Immersion
+

5. Input Immersion

6. So what is Web VR?

7. Render Web Content in VR
Access to Devices Being Used for VR
Device-agnostic VR in Web Browser
Focus on Head Mounted Displays
And Sensor Devices

8. Web Content in VR

9. Focus on Visual Immersion
Support both Web GL and HTML/CSS Content

10. 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

11. Who supports Web VR

12. Web VR API

13. 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
}

14. VR Devices
For every VR Device
hardwareUnitId
Unique identifier per Hardware Device
deviceId
Unique ID for specific sensor/device on hardware
deviceName
User-readable name identifying the sensor

15. 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)

16. Too much work to do?

17. Introducing A-Frame
https://aframe.io

18. What is A-Frame?

19. A web framework for building VR
Experiences

20. And It works on…

21. Let’s get started with A-Frame

22. Include the latest build in your Web Page
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>

23. Setting up the Scene
<a-scene> </a-scene>

24. 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>

25. 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>

26. Leveraging Asset Management
<a-assets>
</a-assets>

27. Adding Image Assets
<a-assets>
<img id=“img1” src=“logo.png”>
</a-assets>

28. 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>

29. Adding Animations
<a-animation attribute="rotation" repeat="indefinite" to="0 360 0">
</a-animation>

30. Adding Background
<a-sky color=“#73f7dd”>
</a-sky>

31. Adding Background Image
<a-sky src=“room.jpg”>
</a-sky>

32. Let’s add some music
<a-entity sound=“src: #bg-music; autoplay: true; volume: 10; loop: true”>
</a-entity>

33. Where to head next
A-Frame Website: https://aframe.io
MozVR: https://mozvr.com
Web VR Slack channel: https://webvr-slack.herokuapp.com

34. Thank you!
Reach out to us at:
E-Mail: contact@mozpacers.org
Facebook: fb.me/mozpacers
Twitter: @mozpacers