Web VR Experiences Using A-Frame
If you aren’t familiar with A-Frame then you might be missing out on one of the most unique experiences on the web. Checkout a couple of these demos to get a feel for what we will be exploring throughout this blog post. If you don’t have a VR headset available, no worries these demos have mouse and keyboard controls. You can use the arrow keys to move around and your mouse to change the direction of the view/camera:
Now how is all this possible using a browser?
A-Frame starts off as an abstraction layer for Three.js. Three.js leverages WebGL to display 3D graphics for modern web browsers. This means that users require no plugins and no third-party applications to experience 3D sites. Checkout some of these pure Three.js Demos:
A-Frame takes the power of Three.js and removes most of the 3D graphics work, and adds in VR support. With A-Frame you won’t need to worry about meshes, managing objects, or rendering. A-Frame exposes its entity component architecture to allow you to build applications with the same mindset as video game developers. Unity developers rejoice! For managing our view you use our favorite markup language HTML. Which in turn allows us to manipulate our objects using the DOM. Can you believe it? Using the DOM for more than just removing children. With A-Frame’s abstraction our app can even be embedded into SPA frameworks like; Angular, React, and Vue.
ECS for the Web
Now slow down a bit. If you’re like me I know you’re excited but before we start boiler plating an application, and building 3D VR web games we need to slow down and consider the building blocks of A-Frame. Applications built with A-Frame follow the entity component system architecture.
- Ability to reuse and recycle components
- No more long inheritance chaining issues
- Allows for easy scaling and extension of the base application
- Might be awkward to learn as an MVC practitioner
- Components within markup look out of place
- Entities: Base objects that can have properties assigned to them. These are things in your view, but without components or a system to reside in they do/render nothing. Similar to empty divs.
- Components: Reusable modules that can be assigned to entities to give them functionality. Components are similar to css classes but instead of just making entities look pretty they can also add logic. Think user interaction (mouse events), entity to entity interaction etc.
- Systems: Often optional, systems can be used to decouple component logic and data. So, our components only define the data for their functionality, and the system executes with said logic. A good example of this would be the physics system I will link to later in this post. When added to the system entities will start to feel the effects of gravity, and even collisions.
More on ECS can be found here:
A-Frame’s modular component approach breeds an abundant amount of community driven projects. If you visit NPM and search for “A-Frame” or “aframe-component” you will be hit with a ton of pieces to help you out. Two popular projects you should consider checking out:
The A-Frame community is good at answering questions so feel free to create a question in stackoverflow or request an invite to their slack (https://aframe.io/slack-invite/).
Trying out packages is easy with unpkg. Unpkg allows you to include packages in your html files as simple script tags without worrying about package management.
Bundled with A-Frame is an inspector tool. To access this tool, open the page using A-Frame and press ctrl + alt + i. In this view you can view and update entity property values, add new entities, and even sync changes to your files (requires aframe-watcher).
Hardware and Browser Support
A-Frame provides support for most VR headsets on the market. This includes HTC Vive, Oculus Rift, Oculus Go, Google Daydream, Samsung GearVR, and the Vive Focus. So not only is it hardware agnostic but also browser agnostic. Any browser that supports the WebVR spec can run A-Frame. Keep in mind for mobile browsers you will likely need to use A-Frame’s WebVr polyfill (https://github.com/immersive-web/webvr-polyfill) while they catch up to the spec.
For full support details checkout:
We are looking, maybe staring is a better word, at the immersive web team to push new specifications. The most recent set of proposals (https://immersive-web.github.io/webxr/) included an API toolset for AR experiences and more input dimensions (voice, gestures, etc). We should all support the effort to bring these experiences to the browser by using A-Frame in your next project.