/WebAugmentedReality

Primary LanguageJavaScript

Web Augmented Reality

Getting Started with Augmented Reality Demo.

Workshop Video

Models

Church of St. Sofia

Thomas Jeferson Memorial

Technology

  • three.js: 3D library.
  • WebXR Device API: is a group of standards which are used together to support rendering 3D scenes to hardware designed for presenting virtual worlds (virtual reality, or VR), or for adding graphical imagery to the real world, (augmented reality, or AR).
  • glTF: 3D File format.
  • Poly API
  • NodeJS
  • Visual Studio Code

Running Locally

  1. Download NodeJS: https://nodejs.org/en/
  2. Install dependencies

Open your terminal and navigate to folder for this project and type

npm install
  1. Get Poly API key and add create a config.js as in config.example.js. Add your API key to apiKey string value.
var config = {
    apiKey: "Your Poly API key here!"
}
export {
    config
};
  1. Start the server
npm start
  1. Navigate to http://localhost:4200/

Debugging on the mobile browser

How to debug WebXR on Chrome Dev Tools Tutorial

  1. Enable Developer mode on your mobile device.

  2. Download Chrome Canary or Edge Canary. Checkout CanIUse.com for other browsers that support WebXR Device API.

  3. Go to chrome://inspect/#devices and click on port forwarding. Add localhost:4200.

Inspect Devices

Port Forwarding

Other Resources