Wolltet ihr auch schon immer einmal VR, AR oder einfach nur 360° Content erstellen? Möchtet ihr das eure Anwendung Out of the Box auf vielen Geräten verfügbar ist? Ihr könnt HTML, CSS und JavaScript? Ihr seid nicht gewillt viel Geld oder gigantische Mengen an Zeit für ein Hobbyprojekt auszugeben?
Dann geht es euch so wie mir und A-Frame könnte die Lösung für euer Problem sein!
Was ist A-Frame?
Kurzgesagt ist A-Frame ein Web-Framework um 3D-Anwendungen mittelst reinem HTML zu kreieren. Wer sich gerade gefragt hat, wie es denn möglich ist mit HTML 3D-Anwendungen zu bauen wird überrascht sein, wie einfach es mit A-Frame funktioniert. Um eine Scene zu erstellen, werden einfach für A-Frame spezifische HTML-Tags verwendet, die von A-Frame interpretiert, jedoch von der Standard-Browser-Renderengine ignoriert werden.
Auf diesem Weg werden 3D-Modelle, Animationen oder Lichter und Schatten platziert.
Wer mehr Interaktion möchte, kann über JavaScript und der Standard DOM-API, die Scene erweitern und verändern.
Was ist A-Frame nicht
A-Frame ist definitiv keine Klickibunti Anwendung mit der alles auf magische Weise funktioniert. Wer A-Frame nutzt will, dürfte schnell feststellen, dass grundlegende Konzepte von HTML, CSS und JavaScript vorhanden sein müssen und es sich lediglich um ein Framework handelt. Wer seine Scene nicht nur mit primitiven Objekten füllen möchte, muss zudem auch mit gängiger 3D- und Grafik-Software, wie bspw. Blender, Gimp und Inkscape umgehen können oder auf Modell-Bibliotheken zurückgreifen.
Anwendungsbeispiele
Ich habe in den vorherigen Abschnitten viel erzählt, aber im Grunde ist es interessanter, sich das Ganze an einem Beispiel anzusehen.
In letzter Zeit habe ich mich geschäftlich und privat viel mit A-Frame auseinandergesetzt und experimentiert, was man denn alles damit anstellen kann.
Zusammenhängende 360° Bilder
In meinem ersten Anwendungsbeispiel, hier ist es zu finden, geht es darum eine zusammenhängende Szene aus 360° Bilder zu erstellen. Jedoch sollen die Bilder nicht nur einfach präsentiert, sondern auch durch interaktive Inhalte erweitert werden. Die Idee dazu kam mir bei einer Wanderung durch den Harz, bei der ich mich gefragt habe, wie ich jemanden, der vielleicht körperlich nicht in der Lage ist, den Harz zu besuchen, eben diesen präsentieren kann. Neu ist die Idee nicht, Google Street View bietet einen ähnlichen Funktionsumfang an. Jedoch bin ich ein großer Freund davon, Google Produkte zu vermeiden und nicht zu nutzen. Deshalb brauche ich auch keine Inhalte zu einer Anwendung beitragen, die ich selbst nicht benutzen möchte und mit der ich nur einen Teil von meinen Ideen abdeckt kann. Aber kommen wir zurück zum Anwendungsbeispiel.
In der Anwendung sind mehrere Szenen durch blaue Pfeile verbunden, wenn man diese anklickt springt man in die nächste Szene und kann sich dort ebenfalls umschauen. Die Spruce Scene enthält ein Beispiel von interaktivem Inhalt, der zeigt, wie Wissen spielerisch vermittelt werden könnte. Das Beispiel habe ich von einem Schaubild in der nähe von Bad Harzburg abgekupfert, bei dem dargestellt wird, wie stark sich eine Fichte im Wind neigt und ab wann es zu viel für sie wird.
Einladungen
Wer keine Lust auf klassische Einladungen aus Papier oder einem einfachen Text in einer Messenger-Gruppe hat, kann auch mit A-Frame interaktive Einladungen bauen, diese bspw. mit Gitlab Pages bereitstellen und einfach nur den Link herumschicken. Auf diesem Weg ist es möglich, seinen kreativen Ideen eine weitere Dimension zu geben.
Mein zweites Anwendungsbeispiel zeigt eine Einladung zu einem Glühweinabend. Auf der Flasche im Szenenmittelpunkt sind die wichtigsten Informationen zur Feier zu finden. Nach dem Starten dreht sich die Flasche unendlich im Kreis. Mit den UI-Elementen an der unteren rechten Seite kann näher an die Flasche gezoomt, die Rotation pausiert und zur Vorder- oder Rückseite rotiert werden.
Alles in allem ist diese Form der Einladung sehr gut angekommen und ich finde sie auch sehr ansprechen.
Für wen ist A-Frame also?
Aus meiner Sicht spricht A-Frame viele Benutzergruppen an. Da wären zum einen Einsteiger in die digitale Welt oder auch kreativ-schaffende Personen. Durch die einfache Art, Szenen zu erstellen, haben sie es besonders leicht, Inhalte zu kreieren und auszuliefern. Engines wie Unity oder Godot bieten zwar mehr Features, sind jedoch nicht so einfach zu bedienen und benötigen mehr Zeit, um sich einzuarbeiten. Zudem wird keine zusätzliche Software benötigt, um A-Frame zu nutzen, ein einfacher Texteditor und ein Browser reichen schon aus. Wer also einen Toaster mit Texteditor hat, kann auch am Frühstückstisch entwickeln. 😄
Auch erfahrene Entwickler können von A-Frame profitieren. Ein weiterer Vorteil ist es, dass ganze Anwendungen oder Prototypen mit sehr geringem Zeitaufwand erstellt werden können. Für größere Anwendungen müssen nicht komplett neue Strukturen gebaut werden, es können die bereits vorhandenen Mittel genutzt und angepasst werden.
