WebVR is the future of the Internet. Imagine building a VR experience with just a few lines of HTML! This talk introduces WebVR, covers the capabilities exposed to modern day web browsers through WebVR and A-Frame, and highlights UI/UX design considerations when transitioning to this new paradigm.
Windows Mixed Reality
• Mac developers are out of luck
• Certain headsets only work on certain systems
• Only certain browsers support WebVR
• Google Daydream only works with “daydream-
• Not every headset provides positional tracking
• Opens up a brand new world to web developers
Tools & Development
Android device with
Google Cardboard A-Frame
A-Frame is a web framework for
building virtual reality (VR)
experiences in your browser.
Benefits of A-Frame
• Based on top of HTML
• Provides a lot of components (called primitives)
• No installation required; no build required
• Supports most VR headsets
• Has a Registry
• Entity Component System
• Has an active Slack community
Adding a Basic Scene
Links to A-Frame library
allowing use of components
<a-scene> The scene is the global root
object; all entities are contained
within the scene
Handles 3D & WebVR
• Sets up canvas, renderer,
• Default camera and lights
<a-assets> Places our assets in one place
and preloads and caches assets
for better performance
• 3D Models
https://i.imgur.com/Szs9f7E.jpg imgur (IMAGE-ER) – a popular
image hosting service
<a-sky> Adds a background color or
360° image to a scene.
<audio> Loads audio source from CDN
autoplay Automatically play sound once set
preload Preloads; blocks the scene
a = int(input("Enter an int: "))
b = int(input("Enter an int: "))
position="-2 3 -3"
rotation="0 0 0"
scale="2 2 2">
<a-text> Renders font text
text The text to layout. Newline characters ( n ) will cause line breaks.
position The position component places entities at certain spots in 3D space.
Position takes a coordinate value as three space-delimited numbers.
• X - Negative X axis extends left. Positive X Axis extends right.
• Y - Negative Y axis extends down. Positive Y Axis extends up.
• Z - Negative Z axis extends in. Positive Z Axis extends out.
color Text color; default color is white.
rotation The rotation component defines the orientation of an entity as X, Y, Z
scale Defines a shrinking, stretching, or skewing transformation of an
entity as X,Y,Z
<a-animation> Adds animation to the scene.
attribute Attribute to animate.
to Ending value – where the item should end up
direction Direction of the animation (between from and to)
dur Duration in (milliseconds) of the animation.
repeat Repeat count (or indefinite).
<a-link> The link primitive provides a compact API to define links that
resemble the traditional <a> tag
href The file to display
position The position component places entities at certain spots in 3D
space. Position takes a coordinate value as three space-
X - Negative X axis extends left. Positive X Axis extends right.
Y - Negative Y axis extends down. Positive Y Axis extends up.
Z - Negative Z axis extends in. Positive Z Axis extends out
image The image to display for the click
Open up any A-Frame scene,
hit <ctrl> + <alt> + i, and fly
around to peek under the hood!
Motion Capture Tool
The motion capture components allow us to
emulate the presence of a VR headset and
controllers without any user intervention
• build test automation tools for VR experiences
• replay the recorded user behavior
• assert the state of the entities at the end
UI/UX design considerations
• Sound & Music
• Model Detail
User Interface (UI)
•Should be a 3D part of the virtual
•Don’t require the user to swivel their
eyes in their sockets to see the UI
Sound & Music
•Sounds should get louder as the
user leans towards their source
The display should respond to
the user’s movements at all
times, without exception
•End of the mouse cursor /click
•Users can now move their viewpoint to
•Maintain VR immersion from start to
•Design environments that make sense
from a 3D spatial standpoint
•Consider the size and texture of
your virtual objects
•Pay close to the level of detail on
•User testing will be more critical than
•Make sure your VR worlds don't make
Deployment model of WebVR allows
more content to reach more people
than traditional models
Development Lessons Learned
•Development is easy and accessible to
•Don’t have to invest in expensive
controllers/equipment to get started
•During testing the image was blurry
•A-Frame is continually enhanced
Code in VR 2.0
• Update code to work on a wired device with
laser pointer controls
• Use A-Frame device specific controls
• Integration with GitHub to visualize an
entire code base