Build a 3D Augmented Reality Stock Data Visualization on the Web with JavaScript (Part 1)
Unlock AR in the browser using A-Frame and Chrome
This article will cover a project I recently undertook to test new technologies that allow for Augmented Reality experiences on the Web!
We will be covering a few different parts that will require some basic knowledge of HTML, CSS and JavaScript. In this first part, we will be covering the tools needed for the project and setup of the development environment.
I will be releasing Part 2 soon which will explain the composition of the project, and you can check out the full source code in the meantime at the repository shared below!
Let’s jump in.
Project Source Code
If you would like to look over the source code before or while setting up the development environment, you can check out the repository for the project on GitHub:
I’ve also included a link to the project demo at the end of the article for you to check out after we set up some requirements and do an initial test.
Augmented Reality on the Web
I have been following developments in the Augmented Reality (AR) Web space for some time and have made use of a few great resources that make it possible. I am a big fan of an open-source marker-based Augmented Reality library called AR.js, but being able to use AR on the web to walk around scenes without needing markers has been a long-held desire for me as a designer/developer.
I have tested new tools that enable that capability such as 8th Wall, which has helped bring WebAR into the mainstream commercial space. However, they sit behind a paywall that can discourage developers from venturing into the medium. Since many mobile devices are able to use AR in native apps via ARCore and ARKit, I knew it was only a matter of time until these technologies were available in the browser. Some very talented individuals have been working hard to make this possible, and we now have a free experimental tool set to explore this new frontier of the web!
A-Frame is the library used for the 3D visualization of this project. Built on top of Three.js, it provides an web-based entity-component framework with support for a variety of devices, such as PCs, mobile devices, and VR/Mixed Reality headsets. Their recent 1.0 release added support for a new AR mode on mobile devices based on the WebXR Device API.
It’s important to note that this API is still in development, so device compatibility will increase in the coming months. As of February 2020, Android devices that are ARCore-compatible currently support WebXR AR Mode with Google Chrome. To access these experimental features, you will need to enable some flags in your mobile Chrome browser, which we will cover later in the article.
For more information about these new features and device support, check out a helpful article on the A-Frame blog by Klaus Weidner and Diego Marcos:
What will we use?
Code Editor
I will be using VSCode during the project and highly recommend it, as it includes an integrated terminal, a Local Web Server, Git version control tracking, and various extensions that make the development experience much smoother. We will use the VSCode live server to build and modify the experience locally before going into AR.
You can also use a collaborative online code editor such as glitch if you wish, but you may lose out on tracking progress of your code with git and some helpful development features provided in a traditional editor.
Code Repository
Any code repository with Git support will work well for this project. Personally, I make use of GitLab during development and then share my code publicly to GitHub afterwards. If you’re using glitch, it will also serve as your code repository.
Website Deployment
For this project, it will be necessary to publish your code to a live website that is served over HTTPS to use the WebXR AR module.
I will be using Netlify to deploy my code to a live web page. It allows for a connection to GitLab or GitHub that automatically publishes new changes made to the repository to a [custom-name].netlify.com address. You can also connect it to a custom domain for free and apply a SSL certificate to serve over HTTPS. If you will be using GitHub, you can also make use of GitHub Pages to deploy your code.
Android Device for AR Mode
This device will be used to view your content in AR, so it will need to be ARCore-compatible. If you don’t have access to a compatible device, you can still build this experience for VR or PC. My hope is that iOS WebXR support with ARKit will be available in the coming months.
Google Chrome for PC/Mac and Android
Version 79 or later includes support for the WebXR Device API. You will need to enable three flags on the mobile browser via chrome://flags for this project:
- WebXR Device API. “The WebXR Device API provides the interfaces necessary to enable developers to build compelling, comfortable, and safe immersive applications on the web across a wide variety of hardware form factors.” (https://www.w3.org/TR/webxr/#intro)
- WebXR AR Module. This will allow us to use ARCore on the Web.
- WebXR AR DOM Overlay. This will allow us to use elements from the DOM during our AR session.
Development Environment Setup
VSCode Setup
After downloading and installing VSCode (if you haven’t already), I would like to recommend a few extensions that I use regularly to facilitate my development:
- Prettier. Helps keep your code formatted properly, a huge time saver.
- Bracket Pair Colorizer 2. Colors matching brackets to help you easily traverse your code.
- Color Highlight. Highlights any color codes with the corresponding color.
- VS Color Picker. Quite simply, a color picker with an eyedropper right within the editor.
Another highly useful extension that already comes pre-installed with VSCode is Live Server, which allows you to launch a local development server and includes live reloading. We will be using this extension throughout the majority of the project to make changes to our code and see the results update in the browser.
Git Setup
If you’ve never used Git before, it is a version control system that will keep track of changes you make to your code, and help push them to your repository when you’re ready. VSCode has version control support and a terminal built in, so we’ll be able to manage all of it within the editor. I’ll include some links below to help get GitHub or GitLab set up with Git.
- Git — the simple guide: https://rogerdudler.github.io/git-guide/
- Using Git with GitHub: https://help.github.com/en/github/getting-started-with-github/set-up-git
- Using Git with GitLab: https://docs.gitlab.com/ee/university/training/topics/env_setup.html
Netlify Setup
After creating a free account, Netlify has a pretty straightforward guide on how to create a site and get hooked up to a repo on their blog. The screenshots are a bit outdated, but it is still easy to follow:
If you’re feeling less ambitious and don’t feel like setting up git, Netlify offers a ‘drop’ feature which allows you to deploy your site by solely drag-and-dropping your website folder into a container on the site’s deploy page.
Browser Dev Tools & Remote Debugger
The Chrome browser includes a robust set of development tools that can help you greatly as you code. Most importantly, the Element Inspector, Console, and JavaScript Debugger. You can take a look at their DevTools docs to learn more.
The Remote Debugger built into Chrome will also be a huge resource when it comes time to test functionality in AR mode. Since you don’t have access to the console on the device, this will allow you to monitor for any errors or bugs you may encounter device-side.
Firefox also offers similar development tools as well as a remote debugger, and I find myself using their browser more often on PC. However, since we will be using the WebXR API’s AR module which is not compatible with Firefox at the moment, and the remote debugger only works between Chrome browsers, we will be using Chrome for this project.
Testing A-Frame in AR Mode
Before we begin building out the data visualization, let’s make sure AR mode in Chrome is working on your device.
Open up Chrome, enable the flags listed earlier if you haven’t already, and visit the A-Frame homepage:
You will see their Hello WebVR example. If the flags are enabled and you are using a compatible device, you will see an AR button next to the VR button in the bottom right of the scene:
If aren’t seeing the AR button and have followed the necessary steps with the proper device, reach out on the A-Frame slack for additional help.
If you can see the AR button, hooray! Go ahead and click on the button to view the scene in AR and make sure everything is working smoothly.
It’s Demo Time!
Now that you’ve got your development environment up and running and have tested AR mode with A-Frame, visit the project demo page to test out the data visualization code on your device!
Project Demo: https://webar-stock-dataviz.netlify.com/
That’s it for Part 1! I’ll be posting the next article soon which goes through the project structure to help you build it out yourself.
If you’d like to get a head start, visit the code repository for the project I shared at the top of the article. I’d also be glad to answer any questions you may have, feel free to reach out to me on twitter!
Thanks for reading and stay tuned for Part 2!
