Augmented Reality trifft TYPO3: POIs neu erleben

Wie bringt man Points of Interest (POIs) auf mobilen Geräten intuitiv und platzsparend zur Anzeige?

Diese Frage stand am Anfang von Davids Abschlussprojekt der Ausbildung zum Fachinformatiker Anwendungsentwicklung und wurde mit einer innovativen Lösung beantwortet: dem imx.ARBrowser, einer TYPO3-Erweiterung zur Darstellung von POIs in einer Augmented-Reality-Ansicht.

Ausgangssituation: POIs auf dem kleinen Bildschirm – ein bekanntes Problem

In touristischen oder redaktionellen Portalen werden POIs bisher meist in zwei Varianten dargestellt: als Kartenansicht oder Liste. Auf Mobilgeräten ist beides oft unübersichtlich, die Bedienung leidet unter Platzmangel und der räumliche Bezug bleibt vage. Genau hier setzt Davids Projekt an.

Projektziel: POIs direkt in der Umgebung anzeigen

Das Ziel: eine benutzerfreundliche und mobile Lösung, die POIs direkt in der realen Umgebung des Nutzers visualisiert mit Augmented Reality. Dafür entwickelte David eine eigene TYPO3-Erweiterung, die sich nahtlos in bestehende Portale integrieren lässt.

Die wichtigsten Funktionen im Überblick:

Anzeige der POIs als Marker in einer AR-Ansicht
Integration per Content-Element in TYPO3
Datenanbindung an die imx.Platform via Content Delivery API (CDA)
Filtern der POIs nach Eigenschaften, z. B. Produktlinien
Clustering von POIs zur Vermeidung von Überlappungen
Interaktive Infofenster mit Details zu POIs oder POI-Clustern

Anzeige der POIs als Marker in einer AR-Ansicht

Ergebnis: Funktionsfähige AR-Erweiterung für TYPO3

Davids Lösung ist produktreif: Die AR-Ansicht lässt sich in TYPO3 (Version 12.4) bequem pflegen und konfigurieren. Filter für Produktlinien sind einfach über eine ID-Liste definierbar, Marker und Cluster werden automatisch aus der imx.Platform geladen und dargestellt. Auch ein responsives Info-Fenster wurde umgesetzt.

Herausforderungen: Neues Terrain, kreative Lösungen

Augmented Reality war für das Team Neuland – und genau das machte das Projekt besonders spannend. David stieß auf mehrere Herausforderungen:

Die ursprünglich gewählte AR-Bibliothek war inkompatibel mit dem verwendeten Frontend-Framework und ein Wechsel war somit nötig.
Die Umsetzung der Marker in Three.js erforderte tiefes technisches Verständnis.
Das geplante Clustering mittels Ray-Casting musste aus Zeitgründen vereinfacht werden – stattdessen gruppieren sich Marker nun anhand von Koordinaten und Blickrichtung.
Der Vollbildmodus funktioniert derzeit nur auf Android.

Trotz dieser Hürden konnte David eine funktionierende, performante Lösung abliefern und viele wertvolle Erfahrungen sammeln.

Ausblick: Ideen für den nächsten Schritt

Natürlich ist das Projekt damit nicht zu Ende gedacht, denn für das Projekt war nur begrenzt Zeit. David hat bereits einige spannende Ideen für die Weiterentwicklung:

Weitere Filteroptionen, z. B. nach Themenbereichen
HTML-basierte Marker für einfacheres Styling und Customizing je nach Kundenportal
Unterstützung für neuere TYPO3-Versionen

Fazit: Starke Leistung, starke Lösung

„Ich wollte was machen, das man nicht jeden Tag sieht und das den Leuten wirklich hilft. Klar war es manchmal knifflig, aber genau das hat es spannend gemacht. Am Ende habe ich nicht nur eine coole Lösung gebaut, sondern auch viel dazu gelernt. Über Technik und über das Dranbleiben.“
David Kelemen, Fachinformatiker für Anwendungsentwicklung

Davids Projekt zeigt eindrucksvoll, wie praxisnah, technisch fundiert und kreativ ein Abschlussprojekt sein kann. Wir sind stolz auf das Ergebnis in so kurzer Zeit und sind gespannt auf die weitere Entwicklung des Projektes!