Starting with the basics
VR is Virtual Reality. Virtual Reality intends to bring it's users into a new reality to explore and experience things unavailable in the real world.
AR is Augmented Reality. AR uses a combination of sensors, cameras, and mapping software to brings virtual objects and images into the real world.
MR is Mixed Reality and aims to do a little of both of the above.
XR or Extended Reality is a sort of larger umbrella term used to describe tech that takes in human-to-PC interface and modifies it by either immersing you in a virtual world (VR), brings new things to or adds to your existing environment (AR) or does a combination of those things (MR).
The selling points of any good XR experience is how immersive it is to the user. Early on there were limitations in the hardware and users were only able to experience 3 Degrees of Freedom (3DoF) with devices like Google Cardboard or Oculus Go. That meant that while inside the experience the virtual world would rotate with the movement of your cameras, but if you were to physically walk forward or crouch up and down the world would move with you.
Over time a new system of inside out tracking allowed for 6 Degrees of Freedom (6DoF). Now, not only did the hardware track the rotation of your cameras, but also it's relative position in space and could translate that data into your XR experience.
Web-Based AR/VR
Getting started with AR/VR development can be tough, and there are a few arguments to be made for why starting out web-based may be the way to go.
1) Nobody has to download an app! Just click the link and your user is already on the way to using your AR/VR experience.
2) No fees to host your product on an app store! No waiting/review period to see if your app makes the cut!
3) Web Dev is cross-platform and can quickly get your product into more end users hands.
4) Web 2.0 effect. Apps are constantly building on and integrating each other. Developing open-source projects online allows for other users to potentially use your product in a more grand design.
Historical Challenges to Web-Based AR/VR
Historically web applications live in a browser sandbox, and aren't given much access to the external hardware that would be needed to build out an AR/VR experience worth coming back to. More modern day devices make this less of problem then it used to be, but AR/VR require a lot of processing power. They can be very CPU/GPU intensive and that could lead to poor performance in a browser application. On top of those cons, building for the web means you're going to have less access to the mature building blocks that already exist and make building VR/AR applications easier. (Things like Vuforia, UNREAL engine, Unity, or ARKit)
Things are changing, though…
Options for building Web AR applications
Most simple AR applications use a Marker system to anchor your AR objects in space. These systems use a camera to locate a symbol nd generate content relative to that symbols location.
More modern Markerless AR content also exists. AR that through an understanding of the world around it can recognize and map out horizontal surfaces.
It uses SLAM (Simultaneous Localization and Mapping) tracking. Using ARkit and SLAM tracking we're able to make unique AR experiences such as “portals” that have been seen on popular apps such as Snapchat and Instagram.
Three.js is a JavaScript based 3D library that allows you to write JavaScript code to instantiate 3D graphics and objects.
aframe is an Entity Component System that can run on top of three.js
An Entity Component System is a “Data oriented architectural systems that lend themselves well to game development because instead of of object oriented objects that derive their identity from a class or subclass they inherit from, entities derive their identity by their association with named sets of data (i.e. components) and you can mutate or assign those components to other entities on the fly and those entities wills start to adopt behavior that comes from those data sets through the systems that process those components.” -Don Shin, CrossComm
Three.js has a free editor.
aframe has a visual inspector.
Below is an example of a primitive entity object.
<a-entity id="box1" geometry="primitive: box" material="color: #FF9999; shader: flat" position="0 0.15 -5" rotation="0 45 0" ></a-entity> These tools are not as well polished as unity, but gives hope for the future of web development as better ecosystems for building 3d environments through web based technologies continue to emerge.
AR.js is a JavaScript framework (abstraction of JSARToolKit5) for building AR applications.
AR.js has 3 key features out of the box –
- Image Tracking using Natural Feature Tracking (NFT)
- Location Based AR
- Simple Marker (patterns, QWR codes) tracking
You can use AR.js on top of aframe of just AR.js alone.
Below are some rendered objects using aframe
