AugRe

Augmented Reality (AR) web viewers for displaying .GLB 3D models in the real world.

Methods

1. Model-Viewer (Recommended)

Uses Model-Viewer, WebXR, and ARCore.

• Pros: Best performance and native device AR integration.
• Requirements: Modern mobile device with ARCore support.

2. AR.js (Compatibility)

Uses AR.js.

• Pros: Works on older phones and desktop browsers.
• Requirements: Does not require ARCore. Uses marker-based tracking.

---

Common Setup: Getting 3D Models

Both methods require .GLB files:

1. Source: Download 3D models from sites like Sketchfab.
2. Format: Models must be in single-file .GLB format. If you have a different format, use a converter.
3. Storage: Save files to your device or accessible cloud storage (e.g., Google Drive).

---

Running the Demos

Model-Viewer (WebXR)

1. Access: Open the model-viewer page.
2. View: Use the on-screen controls to view the model or project it into your space using WebXR.

AR.js (Marker-based)

1. Print: Print the provided markers (marker1 or marker2).
2. Access: Open the marker-based page.
3. View: Point your camera at the printed marker to trigger the 3D model.

---

Deployment & Development

Local Development

• Server: This project is static (no server-side processing). Use the "Live Server" extension in VS Code for easy testing.
• SSL/HTTPS: Web-based AR (especially motion tracking) requires HTTPS. If testing on a mobile device from a PC, you must configure your local server for SSL.

Modifying AR.js Markers

To change the marker for the AR.js version, use a marker generator and update the arjs attribute and a-marker value in your HTML.

---

Built With

• jQuery & jQueryUI
• AR.js
• Model-Viewer
• fatNav

License

Licensed under the MIT License.