AR.js: Markerlose Augmented Reality im Web
🇬🇧 Read in English~2 min read
XRARarjsaugmented-realitywebxrmobilelocation-based
Back openDesk Edu for a sovereign, open-source education — every vote counts.
Vote nowSave products you love by clicking the heart icon.
Eine umfassende Einführung in die Virtual Reality, die die Grundlagen der Computergrafik, stereoskopisches Sehen, die Geschichte von VR, Gerätekategorien, Motion Tracking und das Reality-Virtuality-Kontinuum abdeckt.
Google und Samsung haben gerade das größte Android XR-Update seit dem Launch veröffentlicht. Auto-Spatialization verwandelt jede 2D-App in 3D, Android Enterprise ermöglicht Fleet-Deployments und das SDK unterstützt nun fünf Engines.
AR.js bringt hochperformante Augmented Reality in mobile Browser. Kein App Store, keine Installation – einfach eine URL öffnen und AR erleben.
| Feature | Beschreibung |
|---|---|
| Marker-basiert | Traditionelle Fiducial Marker |
| Standort-basiert | GPS-positionierte Inhalte |
| Image Tracking | Bilder in Echtzeit erkennen |
| Face Tracking | Gesichtszüge erkennen |
| 60fps auf Mobile | Auf Performance optimiert |
<!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 Richten Sie Ihre Kamera auf einen [Hiro-Marker](https://raw.githubusercontent.com/AR-js-org/AR.js/master/data/images/hiro.png) und sehen Sie, wie die rote Box erscheint. ## Marker-Typen ### Preset Marker ```html
<a-marker preset="hiro">
<!-- 3D content -->
</a-marker>
<a-marker preset="kanji">
<!-- 3D content -->
</a-marker>
```text ### Custom Marker 1. Muster generieren: [AR.js Marker Training](https://ar-js-org.github.io/AR.js/three.js/examples/marker-training/examples/generator.html) 2. `.patt` Datei herunterladen 3. In Ihrer Szene verwenden: ```html
<a-marker type="pattern" url="custom-marker.patt">
<a-box color="blue"></a-box>
</a-marker>
```text ### Barcode Marker ```html
<a-marker type="barcode" value="5">
<a-sphere color="green"></a-sphere>
</a-marker>
```text ## Standort-basierte AR Platzieren Sie Inhalte an realen GPS-Koordinaten: ```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 ### Dynamische Standort-Inhalte ```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 Beliebige Bilder tracken (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-Optimierung ### Polygon-Anzahl reduzieren ```javascript // Use low-poly models
<a-entity gltf-model="lowpoly.glb"></a-entity>
```text ### Getrackte Marker begrenzen ```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 ## Event-Handling ```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 ## Praxisbeispiele | Anwendung | Beschreibung | | ------------- | ------------- | | **Produktvisualisierung** | Möbel im eigenen Raum sehen | | **Bildung** | Interaktive Anatomie, Chemie-Moleküle | | **Navigation** | Richtungspfeile in der realen Welt | | **Marketing** | AR-Verpackungen, Visitenkarten | | **Gaming** | Standort-basierte Spiele wie Pokémon GO | ## Deployment AR.js funktioniert nur über HTTPS (Voraussetzung für Kamerazugriff): ```bash #
Netlify (automatic HTTPS) netlify deploy --prod # GitHub Pages (HTTPS enabled) git push origin
gh-pages ```text ## Browser-Support | Browser | Support | | --------- | --------- | | Chrome Android | Vollständig | | Safari iOS | Vollständig (WebRTC) | | Firefox Android | Vollständig | | Samsung Internet | Vollständig | ## Fazit AR.js demokratisiert Augmented Reality. Mit etwa 100 Zeilen HTML können Sie AR-Erlebnisse schaffen, die sofort Milliarden von mobilen Nutzern erreichen.</a-scene
>