AR-Visitenkarte — die Visitenkarte, die lebendig wird

Eine gedruckte Visitenkarte, die lebendig wird: Handykamera darauf richten und ein animierter 3D-Avatar des Inhabers erscheint auf der Karte, begrüßt das Gegenüber hörbar und bietet antippbare Aktionen — Website, Showreel, E-Mail, Anruf, Kontakt speichern. Ohne App-Installation, direkt im Browser.

Die Herausforderung

Visitenkarten werden einmal angesehen und vergessen. Das Ziel: eine Karte, die das Handwerk ihres Inhabers im Moment des Hinsehens vorführt — ein AR-Erlebnis, das auf jedem Handy ohne App funktioniert, dazu eine Desktop-3D-Ansicht zum Einbetten ins Portfolio und ein Druckdesign, das zugleich als AR-Marker dient. Ein physisches Objekt, drei digitale Oberflächen.

Das Vorgehen

• WebAR mit Bildtracking: Die gedruckte Kartenvorderseite ist der Marker. Das Design wurde auf Trackbarkeit hin entworfen — ein vollflächiges Comic-Porträt füllt die halbe Karte und liefert dem Tracker dichte, eindeutige Merkmale. Marker-Kompilierung und ein Ende-zu-Ende-Test (simulierter Kamera-Feed) liefen vollautomatisiert; die Erkennung greift in unter zwei Sekunden.
• 3D-Pipeline mit Haken: Der KI-generierte Comic-Avatar kam als FBX mit 1,4 Mio. Vertices, dessen mikro-fragmentierter UV-Atlas jede Mesh-Vereinfachung zerstörte. Lösung: Textur als Vertex-Farben einbacken (sRGB-korrekt), vereinfachen, glatte Normalen neu berechnen — aus 81 MB wurden 4 MB GLB, Tanzanimation und Rig blieben intakt.
• Das Erlebnis: Bei Erkennung tanzt der Avatar auf der Karte, eine neurale TTS-Begrüßung spielt (mit Antipp-Fallback für Browser-Autoplay-Regeln), und schwebende Buttons öffnen Website, Showreel, E-Mail, Telefon und einen on-the-fly generierten vCard-Download.
• Drei Oberflächen, eine Codebasis: ar.html (Handy-Kamera-AR), viewer.html (Desktop-3D-Viewer mit WebXR-Button für AR-Brillen, per iframe einbettbar) und eine Druckvorlage, die Karte, QR-Rückseite und hochauflösendes Marker-PNG aus einer einzigen Config-Datei rendert.

Das Ergebnis

• Ein komplettes physisch-digitales Produkt: druckfertige 85×54-mm-Karte, ~5 MB statische Web-App, kein Backend.
• Vor dem Launch Ende-zu-Ende verifiziert: Headless-Browser-Tests für Rendering, Marker-Kompilierung und AR-Erkennung mit simulierter Kamera.
• Alle Kontaktdaten, Links, Avatar-Größe und Begrüßungs-Audio liegen in einer config.js — die Karte ist in Minuten umbrandbar.

Was das zeigt

• Liefert polierte Ende-zu-Ende-Produkte schnell: 3D-Pipeline → Web-App → Druckdesign → Deployment an einem Tag.
• Pragmatisches Engineering unter realen Randbedingungen (kaputte UV-Atlanten, Browser-Autoplay-Regeln, mobile Bandbreiten-Budgets).
• KI-gestützte Umsetzung, vom Menschen kuratiert: generierte Assets und Code, abgesichert durch automatisierte visuelle und funktionale Tests.
• Bandbreite über das ganze Spektrum — 3D/AR, Audio, Print und klassisches Web.

Technik auf einen Blick

WebAR · MindAR · A-Frame · model-viewer · glTF · edge-tts

---