Unternehmen
Projekt besprechen
Projekt besprechen
Frau hebt die Hände, darauf Tracking-Linien und orange Partikel
  • VR / AR
  • Angular
  • Web-Entwicklung

Augmented Reality – Ein magischer Einblick in unser Spezialgebiet

Was wäre möglich, wenn Deine Hände selbst zum Bedienelement werden? Wir haben es ausprobiert – und das Ergebnis kannst Du direkt hier im Beitrag testen.

Was ist Augmented Reality?

Augmented Reality (AR) verschmilzt die reale Welt mit virtuellen Inhalten. So entstehen interaktive Erlebnisse, die Deine Umgebung auf neue Weise erlebbar machen – längst im Einsatz in Medizin, Bildung und Unterhaltung.

Bei onexip setzen wir seit Jahren AR-Technologien praktisch um. Irgendwann haben wir uns gefragt: Was passiert, wenn wir die Hände als Interaktionsmedium nutzen? Um Genauigkeit und Stabilität des Hand-Trackings zu testen, haben wir kurzerhand einen kleinen Showcase gebaut. Das Ergebnis funktioniert nicht nur – es ist schlichtweg magisch.

Die Technik hinter der Magie

Für das präzise Hand-Tracking nutzen wir Mediapipe Web (eine Bibliothek von Google, die Hände im Kamerabild in Echtzeit erkennt). Dazu kommt ein Partikelsystem mit Three.js (eine 3D-Grafikbibliothek für den Browser), das funkelnde Effekte an Deinen Händen erzeugt.

  1. Video Das Live-Bild Deiner Kamera
  2. Hand-Tracking Mediapipe erkennt 21 Punkte pro Hand
  3. Partikel Three.js zeichnet die Effekte
Alle drei Ebenen liegen exakt übereinander – ihre Koordinatensysteme sind aufeinander abgestimmt.

Umgesetzt ist das Ganze als Angular-Web-Component (ein in sich geschlossener Baustein). Dadurch lässt es sich in jede beliebige Website einbinden – ob WIX, WordPress oder eine andere Angular-Anwendung.

  • Mediapipe Web
  • Three.js
  • Angular
  • Web Component
  • WebAR

Live-Demo: HandTrackAR

Live-Demo · HandTrackAR

Probier es selbst – mit Deinen Händen.

Die Demo nutzt Deine Kamera. Das Bild wird nur in Deinem Browser verarbeitet und nirgends gespeichert.

In neuem Tab öffnen

Hands-On Augmented Reality erleben

Der Showcase zeigt nicht nur, was technisch geht – er macht es erlebbar. Was heute glitzernde Partikel sind, kann morgen ein Werkzeug sein: zur Bedienung ohne Berührung, für Schulungen oder für Produkte, die man im Raum ausprobiert.

Häufig gestellte Fragen

Ein interaktiver Showcase, der mit Augmented Reality die Bewegungen Deiner Hände in Echtzeit verfolgt.

Mediapipe Web für das präzise Hand-Tracking und Three.js für die Partikeleffekte – verpackt als Angular-Web-Component.

Direkt hier im Beitrag: Klick in der Live-Demo auf „Demo starten“ und erlaube den Kamerazugriff. Alternativ öffnest Du die Demo in einem neuen Tab.

Nein. Das Kamerabild wird nur in Deinem Browser verarbeitet und nicht übertragen oder gespeichert.

Die Software erkennt im Kamerabild markante Punkte Deiner Hände und folgt ihnen in Echtzeit. Darauf reagieren die Partikeleffekte.

Zum Beispiel in der Medizin, in der Bildung und in der Unterhaltung – überall, wo digitale Inhalte direkt in der echten Umgebung helfen.

Ja. Als Web-Component lässt sich die Lösung in Plattformen wie WIX, WordPress oder eigene Anwendungen einbinden.

Aktuell funkelnde Partikel wie Glitzer. Die Effekte lassen sich aber an Deine Wünsche und Dein Produkt anpassen.

Klar – wir bieten kostenlose 30-minütige Beratungsgespräche an.

Bug Runner

Kurze Pause?

Spring über Bugs, Deadlines und Legacy-Code. Sammle Commits.

Tippen zum Springen

Weiterlesen
Alle Beiträge