TechStack

Resources

Converting a Three.js scene to AR using WebXR 5min

WebXR with AR.js & Firebase

additional Resource: AR with WebXR

Hosting application: Firebase - backend as a service.

AR.js guide

ARCore / WebXR Device API (Google)

• Identify output devices
• Translate device movement into usable vectors for application
• Render 3D scenes to devices at appropriate frame rate
• WebXR -> WebApp; ARCore -> Android APP

Getting Started WebXR application

First the steps below have to be completed:

Browser support: Check

Phone preparation

• Check if phone is supported: Supported devices

• Enable developer mode & debugging via USB here

  • additional options include adding dev-tools to phone homescreen. You may want to disable dev mode in some situations.

• Remote debugging setup

  • Access phone via chrome-devtools. (Opening websites/ inspect/ debug)
  • Link chrome://inspect/#devices
  • Configure port mapping so that the application server port is mapped to mobile localhost-port

Host requirements

• Set up port forwarding for phone: WebXR requirements

  • required if no public dev-server available. (either TLS secured connection (https:) or localhost.) localhost requires port forwarding through USB.

• Run local server on connected port

  • VSCode LiveServer simplest solution.
  • Apache/ NGINX

Notes

• Phone does not display block... try tomorrow

Additional

• Create QR-Codes for easy to distribute URL's