Multi-User-Erfahrungen im Internet sind seit der rasenden Verbreitung von Online-Chats und sozialen Netzwerken weit fortgeschritten. Fortschritte in der Virtual Reality (VR) machen das Web zu einer immersiven und interaktiven Umgebung. Neal Stephenson stellte sich diese Gruppe von gemeinsam genutzten, persistenten und miteinander verbundenen virtuellen 3D-Räumen vor und nannte sie das Metaverse – heute bauen wir sie mit HTML, JavaScript und A-Frame.
Angesichts der sanften Lernkurve von HTML ist A-Frame die perfekte Wahl für diejenigen, die virtuelle Räume im Web mit ein paar Zeilen HTML und JavaScript erstellen möchten. Mit der Implementierung von Link-Traversal durch Browser sind wir dem Teleportieren von einer Erfahrung zur anderen einen Schritt näher gekommen, ohne in der realen Welt zu pendeln. Allerdings fehlt noch ein Kooperationsmodell, um den Informationsaustausch zwischen den Bewohnern des Metaverse zu erleichtern. WebRTC spielt eine Schlüsselrolle bei diesem Austausch.
Peer-To-Peer-Kommunikation mit WebRTC.
WebRTC ist eine Web-API, die in den meisten Browsern (einschließlich Safari ab September dieses Jahres) vorhanden ist und den Austausch von Informationen ohne Zwischenhändler auf Peer-To-Peer-Basis ermöglicht. Mit WebRTC ist es möglich, die notwendige Infrastruktur zu implementieren, um die Erfahrungen mit der Integration des Metaverse fortzusetzen.
Die größte Komplexität von WebRTC entsteht durch Session Management, Peer Discovery und Signalisierung, die alle notwendig sind, um die Verbindungen zwischen Browsern zu identifizieren. Sobald Peer-Identitäten etabliert sind, kann der Standard End-To-End-Kanäle für die gemeinsame Nutzung von Medien und Daten bereitstellen.
Die Sharedspace-Komponente.
Um die Leistungsfähigkeit von WebRTC für A-Frame-Nutzer nutzbar zu machen, wurde die Sharedspace-Komponente entwickelt. Die Komponente bietet ein Kollaborationsmodell, bei dem die Teilnehmer einen benannten Bereich betreten oder verlassen, Audio und Status gemeinsam nutzen und JSON-serialisierbare Objekte an andere Peers senden können.
Die Komponente behandelt die WebRTC-API nicht direkt. Stattdessen wird eine modifizierte Version von webrtc-swarm als Wrapper-Bibliothek verwendet. Ich wählte es wegen seiner Einfachheit, seines Platzbedarfs, der Klarheit des Quellcodes und der Benutzerfreundlichkeit.
Sie können mit einem VR-Chat auf Glitch experimentieren oder das Projekt durchsuchen, um mehr über die Sharedspace-Komponente zu erfahren. Das Repository enthält eine umfangreiche Dokumentation mit Erläuterungen und Beispielen für andere gängige Anwendungsfälle. Die Sharedspace-Komponente ist keine allgemeine Netzwerklösung für A Frame und es gibt keine einfache Möglichkeit, Entitäten zwischen mehreren Instanzen einer Anwendung zu teilen. Durch die Möglichkeit, Daten zu versenden, ist es jedoch möglich, neue Formen der Zusammenarbeit zu schaffen, die auf dieser Komponente aufbauen.
Kompatibilität.
Die Sharedspace-Komponente benötigt einen Browser mit WebRTC-Unterstützung, d.h. jede aktuelle Version der gängigsten mobilen und Desktop-Browser. Chrome erfordert auch, dass die Seite, die WebRTC unterstützt, auf HTTPS bedient wird, es sei denn, Sie serven von localhost.
Wie es arbeitet?
Dies ist der minimale HTML-Code, den Sie benötigen, um einen Shared Space zu implementieren:
Der obige Code verbindet sich jedoch immer mit einem Raum mit der Bezeichnung room-101 und die Avatar-Darstellungen sind rote Kugeln, die keine effektive Darstellung menschlicher Teilnehmer sind. Lassen Sie uns die Einstellungen anpassen, um dies zu ändern.
Wichtig: Um ihren Fortschritt zu testen, benötigen Sie mindestens zwei Clients, die mit dem gleichen Raum verbunden sind. Beim Testen werden Sie feststellen, dass die Peers verbunden sind, weil die Kamera zurückgesetzt wird und die Anwendung es ihnen nicht mehr erlaubt, das Avatar zu bewegen. Wenn das passiert, suchen Sie nach einer roten Kugel: dies ist die andere p.
Zufällig generierte Raumnamen.
Die Sharedspace-Komponente versucht, sich mit dem Raum zu verbinden, sobald die A-Frame-Szene fertig ist. Sobald die Komponente angeschlossen ist, hat die Änderung ihrer Eigenschaften keine Wirkung mehr. Um zu verhindern, dass die Komponenten den Server verbindet, setzen Sie die Eigenschaft hold auf true:
Bereiten Sie ein Skript vor, um die Szene nach dem Laden zu ändern. Fügen Sie das folgende Skript-Tag kurz vor dem abschließenden Tag von body ein:
Ersetzen Sie den Kommentar durch das folgende JavaScript, das die aktuelle URL überprüft, um einen Raum zu finden, mit dem Sie sich verbinden können. Wenn kein Raum gefunden wird, generiert die App einen neuen Raum und ersetzt die URL in der Adressleiste, damit der Benutzer seine Freunde einladen kann:
Der wichtigste Teil ist die letzte Zeile, in der Sie den Namen des Raums setzen und die Hold-Eigenschaft auf false zurücksetzen, damit sich die Komponente verbinden kann.
Benutzerdefinierte Avatare.
Die Avatars-Komponente ist bei der Installation der Sharedspace-Komponente verfügbar. Es verwaltet die A-Frame-Szene, um jedem Teilnehmer eine Avatar-Darstellung zur Verfügung zu stellen. Standardmäßig sucht die Avatars-Komponente nach einem Template-Tag und verwendet dessen Inhalt für die Instanziierung des Avatars.
Ersetzen Sie den Inhalt des Template-Tags durch die folgenden Primitive:
Fixing Orientation.
Nicht zu wissen, wohin die Kamera zeigt, wenn Sie eine Verbindung herstellen, kann ärgerlich sein. Lass und das in Ordnung bringen. Wenn ein Teilnehmer den Raum betritt, instanziiert die Avatarkomponente das Avatar-Template und sendet ein avataradded Event auf seine Enitität. Dies ermöglicht eine dynamische Konfiguration des Templates.
Suchen Sie die Zeile, in der Sie das Raumelement erhalten und fügen Sie den folgenden Code direkt dort ein (vor dem Setzen von hold auf false):
Beachten Sie, dass avataradded nicht garantiert, dass die Avatar-Einheit geladen wurde. Sie sollten warten, bis der Avatar vollständig geladen ist, bevor es sicher ist, andere Komponenten zu ändern. Der Code verwendet die zugrundeliegende Three.js API, um die korrekte Ausrichtung des Avatars zu berechnen.
Positional Audio.
Die Verwendung von WebRTC zum Streamen von Audio ist so verbreitet, dass die Sharedspace-Komponente in Zusammenarbeit mit der Avatar-Komponente diese sehr einfach macht. Setzen Sie einfach die Audio-Eigenschaft auf true:
Wenn Sie das nächste Mal das Event laden, fragt der Browser nach der Erlaubnis, ihr Mikrofon freizugeben.
Wenn die Teilnehmer die Erlaubnis erteilen, wird das Positionsaudio für die A-Frame-Avatare automatisch von der Avatar-Komponente verwaltet. Positional Audio bedeutet, dass der Ton entsprechend der realtiven Position des Zuhörers (d.h. der Kamera) nach links oder rechts geschwenkt wird. Das Tragen von Kopfhörern oder Ohrhörern verstärkt diesen Effekt.
Sharing Position.
Sie haben vielleicht bemerkt, dass das Avatar, das den Benutzer repräsentiert, eine besondere Behandlung hat. Weil sein Avatar die Kamera „trägt“, wenn man sich umsieht, wird die Orientierung von den anderen Teilnehmern geteilt. Standardmäßig fügen Avatare dem Avatar des Benutzers einige spezifische Komponenten hinzu.
Sie können mit A-Frame-Mixins steuern, welche Komponenten auf den Avatar des Benutzers angewendet werden sollen. Mixins sind Komponenten-Container und Entitäten können das mixin-Attribut auf eine Liste von mixin ids setzen, um ihre Komponenten zu vererben.
Fügen Sie ein a-assets-Tag direkt nach dem a-scene Tag mit einem Mixin hinzu und setzen Sie dessen ID auf Benutzer:
Die Share-Komponente (auch nach der Registrierung von sharedspace verfügbar) gibt an, welche Komponenten unter anderen Peers synchron gehalten werden sollen.
Indem Sie die Eigenschaft onmyself of sharedspace auf die ID des Mixins setzen, weisen Sie Avatare an, diesen Mixin zum Avatar des Benutzers hinzuzufügen.
Senden und Empfangen von Nachrichten.
Die Komponente sharedspace ermöglicht es dem Benutzer, Nachrichten an andere Peers zu senden. Sie verwenden diese Funktion, um beim Drucken der Leertaste einen Wechsel in die voreingestellte Umgebung zu erzwingen.
Suchen Sie die Zeile, in der Sie den Listener zum avataradded-Event hinzugefügt haben und fügen Sie den folgenden Code zur Verwaltung des Umgebungs-Presets ein:
Zum Schluss ersetzen Sie den Kommentar durch den Code für das Empfangen und das Senden von Nachrichten:
Fazit.
Multi-User-Anwendungen sind nicht auf Chats beschränkt: andere partizipative Erfahrungen passen zum sharedspace-Modell. Auch wenn das vorgeschlagene Beteiligungsmodell begrenzt ist, können anderen Komponenten darauf aufbauen, um neue Interaktionen zu ermöglichen.
Vielen Dank fürs Lesen.