AR.js: Markerless Augmented Reality on the Web
~2 min read
XRARarjsaugmented-realitywebxrmobilelocation-based
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.</a-scene
>