Bevor ich mein Initialprojekt codeKnacker gemacht habe kam ich bei meiner langen Recherche auch auf das Thema “Augmented Reality”. Es folgt eine Überblickspräsentation meiner Recherche.

Mein erstes Konzept für das Initialprojekt war nämlich eine Art “Augmented Reality Station” in jedem Stockwerk der FH, dass mir eine Art von Interface präsentiert sobald ich auf einen Marker zeige. In diesem Interface kann ich sofort eine Art 3D Karte des Stockwerks mit meiner derzeitigen Position sehen und kann natürlich nach einem Ziel suchen, dass mir dann über eine Führungslinie auf der Karte angezeigt wird.

Das Konzept wäre sogar auf die Raum-/Stundenpläne, die jetzt in Papierform neben jeder Raumtür aufgehängt werden, erweiterbar. Erstens würde man Papier sparen, die Pläne müssten bei Änderungen nicht ausgetauscht werden und man könnte ohne mühsam ins Web-CIS zu gehen direkt sich anzeigen lassen wie es mit dem Raumzeiten aussieht. Natürlich wäre der Zugriff auf den FH-Server von Nöten 😉

Da unser Initialprojekt eine Web-App sein sollte, musste ich also herausfinden ob “Augmented Reality” überhaupt im Web-Browser möglich ist und was es da eigentlich für Möglichkeiten gibt. Wie ihr euch vorstellen könnt, wurde ich nicht fündig, aber was ich gefunden habe, möchte ich hier präsentieren. Dieser Artikel ist aber kein Tutorial zu “Augmented Reality”.

Augmented Reality im Web?

Nach meinem bisherigen Wissen über Augmented Reality, funktioniert das Ganze ja über die Kamera des Smartphones. Erst mal platziert man einen sogenannten “Marker” im Blickfeld der Kamera. Im nativen Code greift man dann auf die Kamera zu und liest sich die Live-Frames aus. Diese werden durch einen Algorithmus gejagt und der Marker wird in den Daten identifiziert. Nun kann man an der Position des Markers ein beliebiges 2D oder 3D Objekt über die Kamera-Frames legen.

Das größte Problem beim Web-Browser liegt natürlich darin, dass man (noch?) keinen direkten Zugriff auf die Kamera aus dem Browser heraus hat. Indirekt kann man ja bereits mit JS in der Hybrid- und Web-App-Entwicklung ein Foto von der Kamera “anfordern” lassen. Das ist also der ausschlaggebende Schritt, der mein Projekt scheitern ließ.

Ich gab mich aber damit nicht zufrieden und wollte mehr recherchieren und zwar in die experimentelle Richtung. Vielleicht gab es dort Information. Was tut man also, wenn man nach experimentellen Geschichten sucht und keine wissenschaftlichen Artikel lesen will? Richtig, man geht auf Youtube 😉

Und nach nur kurzer Zeit fand ich dieses Video hier:

Auf den ersten Blick dachte ich mir: Ja, das ist es doch was ich suche! Und tatsächlich ist es schon nahe dran, aber eben nicht ganz.

Was ist JSARToolkit & Three.js?

Nun, ich zitiere mal direkt aus github wo wir die JSAToolkit Libary finden: “This is a JavaScript port of FLARToolKit, operating on canvas images and video element contents. And hopefully one day on device elements with webcam input.” ( https://github.com/kig/JSARToolKit )

Also zuerst mal: FLARToolKit (was wiederum ein AS3 Port von NyARToolkit (Java) ist, der wiederum ein Port von ARToolkit (das Original, glaube ich) ist) ist eine Libary, die Marker in Bildern findet und deren Position und Ausrichtung im 3D Raum ausgibt. JSAToolkit ist damit der JS Port von FLARToolKit. Jetzt kann aber (wie im Zitat lesbar) das JSAToolkit diese Informationen nur in einem Video- oder einem Canvas-Element herausfinden, nicht in einer Webcam und damit klarerweise auch nicht in einer Kamera eines Smartphones.

Three.js ist eine Libary, die uns auf einfache Weise WebGL-3D Objekte erstellen und zeichnen lässt.

Wie funktioniert nun der Ansatz JSAToolkit & Three.js?

Genauso wie im nativen Ansatz findet uns das JSAToolkit in zum Beispiel Frames einer abspielenden Videodatei (wie man es auch in dem Video sieht) den Marker und gibt uns Informationen darüber aus. Mit diesen können wir dann über Three.js ein Objekt an dessen Position zeichnen lassen.

Doch dass diese Funktion im Browser schon möglich ist und noch dazu mit JavaScript, ist beachtlich.

Fazit

Es war also in diesem Fall doch nur ein kleiner großer Schritt, dann hätte mein Projekt umgesetzt werden können. Ob diese JSAToolkit Libary nur wegen dem fehlendem Zugriff auf Webcam und Smartphone-Kamera nicht weiterentwickelt wird oder sonstige Probleme sie daran hindern, kann ich natürlich nicht beantworten.

Mal sehen was meine weiteren Recherchen ergeben werden.

Quellen:

Video JSARToolKit & Three.js – http://www.youtube.com/watch?v=BIFo1przLY4
Weitere ähnliche Videos – http://www.youtube.com/results?search_query=JSARToolKit+android

JSARToolKit – https://github.com/kig/JSARToolKit
ThreeJS – http://threejs.org/

FLARToolKit – http://www.libspark.org/wiki/saqoosha/FLARToolKit/en
ARToolkit – http://www.hitl.washington.edu/artoolkit/
NyARTookkit – http://nyatla.jp/nyartoolkit/wp/