Campfire VR

tl;dr: Dieser Artikel beschreibt verschiedene Einsatzmöglichkeiten für Shader in einer A-Frame-Szene (english version).

Im Folgenden zeigen wir wie Shader in einer einfache A-Frame-Szene implementiert werden können.

Nun können wir mit der eigentlichen Szene in A-Frame beginnen. Dazu legen wir zunächst eine A-Frame-Szene als HTML-Datei an, laden das Framework und fügen zwei Entities hinzu. Wie man den Kommentaren entnehmen kann, dienen diese Entities als Anker für einerseits das Lagerfeuer und andererseits andere Objekte, die darum platziert werden.

Das Ergebnis ist ein wenig spektakulärer, weißer Bildschirm.

Da wir uns bereits unsere Modelle zurechtgelegt haben, fangen wir mit der Umgebung an und fügen die entsprechenden Modelle in die Szene ein. Dazu definieren wir zunächst die Ressourcen in a-assets und fügen die entsprechenden Entities nachher in die Szene ein. Als Boden geben wir zunächst eine graue Fläche an. Diese ist besonders gut geeignet mit dem späteren Einsatz von Licht zu interagieren. Damit ergibt sich der folgende zusätzliche Code:

Aus dem Bild kann man nun zumindest erkennen, dass etwas landschafts-ähnliches gemeint ist.

Als nächstes fügen wir Umgebungslicht ein, bringen einen einfachen Mond in Stellung (das ID-Attribut des Mondes wird für den nächsten Schritt benötigt) und fügen noch einen Himmel hinzu. Damit zeigt sich bereits, dass unsere Lagerfeuerszene in der nacht stattfindet und der Boden nun in einem satten, dunklen Lila gezeigt wird anstelle von Grau. Der folgende Code wird dazu hinzugefügt.

Zu einem nächtlichen Himmel gehören natürlich auch Sterne. Diese können wir mit einem weiteren Shader hinzufügen. Um es nicht zu komplex werden zu lassen haben wir einen sehr einfachen Shader genommen. Dieser verteilt die Punkte, die die Sterne darstellen sollen, gleichmäßig auf der Himmelstextur. Das kommt mit dem Nachteil, dass durch die perspektivische Verzerrung dieser Textur die Sterne dennoch ungleichmäßig verteilt sind und Strukturen bilden. Durch die geringe Anzahl der Sterne fällt das zwar kaum auf, aber für eine realistischere Darstellung besteht hier noch Verbesserungspotential.

Natürlich ist eine Lagerfeuerszene noch nicht fertig ohne Lagerfeuer. Daher werden wir dieses in den folgenden Schritten hinzufügen. Das Feuer selbst besteht aus dem Model einer Feuerstelle, einem Pointlight und den Flammen selbst. Zunächst fügen wir die statischen Anteile hinzu, indem wir folgenden Code einsetzen.

Nun fehlt noch das Feuer. Dazu verwenden wir erneut einen Shader. Um ein sehr einfaches Lowpoly-Feuer zu erstellen, fügen wir zunächst eine neue A-Frame-Komponente hinzu. Diese erzeugt eine Geometrie, in der zufällige Positionen, Richtungen und Offsets für Vertices enthalten sind. Aus den Positionen werden Vertices berechnet, die Richtungen werden für die spätere Animation benötigt und die Offsets legen fest, um welche Zeit die aktuelle Animation verschoben ist. Über Parameter der Komponente können wir steuern, wieviele dieser Dreiecke erstellt werden sollen und welche Größe die Einzelteile haben sollen.

Als Material wird der Komponente ein Vertex-Shader zugewiesen, der eine Sägezahnkurve für die Aufwärtsrichtung der Dreiecke und die Rücksetzung auf Null vollführt und eine Sinusartige Bewegung für die anderen beiden Richtungen.

Der Fragment-Shader hingegen vergibt Farbe und Transparenz danach, wie hoch ein Dreieck des Feuers bereits geflogen ist und wie weit es außen liegt.

Die erstellte Komponente fügen wir dann in unserer Hauptdatei hinzu sodass ein Feuer mit 500 Dreiecken erstellt wird.

Mittlerweile enthält die Lagerfeuerszene alle Komponenten, die wir vorerst haben wollten. Natürlich kann man auch weitere Inhalte hinzufügen. Doch zunächst wollen wir verschiedene Teile der Szene optimieren. Das Licht des Feuers wirkt sehr starr und der Boden unserer Szene endet zu abrupt.

Um das Problem mit dem Licht zu beheben fügen wir für das Licht selbst zwei Animationen hinzu und ergänzen die Szene um Schatten. Dazu verteilen wir Schatten auf die einzelnen Komponenten, die wir bereits hinzugefügt haben. Um es mit den Schatten nicht zu übertreiben, fügen wir diese nur zu den Komponenten hinzu, die einen signifikanten Schatten werfen. Trotzdem kann die Performance auf einem schwachen Rechner unter den Schatten leiden.

Nun gilt es noch das Problem mit dem Boden zu lösen. Da eine solche Szene kein definiertes Ende für einen Boden benötigt, haben wir uns dazu entschieden, den Boden mit dem Himmel verschwimmen zu lassen. Damit vermeiden wir die Harte Kante der Bodenplatte. Zu diesem Zweck passen wir den Sky-Shader an. Zunächst finden wir heraus, mit welcher Farbe, die aktuelle Bodenplatte am Horizont endet. Dann nutzen wir diese Farbe, um im unteren Teil des Sky-Shaders einen Gradienten zu erzeugen, sodass ein weicher Übergang entsteht.

Insgesamt stellt die A-Frame-Szene eine erste Grundlage für eine kleine Applikation in einer Lagerfeuerumgebung dar. Bereits im Verlauf der Erstellung hat sich gezeigt, dass noch unterschiedliche Optimierungen vorgenommen werden können.

Mit den folgenden Schritten haben wir die VR-Szene erstellt:

Die Szene kann auch unter den folgenden Links gefunden werden:

Beispielcode auf Github:

Related posts:

Har du modtaget invitationen til årets konfirmations fest? — og står du nu og mangler idéer til de brugbare og mindeværdige gaver, hvor du selvfølgelig samtidig kan spare en del — her er 5 populære…

Capital markets participants rely on timely and accurate data to analyze securities and portfolios. This is one of the primary requirements in Security and Portfolio Analytics, but identifying and…