Si ya ha utilizado la API de dispositivo WebXR, ya ha recorrido la mayor parte del camino.
Die WebXR-Geräte-API wurde im letzten Herbst in Chrome 79 ausgeliefert. Wie bereits erwähnt, ist die API-Implementierung in Chrome in Arbeit. Chrome freut sich bekannt zu geben, dass ein Teil der Arbeit erledigt ist. In Chrome 81 sind zwei neue Funktionen verfügbar:
Este artículo cubre la realidad aumentada. Si ya ha utilizado WebXR Device API, le alegrará saber que hay muy pocas novedades que aprender. Entrar en una sesión de WebXR es básicamente lo mismo. Ejecutar un bucle de cuadro es básicamente lo mismo. Las diferencias radican en configuraciones que permiten mostrar el Inhalt de forma adecuada para la realidad aumentada. Si no está familiarizado con los conceptos básicos de WebXR, debería leer mis publicaciones anteriores sobre la API del dispositivo WebXR, o al menos estar familiarizado con los temas que se tratan allí. Debe saber cómo solicitar e ingresar a una sesión y debe saber cómo ejecutar un bucle de tramas.
Para obtener información sobre las pruebas de Positionierung, consulte el artículo complementario Posicionamiento de objetos virtuales en vistas del mundo real. El código de este artículo se basa en el ejemplo de sesión de AR inmersivo (Manifestation
Quelle) de Immersive Web Working Group’s Beispiele für WebXR-Geräte-APIs.
Bevor Sie in den Code eintauchen, sollten Sie die verwenden Beispiel für eine immersive Augmented Reality-Sitzung
wenigstens einmal. Sie benötigen ein modernes Android-Handy mit Chrome 81 oder höher.
Wofür ist das?
La realidad aumentada será una valiosa adición a muchas páginas web nuevas o existentes al permitirles implementar casos de uso de RA sin salir del Browser. Por ejemplo, puede ayudar a las Personen a aprender en sitios educativos y permitir que los compradores potenciales visualicen objetos en su hogar mientras compran.
Considere el segundo caso de uso. Imagina la simulación de colocar una representación a tamaño real de un objeto virtual en una escena real. Una vez colocada, la imagen permanece en la superficie seleccionada, aparece del tamaño que tendría si el elemento real estuviera en esa superficie y permite al Nutzername moverse alrededor de ella, así como más cerca o más lejos de ella. Esto brinda a los espectadores una comprensión más profunda del objeto de lo que es posible con una imagen bidimensional.
Ich bin mir ein wenig voraus. Um das zu tun, was ich beschrieben habe, benötigen Sie AR-Funktionalität und einige Mittel zum Erkennen von Oberflächen. Dieser Artikel behandelt den ersten. Der zugehörige Artikel zur WebXR Success Test API (oben verlinkt) behandelt Letzteres.
Sitzung anfordern
Das Anfordern einer Sitzung ist dem, was Sie zuvor gesehen haben, sehr ähnlich. Stellen Sie zunächst durch einen Anruf fest, ob der gewünschte Sitzungstyp auf dem aktuellen Gerät verfügbar ist
xr.isSessionSupported (). Anstatt zu fragen 'immersive-vr' nach wie vor anfordern 'immersive-ar'.
wenn (Navigator.xr) {
const unterstützt = erwarten Navigator.xr.isSessionSupported('immersive-ar');
wenn (unterstützt) {
xrButton.addEventListener('click', onButtonClicked);
xrButton.textContent = 'Enter AR';
xrButton.enabled = unterstützt;
}
}Dies aktiviert nach wie vor die Schaltfläche 'AR eingeben'. Wenn der Benutzer darauf klickt, rufen Sie an
xr.requestSession (), auch passiert 'immersive-ar'.
Lassen xrSession = Null;
Funktion onButtonClicked() {
wenn (!xrSession) {
Navigator.xr.requestSession('immersive-ar')
.then((Sitzung) => {
xrSession = Sitzung;
xrSession.isImmersive = wahr;
xrButton.textContent = 'Exit AR';
onSessionStarted(xrSession);
});
} else {
xrSession.Ende();
}
}Eine Eigenschaft der Bequemlichkeit
Sie haben wahrscheinlich bemerkt, dass ich im letzten Codebeispiel zwei Zeilen hervorgehoben habe. das XRSession Das Objekt scheint eine Eigenschaft namens zu haben isImmersive. Dies ist eine Convenience-Eigenschaft, die ich selbst erstellt habe und die nicht Teil der Spezifikation ist. Ich werde es später verwenden, um Entscheidungen darüber zu treffen, was dem Betrachter gezeigt werden soll. Warum ist diese Eigenschaft nicht Teil der API? Da Ihre Anwendung diese Eigenschaft möglicherweise anders verfolgen muss, haben die Spezifikationsautoren beschlossen, die API sauber zu halten.
Geben Sie eine Sitzung ein
Erinnere dich daran onSessionStarted () es sah aus wie in meinem vorherigen Artikel:
Funktion onSessionStarted(xrSession) {
xrSession.addEventListener('end', onSessionEnded);Lassen canvas = Dokument.createElement('canvas');
gl = canvas.getContext('webgl', { xrCompatible: wahr });
xrSession.updateRenderState({
baseLayer: new XRWebGLLayer(Sitzung, gl)
});
xrSession.requestReferenceSpace('local-floor')
.then((refSpace) => {
xrRefSpace = refSpace;
xrSession.requestAnimationFrame(onXRFrame);
});
}
Ich muss ein paar Dinge hinzufügen, um das Rendern von Augmented Reality zu erklären. Hintergrund ausschalten Zuerst werde ich feststellen, ob ich den Hintergrund benötige. Dies ist der erste Ort, an dem ich meine Convenience-Eigenschaft nutzen werde.
Funktion onSessionStarted(xrSession) {
xrSession.addEventListener('end', onSessionEnded);
wenn (Sitzung.isImmersive) {
removeBackground();
}
Lassen canvas = Dokument.createElement('canvas');
gl = canvas.getContext('webgl', { xrCompatible: wahr });
xrSession.updateRenderState({
baseLayer: new XRWebGLLayer(Sitzung, gl)
});
refSpaceType = xrSession.isImmersive ? 'lokal' : 'viewer';
xrSession.requestReferenceSpace(refSpaceType).then((refSpace) => {
xrSession.requestAnimationFrame(onXRFrame);
});
}Referenzräume
Meine vorherigen Artikel gingen durch die Referenzräume. Das Beispiel, das ich beschreibe, verwendet zwei davon. Es ist also an der Zeit, diese Auslassung zu korrigieren.
Eine vollständige Erklärung der Referenzräume wäre länger, als ich hier angeben kann. Ich werde nur über Referenzräume sprechen, wenn es um Augmented Reality geht.
Ein Referenzraum beschreibt die Beziehung zwischen der virtuellen Welt und der physischen Umgebung des Benutzers. Dies geschieht durch:
- Geben Sie den Ursprung des Koordinatensystems an, mit dem Positionen in der virtuellen Welt ausgedrückt werden.
- Geben Sie an, ob der Benutzer sich innerhalb dieses Koordinatensystems bewegen soll.
- Wenn dieses Koordinatensystem voreingestellte Grenzen hat. (In den hier gezeigten Beispielen werden keine Koordinatensysteme mit voreingestellten Grenzwerten verwendet.)
Für alle Referenzräume drückt die X-Koordinate links und rechts aus, Y drückt auf und ab und Z drückt vorwärts und rückwärts aus. Positive Werte sind jeweils nach oben und hinten korrekt.
Die von zurückgegebenen Koordinaten XRFrame.getViewerPose () hängen davon ab, was angefordert wird
Referenzraumtyp. Más sobre eso cuando lleguemos al bucle de cuadro. En este momento, debemos seleccionar un tipo de referencia que Sein apropiado para la realidad aumentada. Nuevamente, esto usa mi propiedad de conveniencia.
Lassen refSpaceType
Funktion onSessionStarted(xrSession) {
xrSession.addEventListener('end', onSessionEnded);
wenn (Sitzung.isImmersive) {
removeBackground();
}
Lassen canvas = Dokument.createElement('canvas');
gl = canvas.getContext('webgl', { xrCompatible: wahr });
xrSession.updateRenderState({
baseLayer: new XRWebGLLayer(Sitzung, gl)
});
refSpaceType = xrSession.isImmersive ? 'lokal' : 'viewer';
xrSession.requestReferenceSpace(refSpaceType).then((refSpace) => {
xrSession.requestAnimationFrame(onXRFrame);
});
}Wenn Sie die besucht haben Beispiel für eine immersive Augmented Reality-Sitzung
Sie werden feststellen, dass die Szene anfangs statisch und nicht Augmented Reality ist. Sie können Ihren Finger ziehen und schieben, um sich in der Szene zu bewegen. Wenn Sie auf "AR STARTEN" klicken, verschwindet der Hintergrund und Sie können sich durch Bewegen des Geräts in der Szene bewegen. Die Modi verwenden verschiedene Arten von Referenzräumen. Der hervorgehobene Text oben zeigt, wie er ausgewählt ist. Verwenden Sie die folgenden Referenztypen:
lokal - Der native Ursprung befindet sich zum Zeitpunkt der Sitzungserstellung in der Position des Betrachters. Dies bedeutet, dass die Erfahrung nicht unbedingt einen genau definierten Boden hat und die genaue Position des Ursprungs je nach Plattform variieren kann. Obwohl es keine voreingestellten Grenzen für den Raum gibt, wird erwartet, dass der Inhalt ohne andere Bewegung als Drehung angezeigt werden kann. Wie Sie aus unserem eigenen AR-Beispiel sehen können, ist eine gewisse Bewegung im Raum möglich.
Zuschauer - Dieser Bereich wird am häufigsten für Inhalte verwendet, die online auf der Seite angezeigt werden. Er folgt dem Anzeigegerät. Wenn es an getViewerPose übergeben wird, bietet es keine Nachverfolgung und meldet daher immer eine Pose am Ursprung, es sei denn, die Anwendung ändert sie mit XRReferenceSpace.getOffsetReferenceSpace (). Das Beispiel verwendet dies, um das Touch-Panning der Kamera zu ermöglichen.
Ausführen einer Frame-Schleife
Conceptualmente, nada cambia con respecto a lo que hice en la sesión de virtuelle Realität descrita en mis artículos anteriores. Pase el tipo de espacio de referencia a XRFrame.getViewerPose (). Rückkehr XRViewerPose wird für den aktuellen Referenzraumtyp sein. Verwenden von
Zuschauer Als Standardwert kann eine Seite Inhaltsvorschauen anzeigen, bevor die Zustimmung des Benutzers für AR oder VR angefordert wird. Dies zeigt einen wichtigen Punkt: Online-Inhalte verwenden dieselbe Frame-Schleife wie immersive Inhalte, wodurch die Menge an Code reduziert wird, die beibehalten werden muss.
Funktion onXRFrame(hrTime, xrFrame) {
Lassen xrSession = xrFrame.Sitzung;
xrSession.requestAnimationFrame(onXRFrame);
Lassen xrViewerPose = xrFrame.getViewerPose(refSpaceType);
wenn (xrViewerPose) {
}
}Fazit
Diese Artikelserie behandelt nur die Grundlagen der Implementierung immersiver Inhalte im Web. Die Immersive Web Working Group stellt viele weitere Funktionen und Anwendungsfälle vor. Beispiele für WebXR-Geräte-APIs. También acabamos de publicar un artículo de prueba de éxito que explica una API para detectar superficies y colocar elementos virtuales en una vista de cámara del mundo real. Échales un vistazo y mira el Blog de web.dev para ver más artículos durante el próximo año.
Foto von David Grandmougin im Unsplash
