Augmented-Reality-App (AR) mit der WebXR Device API erstellen

1. Hinweis

In diesem Codelab wird anhand eines Beispiels erläutert, wie Sie eine AR-Webanwendung erstellen. Für das Rendern von 3D-Modellen, die so aussehen, als wären sie in der realen Welt, wird JavaScript verwendet.

Sie verwenden die WebXR Device API, die AR- und Virtual-Reality-Funktionen (VR) kombiniert. Sie konzentrieren sich auf AR-Erweiterungen für die WebXR Device API, um eine einfache AR-App zu erstellen, die im interaktiven Web ausgeführt wird.

Was ist AR?

Der Begriff AR beschreibt in der Regel die Verschmelzung computergenerierter Grafiken mit der realen Welt. Im Fall von Smartphone-basierter AR bedeutet dies, dass Computergrafiken überzeugend über einem Live-Kamerafeed platziert werden. Damit dieser Effekt auch bei der Bewegung des Smartphones durch die Welt realistisch bleibt, muss das AR-fähige Gerät die Welt verstehen, durch die es sich bewegt, und seine Position (Position und Ausrichtung) im 3D-Raum bestimmen. Dabei kann es sich beispielsweise um das Erkennen von Oberflächen und das Schätzen der Umgebungsbeleuchtung handeln.

AR wurde nach der Veröffentlichung von ARCore von Google und dem ARKit von Apple in vielen Apps eingesetzt, egal ob für Selfie-Filter oder AR-basierte Spiele.

Aufgaben

In diesem Codelab erstellen Sie eine Webanwendung, die mithilfe von Augmented Reality ein Modell in der realen Welt platziert. Mit der Anwendung können Sie Folgendes tun:

1. Mithilfe der Sensoren des Zielgeräts seine Position und Ausrichtung in der Welt bestimmen und erfassen
2. Ein 3D-Modell rendern, das über einer Live-Kameraansicht erstellt wurde
3. Führe Treffertests durch, um Objekte auf in der realen Welt entdeckten Oberflächen zu platzieren

Lerninhalte

• WebXR Device API verwenden
• Einfache AR-Szene konfigurieren
• Mit AR-Treffertests eine Oberfläche finden
• Ein mit dem Kamerafeed synchronisiertes 3D-Modell laden und rendern
• So rendern Sie Schatten basierend auf dem 3D-Modell

In diesem Codelab geht es um AR APIs. Nicht relevante Konzepte und Codeblöcke werden nicht berücksichtigt und im entsprechenden Repository-Code bereitgestellt.

Voraussetzungen

• Eine Workstation zum Programmieren und Hosten statischer Webinhalte
• ARCore-fähiges Android-Gerät mit Android 8.0 Oreo
• Google Chrome
• Google Play-Dienste für AR installiert (Chrome fordert Sie automatisch auf, die App auf kompatiblen Geräten zu installieren)
• Webserver Ihrer Wahl
• USB-Kabel zum Verbinden Ihres AR-Geräts mit dem Computer
• Beispielcode
• Ein Texteditor
• Grundkenntnisse in HTML, CSS, JavaScript und Google Chrome-Entwicklertools

Klicke auf deinem AR-Gerät auf Jetzt testen, um mit dem ersten Schritt dieses Codelab zu beginnen. Wenn Sie eine Seite mit der Meldung „Ihr Browser verfügt nicht über AR-Funktionen“ sehen, prüfen Sie, ob auf Ihrem Android-Gerät die Google Play-Dienste für AR installiert sind.

JETZT TESTEN

2. Entwicklungsumgebung einrichten

Code herunterladen

1. Klicken Sie auf den folgenden Link, um den gesamten Code für dieses Codelab auf Ihre Workstation herunterzuladen:

Quellcode herunterladen

2. Entpacken Sie die heruntergeladene ZIP-Datei. Dadurch wird der Stammordner (ar-with-webxr-master) entpackt, der die Verzeichnisse mehrerer Schritte dieses Codelabs sowie alle benötigten Ressourcen enthält.

Die Ordner step-03 und step-04 enthalten den gewünschten Endstatus des dritten und vierten Schritts dieses Codelabs sowie das Ergebnis final. Sie sind als Referenz verfügbar.

Die gesamte Codierung wird im Verzeichnis work ausgeführt.

Webserver installieren

1. Sie können Ihren eigenen Webserver verwenden. Wenn Sie noch keinen Webserver für Chrome eingerichtet haben, finden Sie in diesem Abschnitt eine detaillierte Anleitung.
   Wenn die App noch nicht auf deiner Workstation installiert ist, kannst du sie über den Chrome Web Store installieren.

Webserver für Chrome installieren

2. Rufen Sie nach der Installation der Anwendung „Webserver für Chrome“ chrome://apps auf und klicken Sie auf das Webserversymbol:

Als Nächstes wird das folgende Dialogfeld angezeigt, in dem Sie Ihren lokalen Webserver konfigurieren können:

3. Klicken Sie auf Ordner auswählen und wählen Sie den Ordner ar-with-webxr-master aus. Auf diese Weise können Sie Ihre laufende Arbeit über die im Webserverdialogfeld (im Bereich Webserver-URL(s)) markierte URL bereitstellen.
4. Klicken Sie unter Optionen (Neustart erforderlich) das Kästchen Index.html automatisch anzeigen an.
5. Setzen Sie die Option Webserver auf Stopp und dann wieder auf Gestartet.
6. Stellen Sie sicher, dass mindestens eine Webserver-URL angezeigt wird: http://127.0.0.1:8887 – die Standard-localhost-URL.

Portweiterleitung einrichten

Konfigurieren Sie Ihr AR-Gerät so, dass es auf denselben Port auf Ihrer Workstation zugreift, wenn Sie darauf localhost:8887 aufrufen.

1. Rufen Sie auf Ihrer Entwicklungs-Workstation chrome://Inspect auf und klicken Sie auf Portweiterleitung...:
2. Verwenden Sie das Dialogfeld Portweiterleitungseinstellungen, um Port 8887 an localhost:8887 weiterzuleiten.
3. Klicken Sie das Kästchen Portweiterleitung aktivieren an:

Einrichtung überprüfen

Testen Sie die Verbindung:

1. Verbinden Sie Ihr AR-Gerät über ein USB-Kabel mit Ihrem Computer.
2. Geben Sie auf Ihrem AR-Gerät in Chrome http://localhost:8887 in die Adressleiste ein. Ihr AR-Gerät sollte diese Anfrage an den Webserver Ihrer Entwicklungs-Workstation weiterleiten. Es sollte ein Verzeichnis mit Dateien angezeigt werden.
3. Klicken Sie auf Ihrem AR-Gerät auf step-03, um die Datei step-03/index.html in Ihren Browser zu laden.

Es sollte eine Seite mit der Schaltfläche Augmented Reality starten angezeigt werden	Wird jedoch die Fehlermeldung Nicht unterstützter Browser angezeigt, ist Ihr Gerät wahrscheinlich nicht kompatibel.

Die Verbindung zu Ihrem Webserver sollte nun mit Ihrem AR-Gerät funktionieren.

4. Klicken Sie auf Augmented Reality starten. Möglicherweise werden Sie aufgefordert, ARCore zu installieren.

Wenn Sie zum ersten Mal eine AR-App ausführen, wird Ihnen eine Aufforderung zu Kameraberechtigungen angezeigt.

 →

Sobald alles bereit ist, sollten Sie eine Szene mit Würfeln über dem Kamerafeed sehen. Die Erkennung von Szenen verbessert sich, wenn ein größerer Teil der Welt von der Kamera geparst wird. Durch Bewegen der Kamera können die Dinge stabilisiert werden.

Wichtig: Aus Sicherheitsgründen kann die WebXR Device API nur in sicheren Umgebungen (HTTPS) ausgeführt werden. Eine Ausnahme gilt für die localhost-Entwicklung. Wenn bei der Aktivierung von WebXR Probleme auftreten, achten Sie darauf, dass Sie ein sicheres Dokument oder eine localhost-URL verwenden.

Ab diesem Zeitpunkt müssen alle Tests und Bestätigungen, d. h. der Abschnitt Testen in den nachfolgenden Schritten, über den Link auf Ihrem AR-Gerät aufgerufen werden.

3. WebXR konfigurieren

In diesem Schritt erfahren Sie, wie Sie eine WebXR-Sitzung und eine grundlegende AR-Szene einrichten. Die HTML-Seite enthält CSS-Stile und JavaScript, um grundlegende AR-Funktionen zu ermöglichen. Dadurch wird der Einrichtungsprozess beschleunigt und das Codelab kann sich auf die AR-Funktionen konzentrieren.

HTML-Seite

Mithilfe vorhandener Webtechnologien bauen Sie ein AR-Erlebnis auf einer herkömmlichen Webseite auf. In diesem Fall verwenden Sie einen Vollbild-Rendering-Canvas, sodass die HTML-Datei nicht allzu komplex sein muss.

Für die AR-Funktionen ist eine Nutzergeste erforderlich. Daher gibt es einige Material Design-Komponenten für die Anzeige der Schaltfläche AR starten und der nicht unterstützten Browsermeldung.

Die Datei index.html, die sich bereits im Verzeichnis work befindet, sollte in etwa so aussehen. Dies ist eine Teilmenge des eigentlichen Inhalts. kopieren Sie diesen Code nicht in Ihre Datei!

<!-- Don't copy this code into your file! -->
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Building an augmented reality application with the WebXR Device API</title>
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

    <!-- three.js -->
    <script src="https://unpkg.com/three@0.123.0/build/three.js"></script>
    <script src="https://unpkg.com/three@0.123.0/examples/js/loaders/GLTFLoader.js"></script>

    <script src="../shared/utils.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
  <!-- Information about AR removed for brevity. -->

  <!-- Starting an immersive WebXR session requires user interaction. Start the WebXR experience with a simple button. -->
  <a onclick="activateXR()" class="mdc-button mdc-button--raised mdc-button--accent">
    Start augmented reality
  </a>

</body>
</html>

Schlüssel-JavaScript-Code öffnen

Der Ausgangspunkt für deine App ist in app.js. Diese Datei enthält Textbausteine für die Einrichtung eines AR-Erlebnisses.

In diesem Boilerplate werden asynchrone Funktionen verwendet. Weitere Informationen zu asynchronen Funktionen finden Sie unter Asynchrone Funktionen – Versprechen leicht gemacht.

Der App-Code (app.js) ist bereits in Ihrem Arbeitsverzeichnis enthalten.

Unterstützung von WebXR und AR prüfen

Bevor ein Nutzer mit AR arbeiten kann, prüfe, ob navigator.xr und die erforderlichen XR-Funktionen vorhanden sind. Das navigator.xr-Objekt ist der Einstiegspunkt für die WebXR Device API. Es sollte daher vorhanden sein, wenn das Gerät kompatibel ist. Prüfen Sie außerdem, ob der "immersive-ar"-Sitzungsmodus unterstützt wird.

Wenn alles in Ordnung ist, wird durch Klicken auf die Schaltfläche Augmented Reality öffnen versucht, eine XR-Sitzung zu erstellen. Andernfalls wird onNoXRDevice() (in shared/utils.js) aufgerufen und es wird eine Meldung angezeigt, dass AR nicht unterstützt wird.

Dieser Code ist in app.js bereits vorhanden, daher muss keine Änderung vorgenommen werden.

(async function() {
  if (navigator.xr && await navigator.xr.isSessionSupported("immersive-ar")) {
    document.getElementById("enter-ar").addEventListener("click", activateXR)
  } else {
    onNoXRDevice();
  }
})();

Auch wenn die WebXR Device API in einem Browser unterstützt wird, wird der angeforderte Sitzungsmodus möglicherweise nicht unterstützt. Ein Desktop-Browser kann beispielsweise die API implementieren, aber über keine verbundene VR- oder AR-Hardware zur Unterstützung einer Erfahrung verfügen. Weitere Informationen zur Geräteauflistung finden Sie in der WebXR Device API-Spezifikation.

XRSession anfordern

Wenn Sie auf Augmented Reality öffnen klicken, wird mit dem Code activateXR() aufgerufen. Das AR-Erlebnis wird gestartet.

1. Suchen Sie die Funktion activateXR() in app.js. Ein Teil des Codes wurde ausgelassen:

activateXR = async () => {
  // Initialize a WebXR session using "immersive-ar".
  this.xrSession = /* TODO */;

  // Omitted for brevity
}

Der Einstiegspunkt für WebXR ist XRSystem.requestSession(). Mit dem Modus „immersive-ar“ können gerenderte Inhalte in einer realen Umgebung angesehen werden.

2. Initialisieren Sie this.xrSession mit dem Modus "immersive-ar":

activateXR = async () => {
  // Initialize a WebXR session using "immersive-ar".
  this.xrSession = await navigator.xr.requestSession("immersive-ar");

  // ...
}

XRReferenceSpace initialisieren

Ein XRReferenceSpace beschreibt das Koordinatensystem, das für Objekte in der virtuellen Welt verwendet wird. Der 'local'-Modus eignet sich am besten für AR-Funktionen mit einem Referenzraum, der sich in der Nähe des Zuschauers befindet und ein stabiles Tracking ermöglicht.

Initialisieren Sie this.localReferenceSpace in onSessionStarted() mit dem folgenden Code:

this.localReferenceSpace = await this.xrSession.requestReferenceSpace("local");

Animationsschleife definieren

1. Verwende requestAnimationFrame von XRSession, um eine Rendering-Schleife zu starten, ähnlich wie bei window.requestAnimationFrame.

Mit dem requestAnimationFrame des XRSession können Sie sich an die Aktualisierungsrate des nativen XR-Geräts binden. Standardwebseiten“ Renderingschleifen sind für 60 fps ausgelegt. Externe VR-Displays hingegen können mit 120 fps gerendert werden. Nicht exklusive AR-Sitzungen können weiterhin nur bei 60 fps ausgeführt werden. Die Informationen zum Positionieren und Aufrufen des Geräts sind jedoch nur innerhalb der requestAnimationFrame einer Sitzung zugänglich.

Auf jedem Frame wird onXRFrame mit einem Zeitstempel und einem XRFrame aufgerufen.

2. Schließen Sie die Implementierung von onXRFrame ab. Wenn ein Frame gezeichnet wurde, stellen Sie die nächste Anfrage in die Warteschlange, indem Sie Folgendes hinzufügen:

// Queue up the next draw request.
this.xrSession.requestAnimationFrame(this.onXRFrame);

3. Fügen Sie Code hinzu, um die Grafikumgebung einzurichten. Zum Ende von onXRFrame hinzufügen:

// Bind the graphics framebuffer to the baseLayer's framebuffer.
const framebuffer = this.xrSession.renderState.baseLayer.framebuffer;
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, framebuffer);
this.renderer.setFramebuffer(framebuffer);

4. Verwenden Sie XRFrame.getViewerPose(), um die Position des Betrachters zu bestimmen. In diesem XRViewerPose werden die Position und Ausrichtung des Geräts im Raum beschrieben. Außerdem enthält es ein Array mit XRView-Werten, in denen alle Perspektiven beschrieben werden, von denen aus die Szene gerendert werden sollte, damit sie auf dem aktuellen Gerät richtig dargestellt wird. Während die stereoskopische VR zwei Ansichten (eine für jedes Auge) bietet, bieten AR-Geräte nur eine Ansicht.
   Die Informationen in pose.views werden am häufigsten verwendet, um die Ansichts- und Projektionsmatrix der virtuellen Kamera zu konfigurieren. Dies wirkt sich darauf aus, wie die Szene in 3D dargestellt wird. Wenn die Kamera konfiguriert ist, kann die Szene gerendert werden.
5. Zum Ende von onXRFrame hinzufügen:

// Retrieve the pose of the device.
// XRFrame.getViewerPose can return null while the session attempts to establish tracking.
const pose = frame.getViewerPose(this.localReferenceSpace);
if (pose) {
  // In mobile AR, we only have one view.
  const view = pose.views[0];

  const viewport = this.xrSession.renderState.baseLayer.getViewport(view);
  this.renderer.setSize(viewport.width, viewport.height);

  // Use the view's transform matrix and projection matrix to configure the THREE.camera.
  this.camera.matrix.fromArray(view.transform.matrix);
  this.camera.projectionMatrix.fromArray(view.projectionMatrix);
  this.camera.updateMatrixWorld(true);

  // Render the scene with THREE.WebGLRenderer.
  this.renderer.render(this.scene, this.camera);
}

Testen

Führen Sie die App aus. auf deinem Entwicklungsgerät, besuche work/index.html. Der Kamerafeed sollte mit Würfeln zu sehen sein, die im Weltraum schweben und sich die Perspektive ändern, wenn Sie das Gerät bewegen. Je mehr du dich bewegst, desto besser wird die Funktion. Finde heraus, was für dich und dein Gerät am besten funktioniert.

Wenn bei der Ausführung der App Probleme auftreten, lesen Sie die Abschnitte Einführung und Entwicklungsumgebung einrichten.

4. Fadenkreuz für das Targeting hinzufügen

Nachdem du eine grundlegende AR-Szene eingerichtet hast, kannst du mithilfe eines Erfolgstests mit der realen Welt interagieren. In diesem Abschnitt programmieren Sie einen Treffertest und verwenden ihn, um in der realen Welt eine Oberfläche zu finden.

Treffertests verstehen

Ein Treffertest ist im Allgemeinen eine Möglichkeit, eine gerade Linie von einem Punkt im Raum in eine bestimmte Richtung zu ziehen und festzustellen, ob sie sich mit interessanten Objekten schneidet. In diesem Beispiel richten Sie das Gerät auf einen Ort in der realen Welt. Stellen Sie sich einen Strahl vor, der von der Kamera Ihres Geräts direkt in die physische Welt davor gleitet.

Die WebXR Device API informiert Sie darüber, ob dieser Strahl Objekte in der realen Welt überschneidet. Dies hängt von den zugrunde liegenden AR-Funktionen und vom Verständnis der Welt ab.

XRSession mit zusätzlichen Funktionen anfordern

Zum Durchführen von Treffertests sind beim Anfordern von XRSession zusätzliche Funktionen erforderlich.

1. Suchen Sie in app.js nach navigator.xr.requestSession.
2. Fügen Sie die Features "hit-test" und "dom-overlay" wie folgt als requiredFeatures hinzu:

this.xrSession = await navigator.xr.requestSession("immersive-ar", {
  requiredFeatures: ["hit-test", "dom-overlay"]
});

3. DOM-Overlay konfigurieren Ordnen Sie das document.body-Element wie folgt über die AR-Kameraansicht:

this.xrSession = await navigator.xr.requestSession("immersive-ar", {
  requiredFeatures: ["hit-test", "dom-overlay"],
  domOverlay: { root: document.body }
});

Bewegungs-Prompt hinzufügen

ARCore funktioniert am besten, wenn ein ausreichendes Verständnis der Umgebung sichergestellt ist. Dies wird durch einen Prozess erreicht, der als simultane Localization and Mapping (SLAM) bezeichnet wird. Dabei werden optisch eindeutige Merkmalspunkte verwendet, um Änderungen der Standort- und Umgebungsmerkmale zu berechnen.

Verwende die "dom-overlay" aus dem vorherigen Schritt, um über dem Kamerastream eine Bewegungsaufforderung anzuzeigen.

Füge ein/e <div> zu index.html mit der ID stabilization hinzu. In diesem <div> wird Nutzern eine Animation angezeigt, die den Stabilisierungsstatus darstellt. Sie werden aufgefordert, sich mit ihrem Gerät zu bewegen, um den SLAM-Prozess zu verbessern. Wird angezeigt, sobald sich der Nutzer in AR befindet, und ausgeblendet, sobald das Fadenkreuz eine von <body>-Klassen gesteuerte Oberfläche gefunden hat.

  <div id="stabilization"></div>

</body>
</html>

Fadenkreuz hinzufügen

Verwenden Sie ein Fadenkreuz, um den Ort zu kennzeichnen, auf den das Gerät zeigt.

1. Ersetzen Sie in app.js den DemoUtils.createCubeScene()-Aufruf in setupThreeJs() durch eine leere Three.Scene().

setupThreeJs() {
  // ...

  // this.scene = DemoUtils.createCubeScene();
  this.scene = DemoUtils.createLitScene();
}

2. Füllen Sie die neue Szene mit einem Objekt, das den Konfliktpunkt darstellt. Die angegebene Klasse Reticle übernimmt das Laden des Retiklemodells in shared/utils.js.
3. Fügen Sie Reticle zur Szene in setupThreeJs() hinzu:

setupThreeJs() {
  // ...

  // this.scene = DemoUtils.createCubeScene();
  this.scene = DemoUtils.createLitScene();
  this.reticle = new Reticle();
  this.scene.add(this.reticle);
}

Für einen Treffertest verwenden Sie eine neue XRReferenceSpace. Dieser Referenzraum stellt aus der Perspektive des Betrachters ein neues Koordinatensystem dar, um einen Strahl zu erzeugen, der auf die Blickrichtung ausgerichtet ist. Dieses Koordinatensystem wird in XRSession.requestHitTestSource() verwendet, das Treffertests berechnen kann.

4. Fügen Sie onSessionStarted() in app.js Folgendes hinzu:

async onSessionStarted() {
  // ...

  // Setup an XRReferenceSpace using the "local" coordinate system.
  this.localReferenceSpace = await this.xrSession.requestReferenceSpace("local");

  // Add these lines:
  // Create another XRReferenceSpace that has the viewer as the origin.
  this.viewerSpace = await this.xrSession.requestReferenceSpace("viewer");
  // Perform hit testing using the viewer as origin.
  this.hitTestSource = await this.xrSession.requestHitTestSource({ space: this.viewerSpace });

  // ...
}

5. Führe mit diesem hitTestSource einen Treffertest für jeden Frame durch:
   • Wenn es keine Ergebnisse für den Treffertest gibt, hatte ARCore nicht genug Zeit, um ein Verständnis der Umgebung zu entwickeln. Bitte den Nutzer in diesem Fall, das Gerät mit dem Stabilisierungs-<div> zu bewegen.
   • Falls Ergebnisse vorhanden sind, verschieben Sie das Fadenkreuz an diese Position.
6. Ändern Sie onXRFrame, um das Fadenkreuz zu verschieben:

onXRFrame = (time, frame) => {
  // ... some code omitted ...
  this.camera.updateMatrixWorld(true);

  // Add the following:
  const hitTestResults = frame.getHitTestResults(this.hitTestSource);

  if (!this.stabilized && hitTestResults.length > 0) {
    this.stabilized = true;
    document.body.classList.add("stabilized");
  }
  if (hitTestResults.length > 0) {
    const hitPose = hitTestResults[0].getPose(this.localReferenceSpace);

    // update the reticle position
    this.reticle.visible = true;
    this.reticle.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z)
    this.reticle.updateMatrixWorld(true);
  }
  // More code omitted.
}

Verhalten bei Bildschirmtippen hinzufügen

Ein XRSession kann Ereignisse basierend auf einer Nutzerinteraktion mit dem select-Ereignis ausgeben, das die primäre Aktion darstellt. Bei WebXR auf Mobilgeräten ist die Hauptaktion das Antippen des Bildschirms.

1. Fügen Sie unten in onSessionStarted einen select-Event-Listener hinzu:

this.xrSession.addEventListener("select", this.onSelect);

In diesem Beispiel wird durch Tippen auf den Bildschirm eine Sonnenblume am Fadenkreuz platziert.

2. Erstellen Sie eine Implementierung für onSelect in der Klasse App:

onSelect = () => {
  if (window.sunflower) {
    const clone = window.sunflower.clone();
    clone.position.copy(this.reticle.position);
    this.scene.add(clone);
  }
}

App testen

Du hast ein Fadenkreuz erstellt, das du mithilfe von Treffertests mit deinem Gerät zielen kannst. Wenn Sie auf den Bildschirm tippen, sollten Sie eine Sonnenblume an der durch das Fadenkreuz gekennzeichneten Stelle platzieren können.

1. Beim Ausführen der App sollten Sie ein Fadenkreuz sehen können, das die Oberfläche des Bodens nachzeichnet. Falls nicht, schauen Sie sich langsam mit Ihrem Smartphone um.
2. Wenn du das Fadenkreuz siehst, tippe darauf. Eine Sonnenblume sollte darauf platziert werden. Möglicherweise müssen Sie sich ein wenig bewegen, damit die zugrunde liegende AR-Plattform Oberflächen in der realen Welt besser erkennen kann. Schlechte Lichtverhältnisse und Oberflächen ohne Funktionen verringern die Qualität der Szenendarstellung und erhöhen die Wahrscheinlichkeit, dass kein Treffer gefunden wird. Falls Probleme auftreten, sehen Sie sich den step-04/app.js-Code an, um ein funktionierendes Beispiel für diesen Schritt zu sehen.

JETZT TESTEN

5. Schatten hinzufügen

Eine realistische Szene entsteht durch Elemente wie richtige Beleuchtung und Schatten auf digitalen Objekten, die für Realismus sorgen und in die Szene eintauchen.

Beleuchtung und Schatten werden von three.js verwaltet. Sie können angeben, welche Lichter Schatten werfen, welche Materialien diese Schatten empfangen und rendern sollen und welche Maschen Schatten werfen können. Die Szene dieser App enthält ein Licht, das einen Schatten wirft, und eine ebene Oberfläche, damit nur Schatten gerendert werden.

1. Schatten in three.js WebGLRenderer aktivieren. Nachdem du den Renderer erstellt hast, lege in seinem shadowMap die folgenden Werte fest:

setupThreeJs() {
  ...
  this.renderer = new THREE.WebGLRenderer(...);
  ...
  this.renderer.shadowMap.enabled = true;
  this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  ...
}

In diesem Beispiel wird eine hartcodierte Lichtposition für Schatten verwendet. Zukünftig können AR-Funktionen für WebXR eine Lichtschätzung und andere Werte umfassen, sodass die Schatten des 3D-Modells auch mit der realen Welt synchron sind. Aktuelle Informationen finden Sie unter Feature: WebXR AR Lighting Estimation.

Die in DemoUtils.createLitScene() erstellte Beispielszene enthält ein Objekt namens shadowMesh, eine flache, horizontale Oberfläche, die nur Schatten darstellt. Diese Oberfläche hat anfänglich die Y-Position von 10.000 Einheiten. Nachdem du eine Sonnenblume platziert hast, verschiebe shadowMesh auf die Höhe der tatsächlichen Oberfläche, sodass der Schatten der Blume auf dem realen Boden erscheint.

2. Fügen Sie in onSelect nach dem Hinzufügen von clone zur Szene Code hinzu, um die Schattenebene neu zu positionieren:

onSelect = () => {
  if (window.sunflower) {
    const clone = window.sunflower.clone();
    clone.position.copy(this.reticle.position);
    this.scene.add(clone);

    const shadowMesh = this.scene.children.find(c => c.name === "shadowMesh");
    shadowMesh.position.y = clone.position.y;
  }
}

Möglicherweise müssen Sie zusätzliche Funktionen zum Erkennen von Szenen einsetzen, um komplexere Szenen und genaue Schatten anzuzeigen.

Testen

Wenn Sie eine Sonnenblume aufstellen, sollten Sie sehen können, dass sie einen Schatten wirft. Sollten Probleme auftreten, sehen Sie sich den final/app.js-Code an, um ein funktionierendes Beispiel für diesen Schritt zu sehen.

JETZT TESTEN

6. Zusätzliche Ressourcen

Glückwunsch! Du hast das Ende dieses Codelabs zu AR mit WebXR erreicht.

Weitere Informationen

• WebXR Device API-Spezifikation
• WebXR Device API auf MDN
• WebXR-Beispiele
• Hit Test-Spezifikation für WebXR
• Ankervorschlag für WebXR
• three.js