Wie Sie AR/VR-Anwendungen in Ihrem Browser erstellen.

Während der Fullstack London 2019 Konferenz diskutierte Doug Sillars, ein freiberuflicher Software-Ingenieur, den Stand der Virtual und Augmented Reality in JavaScript, indem er demonstrierte, wie man eine virtuelle Kunstgalerie baut.

Sowohl Virtual Reality, das den User in eine vollständig 3D-generierte Welt eintauchen lässt, als auch Augmented Reality, das eine tiefe Integration zwischen der realen Welt und digitalen Objekten bietet, sind relativ neue Technologien, die derzeit über die WebXR-API in das Web integriert werden. Das X in WebXR ist ein Platzhalter für alle Arten von immersiven Technologien, die in Zukunft auftauchen könnten.

Die WebXR API befindet sich noch in der Entwicklung mit eingeschränkter Browserunterstützung und Dokumentation. Das WebXR GitHub Repository bietet eine benutzerfreundliche Einführung in die Kernkonzepte für den Einstieg in WebXR.

Auch ohne die WebXR-API ist es weiterhin möglich, mit AR/VR-Geräten zu interagieren und einfache, plattformübergreifende Anwendungen zu erstellen.

Bibliotheken wie A-Frame bieten eine vereinfachte Oberfläche für die Anwendungsentwicklung mit vielen interessanten Beispielen und Implementierungen, die bereits online verfügbar sind.

Die A-Frame-Bibliothek basiert auf ThreeJS, einer beliebten 3D-Rendering-Bibliothek für JavaScript. Es bietet eine einfache HTML-ähnliche Syntax, die leicht zu beherrschen ist und es Entwicklern ermöglicht, sowohl VR- als auch AR-Anwendungen mit minimalen Kenntnissen in JavaScript zu erstellen.

Um A-Frame zu verwenden, beschreiben Entwickler die Szene mit HTML-ähnlichen Tags, die anschließend von A-Frame in eine WebGL-Ansicht umgewandelt werden. Um die 3D-Objekte im realen Raum (AR) zu platzieren, müssen Entwickler derzeit spezielle physische Tags verwenden, die auf der A-Frame-Website generiert werden können. Durch das Platzieren dieser Tags kann A-Frame wissen, wo (und welche) 3D-Objekte platziert werden sollen.

Die Erstellung einer einfachen VR-Szene erfordert nur eine Handvoll Tags:

Copy to Clipboard

Eine weitere Bibliothek, die Erwähnung verdient, ist React 360, die es Entwicklern ermöglicht, AR/VR-Benutzeroberflächen mit einer Syntax zu erstellen, die der von React ähnlich ist.

Ursprünglich erforderten AR/VR-Anwendungen teure Spezialausrüstung, was die Anpassung der User einschränkte. Heute können Entwickler Smartphones verwenden, um ein ähnliches Erlebnis zu erzielen.

Während die Verwendung von AR/VR-Anwendungen auf einem Smartphone möglich ist, wird empfohlen, ein spezielles Brillen-Set zu verwenden, das das Telefon umschließt und es den Usern ermöglicht, ein immersiveres Erlebnis zu genießen. Das erste derartige Brillen-Set war Google Cardboard, wobei viele alternative Lösungen jetzt verfügbar sind.

A-Frame wird unter der MIT-Lizenz veröffentlicht und sein Quellcode ist über das A-Frame GitHub-Repository verfügbar.

Vielen Dank für Ihren Besuch.

3DMaster