# ar-js-org/ar.js

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/ar-js-org-ar-js).**

5,913 stars · 1,000 forks · JavaScript · mit

## Links

- GitHub: https://github.com/AR-js-org/AR.js
- awesome-repositories: https://awesome-repositories.com/repository/ar-js-org-ar-js.md

## Topics

`aframe` `ar` `augmented-reality` `hacktoberfest` `hacktoberfest2020` `threejs` `webar`

## Description

AR.js is a JavaScript library for building augmented reality experiences that run directly in the web browser. It provides the core capability to render digital content overlaid on the real world using either the A-Frame HTML component system or the three.js JavaScript library, supporting both marker-based and location-based AR approaches.

The library enables tracking of predefined 2D images, fiducial markers, and image targets through the device camera, allowing virtual objects such as 3D models, videos, or images to be positioned relative to recognized visual references. For location-based AR, it can anchor content to real-world GPS coordinates, placing virtual objects at specific latitude and longitude positions that update their size and orientation as the user moves and rotates their device.

Additional capabilities include generating tracking data files from source images, responding to user interactions with augmented content, and overlaying DOM elements on the camera view for clickable interfaces. The library can be installed via npm or imported using ES modules for use with modern JavaScript frameworks.

## Tags

### Artificial Intelligence & ML

- [A-Frame and three.js Renderers](https://awesome-repositories.com/f/artificial-intelligence-ml/augmented-reality-frameworks/a-frame-and-three-js-renderers.md) — Renders AR content using A-Frame and three.js, the core rendering engines of the library. ([source](https://ar-js-org.github.io/AR.js-Docs/))
- [GPS-Anchored Content Placer](https://awesome-repositories.com/f/artificial-intelligence-ml/spatial-pose-management/ar-spatial-trackers/gps-anchored-content-placer.md) — Anchors virtual objects to real-world GPS coordinates, enabling location-based augmented reality experiences. ([source](https://ar-js-org.github.io/AR.js-Docs/location-based))
- [Marker Detection](https://awesome-repositories.com/f/artificial-intelligence-ml/spatial-pose-management/ar-spatial-trackers/marker-detection.md) — Recognizes predefined visual markers via the camera and displays augmented content on them. ([source](https://ar-js-org.github.io/AR.js-Docs/))

### Part of an Awesome List

- [AR Content Anchoring](https://awesome-repositories.com/f/awesome-lists/data/gps-positioning/ar-content-anchoring.md) — Anchors virtual objects to real-world GPS coordinates for location-based AR experiences. ([source](https://ar-js-org.github.io/AR.js-Docs/))
- [AR Interaction Handlers](https://awesome-repositories.com/f/awesome-lists/ai/augmented-reality/ar-interaction-handlers.md) — Enables user interaction with AR objects and clickable UI overlays on the camera feed. ([source](https://ar-js-org.github.io/AR.js-Docs/))

### Data & Databases

- [Fiducial Marker Detection](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/data-visualization/data-markers/fiducial-marker-detection.md) — Recognizes stable marker patterns via the camera and displays augmented content on them. ([source](https://ar-js-org.github.io/AR.js-Docs/))
- [AR Data Source Loaders](https://awesome-repositories.com/f/data-databases/static-data-loading/ar-data-source-loaders.md) — Imports place data from HTML, JavaScript, JSON files, or API calls for location-based AR. ([source](https://ar-js-org.github.io/AR.js-Docs/location-based))

### Graphics & Multimedia

- [AR Image Trackers](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/coordinate-viewport-transformations/matrix-transformation-engines/2d-image-transformations/ar-image-trackers.md) — Detects predefined 2D images through the camera and overlays AR content on them. ([source](https://ar-js-org.github.io/AR.js-Docs/))
- [AR Image-Tracked Renderers](https://awesome-repositories.com/f/graphics-multimedia/image-graphics-rendering/ar-image-tracked-renderers.md) — Renders digital content positioned relative to recognized images in the camera view. ([source](https://ar-js-org.github.io/AR.js-Docs/image-tracking/))
- [AR Tracking Data Generators](https://awesome-repositories.com/f/graphics-multimedia/image-source-generation/ar-tracking-data-generators.md) — Generates image descriptor files needed for AR marker and image tracking. ([source](https://ar-js-org.github.io/AR.js-Docs/image-tracking/))

### Hardware & IoT

- [GPS Location Tracking](https://awesome-repositories.com/f/hardware-iot/gps-location-tracking.md) — Positions virtual objects at real-world GPS coordinates for location-based AR. ([source](https://cdn.jsdelivr.net/gh/ar-js-org/ar.js@master/README.md))
- [GPS Location Controllers](https://awesome-repositories.com/f/hardware-iot/gps-location-tracking/gps-location-controllers.md) — Provides programmatic control over GPS updates with configurable distance and accuracy thresholds for AR positioning. ([source](https://ar-js-org.github.io/AR.js-Docs/location-based))

### User Interface & Experience

- [AR](https://awesome-repositories.com/f/user-interface-experience/content-rendering-components/image-overlays/ar.md) — Scans physical images and overlays digital content on them in real time for AR. ([source](https://ar-js-org.github.io/AR.js-Docs/image-tracking/))
- [Proximity-Based Locators](https://awesome-repositories.com/f/user-interface-experience/element-locators/proximity-based-locators.md) — Positions virtual objects at real-world coordinates that update as the user moves and rotates their device. ([source](https://ar-js-org.github.io/AR.js-Docs/))
- [Orientation Trackers](https://awesome-repositories.com/f/user-interface-experience/input-device-detection/orientation-trackers.md) — Reads accelerometer and magnetic field sensor data to determine device orientation for AR alignment. ([source](https://ar-js-org.github.io/AR.js-Docs/location-based))

### Web Development

- [AR Image Target Trackers](https://awesome-repositories.com/f/web-development/image-load-tracking/ar-image-target-trackers.md) — Recognizes predefined images through the camera and overlays digital content on them in real time. ([source](https://cdn.jsdelivr.net/gh/ar-js-org/ar.js@master/README.md))
