Skip to content
experimenting with AR using A-Frame
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md docs Mar 17, 2017
aframe-physics-system.min.js sinewave May 3, 2017
aframe.js upgrade a-frame, fix model loading in Chrome, migrate to srcObject=st… Jun 9, 2017
app.js upgrade a-frame, fix model loading in Chrome, migrate to srcObject=st… Jun 9, 2017
ar-controls.html add ar music player controls example May 2, 2017
ar-controls.js add ar music player controls example May 2, 2017
ar-music-ctrls.png add ar music player controls example May 2, 2017
camera.js upgrade a-frame, fix model loading in Chrome, migrate to srcObject=st… Jun 9, 2017
ducky.obj add model test Aug 3, 2016
example.html
geolib.js add files Mar 17, 2017
geolocation.js
headtrackr.js fzlaadbtll Aug 1, 2016
index.html
screenshot.png smllzer Aug 9, 2016
sinewave.html sinewave May 3, 2017
sinewave.js
sound.js
soundsize.html really add soundsize-ar demo May 2, 2017
soundsize.js upgrade a-frame, fix model loading in Chrome, migrate to srcObject=st… Jun 9, 2017

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

As a developer:

  • Fork the repo
  • Publish your copy on Github pages or wherever you want

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

You can’t perform that action at this time.