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

1. Hinweis

In diesem Codelab wird ein Beispiel für die Erstellung einer AR-Webanwendung erläutert. Dabei werden mit JavaScript 3D‑Modelle gerendert, die so aussehen, als ob sie in der realen Welt existieren.

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

Was ist AR?

AR ist ein Begriff, der in der Regel verwendet wird, um die Mischung aus computergenerierten Grafiken und der realen Welt zu beschreiben. Bei smartphonebasierter AR bedeutet das, Computergrafiken überzeugend über einen Live-Kamerafeed zu platzieren. Damit dieser Effekt beim Bewegen des Smartphones realistisch bleibt, muss das AR-fähige Gerät die Umgebung verstehen, in der es sich bewegt, und seine Position und Ausrichtung im 3D-Raum bestimmen. Dazu gehört unter anderem die Erkennung von Oberflächen und die Schätzung der Beleuchtung der Umgebung.

Nach der Veröffentlichung von ARCore von Google und ARKit von Apple wird AR in Apps immer häufiger eingesetzt, z. B. 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. Die Sensoren des Zielgeräts verwenden, um seine Position und Ausrichtung in der Welt zu bestimmen und zu verfolgen
2. Ein 3D-Modell rendern, das über einer Live-Kameraansicht erstellt wurde
3. Durchführen von Treffertests, um Objekte auf erkannten Oberflächen in der realen Welt zu platzieren

Lerninhalte

• WebXR Device API verwenden
• Eine einfache AR-Szene konfigurieren
• Eine Oberfläche mithilfe von AR-Treffertests finden
• 3D‑Modell mit dem Kamerafeed der realen Welt synchronisieren und rendern
• Schatten basierend auf dem 3D‑Modell rendern

In diesem Codelab liegt der Schwerpunkt auf AR-APIs. Auf irrelevante Konzepte und Codeblöcke wird nicht genauer eingegangen, aber Sie können die entsprechenden Codeblöcke im entsprechenden Repository-Code ausführen.

Voraussetzungen

• Workstation zum Codieren und Hosten statischer Webinhalte
• ARCore-kompatibles 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
• Texteditor
• Grundlegende Kenntnisse von HTML, CSS, JavaScript und den Google Chrome-Entwicklertools

Klicken Sie auf Ihrem AR-Gerät auf Ausprobieren, um den ersten Schritt dieses Codelabs auszuführen. Wenn Sie eine Seite mit der Meldung „Ihr Browser unterstützt keine AR-Funktionen“ sehen, prüfen Sie, ob auf Ihrem Android-Gerät die Google Play-Dienste für AR installiert sind.

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 ein Stammordner (ar-with-webxr-master) entpackt, der Verzeichnisse mit mehreren Schritten 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 final-Ergebnis. Sie sind als Referenz verfügbar.

Sie führen alle Programmierarbeiten im Verzeichnis work aus.

Webserver installieren

1. Sie können auch Ihren eigenen Webserver verwenden. Wenn Sie noch keinen Webserver für Chrome eingerichtet haben, wird in diesem Abschnitt beschrieben, wie Sie das tun.
   Wenn diese App noch nicht auf Ihrer Workstation installiert ist, können Sie sie über den Chrome Web Store installieren.

Webserver für Chrome installieren

2. Nachdem Sie die App „Webserver für Chrome“ installiert haben, klicken Sie auf chrome://apps und dann auf das Webserver-Symbol:

Nun wird dieses 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. So können Sie Ihre ausstehenden Arbeiten über die URL bereitstellen, die im Dialogfeld „Webserver“ im Abschnitt Webserver-URL(s) hervorgehoben ist.
4. Klicken Sie unter Optionen (Neustart erforderlich) auf das Kästchen index.html automatisch anzeigen.
5. Stellen Sie den Schalter für Webserver auf Beenden und dann wieder auf Gestartet.
6. Prüfen Sie, ob 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 Entwicklungsstation chrome://inspect auf und klicken Sie auf Portweiterleitung…:
2. Verwenden Sie das Dialogfeld Einstellungen für die Portweiterleitung, um Port 8887 an localhost:8887 weiterzuleiten.
3. Klicken Sie das Kästchen Portweiterleitung aktivieren an:

Einrichtung überprüfen

Verbindung testen:

1. Verbinden Sie Ihr AR-Gerät über ein USB-Kabel mit Ihrem Workstation.
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 Entwicklungsstation 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.

Daraufhin sollte eine Seite mit der Schaltfläche Augmented Reality starten angezeigt werden.	Wenn jedoch die Fehlerseite Nicht unterstützter Browser angezeigt wird, 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, werden Sie aufgefordert, die Kameraberechtigungen zu gewähren.

 →

Wenn alles richtig eingestellt ist, sollte eine Szene mit Würfeln über einem Kamerafeed zu sehen sein. 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 (HTTPS-)Umgebungen ausgeführt werden. Eine Ausnahme gilt für die Entwicklung auf dem lokalen Host. Wenn Sie Probleme beim Aktivieren von WebXR haben, verwenden Sie ein sicheres Dokument oder eine localhost-URL.

Ab diesem Punkt müssen Sie den Link auf Ihrem AR-Gerät aufrufen, um alle Tests und Bestätigungen durchzuführen (Abschnitte Testen in den nachfolgenden Schritten).

3. WebXR konfigurieren

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

Die HTML-Seite

Sie bauen mithilfe vorhandener Webtechnologien eine AR-Funktion in eine herkömmliche Webseite ein. Dabei wird ein Vollbild-Rendering-Canvas verwendet, sodass die HTML-Datei nicht zu komplex sein muss.

AR-Funktionen erfordern eine Nutzergeste, um gestartet zu werden. Daher gibt es einige Material Design-Komponenten, um die Schaltfläche AR starten und die Meldung zum nicht unterstützten Browser anzuzeigen.

Die index.html-Datei, die sich bereits in Ihrem work-Verzeichnis befindet, sollte in etwa so aussehen: Dies ist nur ein Teil des tatsächlichen 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 einen Boilerplate-Code zum Einrichten einer AR-Umgebung.

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

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

Unterstützung für WebXR und AR prüfen

Bevor ein Nutzer mit AR arbeiten kann, prüfen Sie, 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 also 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 In Augmented Reality eintreten versucht, eine XR-Sitzung zu erstellen. Andernfalls wird onNoXRDevice() (in shared/utils.js) aufgerufen, wodurch eine Meldung angezeigt wird, dass keine AR-Unterstützung verfügbar ist.

Dieser Code ist bereits in app.js vorhanden. Es sind also keine Änderungen erforderlich.

(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 keine verbundene VR- oder AR-Hardware haben, um eine Funktion zu unterstützen. Weitere Informationen zur Geräteaufzählung finden Sie in der Spezifikation der WebXR Device API.

XRSession anfordern

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

1. Suchen Sie in app.js nach der Funktion activateXR(). Einige Codezeilen wurden entfernt:

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

  // Omitted for brevity
}

Der Einstiegspunkt für WebXR ist XRSystem.requestSession(). Verwenden Sie den Modus immersive-ar, um gerenderte Inhalte in einer realen Umgebung anzusehen.

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 Modus 'local' eignet sich am besten für AR-Inhalte mit einem Referenzraum, dessen Ursprung sich in der Nähe des Betrachters befindet, und stabiler Verfolgung.

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

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

Animationsschleife definieren

1. Mit dem requestAnimationFrame von XRSession können Sie einen Rendering-Loop starten, ähnlich wie bei window.requestAnimationFrame.

Über die requestAnimationFrame von XRSession kannst du die Bildwiederholrate des nativen XR-Geräts nutzen. Die Renderingschleifen von Standardwebseiten sind für 60 fps konzipiert, während externe VR-Displays mit 120 fps rendern können. Nicht exklusive AR-Sitzungen werden möglicherweise weiterhin nur mit 60 fps ausgeführt, aber auf die Positions- und Ansichtsinformationen des Geräts kann nur innerhalb der requestAnimationFrame einer Sitzung zugegriffen werden.

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

2. Schließen Sie die Implementierung von onXRFrame ab. Wenn ein Frame gezeichnet wird, setzen 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 Haltung des Betrachters zu bestimmen. Dieser XRViewerPose beschreibt die Position und Ausrichtung des Geräts im Raum. Außerdem enthält es ein Array von XRView, das jeden Blickwinkel beschreibt, aus dem die Szene gerendert werden soll, damit sie auf dem aktuellen Gerät richtig angezeigt wird. Während bei der stereoskopischen VR zwei Ansichten (eine für jedes Auge) vorhanden sind, haben 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. Sobald die Kamera konfiguriert ist, kann die Szene gerendert werden.
5. Fügen Sie unten in onXRFrame Folgendes hinzu:

// 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 und rufen Sie auf Ihrem Entwicklungsgerät work/index.html auf. 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 Sie sich bewegen, desto besser wird das Tracking. Probieren Sie aus, was für Sie und Ihr Gerät am besten funktioniert.

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

4. Targeting-Fadenkreuz hinzufügen

Nachdem Sie eine einfache AR-Szene eingerichtet haben, ist es an der Zeit, mithilfe eines Treffertests mit der realen Welt zu interagieren. In diesem Abschnitt programmieren Sie einen Kollisionstest und verwenden ihn, um eine Oberfläche in der realen Welt zu finden.

Treffertest

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 ausgeht und direkt in die reale Welt vor ihm strahlt.

Die WebXR Device API gibt an, ob dieser Strahl Objekte in der realen Welt geschnitten hat. Dies wird anhand der zugrunde liegenden AR-Funktionen und des Verständnisses der Welt bestimmt.

XRSession mit zusätzlichen Funktionen anfordern

Für Treffertests sind beim Anfordern der 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. Konfigurieren Sie das DOM-Overlay. Platziere das Element document.body so über der 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 visuell eindeutige Merkmalspunkte verwendet, um eine Änderung der Standort- und Umgebungsmerkmale zu berechnen.

Verwenden Sie das "dom-overlay" aus dem vorherigen Schritt, um einen Bewegungsvorschlag über dem Kamerastream anzuzeigen.

Fügen Sie index.html eine <div> 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 bereitgestellte Reticle-Klasse lädt das Absehenmodell in shared/utils.js.
3. Fügen Sie der Szene in setupThreeJs() das Reticle 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 gibt ein neues Koordinatensystem aus der Perspektive des Betrachters an, um einen Strahl zu erstellen, der mit der Blickrichtung ausgerichtet ist. Dieses Koordinatensystem wird in XRSession.requestHitTestSource() verwendet, um Kollisionstests zu berechnen.

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ühren Sie mit dieser hitTestSource jeden Frame einen Treffertest durch:
   • Wenn es keine Ergebnisse für den Treffertest gibt, hatte ARCore nicht genug Zeit, sich ein Bild von der Umgebung zu machen. Bitten Sie den Nutzer in diesem Fall, das Gerät mithilfe der Stabilisierung <div> zu bewegen.
   • Wenn Ergebnisse vorhanden sind, bewegen Sie den Fadenkreuz auf diesen Standort.
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 beim Tippen auf das Display hinzufügen

Ein XRSession kann Ereignisse basierend auf Nutzerinteraktionen über das Ereignis select senden, das die primäre Aktion darstellt. In WebXR auf Mobilgeräten ist die primäre Aktion ein Tippen auf den Bildschirm.

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

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

In diesem Beispiel wird durch Tippen auf das Display eine Sonnenblume an der Markierung 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 das Display tippen, sollten Sie eine Sonnenblume an der Stelle platzieren können, die das Fadenkreuz angibt.

1. Wenn Sie die App ausführen, sollte ein Fadenkreuz zu sehen sein, das die Oberfläche des Fußbodens abtastet. Wenn das nicht funktioniert, versuchen Sie, sich langsam mit Ihrem Smartphone umzusehen.
2. Tippen Sie auf das Fadenkreuz, sobald es angezeigt wird. 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 Merkmale verringern die Qualität der Szenenerkennung und erhöhen die Wahrscheinlichkeit, dass keine Übereinstimmung 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.

TESTEN

5. Schatten hinzufügen

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

Beleuchtung und Schatten werden von three.js verwaltet. Sie können angeben, welche Lichter Schatten werfen sollen, welche Materialien diese Schatten empfangen und rendern sollen und welche Meshes Schatten werfen können. Die Szene dieser App enthält eine Lichtquelle, die einen Schatten wirft, und eine flache Oberfläche, um nur Schatten zu rendern.

1. Aktivieren Sie Schatten für die three.js WebGLRenderer. Nachdem Sie den Renderer erstellt haben, legen Sie die folgenden Werte für shadowMap 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. In Zukunft können AR-Funktionen für WebXR Lichtschätzungen und andere Werte umfassen, damit die Schatten des 3D‑Modells auch mit der realen Welt synchronisiert werden. Aktuelle Informationen finden Sie unter Funktion: WebXR-AR-Beleuchtungsschätzung.

Die in DemoUtils.createLitScene() erstellte Beispielszene enthält ein Objekt namens shadowMesh, eine flache, horizontale Oberfläche, die nur Schatten rendert. Diese Fläche hat anfangs eine 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 weitere Funktionen zur Szenenerkennung verwenden, um komplexere Szenen und präzise Schatten darzustellen.

Testen

Wenn Sie eine Sonnenblume platzieren, sollte sie einen Schatten werfen. Wenn Probleme auftreten, sehen Sie sich den Code für final/app.js an. Dort finden Sie ein funktionierendes Beispiel für diesen Schritt.

TESTEN

6. Zusätzliche Ressourcen

Glückwunsch! Sie haben das Ende dieses Codelabs zu AR mit WebXR erreicht.

Weitere Informationen

• WebXR Device API Specification
• WebXR Device API auf MDN
• WebXR-Beispiele
• Spezifikation für den Treffertest für WebXR
• Angebot für WebXR-Ankern
• three.js