Skip to content
GitLab
Last edited by Alfakhori
Page history

Create a simple web AR application [De]

:flag_de: This is the German version of the tutorial. You can check the English version.

Intro

Was ist AR?

Augmented Reality (AR) ist eine Technologie, die computer-generierte Inhalte wie Bilder, Videos oder 3D-Modelle in Echtzeit auf die reale Umgebung überlagert. Sie ermöglicht es Benutzern, eine Mischrealität zu erleben, in der virtuelle Elemente mit der physischen Welt um sie herum integriert sind. AR wird häufig in mobilen Geräten wie Smartphones und Tablets verwendet, kann aber auch über tragbare Geräte wie Smart Glasses oder Headsets erlebt werden. AR kann in verschiedenen Anwendungen eingesetzt werden, darunter Gaming, Bildung, Einzelhandel, Werbung und industrielle Schulung, unter anderem.

Was Sie bauen werden?

In diesem Tutorial bauen Sie eine Web-App, die mithilfe von Augmented Reality ein Modell in die reale Welt einfügt. Ihre App wird folgende Funktionen haben:

  • Die Sensoren des Zielgeräts verwenden, um seine Position und Ausrichtung in der Welt zu bestimmen und zu verfolgen
  • Ein 3D-Modell über einem Live-Kamerabild anzeigen
  • Hit-Tests ausführen, um Objekte auf entdeckten Oberflächen in der realen Welt zu platzieren.

Am Ende dieses Tutorials werden Sie in der Lage sein, eine ähnliche App wie diese Demo zu erstellen.

Was Sie benötigen werden?

  • Eine Arbeitsstation zum Codieren
  • Ein ARCore-fähiges Android-Gerät mit Android 8.0 Oreo
  • Google Chrome
  • Google Play-Dienste für AR installiert (Chrome fordert Sie automatisch zur Installation auf kompatiblen Geräten auf)
  • Ein Webserver mit https-Unterstützung
  • Grundkenntnisse in HTML, CSS und JavaScript

Server-Setup

Um Ihre AR-Web-App hosten zu können, benötigen Sie einen Server mit https-Unterstützung. Sie können die HfT GitLab-Seiten verwenden, dafür folgen Sie bitte dem Tutorial und führen Sie die folgenden Änderungen wie beschrieben durch.

Nachdem Sie das Projekt erstellt haben, ist es wichtig, geringfügige Änderungen an der .gitlab-ci.yml vorzunehmen, damit die Website ordnungsgemäß funktioniert. Sie können die Funktion Bearbeiten im Pipeline-Editor verwenden, die in blauer Farbe angezeigt wird. Die finale Datei sollte wie folgt aussehen:

image: alpine:latest

stages:
    - deploy
  
pages:
  stage: deploy
  script:
    - echo "deploy to https://transfer.hft-stuttgart.de/pages/$CI_PROJECT_PATH/"
  artifacts:
    paths:
      - public
  only: 
    - master

Über das linke Menü können Sie überprüfen, ob alles korrekt funktioniert. Wenn ja, erhalten Sie die URL für die Website.

image

Sie können auf Ihre neue Website über den folgenden Link zugreifen: https://transfer.hft-stuttgart.de/pages/$CI_PROJECT_PATH/index.html Der Teil $CI_PROJECT_PATH in der URL wird je nach Ihrem Konto- und Projektname unterschiedlich sein. Wenn alles funktioniert, sehen Sie diese Seite:

image

Einfacher Würfel in AR

WebXR erfordert eine Nutzerinteraktion, um eine Sitzung starten zu können. Erstellen Sie eine Schaltfläche mit dem Namen activateXR(). Nach dem Laden der Seite kann der Nutzer diese Schaltfläche verwenden, um das AR-Erlebnis zu starten.

Bearbeiten Sie die index.html und fügen Sie den folgenden HTML-Code hinzu:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Cube Demo</title>

  <!-- three.js -->
  <script src="https://unpkg.com/three@0.126.0/build/three.js"></script>
</head>
<body>

<!-- Starting an immersive WebXR session requires user interaction.
    We start this one with a simple button. -->
<button onclick="activateXR()">Start Cube Demo</button>
<script>
async function activateXR() {
  // Add a canvas element and initialize a WebGL context that is compatible with WebXR.
  const canvas = document.createElement("canvas");
  document.body.appendChild(canvas);
  const gl = canvas.getContext("webgl", {xrCompatible: true});

  // To be continued in upcoming steps.
}
</script>
</body>
</html>

three.js initialisieren

Wenn Sie auf die Schaltfläche „Starten“ drücken, passiert nicht viel. Zum Einrichten einer 3D-Umgebung können Sie eine Rendering-Bibliothek verwenden, um eine Szene darzustellen.

In diesem Beispiel verwenden Sie three.js, eine JavaScript-3D-Rendering-Bibliothek, die einen WebGL-Renderer bereitstellt. Three.js verarbeitet Renderings, Kameras und Szenengrafiken, sodass Sie 3D-Inhalte leichter im Web präsentieren können.

Szene erstellen

Eine 3D-Umgebung wird normalerweise als eine Szene modelliert. Erstellen Sie eine THREE.Scene, die AR-Elemente enthält. Mit dem folgenden Code können Sie sich ein farbiges Feld in AR ansehen, das nicht beleuchtet ist.

Fügen Sie diesen Code unten in die activateXR()-Funktion ein:

const scene = new THREE.Scene();

// The cube will have a different color on each side.
const materials = [
  new THREE.MeshBasicMaterial({color: 0xff0000}),
  new THREE.MeshBasicMaterial({color: 0x0000ff}),
  new THREE.MeshBasicMaterial({color: 0x00ff00}),
  new THREE.MeshBasicMaterial({color: 0xff00ff}),
  new THREE.MeshBasicMaterial({color: 0x00ffff}),
  new THREE.MeshBasicMaterial({color: 0xffff00})
];

// Create the cube and add it to the demo scene.
const cube = new THREE.Mesh(new THREE.BoxBufferGeometry(0.2, 0.2, 0.2), materials);
cube.position.set(1, 1, 1);
scene.add(cube);

Rendering mit three.js einrichten

Um diese Szene in AR sehen zu können, benötigen Sie einen Renderer und eine Kamera. Der Renderer nutzt WebGL, um Ihre Szene auf dem Bildschirm zu zeichnen. Die Kamera beschreibt den Darstellungsbereich, von dem aus die Szene angesehen wird.

Fügen Sie diesen Code unten in die activateXR()-Funktion ein:

// Set up the WebGLRenderer, which handles rendering to the session's base layer.
const renderer = new THREE.WebGLRenderer({
  alpha: true,
  preserveDrawingBuffer: true,
  canvas: canvas,
  context: gl
});
renderer.autoClear = false;

// The API directly updates the camera matrices.
// Disable matrix auto updates so three.js doesn't attempt
// to handle the matrices independently.
const camera = new THREE.PerspectiveCamera();
camera.matrixAutoUpdate = false;

XRSession erstellen

Der Einstiegspunkt für WebXR ist XRSystem.requestSession(). Verwenden Sie den Modus immersive-ar, damit gerenderte Inhalte in einer realen Umgebung angezeigt werden können.

Ein XRReferenceSpace beschreibt das Koordinatensystem, das für Objekte in der virtuellen Welt verwendet wird. Der Modus 'local' eignet sich am besten für ein AR-Erlebnis mit einem Referenzbereich, dessen Ursprung in der Nähe des Zuschauers liegt, und einem stabilen Tracking.

Fügen Sie unten in der Funktion activateXR() folgenden Code ein, um XRSession und XRReferenceSpace zu erstellen:

// Initialize a WebXR session using "immersive-ar".
const session = await navigator.xr.requestSession("immersive-ar");
session.updateRenderState({
  baseLayer: new XRWebGLLayer(session, gl)
});

// A 'local' reference space has a native origin that is located
// near the viewer's position at the time the session was created.
const referenceSpace = await session.requestReferenceSpace('local');

Szene rendern

Jetzt können Sie die Szene rendern. Mit XRSession.requestAnimationFrame() wird ein Callback geplant, der ausgeführt wird, wenn der Browser bereit ist, einen Frame zu zeichnen.

Rufen Sie während des Animationsframe-Callbacks XRFrame.getViewerPose() auf, um die Stellung des Betrachters relativ zum lokalen Koordinatenraum zu erhalten. Hiermit wird die Kamera im Ambiente aktualisiert, um zu ändern, wie der Nutzer die virtuelle Welt betrachtet, bevor der Renderer die Szene mithilfe der aktualisierten Kamera zeichnet.

Fügen Sie diesen Code unten in die activateXR()-Funktion ein:

// Create a render loop that allows us to draw on the AR view.
const onXRFrame = (time, frame) => {
  // Queue up the next draw request.
  session.requestAnimationFrame(onXRFrame);

  // Bind the graphics framebuffer to the baseLayer's framebuffer
  gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer)

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

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

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

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

Würfel-Demo Ergebnis

Navigieren Sie auf Ihrem Gerät zur erstellten Webseite. Sie sollten einen farbigen Würfel von allen Seiten aus betrachten können.

cube

Der vollständige Code kann unter cube.html heruntergeladen werden, und eine Live-Demo kann hier aufgerufen werden.

Tippen, um zu platzieren

Eine gängige Methode zur Interaktion mit der AR-Welt ist ein Treffertest, bei dem eine Schnittstelle zwischen einer Optik und einer realen Geometrie ermittelt wird. Mit Hello WebXR platzieren Sie einen Treffertest, um eine Sonnenblume in der virtuellen Welt zu platzieren.

Demowürfel entfernen

Entfernen Sie den beleuchteten Würfel und ersetze Sie durch eine Beleuchtung.

const scene = new THREE.Scene();

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.3);
directionalLight.position.set(10, 15, 10);
scene.add(directionalLight);

Funktion hit-test verwenden

Um die Treffertestfunktionen zu initialisieren, fordern Sie eine Sitzung mit der Funktion hit-test an. Suchen Sie das vorherige requestSession()-Fragment und fügen Sie hit-test hinzu:

const session = await navigator.xr.requestSession("immersive-ar", {requiredFeatures: ['hit-test']});

Modellladeprogramm hinzufügen

Derzeit enthält die Szene nur einen farbigen Würfel. Fügen Sie einen Modelllader hinzu, der das Laden von GLTF-Modellen ermöglicht, um das Erlebnis noch interessanter zu machen.

Fügen Sie in Ihrem -Tag des Dokuments Three.js GLTFLoader ein.

<!-- three.js -->
<script src="https://unpkg.com/three@0.126.0/build/three.js"></script>

<script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>

GLTF-Modelle laden

Verwenden Sie das Modellladeprogramm aus dem vorherigen Schritt, um ein Ausrichtungsretikel und eine Sonnenblume aus dem Web zu laden.

Fügen Sie diesen Code über onXRFrame hinzu:

const loader = new THREE.GLTFLoader();
let reticle;
loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/reticle/reticle.gltf", function(gltf) {
  reticle = gltf.scene;
  reticle.visible = false;
  scene.add(reticle);
})

let flower;
loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/sunflower/sunflower.gltf", function(gltf) {
  flower = gltf.scene;
});

// Create a render loop that allows us to draw on the AR view.
const onXRFrame = (time, frame) => {

Treffertestquelle erstellen

Erstellen Sie mit XRSession.requestHitTestSource() eine XRHitTestSource, um Schnittmengen mit echten Objekten zu berechnen. Der für Treffertests verwendete Ray hat den Referenzbereich viewer als Ursprung. Das bedeutet, dass der Treffertest von der Mitte des Darstellungsbereichs aus durchgeführt wird.

Fügen Sie nach dem Erstellen des Referenzbereichs local den folgenden Code hinzu, um eine Treffertestquelle zu erstellen:

// A 'local' reference space has a native origin that is located
// near the viewer's position at the time the session was created.
const referenceSpace = await session.requestReferenceSpace('local');

// Create another XRReferenceSpace that has the viewer as the origin.
const viewerSpace = await session.requestReferenceSpace('viewer');
// Perform hit testing using the viewer as origin.
const hitTestSource = await session.requestHitTestSource({ space: viewerSpace });

Ausrichtungsretikel zeichnen

Damit klar erkennbar ist, wo die Sonnenblume platziert wird, fügen Sie der Szene ein Fadenkreuz hinzu. Dieser Netzhaut scheint an tatsächlichen Oberflächen zu kleben, was darauf hinweist, wo die Sonnenblume verankert wird.

XRFrame.getHitTestResults gibt ein Array von XRHitTestResult zurück und zeigt Schnitte mit realen Geometrien an. Mit diesen Schnittpunkten können Sie das Targeting-Risko in jedem Frame positionieren.

camera.projectionMatrix.fromArray(view.projectionMatrix);
camera.updateMatrixWorld(true);

const hitTestResults = frame.getHitTestResults(hitTestSource);
if (hitTestResults.length > 0 && reticle) {
  const hitPose = hitTestResults[0].getPose(referenceSpace);
  reticle.visible = true;
  reticle.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z)
  reticle.updateMatrixWorld(true);
}

Interaktionen durch Tippen hinzufügen

XRSession erhält select-Ereignisse, wenn der Nutzer eine primäre Aktion ausführt. In einer AR-Sitzung entspricht dies einem Tippen auf den Bildschirm.

Wenn der Nutzer auf den Bildschirm tippt, fügt der Nutzer während der Initialisierung den folgenden Code hinzu:

let flower;
loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/sunflower/sunflower.gltf", function(gltf) {
  flower = gltf.scene;
});

session.addEventListener("select", (event) => {
  if (flower) {
    const clone = flower.clone();
    clone.position.copy(reticle.position);
    scene.add(clone);
  }
});

Ergebnis von Tippen zum Platzieren

Verwenden Sie Ihr Mobilgerät, um zur Seite zu navigieren. Nachdem WebXR die Umgebung aufgenommen hat, sollte das Fadenkreuz auf realen Oberflächen erscheiFnen. Tippen Sie auf den Bildschirm, um eine Sonnenblume zu platzieren, die von allen Seiten aus betrachtet werden kann.

hit

Der vollständige Code kann unter hit2place.html heruntergeladen werden, und eine Live-Demo kann hier aufgerufen werden.

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal