Immersive Web statt Metaverse

Nachdem der Hype der Investoren fürs Metaverse mit der Umbennung von Facebook in Meta seine Spitze erreicht und viele Startups mehrere Brainstorms zum Thema NFTs abgehalten haben, ist nicht mehr viel übrig geblieben vom Metaverse. Die ambitionierten Pläne, die gesamte Menschheit in virtuelle Welten zu katapultieren, scheinen doch nicht so einfach in die echte Realität umzusetzen zu sein – auch wenn einzelne Anbieter durchaus interessante Angebote aus dem Metaverse-Gemenge hervorgebracht haben.

Nvidias Omniverse etwa beschreibt das Metaverse als „3D-Internet“ und bietet eine Suite an Software an, die verspricht, industrielle 3D-Workflows zu optimieren. Die aktuelle Generation an mobilen XR-Headsets (wie die Meta Quest Pro, HTC XR Elite und Pico 4) setzt auf kleinere, leichtere Pancake-Linsen und einen Video Passthrough Mode der Mixed Reality Anwendungen ermöglicht – ein Zwischenschritt zur Augmented Reality.

Auch mit dem Einstieg Apples in den Markt Anfang nächsten Jahres mit der Apple Vision Pro scheint sich im Schatten generativer AIs also auch beim Thema XR etwas zu tun. Aber muss es wirklich das Metaverse sein?

3D-Inhalte im Browser über WebXR

Die Idee, das Internet in die dritte Dimension zu bringen, ist nicht neu – WebGL gibt es schon seit 2011.

Auch immersive Inhalte wurden bereits 2016 durch den WebVR-Standard ermöglicht. Die Webseite von WebVR merkt an, dass es bereits durch einen neuen Standard ersetzt worden ist: WebXR.

Einen lesefreundlicheren Einstieg in das Thema bietet Immersiveweb.dev – hier findet man auch schnell eine Beschreibung davon, was WebXR denn überhaupt ist:

The WebXR Device API provides access to input (pose information from headset and controllers) and output (hardware display) capabilities commonly associated with Virtual Reality (VR) and Augmented Reality (AR) devices. It allows you develop and host VR and AR experiences on the web.

Im Gegensatz zu herkömmlichen XR-Anwendungen, die auf den jeweiligen Endgeräten installiert werden müssen, ist hier die Value Proposition, dass Anwendungen direkt über einen Browser bereitgestellt werden können – zum Beispiel eingebettet in eine Webseite. Das klingt schon ziemlich nah an einem „3D-Internet“.

Auch interessant anzumerken ist hier, wer denn eigentlich hinter dem WebXR-Standard steckt. Ein Blick auf die Mitglieder der Github-Organisation von Immersive Web verrät: Apple, Meta, Amazon, Google und Microsoft. Interessant ist auch, dass Brandon Jones bei Google neben WebXR auch an WebGPU arbeitet.

Beispiel: Implementierung einer WebXR-Anwendung

Um eine WebXR-Anwendung zu entwickeln, gibt es verschiedene Möglichkeiten: Unity, eine weit verbreitete Engine zur Entwicklung von Spielen, bietet WebXR als Zielplattform – es gibt aber auch bereits dedizierte Engines, die spezifisch WebXR-Entwicklung ermöglichen, etwa Wonderland. Und natürlich kann man auch komplett „bare bones“ mit den nativen Browser-APIs arbeiten. Aber wenn wir schon im Web sind, wieso dann nicht einfach existierende Webtechnologien verwenden? Ist das überhaupt möglich?

Klar, mit @react-three/fiber und @react-three/xr. Anstatt React in der DOM zu rendern, rendert man es einfach in three.js und stellt den 3D-Inhalt in einer WebXR-Session bereit.

Das Spannende hierbei ist natürlich, dass es Webentwicklern ermöglicht wird, XR-Anwendungen zu entwickeln, ohne mit vollkommen fachfremden Technologien arbeiten zu müssen und bekannte Entwicklungsprozesse lassen sich ganz einfach übertragen. GitOps? Klar, geht auch.

Als kleines Beispiel setzen wir im Folgenden ein WebXR-Projekt auf und benutzen dafür Vite.

pnpm create vite webxr-demo --template react-ts
cd webxr-demo
pnpm install

Als Nächstes können @react-three/fiber und @react-three/xr installiert werden:

pnpm add three @react-three/fiber @react-three/xr

Dann noch schnell src/App.tsx angepasst zu:

1import { XR, Controllers, Hands, VRButton } from '@react-three/xr';
2import { Canvas } from '@react-three/fiber';
3
4const App = () => {
5  return (
6    <div style={{ width: '1280px', height: '720px' }}>
7      <VRButton />
8      <Canvas >
9        <XR>
10          <Controllers />
11          <Hands />
12          <mesh>
13            <boxGeometry />
14            <meshBasicMaterial color="blue" />
15          </mesh>
16        </XR>
17      </Canvas>
18    </div>
19  )
20}
21
22export default App;

Anschließend kann man den Development-Server starten:

pnpm dev

Es bleibt nur noch im Browser die lokale URL aus Vite zu öffnen.

Wenn man aktuell kein VR-Headset zur Hand hat, schafft der Immersive Web Emulator Abhilfe, ein Plugin für Chrome, das ein WebXR-fähiges Gerät im Browser emulieren kann. Verfügbar ist es nach Installation in den Chrome Developer Tools unter dem Reiter „WebXR“.
Hier lässt sich das emulierte Headset ganz einfach mit der Maus bewegen.

Alternativ kann man natürlich die Webseite auch im z. B. Meta Browser direkt auf einer Meta Quest öffnen. In beiden Fällen lässt sich über den „Enter VR“-Button die XR-Session starten und man sieht: Es funktioniert – mit Hot Reloading und allem, was man sonst im Frontend-Bereich gewohnt ist!

Aber wie sieht es denn mit State aus? Klar, das geht auch. Hier ein Beispiel:

1import { XR, Controllers, Hands, VRButton } from '@react-three/xr';
2import { Canvas } from '@react-three/fiber';
3import { useState, useEffect } from 'react';
4
5const App = () => {
6  const [counter, setCounter] = useState(0);
7
8  useEffect(() => {
9    const interval = setInterval(() => {
10      setCounter((counter) => counter + 1);
11    }, 2000);
12
13    return () => clearInterval(interval);
14  }, [setCounter]);
15
16  return (
17    <div style={{ width: '1280px', height: '720px' }}>
18      <VRButton />
19      <Canvas >
20        <XR>
21          <Controllers />
22          <Hands />
23          <mesh>
24            <boxGeometry />
25            <meshBasicMaterial color={counter % 2 === 0 ? 'red': 'blue'} />
26          </mesh>
27        </XR>
28      </Canvas>
29    </div>
30  )
31}
32
33export default App;

Im Anschluss sieht man, das Material der Box wechselt zwischen blauer und roter Farbe.

Natürlich ist dieses kurze Beispiel noch nicht besonders interaktiv, die Beispiele in der Github-Repository von @react-three/xr sind es aber: Hier kann man zum Beispiel Tischtennis spielen und eine AR-Demo gibt es auch. GLTF Modelle laden kann man dazu auch noch.

Limitierungen von WebXR

Es scheint ja alles schon zu gehen? Nicht ganz. Eine Limitierung von WebXR ist, dass manche moderne XR-Rendering-Techniken mit WebGL als Rendering-Backend nicht performant umsetzbar sind. Abhilfe soll hier WebGPU schaffen, ein neuer Standard der näher an hochperformanten, nativen APIs wie Vulkan und Metal arbeitet. Dafür gibt es auch schon ein Proposal, das die neue WebXR Layers API verwendet.

Stark involviert ist hier der Eingangs genannte Brandon Jones von Google. Auch Meta investiert aktiv in WebXR und veröffentlichte ein Open-Source-Projekt zu WebXR Best Practices.

Abschlussworte

Aber warum das ganze? Welchen Mehrwert kann man dadurch schaffen? Zum potenziellen Mehrwert von XR im Unternehmen gibt es verschiedene Meinungen – vielleicht sind wir als Gesellschaft heute noch nicht so weit, jedes Meeting mit einem virtuellen Avatar abzuhalten. Viele Unternehmen verwenden XR aber bereits für Trainings, Prototyping und für Produktdemonstrationen – auch anderen Bereiche zeigen Potenzial auf.

Auch der Einstieg von Apple in den XR-Markt mit der Apple Vision Pro (Apples erstem „spatial computer“) verspricht neue Möglichkeiten für XR doch noch Fuß zu fassen. Und im Vergleich zum Metaverse, funktioniert das Immersive Web schon heute.