This document provides an overview and introduction to building virtual reality (VR) experiences using WebVR and the A-Frame framework. It discusses: - What WebVR is and how it allows creating VR tools, standards, and experiences for the open web. - What A-Frame is and its features for building VR scenes in HTML such as being easy to learn, cross-platform support, performance optimizations, and a visual inspector. - Examples of VR experiences that have been built with A-Frame, Mozilla's work in mixed reality and VR including Firefox Reality, Spoke for creating 3D environments, and Unity WebVR assets.

1. Build (Web)VR
with A-Frame
Robert “Bob” Reyes
COSCUP 2019
18 AUG 2019 | Taipei, Taiwan
#Mozilla
#WebVR #WebXR

2. About Me
• Mozilla Rep for the PHL since 2011
• CTO at ALIAC.edu.ph
• Technopreneur at TurfSitePH.net
• Technology Columnist at MB.com.ph
• Team Manager at SIPFC.org
• @bobreyes in Twitter
• Dad of Xeon & Haswell
• Firefox user since Version 1.0

3. Being a Pinoy Mozillian…

4. What is
Mozilla?

5. History of Mozilla
On 23 Jan 1998,
Netscape Communications Corp.
created a project called
Mozilla.
Mozilla was launched 31 Mar 1998.

6. The
Mozilla Manifesto

7. Mozilla’s Mission
To ensure the Internet is a global
public resource, open &
accessible to all.
An Internet that truly puts people
first, where individuals can
shape their own experience &
are empowered,
safe & independent.

8. We have a NEW
brand identity…

9. We have a NEW
brand identity…

12. Starting with Firefox 63, all desktop versions of
Firefox include an experimental cookie policy that
blocks cookies & other site data from
third-party tracking resources.

15. Mixed Reality

16. Mozilla Mixed Reality
• Virtual Reality (VR) seems
complicated.
• But with a few JavaScript libraries &
tools, & the power of WebGL, you can
make very nice VR scenes that can
be viewed & shared in a headset like
an Oculus Go or HTC Vive, in a
desktop web browser, or on your
smartphone.

18. Mozilla Mixed Reality
• Our mission is to keep the Internet
open to innovators, creators, &
builders on the web.
• Virtual Reality is set to change the
future of web interaction.
• The ability for anyone to access &
enjoy VR experiences is critical.
• This is why Mozilla set out to bring
virtual reality to web browsers, & why
we are enabling WebVR in Firefox.

19. What is WebVR?

20. What is WebVR?
Bringing virtual reality tools, standards, &
experiences to the Open Web.

21. What is WebVR?
• WebVR is an experimental JavaScript API that
provides access to Virtual Reality devices,
such as the Oculus Rift, HTC Vive, Samsung
Gear VR, or Google Cardboard, in your
browser.
• Currently available on:
• Firefox
• Chromium (experimental builds)
• Samsung Internet Browser for Gear VR

22. What is WebVR?
• WebVR has been instrumental in
democratizing VR -- more people can
experience 3D content without expensive
headsets.
• WebVR is a huge time-saver for content
creators, who need to test & verify that their
work renders well on every viewing platform.
• Having a stable API to work with means 3D
content can find a wider audience -- cuts down
on the rework creators have to do to deliver

23. A-Frame

24. What is A-Frame?
• A-Frame is an open-source WebVR framework
for creating virtual reality (VR) experiences with
HTML.
• With A-Frame, you can build VR scenes that
work across smartphones, desktop, the Oculus
Rift/Go, & the room-scale HTC Vive.
• A-Frame is powerful, open source, & is easy
to learn.

25. What A-Frame is NOT?
• A-Frame is NOT just a 3D scene graph or a
markup language.
• The core is a powerful entity-component
framework that provides a declarative,
extensible, & composable structure to three.js.

26. A-Frame Features

27. A-Frame Features
• VR Made Simple
• Just drop in a <script> tag and <a-scene>.
• A-Frame will handle 3D boilerplate, VR setup,
& default controls.
• Nothing to install, no build steps.

28. A-Frame Features
• Declarative HTML
• HTML is easy to read, understand, & copy-
and-paste.
• A-Frame is accessible to everyone: web
developers, VR enthusiasts, artists, designers,
educators, makers, kids (since it is based on
top of HTML).

29. A-Frame Features
• Entity-Component Architecture
• A-Frame is a powerful three.js framework,
providing a declarative, composable, reusable
entity-component structure.
• HTML is just the tip of the iceberg.
• Developers have unlimited access to
JavaScript, DOM APIs, three.js, WebVR, &
WebGL.

30. A-Frame Features
• Cross-Platform VR
• Build VR applications for Vive, Rift, Windows
Mixed Reality, Daydream, GearVR, &
Cardboard with support for all respective
controllers.
• If you don’t have a headset or controllers, it’s
not a problem at all!
• A-Frame still works on standard desktop &
smartphones.

31. A-Frame Features
• Performance
• A-Frame is optimized from the ground up for
WebVR.
• While A-Frame uses the DOM, its elements
don’t touch the browser layout engine.
• 3D object updates are all done in memory with
little garbage & overhead.
• Large scale WebVR applications have been
done in A-Frame running smoothly at 90fps.

32. A-Frame Features
• Visual Inspector
• A-Frame provides a handy built-in visual 3D
inspector (<ctrl> + <alt> + i).

33. A-Frame Features
• Components
• Core components such as geometries,
materials, lights, animations, models,
raycasters, shadows, positional audio, text, &
controls for most major headsets.
• Get even further from the hundreds of
community components including
environment, state, particle systems, physics,
multiuser, oceans, teleportation, super hands,
& augmented reality.

34. A-Frame Features
• Proven & Scalable
• A-Frame has been used by companies such
as Google, Disney, Samsung, Toyota, Ford,
Chevrolet, Amnesty International, CERN,
NPR, Al Jazeera, The Washington Post, &
NASA.
• Companies such as Google, Microsoft,
Oculus, & Samsung have made contributions
to A-Frame.

35. A-Frame Hello World
<html>
<script src="https://aframe.io/releases/0.9.0/aframe.min.js">
</script>
<a-scene>
</a-scene>
</html>

36. A-Frame Hello World
<html>
<script src="https://aframe.io/releases/0.9.0/aframe.min.js">
</script>
<a-scene>
<a-box color="#4CC3D9" position="-1 0.5 -3"
rotation="0 45 0"></a-box>
<a-cylinder color="#FFC65D" position="1 0.75 -3"
radius="0.5" height="1.5"></a-cylinder>
<a-sphere color="#EF2D5E" position="0 1.25 -5"
radius="1.25"></a-sphere>
<a-plane color="#7BC8A4" position="0 0 -4"
rotation="-90 0 0" width="4" height="4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</html>

38. https://aframe.io

39. Works With…

40. A-Frame Showcase

41. Made with A-Frame
https://accessmars.withgoogle.com/

42. Made with A-Frame
https://customise.toyota.com.au/camry/

43. Made with A-Frame

44. What is WebXR?
An API that allows developers to create
XR experiences. XR a catch-all term
that spans AR, VR & newly-developed
immersive technologies.

45. Why WebXR?
• Mixed Reality is going to be a powerful
platform, bringing highly engaging &
emotionally evocative immersive content to the
web.
• Like any new creative medium, we want it to be
widely accessible, so curious viewers can
experience the next generation of digital media
without having to shell out hundreds of dollars
for a high-end viewer.
• For instance, the camera on most mobile
phones can be used to overlay information on

46. Firefox Reality was specifically designed to tackle all
of the new opportunities (& challenges) that come
with browsing in VR.

47. Firefox Reality on Oculus Go

48. Easily create custom 3D environments with
Spoke by Mozilla.

49. Spoke by Mozilla
• Create 3D social scenes for Hubs.
• Hubs by Mozilla
[https://hubs.mozilla.com/] is an
immersive communication
on any device.
• Beginners can learn Spoke
in 5 minutes.
• Advanced Spoke can be learned
in 10 minutes.

50. Mozilla’s Unity WebVR Assets are FREE & available
via the Unity Asset Store.
It allows creators to publish & share VR
experiences created in Unity on the Open Web.

51. Photo from #BrazilJS 2016

53. Thank you!
Maraming salamat po!
bob@mozillaph.org