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>

Point your camera at a Hiro marker and see the red box appear.

Marker Types

Preset Markers

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

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

Custom Markers

Generate pattern: AR.js Marker Training
Download .patt file
Use in your scene:

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

Barcode Markers

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

Location-Based AR

Place content at real-world GPS coordinates:

<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>

Dynamic Location Content

// 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);
});

Image Tracking

Track arbitrary images (AR.js 3.0+):

<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>

Performance Optimization

Reduce Polygon Count

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

Limit Tracked Markers

<a-scene arjs="maxMarkerArea: 0.5">

Smooth Tracking

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

Handling Events

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.
});

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):

# Netlify (automatic HTTPS)
netlify deploy --prod

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

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.