AR.js: Markerless Augmented Reality on the Web

AR.js brings high-performance augmented reality to mobile browsers. No app store, no installation—just open a URL and experience AR.
AR.js Features

Feature	Description
Marker-based	Traditional fiducial markers
Location-based	GPS-positioned content
Image tracking	Recognize images in real-time
Face tracking	Detect facial features
60fps on mobile	Optimized for performance
Quick Start

Basic Setup

<!DOCTYPE html>
<html>
<head>
  <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
</head>
<body>
  <a-scene embedded arjs>
    <a-marker preset="hiro">
      <a-box position="0 0.5 0" material="color: red;"></a-box>
    </a-marker>
    <a-entity camera></a-entity>
  </a-scene>
</body>
</html>
```text

Point your camera at a [Hiro marker](https://raw.githubusercontent.com/AR-js-org/AR.js/master/data/images/hiro.png) and see the red box appear.

## Marker Types

### Preset Markers

```html
<a-marker preset="hiro">
  <!-- 3D content -->
</a-marker>

<a-marker preset="kanji">
  <!-- 3D content -->
</a-marker>
```text

### Custom Markers

1. Generate pattern: [AR.js Marker Training](https://ar-js-org.github.io/AR.js/three.js/examples/marker-training/examples/generator.html)
2. Download `.patt` file
3. Use in your scene:

```html
<a-marker type="pattern" url="custom-marker.patt">
  <a-box color="blue"></a-box>
</a-marker>
```text

### Barcode Markers

```html
<a-marker type="barcode" value="5">
  <a-sphere color="green"></a-sphere>
</a-marker>
```text

## Location-Based AR

Place content at real-world GPS coordinates:

```html
<a-scene arjs="sourceType: webcam; debugUIEnabled: false;">
  <a-entity
    gps-entity-place="latitude: 52.5200; longitude: 13.4050"
    scale="10 10 10"
    gltf-model="model.glb">
  </a-entity>
  <a-camera gps-camera rotation-reader></a-camera>
</a-scene>
```text

### Dynamic Location Content

```javascript
// Add entities at user's location
navigator.geolocation.getCurrentPosition((position) => {
  const lat = position.coords.latitude;
  const lon = position.coords.longitude;

  const entity = document.createElement('a-entity');
  entity.setAttribute('gps-entity-place', `latitude: ${lat}; longitude: ${lon}`);
  entity.setAttribute('gltf-model', 'pin.glb');
  document.querySelector('a-scene').appendChild(entity);
});
```text

## Image Tracking

Track arbitrary images (AR.js 3.0+):

```html
<a-scene
  vr-mode-ui="enabled: false"
  arjs="sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3;">

  <a-assets>
    <a-asset-item id="model" src="model.glb"></a-asset-item>
  </a-assets>

  <a-marker mindar-image-target="imageTargetSrc: targets.mind;">
    <a-entity gltf-model="#model" scale="0.5 0.5 0.5"></a-entity>
  </a-marker>

  <a-entity camera></a-entity>
</a-scene>
```text

## Performance Optimization

### Reduce Polygon Count

```javascript
// Use low-poly models
<a-entity gltf-model="lowpoly.glb"></a-entity>
```text

### Limit Tracked Markers

```html
<a-scene arjs="maxMarkerArea: 0.5">
```text

### Smooth Tracking

```html
<a-marker
  emitevents="true"
  smooth="true"
  smoothCount="5"
  smoothTolerance="0.01"
  smoothThreshold="2">
</a-marker>
```text

## Handling Events

```javascript
const marker = document.querySelector('a-marker');

marker.addEventListener('markerFound', () => {
  console.log('Marker detected!');
  // Show UI, play sound, etc.
});

marker.addEventListener('markerLost', () => {
  console.log('Marker lost');
  // Hide UI, pause, etc.
});
```text

## Real-World Use Cases

| Application | Description |
| ------------- | ------------- |
| **Product visualization** | See furniture in your room |
| **Educational** | Interactive anatomy, chemistry molecules |
| **Navigation** | Directional arrows in the real world |
| **Marketing** | AR packaging, business cards |
| **Gaming** | Location-based games like Pokémon GO |

## Deployment

AR.js works on HTTPS only (camera access requirement):

```bash
# Netlify (automatic HTTPS)
netlify deploy --prod

# GitHub Pages (HTTPS enabled)
git push origin gh-pages
```text

## Browser Support

| Browser | Support |
| --------- | --------- |
| Chrome Android | Full |
| Safari iOS | Full (WebRTC) |
| Firefox Android | Full |
| Samsung Internet | Full |

## Conclusion

AR.js democratizes augmented reality. With ~100 lines of HTML, you can create AR experiences that reach billions of mobile users instantly.