A guest post by Allan Walker
Allan Walker is a Tableau Zen master and Mapbox hacker, who recently presented his AR WarGames-esque globe at a Tableau user group meetup at Mapbox SF. We asked him what else he could do with Mapbox and AR, and the results are 😱 💥.
I know you’ve probably seen the jaw-dropping Mapbox Unity SDK mashup with Apple’s ARKit. If you haven’t, go check it out. It really is inspirational.
While it’s beautiful to look at, it’s static. You have to build that 3D model up and then texture it with Mapbox tiles. But what if you could do that dynamically in almost any browser DOM?
That’s what I wanted to try to build using Jerome Etienne’s WebAR. Jerome is on a mission to bring an Augmented Reality (AR) to the Web that is browser agnostic, cross-platform, and fully responsive. He’s enabled Tango, and he’s got ARKit support in his pipeline. Go check out AR.js.
AR.js works so neatly because it combines both A-Frame (VR) with a “marker” — called a HIRO image — that you can print off, or show the image on your iPhone/iPad…or if you want to go crazy, a massive widescreen, even a projector.
A-Frame is the key to building the Virtual Reality scene. For this example, I wanted to keep it simple and just write a sphere to the DOM. You could, of course, parse some LIDAR coordinates, but we’ll leave that until next time.
Oh god. Code. Sorry about that. Forgive me, it’s my first guest post for Mapbox.
<div id=”map”></div>
<a-scene>
<a-sphere id=”image” position=”0 0.5 0" </a-sphere>
</a-scene>
Honestly…that wasn’t too bad…now was it?
But wait. Did you see that id=”image”? Here’s the magician’s (JavaScript) trick:
After I call the GL library, when the map loads, I grab the <canvas> and convert it to an image. I spit the image back onto the A-Frame sphere as a texture.
Job done, time for beer and pretzels!
Well, kind of. For this to be truly useful, you’d want a better use case. For example, geolocate the user, then offer up the Directions API. And perhaps add that to a plane. Then add some event listeners so you could reach out and “touch” the plane. Now, you could do all that by looping through the script, but that’s not terribly efficient, as you’d be capturing the canvas every time it changed…and rewriting the image, and updating the texture. Someone will work it out, because Web based Augmented Reality will continue to develop at a rapid pace.
I’m fully expecting an increase in the count of minds blown, and jaws dropped.
👍👍@Mapbox GL JS <canvas> dynamically rendered in the DOM for #AugmentedReality with @aframevr and @artoolkit_ 🗺️🗺️https://t.co/mt9HkxSHlP https://t.co/o93TNTEfLE
Allan Walker (@AllanWalkerIT) | Twitter
Mapbox GL JS + AR.js + A-Frame (VR) = Mapbox AR/VR was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.