experimenting with AR using A-Frame
JavaScript HTML
Latest commit 340b3ec Aug 9, 2016 @autonome smllzer
Permalink
Failed to load latest commit information.
README.md demo link Aug 9, 2016
aframe.js fzlaadbtll Aug 1, 2016
camera.js fzlaadbtll Aug 1, 2016
ducky.obj add model test Aug 3, 2016
headtrackr.js fzlaadbtll Aug 1, 2016
index.html add readme, rearrange for serving from github pages Aug 8, 2016
screenshot.png smllzer Aug 9, 2016

README.md

A-Frame AR

Experimenting with AR on the mobile Web using getUserMedia and A-Frame, the declarative VR library from Mozilla.

VIEW DEMO (requires Firefox on Android)

How It Works

I used the getUserMedia API to get access to the phone's camera stream, and set that stream as the background of the entire page. Then I create an A-Frame scene above it, with no background.

NOTE to iPhone/iPad users

Apple chose to not implement the getUserMedia API, so this will not work on iOS or Safari. Let Apple know that you want a better mobile web on iOS devices by filing a request with Apple.

Screenshot

Usage

Use-Cases

  • Create your own geolocated AR game in the style of Pokémon GO
  • World-scale digital graffiti
  • Create massive flying mythical creatures to guard your city
  • Political signage megabattle with your neighbor
  • Add digital signage to your business via Bluetooth beacon or QR code pointing to your AR web page
  • Leave reviews of art, architecture, businesses, somebody's car, intersections, fence posts, empty lots, garbage cans

TODO

  • Add Chrome/Android browser support
  • Build as an A-Frame plug-in

Geolocation

  • Add coarse-grained geolocation support via geolocation web API
  • Explore pluggable integration of Google maps API and others

Fun additions

  • Use time of day and sunrise/set info to change light source angle and brightness
  • Use coarse compass data via orientation API and change light-source in A-Frame scene to match
  • Use Forecast.io or other weather API to set light source brightness or even to obscure objects in scene

Contributing

This is a technology demo. Feel free to fork and improve or use however you like.

I wrote this as an example of what is possible. I might take pull-requests or augment the code based on pull-requests, but currently have no plans to turn this into a full-featured AR web solution at this time.

Other Things