VR Entwicklung für Alle: WebVR Starter Kit im Fokus

VR ist eine ganz neue Platform. Technisch ist sie bereit für einen breiten Erfolg, jedoch hinkt eine wichtige Komponente noch hinterher: Inhalte. Das Web wird auch in Zukunft den Löwenanteil davon liefern.

Hierfür ist es wichtig, dass die Einstiegshürden für die Contenterstellung so gering wie möglich ist.

Die meisten VR Apps und Spiele werden derzeit auf Basis von Unity 3D oder der Unreal Engine entwickelt. Diese erlauben zwar high-end Grafiken, jedoch haben sie einen großen Nachteil. Die Downloads sind oft mehre hunderte Megabytes, teilweise sogar Gigabytes groß und müssen lokal installiert werden. Das ist für größere Spiele auch heute noch so. Aber der Großteil der Inhalte die wir heute am Computer konsumieren sind sofort verfügbar. Sie werden gestreamt – nach wenigen Sekunden geht es los.

Diese Lücke wird WebVR füllen: Die Möglichkeit im Browser eine Internetseite zu öffnen und mit einem Klick in die angebotene virtuelle Realität zu springen. Das wird wichtig und – wie heute das zwei dimensionale Web – langfristig die erste Wahl beim Angebot von VR Erlebnissen.

Weitere Infos zu den Grundlagen von WebVR kannst du in diesem Artikel nachlesen:

WebVR verstehen und erste Schritte gehen


Wer für WebVR programmieren möchte, sollte gute Kentnisse in JavaScript haben. Das ist ein eher leichter Einstieg – gerade mit den vielen Kursangeboten für JavaScript – jedoch ist es für viele Unerfahrene weiterhin eine Hürde.

Brian Chrils hat daher das WebVR Starter Kit entwickelt. Die Einstiegshürde ist dabei extrem niedrig. Das Setup: eine Zeile Code. Die Programmierung: ganz simple Befehle.

Die Idee ist es auch Personen die gar keine Programmierkenntnisse haben, das Entwickeln einfacher VR Apps zu ermöglichen. Dadurch sind die ersten Schritte schnell gemacht und dazu noch kostenlos. Wer dabei auf den Geschmack gekommen ist, kann dann auf dem Gelernten aufbauen und weitere Schritte gehen.

Ein Schritt Setup

Die Entwicklung mit dem Starter Kit ist lokal auf dem PC recht einfach möglich. Aber es geht noch deutlich simpler mit z.B. JSBin. Das ist ein kostenloser Service, mit dem online kleinere HTML Seiten mit JavaScript und CSS programmiert und abgespeichert werden können.

Es muss lediglich eine einzige JavaScript Datei importiert werden – das wird mit einer Zeile Code gemacht – und schon ist die VR Szene bereit. Mithilfe von einfachen Befehlen kann dann die 3D Szene augebaut und Interaktionen können programmiert werden.

Das Ergebnis kann dann – mit dem entsprechenden Browser – direkt auf der Oculus Rift oder mit dem Smartphone erlebt werden. Dazu einfach die URL kopieren und auf dem Smartphone öffnen. Auch mit einem Cardboard funktioniert die selbst erstellte VR App.

Mit dieser Grundlage sind die Anforderungen für den Einstieg in die VR App Programmierung sehr klein. Die Entwicklung ist komplett kostenlos, die meisten besitzen schon ein Smartphone und mit einem Cardboard für wenige Euro steht der eigenen (low end) virtuellen Realität nichts mehr im Weg.

Für den IT-Unterricht an Schulen ist dieser Ansatz toll um jungen Schüler*innen einen ersten Einblick hinter die Kulissen von VR zu geben. Weg vom Konsum, hin zum Machen!

Die technischen Details und Möglichkeiten

In der einzelne JavaScript Datei steckt alles Notwendige für kleinere und mittlere VR Projekte. Sobald die Datei eingebunden wird, entsteht eine – für VR vorbereitete – 3D Szene. three.js ist dabei die Grundlage. Dazu kommt eine vereinfachte API – mit Befehle zum Erstellen und Bearbeiten der Objekte im 3D Raum.

Somit sind mit wenigen Zeilen Programmiercode schon viele Dinge möglich:

Wer dann weiter gehen möchte hat Zugriff auf alle Befehle der three.js API. Diese können mit den vereinfachten Codes des Starter Kits bunt gemischt werden.

Deine erste VR App mit dem Starter Kit

Dann lass uns mal konkret werden: in wenigen Minuten wirst du deine erste VR App erstellt haben. Dazu brauchst du nicht mehr als den Browser mit dem du gerade diesen Artikel liest.

Als erstes öffnest du die Seite jsbin.com. Hier siehts du links den HTML Code und rechts das Ergebnis. Im zweiten Schritt fügst du folgende Codezeile hinter das body-Element im HTML Code ein:

Das Ergebnisfenster rechts wird automatisch neu geladen und ist nun schwarz. Gratulation: deine erste eigene VR 3D Szene ist bereit. Nun klickst du mit dem Menü oben das HTML Fenster weg und öffnest das JavaScript Fenster.

Mit dem ersten Befehl erstellst du ein 360° Panorama. Einfach kopieren und in das JavaScript Fenster einfügen:

Die Adresse zum Bild kannst du natürlich abändern und ein eigenes Kugel-Panorama-Bild wählen. Als nächstes fügst du mit folgender Befehlskette eine Kugel in die Szene, gibst ihr ein Holzmaterial und positionierst sie auf Augenhöhe:

Und nun noch etwas Aufwändigeres: Animation. Dafür erstellst du eine Donutform mit einem Radius von 1 und positionierst sie – wie auch die Kugel – etwas höher:

Die Angabe vorn var donut kennen wir noch nicht, ist aber ganz leicht zu verstehen: Wir verknüpfen das erstellte Objekt (in dem Fall den Donut) mit der Variable „donut“, sodass wir im nächsten Schritt darauf zugreifen können.

Und zuletzt bringst du mit diesem Codeblock die Animation in die Szene!

Klasse, du hast eben deine erste eigene 3D WebVR App erstellt!

Wenn du ein Smartphone hast, kannst du die JSBin Output Adresse kopieren und darauf öffnen. Dazu einfach auf den kleinen Pfeil im Output-Bereich klicken – die Adresse ist dann http://output.jsbin.com/...

Über das kleine (Augen-)Icon links unten kannst du in den Cardboard-Modus wechseln

Viele weitere Möglichkeiten

Dieses erste Beispiel eben ist nur ein kleiner Ausblick auf die Möglichkeiten mit dem Starter Kit. Es gibt noch viele weitere Befehle mit denen du andere Objekte und Interaktionen programmieren kannst. Zum Beispiel Sounds, Videos, Events oder Texte.

Eine kurze Einführung in das Projekt, von Brian Chirls selbst, findest du hier:

?! Die nächsten Schritte

Eine Liste aller möglichen Befehle und den Sourcecode findest du auf GitHub. Wenn du schon Programmiererfahrung hast, kannst du dort auch zum Projekt beitragen und es gemeinsam mit Brian und anderen ausbauen und verbessern.

Bist du motiviert mehr in Sachen VR Programmierung zu lernen? Schreib mir eine Mail! Gerne unterstütze ich dich bei deinen ersten Schritten und beantworte deine Fragen.

Auf Reddit kannst du dich zu diesem Thema im passenden Eintrag austauschen oder dich regelmäßig im Subreddit /r/WebVR informieren.

In Zukunft wird es hier noch viele Artikel und Tutorials zu WebVR geben. Mit einer Anmeldung beim Newsletter wirst du darüber dann automatisch informiert.


Danke an Kichererbsenfotografie für das Foto. Viele Informationen für diesen Artikel habe ich von Brian Chirls, z.B. aus diesem Text von ihm.