Augmented Reality Business Card
One of the business cards I used to give out has an augmented reality marker on it. When you go to the website listed, https://justingosses.github.io/AR_BusinessCard/, and let the browser access your camera, you'll see a 3D model of Jezero Crater, the landing site of the Persevarance Mars Rover.
In the past, a globe was seen and before that, Gale Crater, the landing site of the Curiosity Rover.
Instructions & Browser Limitations
- This should work on any browser with WebGL and WebRTC. It doesn't require any special hardware.
- Augmented Reality is still pretty young on the web and as browswers have adopted different standards this site has occasionally broke as the JavaScript libraries it uses has lagged how the browsers prefer to work by a little. iOS in particular tends to break as they like doing their own thing.
- Instructions:
- Webpage is live at https://justingosses.github.io/AR_BusinessCard/
- Open the page and click the window that asks for permission to use your camera.
- Point the phone or laptop camera at the Y shaped icon on the business card. The 3D object should pop up. If you don't have one of my business cards with the marker on the back, you can use this marker here.
- This Video on twitter shows the first version in action with a different 3D model .
Current model & marker
- This model was created from this gltf model on sketchfab by Martin Pratt. I believe it may have been generated from an image & DEM from HiRise, but I'm not 100% sure.
- The marker is a standard Kanji marker.
Previous Model
Previous model used was a 3D image of Gale Crater created by Author/Origin: Doug Ellison / NASA-JPL.
How the site was created.
The original version of the site leveraged several JavaScript libraries and wrote the code to combine them together.
However, now building this type of thing is much simplier as you can leverage AR.js Studio, which is a front-end webpage that takes in your preferred marker and 3D model and outputs a fully built webpage for you.
The only slightly confusing thing about this is that when I tried to use my old kanji.png file to create a marker, it added an extra black border, which then caused the JavaScript to not be able to recognize the marker correctly. I was able to solve this problem by editing the Kanji PNG file I had to take out the black border. The tool then adds a black border. The result can be recognized and is identical to the business cards I have already distributed.
Images
Screenshot of current model of Jezero Crater in Augmented Reality via marker on business card.
Previous AR model of Gale Crater in action
Marker that is AR Target
Licenses
License information for various JavaScript code reused by this project is in the files themselves or referenced there. The overall project has a MIT license.