Virtuelle Realität kommt ins Web

Algunos conceptos básicos para prepararte para un espectro de experiencias inmersivas: virtuelle Realität, realidad aumentada y todo lo demás.

31. Oktober 2019
Aktualisiert 2. März 2020

Las experiencias inmersivas llegaron a la Netz en Chrome 79. La API del dispositivo WebXR trae la realidad virtual traída la realidad virtual, mientras que el soporte para la realidad aumentada llega a Chrome 81. Mientras que una actualización de la API GamePad extiende el uso avanzado de controles a la realidad virtual. Otros Browser admitirán estas especificaciones pronto, incluidos Firefox Reality, Oculus Browser, Edge y el Browser Helio de Magic Leap, entre otros.

Dieser Artikel beginnt eine Reihe im immersiven Web. Diese Ausgabe behandelt die Konfiguration einer grundlegenden WebXR-Anwendung sowie den Ein- und Ausstieg einer XR-Sitzung. In den folgenden Artikeln werden der Frame Cycle (WebXR Experience Working Course), Augmented Reality Details und die WebXR Success Test API behandelt, ein Mittel zum Erkennen von Oberflächen in einer AR-Sitzung. Sofern nicht anders angegeben, gilt alles, was ich in diesem Artikel und den folgenden Artikeln behandele, gleichermaßen für AR und VR.

Was ist das immersive Web?

Obwohl wir zwei Begriffe verwenden, um immersive Erlebnisse (Augmented Reality und Virtual Reality) zu beschreiben, denken viele an sie in einem Spektrum, das von vollständiger bis vollständig virtueller Realität reicht, mit dazwischen liegenden Eintauchgraden. Das 'X' in XR soll diesen Gedanken widerspiegeln, indem es eine Art algebraische Variable ist, die alles im Spektrum der immersiven Erfahrungen darstellt.

Beispiele für immersive Erfahrungen sind:

• Spiele
• 360 ° Videos
• Herkömmliche 2D- (oder 3D-) Videos, die in immersiven Umgebungen präsentiert werden
• Homebuying
• Sehen Sie sich Produkte bei Ihnen zu Hause an, bevor Sie sie kaufen
• Immersive Kunst
• Etwas Cooles, an das noch niemand gedacht hat

Konzepte und Nutzung

Ich werde einige Grundlagen der Verwendung der WebXR-Geräte-API erläutern. Wenn Sie mehr Tiefe benötigen, als ich bereitgestellt habe, lesen Sie die Arbeitsgruppe Immersive Web WebXR-Beispiele oder MDN Wachsende Referenzmaterialien. Wenn Sie mit den frühen Versionen der WebXR-Geräte-API vertraut sind, sollten Sie das gesamte Material überprüfen. Es wurden Änderungen vorgenommen.

Der Code in diesem Artikel basiert auf dem grundlegenden Beispiel der Immersive Web Working Group (Manifestation,
Quelle), wird jedoch aus Gründen der Klarheit und Einfachheit bearbeitet.

Parte de la creación de la especificación WebXR ha consistido en desarrollar medidas de seguridad y privacidad para proteger a los usuarios. En consecuencia, las implementaciones deben cumplir con ciertos requisitos. Una página web o aplicación debe estar activa y enfocada antes de que pueda solicitar algo sensible al espectador. Las páginas web o aplicaciones deben servirse a través de HTTPS. La API en sí está diseñada para proteger la información obtenida de sensores y cámaras, que necesita para funcionar.

Fordern Sie eine Sitzung an

Entrar en una sesión XR requiere un gesto de Nutzername. Para conseguirlo, utilice la detección de funciones para probar XRSystem (über navigator.xr) und rufen Sie an
XRSystem.isSessionSupported (). Beachten Sie, dass in den Chrome-Versionen 79 und 80
XRSystem Das Objekt wurde aufgerufen XR.

Im folgenden Beispiel habe ich angegeben, dass ich eine Virtual-Reality-Sitzung mit dem möchte 'immersive-vr' Art der Sitzung. das
andere Arten von Sitzungen
sind 'immersive-ar' y 'im Einklang'. Una sesión en línea es para presentar Inhalt innerhalb HTML y se usa principalmente para contenido teaser. los Immersive Augmented Reality-Sitzung
Beispiel zeigt dies. Ich werde es in einem späteren Artikel erklären.

Sobald ich weiß, dass VR-Sitzungen unterstützt werden, aktiviere ich eine Schaltfläche, mit der ich eine Benutzergeste erfassen kann.

wenn (Navigator.xr) {
const unterstützt = erwarten Navigator.xr.isSessionSupported('immersive-vr');
wenn (unterstützt) {
xrButton.addEventListener('click', onButtonClicked);
xrButton.textContent = 'Enter VR';
xrButton.enabled = unterstützt; 
}
}

Después de habilitar el botón, espero un Veranstaltung de clic y luego solicito una sesión.

Lassen xrSession = Null;
Funktion onButtonClicked() {
wenn (!xrSession) {
Navigator.xr.requestSession('immersive-vr')
.then((Sitzung) => {
xrSession = Sitzung;
xrButton.textContent = 'Exit XR';
onSessionStarted(xrSession);
});
} else {
xrSession.Ende();
}
}

Beachten Sie die Hierarchie der Objekte in diesem Code. Es bewegt sich von Navigator zu xr zu einer XRSession Beispiel. In früheren Versionen der API musste ein Skript ein Gerät anfordern, bevor eine Sitzung angefordert werden konnte. Jetzt wird das Gerät implizit erfasst.

Geben Sie eine Sitzung ein

Nachdem ich eine Sitzung erhalten habe, muss ich sie starten und eingeben. Aber zuerst muss ich ein paar Dinge konfigurieren. Eine Sitzung benötigt a am Ende Ereignishandler, damit die Anwendung oder Webseite beim Beenden des Benutzers zurückgesetzt werden kann.

Ich werde auch eine brauchen Element, auf das ich meine Szene zeichnen kann. Muss XR-kompatibel sein
WebGLRenderingContext
oder
WebGL2RenderingContext. Alle Zeichnungen werden mit ihnen oder mit einem WebGL-basierten Framework wie gemacht
Three.js.

Jetzt, wo ich einen Ort zum Zeichnen habe, brauche ich eine Quelle für Inhalte zum Zeichnen. Dafür erstelle ich eine Instanz von XRWebGLLayer. Ich verbinde es mit dem Canvas-Aufruf XRSession.updateRenderState ().

Sobald ich in einer Sitzung bin, muss ich feststellen können, wo sich die Dinge in VR befinden. Ich brauche einen Referenzraum. EIN 'local-floor' Der Referenzraum ist einer, in dem sich der Ursprung in der Nähe des Betrachters befindet und die y-Achse in Bodennähe 0 ist und sich voraussichtlich nicht bewegen wird. existieren andere Arten von Referenzräumen, aber das ist ein komplizierteres Thema, als ich hier angehen kann. Ich speichere den Referenzraum in einer Variablen, da ich ihn beim Zeichnen auf dem Bildschirm benötige.

Funktion onSessionStarted(xrSession) {
xrSession.addEventListener('end', onSessionEnded);
Lassen canvas = Dokument.createElement('canvas');
webGLRenContext = canvas.getContext('webgl', { xrCompatible: wahr });
xrSession.updateRenderState({
baseLayer: new XRWebGLLayer(xrSession, webGLRenContext)
});
xrSession.requestReferenceSpace('local-floor')
.then((refSpace) => {
xrRefSpace = refSpace;
xrSession.requestAnimationFrame(onXRFrame);
});
}

Nachdem ich einen Empfehlungsraum bekommen habe, rufe ich an XRSession.requestAnimationFrame (). Dies ist der Beginn der Präsentation virtueller Inhalte, die in der Frame-Schleife stattfindet.

Führen Sie eine Frame-Schleife aus

Die Rasterschleife ist eine vom Benutzeragenten gesteuerte Endlosschleife, in der Inhalte wiederholt auf dem Bildschirm gezeichnet werden. Der Inhalt wird in diskreten Blöcken gezeichnet, die als Frames bezeichnet werden. Die Abfolge von Frames erzeugt die Illusion von Bewegung. Für VR-Anwendungen können die Bilder pro Sekunde zwischen 60 und 144 liegen. AR für Android wird mit 30 Bildern pro Sekunde ausgeführt. Ihr Code sollte keine bestimmte Bildrate annehmen.

Der grundlegende Prozess für die Frame-Schleife ist:

1. Anruf XRSession.requestAnimationFrame (). En respuesta, el User-Agent invoca el XRFrameRequestCallback, die Sie definieren.
2. Innerhalb Ihrer Rückruffunktion:
   1. Anruf XRSession.requestAnimationFrame () nochmal.
   2. Holen Sie sich die Pose des Betrachters.
   3. Pass ('Link') die WebGLFramebuffer von dem XRWebGLLayer zum WebGLRenderingContext.
   4. Iterieren Sie über jeden XRView Objekt, Abrufen seiner XRViewport von dem XRWebGLLayer und weitergeben an WebGLRenderingContext.
   5. Zeichne etwas in den Framebuffer.

Der Rest dieses Artikels beschreibt Schritt 1 und einen Teil von Schritt 2, das Konfigurieren und Aufrufen von XRFrameRequestCallback. Die restlichen Punkte aus Schritt 2 werden in Teil II behandelt.

Der XRFrameRequestCallback

das XRFrameRequestCallback es wird von dir definiert. Es werden zwei Parameter benötigt: a
DOMHighResTimeStamp und ein XRFrame Beispiel. das XRFrame Das Objekt enthält die Informationen, die zum Rendern eines einzelnen Frames auf dem Bildschirm erforderlich sind. das
DOMHighResTimeStamp Das Argument ist für die zukünftige Verwendung.

Antes de hacer cualquier otra cosa, voy a solicitar el siguiente cuadro de animación. Como se indicó anteriormente, el agente de usuario determina la sincronización de las tramas en función del Hardware- subyacente. Solicitar el siguiente marco primero asegura que el bucle del marco continúa si algo durante la devolución de llamada arroja un error.

Funktion onXRFrame(hrTime, xrFrame) {
Lassen xrSession = xrFrame.Sitzung;
xrSession.requestAnimationFrame(onXRFrame);
}

An diesem Punkt ist es Zeit, etwas für den Betrachter zu zeichnen. Das ist eine Diskussion für Teil II. Bevor ich dorthin gehe, möchte ich Ihnen zeigen, wie Sie eine Sitzung beenden können.

Ausloggen

Eine immersive Sitzung kann aus einer Reihe von Gründen enden, einschließlich des Endens mit Ihrem eigenen Code durch Aufrufen XRSession.end (). Andere Ursachen sind, dass das Headset getrennt oder von einer anderen App übernommen wird. Aus diesem Grund sollte eine gut erzogene Anwendung überwachen Ende Veranstaltung. Wenn dies passiert, löschen Sie die Sitzung und die zugehörigen Renderobjekte. Eine abgeschlossene immersive Sitzung kann nicht fortgesetzt werden. Um wieder in die immersive Erfahrung einzutreten, muss meine Bewerbung eine neue Sitzung starten.

Denken Sie daran, eine Sitzung eingegeben zu haben, in der ich während des Setups eine hinzugefügt habe am Ende Event-Handler.

Funktion onSessionStarted(xrSession) {
xrSession.addEventListener('end', onSessionEnded);
}

Stellen Sie im Ereignishandler den Status der Anwendung wieder her, bevor der Benutzer eine Sitzung eingegeben hat.

Funktion onSessionEnded(Veranstaltung) {
xrSession = Null;
xrButton.textContent = 'Enter VR';
}

Fazit

Ich habe nicht alles erklärt, was Sie zum Schreiben einer XR- oder AR-Webanwendung benötigen. Hoffentlich habe ich Ihnen genug gegeben, um den Code selbst zu verstehen und um zu experimentieren. Im nächsten Artikel werde ich den Frame-Zyklus erläutern, in dem Inhalte auf dem Bildschirm gezeichnet werden.

Foto von JESHOOTS.COM im Unsplash