WebXR-Entwicklung
Teile von Räumlichen Web-Apps
XR/räumliche Anwendungen sind eine Sammlung von Dateien, die üblicherweise über einen Webserver bereitgestellt werden. Ein Webbrowser kann diese Dateien interpretieren und die Web-App ausführen.
Allgemeine Dateien
Die wichtigsten Dateien und Dateiendungen, die bekannt sein sollten, sind unten aufgeführt:
| Erweiterung | Beschreibung |
|---|---|
| index.html | Haupt-HTML-Seite der räumlichen Web-App. |
| .js | Enthält JavaScript-Code. |
| .ts | Enthält TypeScript-Code, der vor der Veröffentlichung der räumlichen Web-App in .js umgewandelt wird. |
| .wasm | WebAssembly (das aus Sprachen wie C++ oder Rust kompiliert wird). |
| .glb | 3D-Modell-Dateiformat, das sogar Texturen einbinden kann. |
| .gltf | Textbasiertes 3D-Modell-Dateiformat. |
| .bin | Wird normalerweise von einer .gltf referenziert und enthält binäre 3D-Modell-Daten. |
| .obj | Ein einfacheres, textbasiertes Modell-Dateiformat. |
| .mtl | Eine Materialdatei, die normalerweise von einer .obj-Datei referenziert wird. |
| .json | Beliebige Daten, die von der Anwendung genutzt werden. |
| .css | Ein “Cascading Style Sheet”, das zur Anpassung des Erscheinungsbilds von HTML-Elementen verwendet wird. |
Zusätzlich verwendet eine räumliche Web-App Audiodateien (.mp3, .wav, .ogg, …), Bilddateien (.webp, .png, .jpg) und manchmal sogar Videodateien (.webm, .mp4, .mov).
3D-Modelle
VR- und AR-Apps können von vollständig immersiven Umgebungen bis hin zu einfachen schwebenden Benutzeroberflächen reichen. In den meisten Fällen werden mindestens einige 3D-Modelle (auch “Assets” genannt, wenn sie in deiner App verwendet werden) benötigt.
Plattformen
Viele kostenlose und kostenpflichtige Assets sind auf Plattformen wie Sketchfab, TurboSquid und itch.io zu finden.
Es gibt einige völlig kostenlose Quellen für 3D-Modelle, wie Quaternius, Kenney.nl und Poly Haven.
Oft können auch Asset-Pakete von Unity oder der Unreal Engine verwendet werden.
3D-Scanning
Der Prozess der Umwandlung von Fotos realer Objekte zu 3D-Modellen wird “Photogrammetrie” oder 3D-Scanning genannt.
Apps wie RealityScan für dein Smartphone oder Software wie Reality Capture können dir helfen, reale Weltmodelle in deine räumlichen Web-Apps zu bringen.
Erstellung
Das manuelle Erstellen von 3D-Modellen kann eine zeitaufwändige Aufgabe sein. 3D-Modeler verwenden Software wie Blender oder Maya, um 3D-Modelle individuell nach deinen Bedürfnissen zu erstellen.
Wenn 3D-Modellierung nicht dein Metier ist, findest du möglicherweise einen 3D-Künstler zum Anheuern auf ArtStation.
Optimierung
Alle Assets einer räumlichen Web-App werden über das Internet übertragen. Dies kann die Ladezeiten beeinflussen, weshalb es wichtig ist, dass die Assets komprimiert und optimiert werden.
Code
Code für räumliche Web-Apps kann in TypeScript, JavaScript, C++, Rust und vielen anderen Sprachen geschrieben werden. JavaScript wird direkt ausgeführt, während Sprachen wie C++ zu WebAssembly kompiliert werden.
Der Code hat viele Verantwortlichkeiten in einer räumlichen Web-App:
- Rendering: Erstellen der Bilder, die auf dem Smartphone oder VR-Gerät angezeigt werden. Computergrafik ist ein komplexes Feld der Informatik. Um damit umzugehen, verwenden WebXR-Entwickler Rendering-Frameworks, die sich um gewöhnliche Aufgaben kümmern.
- Laden von Assets: Laden aller 3D-Modelle, Texturen, Audios, Videos und anderer Daten, wenn sie benötigt werden. Frameworks bieten in der Regel Funktionalitäten zum Lesen von Daten aus verschiedenen 3D-Dateiformaten, und im Web kann der Browser das Laden von Bild- und Audiodateiformaten übernehmen.
- Benutzerinteraktion: Reagieren auf Benutzereingaben, Rückmeldungen geben und Aktionen als Antwort auf die Benutzeraktionen ausführen.
- Applogik: Die Berechnungen, Verarbeitungen und Dateninteraktionen, die die App ausführen soll, von Datenbankabfragen bis zur Datengenerierung.
Bibliotheken, Frameworks und 3D-Engines wie Wonderland Engine helfen bei all diesen Aufgaben und bieten häufig verwendete Funktionen, um räumliche Webentwickler in die Lage zu versetzen, ihre Apps effizienter zu entwickeln.
Webdienste
Die App könnte online Dienste für Konten, das Speichern individueller Informationen, Abfragen großer Datenbanken, das Streaming von Medien und vieles mehr nutzen.