Chrome unter Android XR unterstützt WebXR. WebXR ist ein offener Standard des W3C, der leistungsstarke XR-APIs für unterstützte Browser bereitstellt. Wenn Sie für das Web entwickeln, können Sie bestehende Websites mit 3D-Modellen erweitern oder neue immersive Erlebnisse erstellen.
Die folgenden WebXR-Funktionen werden von Chrome für Android XR unterstützt:
Wenn Sie WebXR in Aktion sehen möchten, starten Sie Chrome auf einem Android XR-Gerät oder dem Android XR Emulator und sehen Sie sich die offiziellen WebXR-Beispiele an.
Voraussetzung: WebXR-Framework auswählen
Bevor Sie mit der Entwicklung beginnen, müssen Sie das richtige WebXR-Framework auswählen. Das steigert Ihre Produktivität erheblich und verbessert die Qualität der von Ihnen erstellten Erlebnisse.
- Wenn Sie die vollständige Kontrolle über 3D-Szenen haben und benutzerdefinierte oder komplexe Interaktionen erstellen möchten, empfehlen wir three.js und babylon.js.
- Für schnelles Prototyping oder die Verwendung einer HTML-ähnlichen Syntax zum Definieren von 3D-Szenen empfehlen wir A-Frame und model-viewer.
- Sie können sich auch weitere Frameworks und Beispielcode ansehen.
Wenn Sie lieber natives JavaScript und WebGL verwenden möchten, finden Sie unter WebXR auf GitHub Informationen zum Erstellen Ihres ersten WebXR-Experiments.
An Android XR anpassen
Wenn Sie bereits WebXR-Erlebnisse auf anderen Geräten verwenden, müssen Sie möglicherweise Ihren Code aktualisieren, um WebXR unter Android XR richtig zu unterstützen. Beispielsweise müssen WebXR-Erlebnisse, die auf Mobilgeräte ausgerichtet sind, unter Android XR von einem Bildschirm auf zwei Stereobildschirme angepasst werden. Bei WebXR-Erlebnissen, die auf Mobilgeräte oder vorhandene Headsets ausgerichtet sind, muss der Eingabecode möglicherweise so angepasst werden, dass die Handeingabe im Vordergrund steht.
Wenn Sie WebXR unter Android XR verwenden, müssen Sie möglicherweise Ihren Code aktualisieren, um zu berücksichtigen, dass es zwei Bildschirme gibt – einen für jedes Auge.
Tiefenwahrnehmung in WebXR
Wenn ein Nutzer ein virtuelles Objekt in seinem physischen Raum platziert, muss die Größe korrekt sein, damit es so aussieht, als würde es wirklich dorthin gehören. In einer App für den Möbelkauf müssen Nutzer beispielsweise darauf vertrauen können, dass ein virtueller Sessel perfekt in ihr Wohnzimmer passt.
Chrome für Android XR unterstützt das Modul zur Tiefenerkennung in WebXR, das die Fähigkeit eines Geräts verbessert, die Abmessungen und Konturen seiner realen Umgebung wahrzunehmen. Mit diesen Tiefeninformationen können Sie immersivere und realistischere Interaktionen erstellen, die Nutzern helfen, fundierte Entscheidungen zu treffen.
Im Gegensatz zur Tiefenerkennung auf Mobiltelefonen ist die Tiefenerkennung unter Android XR stereoskopisch. Es werden zwei Tiefenkarten in Echtzeit für das binokulare Sehen gestreamt. Möglicherweise müssen Sie Ihren WebXR-Code aktualisieren, um Stereotiefenbilder richtig zu unterstützen.
Im folgenden Beispiel werden Tiefeninformationen stereoskopisch gerendert:
// Called every time a XRSession requests that a new frame be drawn.
function onXRFrame(t, frame) {
const session = frame.session;
session.requestAnimationFrame(onXRFrame);
const baseLayer = session.renderState.baseLayer;
const pose = frame.getViewerPose(xrRefSpace);
if (pose) {
gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);
// Clears the framebuffer.
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Note: Two views will be returned from pose.views.
for (const view of pose.views) {
const viewport = baseLayer.getViewport(view);
gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
const depthData = frame.getDepthInformation(view);
if (depthData) {
renderDepthInformationGPU(depthData, view, viewport);
}
}
} else {
console.error('Pose unavailable in the current frame!'); }
}
Wichtige Informationen zum Code
- Es muss eine gültige Pose zurückgegeben werden, um auf Tiefendaten zuzugreifen.
pose.viewsgibt eine Ansicht für jedes Auge zurück und die entsprechende for-Schleife wird zweimal ausgeführt.
Echtzeit-Tiefenvisualisierung mit der WebXR-API zur Tiefenerkennung. Rot steht für nähere Pixel, Blau für weiter entfernte Pixel.
Handinteraktion in WebXR hinzufügen
Wenn Sie Ihrer WebXR-App Handinteraktionen hinzufügen, können Sie die Nutzerinteraktion verbessern, indem Sie intuitivere und immersivere Erlebnisse ermöglichen.
Die Handeingabe ist der primäre Interaktionsmechanismus unter Android XR. Chrome für Android XR unterstützt die Hand Input API als Standardeingabe. Mit dieser API können Nutzer auf natürliche Weise mit virtuellen Objekten interagieren, indem sie Gesten und Handbewegungen verwenden, um Elemente in der Szene zu greifen, zu schieben oder zu manipulieren.
Geräte wie Mobiltelefone oder XR-Geräte, die hauptsächlich mit Controllern bedient werden, unterstützen die Handeingabe möglicherweise noch nicht. Möglicherweise müssen Sie Ihren WebXR-Code aktualisieren, um die Handeingabe richtig zu unterstützen. Im Codelab Immersive VR Session with Hands wird gezeigt, wie Sie die Handerkennung in Ihr WebXR-Projekt einbinden.
Die folgende Animation zeigt ein Beispiel für die Kombination von Pinch-Gesten mit der WebXR API, um einem Nutzer zu zeigen, wie er die Oberfläche eines virtuellen Raums „wegwischt“, um ein Passthrough-Fenster in die reale Welt zu öffnen.
WebXR-Demo zur Verwendung von Pinch-Gesten, um Bildschirme wegzuwischen und die physische Realität zu sehen.
Berechtigungen in WebXR
Wenn Sie WebXR APIs verwenden, für die eine Berechtigung erforderlich ist, werden Nutzer in Chrome aufgefordert, der Website die Berechtigung zu erteilen. Für alle WebXR APIs ist die Berechtigung für die 3D-Kartenerstellung und die Kameraerkennung erforderlich. Der Zugriff auf erfasste Gesichts-, Augen- und Handdaten ist ebenfalls durch Berechtigungen geschützt. Wenn alle erforderlichen Berechtigungen erteilt wurden, gibt der Aufruf von navigator.xr.requestSession('immersive-ar', options) eine gültige WebXR-Sitzung zurück.
Die vom Nutzer ausgewählte Berechtigungseinstellung bleibt für jede Domain bestehen. Wenn auf ein WebXR-Erlebnis in einer anderen Domain zugegriffen wird, werden Nutzer in Chrome noch einmal aufgefordert, Berechtigungen zu erteilen. Wenn für das WebXR-Erlebnis mehrere Berechtigungen erforderlich sind, werden Nutzer in Chrome einzeln nach jeder Berechtigung gefragt.
Wie bei allen Berechtigungen im Web sollten Sie Situationen, in denen die Berechtigung verweigert wird, richtig behandeln.