Hier finden Sie einige Grundlagen, die Sie auf ein breites Spektrum an immersiven Erlebnissen vorbereiten: Virtual Reality, Augmented Reality und alles dazwischen.
Mit Chrome 79 wurde das Web noch immersiver. Die WebXR Device API ermöglicht Virtual Reality, während Augmented Reality in Chrome 81 unterstützt wird. Ein Update der GamePad API erweitert die erweiterte Verwendung der Steuerelemente auf VR. Bald werden auch andere Browser diese Spezifikationen unterstützen, darunter Firefox Reality, Oculus Browser, Edge und der Helio-Browser von Magic Leap.
Dieser Artikel ist der erste einer Reihe zum immersiven Web. In diesem Teil erfahren Sie, wie Sie eine einfache WebXR-Anwendung einrichten und eine XR-Sitzung starten und beenden. In späteren Artikeln werden der Frame-Loop (das Arbeitspferd der WebXR-Umgebung), die Besonderheiten von Augmented Reality und die WebXR Hit Test API behandelt, mit der Oberflächen in einer AR-Sitzung erkannt werden können. Sofern nicht anders angegeben, gilt alles, was ich in diesem und den folgenden Artikeln beschreibe, sowohl für AR als auch für VR.
Was ist das immersive Web?
Wir verwenden zwei Begriffe, um immersive Erlebnisse zu beschreiben: Augmented Reality und Virtual Reality. Viele betrachten sie jedoch als ein Spektrum von vollständiger Realität bis hin zu vollständiger Virtualität, mit verschiedenen Graden der Immersion dazwischen. Das „X“ in XR soll dieses Denken widerspiegeln und ist eine Art algebraische Variable, die für alles im Spektrum der immersiven Erlebnisse steht.
Beispiele für immersive Inhalte:
- Spiele
- 360°-Videos
- Herkömmliche 2D- (oder 3D-)Videos in einer immersiven Umgebung
- Hauskauf
- Produkte in Ihrem Zuhause ansehen, bevor Sie sie kaufen
- Immersive Kunst
- Etwas Cooles, an das noch niemand gedacht hat
Konzepte und Verwendung
Ich erkläre Ihnen einige Grundlagen zur Verwendung der WebXR Device API. Wenn Sie mehr dazu erfahren möchten, sehen Sie sich die WebXR-Beispiele der Immersive Web Working Group oder die wachsenden Referenzmaterialien der MDN an. Wenn Sie mit früheren Versionen der WebXR Device API vertraut sind, sollten Sie sich alle diese Informationen ansehen. Es gab Änderungen.
Der Code in diesem Artikel basiert auf dem einfachen Beispiel der Immersive Web Working Group (Demo, Quellcode), wurde aber zugunsten von Klarheit und Einfachheit bearbeitet.
Bei der Erstellung der WebXR-Spezifikation wurden auch Sicherheits- und Datenschutzmaßnahmen zum Schutz der Nutzer berücksichtigt. Daher müssen Implementierungen bestimmte Anforderungen erfüllen. Eine Webseite oder App muss aktiv und im Fokus sein, bevor sie sensible Daten vom Nutzer anfordern kann. Webseiten oder Apps müssen über HTTPS bereitgestellt werden. Die API selbst wurde entwickelt, um Informationen zu schützen, die von Sensoren und Kameras erfasst werden und für die Funktion der API erforderlich sind.
Sitzung anfordern
Für den Eintritt in eine XR-Sitzung ist eine Nutzergeste erforderlich. Dazu kannst du die Feature-Erkennung verwenden, um über navigator.xr
nach XRSystem
zu suchen und XRSystem.isSessionSupported()
aufzurufen. In Chrome-Version 79 und 80 hieß das XRSystem
-Objekt XR
.
Im folgenden Beispiel habe ich angegeben, dass ich eine Virtual-Reality-Sitzung mit dem Sitzungstyp 'immersive-vr'
möchte. Die anderen Sitzungstypen sind 'immersive-ar'
und 'inline'
. Eine Inline-Sitzung dient der Präsentation von Inhalten in HTML und wird hauptsächlich für Teaserinhalte verwendet. Das Beispiel Immersive AR-Sitzung veranschaulicht dies. Das erkläre ich in einem späteren Artikel.
Sobald ich weiß, dass Virtual-Reality-Sitzungen unterstützt werden, aktiviere ich eine Schaltfläche, mit der ich eine Nutzergeste erfassen kann.
if (navigator.xr) {
const supported = await navigator.xr.isSessionSupported('immersive-vr');
if (supported) {
xrButton.addEventListener('click', onButtonClicked);
xrButton.textContent = 'Enter VR';
xrButton.enabled = supported; // supported is Boolean
}
}
Nachdem ich die Schaltfläche aktiviert habe, warte ich auf ein Klickereignis und fordere dann eine Sitzung an.
let xrSession = null;
function onButtonClicked() {
if (!xrSession) {
navigator.xr.requestSession('immersive-vr')
.then((session) => {
xrSession = session;
xrButton.textContent = 'Exit XR';
onSessionStarted(xrSession);
});
} else {
xrSession.end();
}
}
Beachten Sie die Objekthierarchie in diesem Code. Sie wird von navigator
nach xr
und dann zu einer XRSession
-Instanz verschoben. In früheren Versionen der API musste ein Script ein Gerät anfordern, bevor eine Sitzung angefordert werden konnte. Jetzt wird das Gerät implizit abgerufen.
Sitzung starten
Nachdem ich eine Sitzung erhalten habe, muss ich sie starten und betreten. Aber zuerst muss ich ein paar Dinge einrichten. Eine Sitzung benötigt einen onend
-Ereignis-Handler, damit die App oder Webseite zurückgesetzt werden kann, wenn der Nutzer sie verlässt.
Außerdem benötige ich ein <canvas>
-Element, auf dem ich meine Szene zeichnen kann. Es muss ein XR-kompatibler WebGLRenderingContext oder WebGL2RenderingContext sein.
Alle Zeichnungen werden mit diesen oder einem WebGL-basierten Framework wie Three.js erstellt.
Jetzt, da ich einen Ort zum Zeichnen habe, brauche ich eine Quelle, auf die ich mich beziehen kann. Dazu erstelle ich eine Instanz von XRWebGLLayer
. Ich verknüpfe ihn mit dem Canvas, indem ich XRSession.updateRenderState()
aufrufe.
Sobald ich in einer Sitzung bin, muss ich wissen, wo sich die Dinge in der virtuellen Realität befinden. Ich benötige einen Referenzbereich. Bei einem 'local-floor'
-Referenzraum befindet sich der Ursprung in der Nähe des Betrachters, die Y-Achse hat auf Bodenhöhe den Wert 0 und soll sich nicht bewegen. Es gibt andere Arten von Referenzräumen, aber das ist ein komplexeres Thema, auf das ich hier nicht näher eingehen kann. Ich speichere den Referenzbereich in einer Variablen, da ich ihn benötige, wenn ich auf dem Bildschirm zeichne.
function onSessionStarted(xrSession) {
xrSession.addEventListener('end', onSessionEnded);
let canvas = document.createElement('canvas');
webGLRenContext = canvas.getContext('webgl', { xrCompatible: true });
xrSession.updateRenderState({
baseLayer: new XRWebGLLayer(xrSession, webGLRenContext)
});
xrSession.requestReferenceSpace('local-floor')
.then((refSpace) => {
xrRefSpace = refSpace;
xrSession.requestAnimationFrame(onXRFrame);
});
}
Nachdem ich einen Referenzbereich erhalten habe, rufe ich XRSession.requestAnimationFrame()
auf.
Das ist der Beginn der Präsentation virtueller Inhalte, die im Frame-Loop erfolgen.
Frame-Schleife ausführen
Die Frame-Schleife ist eine vom User-Agent gesteuerte Endlosschleife, bei der Inhalte wiederholt auf dem Bildschirm dargestellt werden. Die Inhalte werden in einzelnen Blöcken gezeichnet, die als Frames bezeichnet werden. Die Abfolge der Frames erzeugt die Illusion von Bewegung. Bei VR-Anwendungen kann die Bildrate zwischen 60 und 144 Frames pro Sekunde liegen. AR für Android läuft mit 30 Bildern pro Sekunde. Ihr Code sollte keine bestimmte Framerate annehmen.
Der grundlegende Ablauf der Frame-Schleife ist:
- Rufen Sie einfach
XRSession.requestAnimationFrame()
an. Als Reaktion ruft der User-Agent den von Ihnen definiertenXRFrameRequestCallback
auf. - In der Callback-Funktion:
- Rufen Sie
XRSession.requestAnimationFrame()
noch einmal an. - Die Körperhaltung des Betrachters
- Übergeben (binden, „bind“) Sie die
WebGLFramebuffer
von derXRWebGLLayer
an dieWebGLRenderingContext
. - Durchlaufen Sie jedes
XRView
-Objekt, rufen Sie dessenXRViewport
aus demXRWebGLLayer
ab und übergeben Sie es an dasWebGLRenderingContext
. - Etwas in den Framebuffer zeichnen.
- Rufen Sie
Im weiteren Verlauf dieses Artikels werden Schritt 1 und ein Teil von Schritt 2 beschrieben, also die Einrichtung und der Aufruf der XRFrameRequestCallback
. Die restlichen Punkte von Schritt 2 werden in Teil II behandelt.
XRFrameRequestCallback
Die XRFrameRequestCallback
wird von Ihnen definiert. Er hat zwei Parameter: eine DOMHighResTimeStamp
und eine XRFrame
-Instanz. Das XRFrame
-Objekt enthält die Informationen, die zum Rendern eines einzelnen Frames auf dem Display erforderlich sind. Das Argument DOMHighResTimeStamp
ist für die zukünftige Verwendung vorgesehen.
Bevor ich etwas anderes mache, werde ich den nächsten Animationsframe anfordern. Wie bereits erwähnt, wird das Timing der Frames vom User-Agent basierend auf der zugrunde liegenden Hardware bestimmt. Wenn du zuerst den nächsten Frame anforderst, wird die Frame-Schleife fortgesetzt, wenn während des Callbacks ein Fehler auftritt.
function onXRFrame(hrTime, xrFrame) {
let xrSession = xrFrame.session;
xrSession.requestAnimationFrame(onXRFrame);
// Render a frame.
}
Jetzt ist es an der Zeit, etwas für den Betrachter zu zeichnen. Das ist ein Thema für Teil II. Aber zuerst zeige ich Ihnen, wie Sie eine Sitzung beenden.
Sitzung beenden
Eine immersive Sitzung kann aus verschiedenen Gründen enden, z. B. durch einen Aufruf von XRSession.end()
in Ihrem Code. Mögliche weitere Ursachen sind eine Unterbrechung der Verbindung zum Headset oder die Übernahme der Kontrolle durch eine andere Anwendung. Aus diesem Grund sollte eine ordnungsgemäß funktionierende Anwendung das Ereignis end
überwachen. In diesem Fall sollten Sie die Sitzung und die zugehörigen Rendering-Objekte verwerfen. Eine beendete immersive Sitzung kann nicht fortgesetzt werden. Damit ich die immersive Erfahrung wieder nutzen kann, muss meine App eine neue Sitzung starten.
Wie Sie im Abschnitt Eine Sitzung starten wissen, habe ich während der Einrichtung einen onend
-Ereignis-Handler hinzugefügt.
function onSessionStarted(xrSession) {
xrSession.addEventListener('end', onSessionEnded);
// More setup…
}
Stellen Sie im Ereignishandler den Zustand der App wieder her, bevor der Nutzer eine Sitzung gestartet hat.
function onSessionEnded(event) {
xrSession = null;
xrButton.textContent = 'Enter VR';
}
Fazit
Ich habe nicht alles erklärt, was Sie zum Erstellen einer Web-XR- oder AR-Anwendung benötigen. Ich hoffe, ich konnte Ihnen genug Informationen geben, damit Sie den Code selbst verstehen und damit experimentieren können. Im nächsten Artikel erkläre ich den Frame-Loop, bei dem Inhalte auf dem Bildschirm dargestellt werden.
Foto von JESHOOTS.COM bei Unsplash