Chrome auf 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 schaffen.
Die folgenden WebXR-Funktionen werden von Chrome für Android XR unterstützt:
- Device API
- AR-Modul
- Modul „Gamepads“
- Modul für Hit-Tests
- Handeingabe
- Anker
- Tiefenerkennung
- Schätzung der Lichtverhältnisse
Wenn Sie WebXR in Aktion sehen möchten, starten Sie Chrome auf einem Android XR-Gerät oder im Android XR-Emulator und rufen Sie die offiziellen WebXR-Beispiele auf.
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 Inhalte.
- Wenn Sie die volle Kontrolle über 3D-Szenen und die Erstellung benutzerdefinierter oder komplexer Interaktionen haben möchten, empfehlen wir three.js und babylon.js.
- Für Rapid Prototyping oder die Verwendung einer HTML-ähnlichen Syntax zum Definieren von 3D-Szenen empfehlen wir A-Frame und model-viewer.
- Weitere Frameworks und Beispielcode
Wenn Sie lieber natives JavaScript und WebGL verwenden, finden Sie auf WebXR auf GitHub Informationen zum Erstellen Ihres ersten WebXR-Experiments.
An Android XR anpassen
Wenn Sie bereits WebXR-Anwendungen auf anderen Geräten verwenden, müssen Sie möglicherweise Ihren Code aktualisieren, damit WebXR auf Android XR richtig unterstützt wird. WebXR-Erlebnisse, die auf Mobilgeräte ausgerichtet sind, müssen beispielsweise von einem Bildschirm auf zwei Stereobildschirme in Android XR angepasst werden. WebXR-Erlebnisse, die auf Mobilgeräte oder vorhandene Headsets ausgerichtet sind, müssen möglicherweise den Eingabecode anpassen, damit er handorientiert ist.
Wenn Sie WebXR auf Android XR verwenden, müssen Sie möglicherweise Ihren Code aktualisieren, um die Tatsache 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 es maßstabsgetreu sein, damit es so aussieht, als ob es wirklich dort hingehört. 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 Tiefenerkennungsmodul in WebXR, das die Fähigkeit eines Geräts verbessert, die Abmessungen und Konturen seiner realen Umgebung zu erfassen. Mit diesen Tiefeninformationen können Sie immersivere und realistischere Interaktionen erstellen, die Nutzern helfen, fundierte Entscheidungen zu treffen.
Im Gegensatz zur Tiefenerkennung auf Smartphones ist die Tiefenerkennung in Android XR stereoskopisch. Es werden zwei Tiefenkarten in Echtzeit für das binokulare Sehen gestreamt. Möglicherweise müssen Sie Ihren WebXR-Code aktualisieren, damit Stereotiefenbilder richtig unterstützt werden.
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
- Um auf Tiefendaten zugreifen zu können, muss eine gültige Pose zurückgegeben werden.
pose.viewsgibt eine Ansicht für jedes Auge zurück und die entsprechende For-Schleife wird zweimal ausgeführt.
Echtzeit-Tiefenvisualisierung mit der WebXR Depth Sensing API. Rot steht für näher liegende Pixel, Blau für weiter entfernte.
Handinteraktion in WebXR hinzufügen
Wenn Sie Ihrer WebXR-App Handinteraktionen hinzufügen, können Sie die Nutzerbindung steigern, da die Nutzer intuitiver und umfassender interagieren können.
Die Eingabe per Hand ist der primäre Interaktionsmechanismus in 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 Elemente in der Szene mit Gesten und Handbewegungen greifen, schieben oder bearbeiten.
Geräte wie Smartphones oder controllerbasierte XR-Geräte unterstützen möglicherweise noch keine Eingabe per Hand. Möglicherweise müssen Sie Ihren WebXR-Code aktualisieren, um die Handeingabe richtig zu unterstützen. Im Beispiel Immersive VR Session with Hands (Immersive VR-Sitzung mit Händen) wird gezeigt, wie Sie die Handverfolgung 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 Pass-Through-Fenster in die reale Welt zu öffnen.
WebXR-Demo zur Verwendung von Hand-Pinch, um Bildschirme auszublenden und die physische Realität zu sehen.
Berechtigungen in WebXR
Wenn Sie WebXR-APIs verwenden, für die eine Berechtigung erforderlich ist, fordert Chrome den Nutzer auf, der Website die Berechtigung zu erteilen. Für alle WebXR-APIs ist die Berechtigung für 3D-Karten und Kamera-Tracking erforderlich. Der Zugriff auf erfasste Daten zu Gesicht, Augen und Händen ist ebenfalls durch Berechtigungen geschützt. Wenn alle erforderlichen Berechtigungen erteilt wurden, wird beim Aufrufen von navigator.xr.requestSession('immersive-ar', options) eine gültige WebXR-Sitzung zurückgegeben.
Die vom Nutzer ausgewählte Berechtigungseinstellung bleibt für jede Domain bestehen. Wenn Sie in einer anderen Domain auf eine WebXR-Anwendung zugreifen, werden Sie in Chrome noch einmal aufgefordert, Berechtigungen zu erteilen. Wenn für die WebXR-Anwendung mehrere Berechtigungen erforderlich sind, fordert Chrome jede Berechtigung einzeln an.
Wie bei allen Berechtigungen im Web sollten Sie Situationen, in denen die Berechtigung verweigert wird, richtig behandeln.