Needle Engine Dokumentation
Downloads
  • What is Needle Engine?
  • Erfahrungsberichte
  • Get an overview

    • Samples and Showcase
    • Unsere Vision 🔮
    • Funktionsübersicht
    • Technischer Überblick
  • Resources

    • Pricing and Plans
    • Changelog
    • API Documentation
    • Support & Community
  • Integrations

    • Needle Engine für Unity
    • Needle Engine für Blender
    • Needle Engine als Web Component
    • Needle Engine auf Ihrer Website
    • Needle Cloud
  • Core Concepts

    • Struktur eines Needle Engine-Projekts
    • Everywhere Actions
    • Assets nach glTF exportieren
    • Frameworks, Bundler, HTML
    • Testen auf lokalen Geräten
    • Bereitstellung und Optimierung
  • Advanced

    • VR & AR (WebXR)
    • Image Tracking (WebXR)
    • Netzwerkfunktionen
    • MaterialX
    • Editor Synchronisierung
  • Troubleshooting

    • Fehlerbehebung
    • Fragen und Antworten (FAQ) 💡
    • Support and Community
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • Skripting in Needle Engine
    • Einführung in das Scripting für Unity-Entwickler
    • Needle-Kernkomponenten
    • Everywhere Actions
  • Components and Lifecycle

    • Komponenten erstellen und verwenden
    • @serializable und andere Decorators
    • Automatische Komponenten-Generierung
    • Scripting Beispiele
    • Community Contributions
    • Zusätzliche Module
  • Settings and APIs

    • <needle-engine> Konfiguration
    • needle.config.json
    • Needle Engine API
    • three.js API
Help
Samples
Pricing
  • Needle Website
  • Needle Cloud
  • Support Community
  • Discord Server
  • X/Twitter
  • YouTube
  • Newsletter
  • Email
  • Feedback
  • Github
  • English
  • 简体中文
  • Español
  • Português
  • Français
  • हिन्दी
  • 日本語
  • Deutsch
  • Tiếng Việt
Downloads
  • What is Needle Engine?
  • Erfahrungsberichte
  • Get an overview

    • Samples and Showcase
    • Unsere Vision 🔮
    • Funktionsübersicht
    • Technischer Überblick
  • Resources

    • Pricing and Plans
    • Changelog
    • API Documentation
    • Support & Community
  • Integrations

    • Needle Engine für Unity
    • Needle Engine für Blender
    • Needle Engine als Web Component
    • Needle Engine auf Ihrer Website
    • Needle Cloud
  • Core Concepts

    • Struktur eines Needle Engine-Projekts
    • Everywhere Actions
    • Assets nach glTF exportieren
    • Frameworks, Bundler, HTML
    • Testen auf lokalen Geräten
    • Bereitstellung und Optimierung
  • Advanced

    • VR & AR (WebXR)
    • Image Tracking (WebXR)
    • Netzwerkfunktionen
    • MaterialX
    • Editor Synchronisierung
  • Troubleshooting

    • Fehlerbehebung
    • Fragen und Antworten (FAQ) 💡
    • Support and Community
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • Skripting in Needle Engine
    • Einführung in das Scripting für Unity-Entwickler
    • Needle-Kernkomponenten
    • Everywhere Actions
  • Components and Lifecycle

    • Komponenten erstellen und verwenden
    • @serializable und andere Decorators
    • Automatische Komponenten-Generierung
    • Scripting Beispiele
    • Community Contributions
    • Zusätzliche Module
  • Settings and APIs

    • <needle-engine> Konfiguration
    • needle.config.json
    • Needle Engine API
    • three.js API
Help
Samples
Pricing
  • Needle Website
  • Needle Cloud
  • Support Community
  • Discord Server
  • X/Twitter
  • YouTube
  • Newsletter
  • Email
  • Feedback
  • Github
  • English
  • 简体中文
  • Español
  • Português
  • Français
  • हिन्दी
  • 日本語
  • Deutsch
  • Tiếng Việt
  • Getting Started

    • Downloads
    • Needle Engine for Unity
    • Needle Engine for Blender
    • Needle Engine as Web Component
    • Needle Engine on your Website
    • Needle Cloud
    • Custom integrations
    • Support and Community
  • Core Concepts

    • Struktur eines Needle Engine-Projekts
    • Everywhere Actions
    • Assets nach glTF exportieren
    • Frameworks, Bundler, HTML
    • Testen auf lokalen Geräten
    • Bereitstellung und Optimierung
  • Scripting

    • Skripting in Needle Engine
    • Einführung in das Scripting für Unity-Entwickler
    • Komponenten erstellen und verwenden
    • Automatische Komponenten-Generierung
    • Scripting Beispiele
    • Community Contributions
  • Advanced

    • VR & AR (WebXR)
    • Image Tracking (WebXR)
    • Netzwerkfunktionen
    • MaterialX
    • Editor Synchronisierung
  • Troubleshooting

    • Fehlerbehebung
    • Fragen und Antworten (FAQ) 💡
    • Support and Community
  • Reference

    • Funktionsübersicht
    • Technischer Überblick
    • Needle-Kernkomponenten
    • needle.config.json
    • <needle-engine> Konfiguration
    • @serializable und andere Decorators

Was ist WebXR Image Tracking

WebXR Image Tracking ermöglicht es Browsern, spezifische Bilder in der realen Welt über die Kamera eines Geräts zu erkennen und zu verfolgen. Es liefert Echtzeit-Positions- und Orientierungsdaten, um virtuelle Inhalte präzise an physischen Markern wie Postern, Verpackungen oder Kunstwerken zu verankern.

Indem die Kamera auf ein erkanntes Bild gerichtet wird, aktualisiert die Image Tracking API kontinuierlich die räumliche Beziehung zwischen den virtuellen und physischen Elementen, um eine korrekte Ausrichtung zu gewährleisten, selbst wenn sich das Gerät oder Bild bewegt.

Image Tracking verwandelt statische Bilder in interaktive AR-Trigger – so können Museumsgemälde überlagerte Informationen anzeigen, Produktverpackungen 3D-Animationen enthüllen oder Visitenkarten schwebende Kontaktdetails zeigen – alles über Webstandards, ohne dass Benutzer dedizierte Apps herunterladen müssen, wodurch AR-Erlebnisse über jeden kompatiblen Webbrowser sofort zugänglich werden.

Demo

Needle Engine unterstützt WebXR Image Tracking (Live Demo) auf Android und QuickLook Image Tracking auf iOS.

Starten Sie die untenstehende Szene in AR und richten Sie die Kamera Ihres Telefons auf den Bildmarker auf einem Bildschirm oder drucken Sie ihn aus.

WebXR Image Tracking auf Android

Auf Android aktivieren Sie bitte "WebXR Incubations" in den Chrome Flags. Sie finden diese, indem Sie chrome://flags/#webxr-incubations in die Adressleiste des Chrome-Browsers Ihres Android-Telefons einfügen.

Bildmarker

Erläuterung

WebXR Image Tracking befindet sich noch in der "Draft"-Phase und ist nicht allgemein verfügbar

Bisher konnten sich die Browserhersteller nicht auf die finale Image Tracking API für WebXR einigen. Solange die Spezifikation in der "Draft"-Phase ist (Marker Tracking Explainer), müssen Sie und die Benutzer Ihrer App die folgenden Schritte ausführen, um WebXR ImageTracking auf Android-Geräten zu aktivieren:

  1. Besuchen Sie chrome://flags in Ihrem Android Chrome-Browser
  2. Suchen und aktivieren Sie die Option WebXR Incubations

Ohne diese Spezifikation kann man trotzdem den Kamerabildzugriff anfordern und benutzerdefinierte Algorithmen zur Bestimmung der Gerätestellung ausführen. Der Nachteil ist, dass Benutzer zusätzliche Berechtigungen wie den Kamerazugriff akzeptieren müssen und die Verfolgung nicht so genau sein wird wie mit den nativen Funktionen des Geräts.

Hier sind einige Bibliotheken, um Image Tracking basierend auf Kamerazugriff und lokalen Computer-Vision-Algorithmen hinzuzufügen:

  • Experimental AR.js integration with Needle Engine von FireDragonGameStudio
  • AR.js (Open Source)
  • Mind AR (Open Source)

Integrationen

Image Tracking kann sowohl in Unity als auch in Blender eingerichtet werden, indem ein WebXRImageTracking-Komponente zu einem Objekt hinzugefügt wird. Fügen Sie dann Ihre Bilder dem Tracked Images-Array hinzu.

unity screenshotImage Tracking Komponente in Unity

blender screenshotImage Tracking Komponente in Blender

Referenzen

  • WebXR Marker Tracking Explainer
  • WebXR Device API
  • caniuse: WebXR
  • Apple's Preliminary USD Behaviours

Weiterführende Lektüre

  • Needle Everywhere Actions Erlebnisse, die überall laufen
  • XR documentation

Seite automatisch mit KI übersetzt

Suggest changes
Zuletzt aktualisiert: 15.08.25, 08:05
Prev
VR & AR (WebXR)
Next
Netzwerkfunktionen