VR & AR (WebXR)
Last updated
Last updated
Needle Engine unterstützt die vollständige , einschließlich AR und VR. WebXR ist ein offizieller Webstandard, der immersive Erlebnisse ins Web bringt, mit allen Vorteilen des Webs: keine Installation, kein App Store, keine SDKs erforderlich.
Alle Geräte mit einem Browser können mit Needle erstellte Apps ausführen. Wenn der Browser WebXR unterstützt, funktionieren Ihre Apps automatisch auch in XR, indem sie unsere integrierten Komponenten verwenden. Dazu gehören Desktop-Browser, mobile Browser, viele Browser auf AR/VR-Headsets, aber auch andere aufkommende Technologien wie Looking Glass-Displays, Smart Glasses und mehr.
:::tip App-freie iOS AR-Unterstützung über USDZ/QuickLook Während iOS-Geräte noch keine offizielle WebXR-Unterstützung bieten, unterstützt Needle die Erstellung von AR-Erlebnissen auf iOS mithilfe von . Weitere Details finden Sie im . Sie können reichhaltige, interaktive Erlebnisse erstellen, die nahtlos in AR auf iOS-Geräten funktionieren, selbst mit den Einschränkungen, die Apple festgelegt hat.
Wenn Sie den AR-Modus auf iOS aufrufen, konvertiert Needle Ihre Szene automatisch in eine USDZ-Datei, die dann in AR mithilfe von Apples QuickLook angezeigt wird. Objekte, Materialien, Audio, Animationen und Everywhere Actions bleiben erhalten. :::
Die folgende Tabelle listet einige der Geräte auf, die wir erfolgreich mit Needle Engine getestet haben. Wenn ein neues Gerät auf den Markt kommt, das WebXR unterstützt, funktioniert es ohne weiteres mit Ihren Apps. Dies ist einer der großen Vorteile der Entwicklung mit dem Browser als Plattform – die Kompatibilität ist nicht auf eine bestimmte Gruppe von Geräten oder SDKs beschränkt.
Apple Vision Pro
✔️ Safari
Hand-Tracking, Unterstützung für transienten Pointer
Meta Quest 3
✔️ Meta Browser
Hand-Tracking, Unterstützung für sessiongranted1, Passthrough, Tiefenmessung, Mesh-Tracking
Meta Quest 3S
✔️ Meta Browser
Hand-Tracking, Unterstützung für sessiongranted1, Passthrough, Tiefenmessung, Mesh-Tracking
Meta Quest 2
✔️ Meta Browser
Hand-Tracking, Unterstützung für sessiongranted1, Passthrough (Schwarz-Weiß)
Meta Quest 1
✔️ Meta Browser
Hand-Tracking, Unterstützung für sessiongranted1
Meta Quest Pro
✔️ Meta Browser
Hand-Tracking, Unterstützung für sessiongranted1, Passthrough
Pico Neo 4
✔️ Pico Browser
Passthrough, Hand-Tracking2
Pico Neo 3
✔️ Pico Browser
kein Hand-Tracking, invertierte Controller-Thumbsticks
Oculus Rift 1/2
✔️ Chrome
Valve Index
✔️ Chrome
HTC Vive
✔️ Chrome
Hololens 2
✔️ Edge
Hand-Tracking, Unterstützung für AR und VR (im VR-Modus wird der Hintergrund ebenfalls gerendert)
Android 10+
✔️ Chrome
Android 10+
✔️ Firefox
iOS 15+
(✔️)3 Safari (✔️)3 Chrome
iOS 15+
✔️ WebXR Viewer
Browser ist inzwischen etwas veraltet
Hololens 2
✔️ Edge
Hololens 1
❌
keine WebXR-Unterstützung
Magic Leap 2
✔️
Magic Leap 1
✔️
veraltetes Gerät
Looking Glass Holographic Display
✔️ Chrome
Logitech MX Ink
✔️ Meta Browser
AR-, VR- und Netzwerkfähigkeiten in Needle Engine sind modular aufgebaut. Sie können wählen, ob Sie keine davon unterstützen oder nur bestimmte Funktionen hinzufügen möchten.
Teleportation aktivieren
Fügen Sie eine TeleportTarget-Komponente zu Objekthierarchien hinzu, auf die teleportiert werden kann.
Um bestimmte Objekte auszuschließen, setzen Sie deren Layer auf IgnoreRaycasting.
Networking aktivieren
Fügen Sie eine SyncedRoom-Komponente hinzu.
Desktop Viewer Sync aktivieren
Fügen Sie eine SyncedCamera-Komponente hinzu.
Voice Chat aktivieren
Fügen Sie eine VoIP-Komponente hinzu.
:::tip Szenenstruktur Diese Komponenten können sich überall in Ihrer Hierarchie befinden. Sie können auch alle auf demselben GameObject liegen, was ein übliches Muster ist. :::
AR-Session-Root und -Skalierung definieren
Fügen Sie Ihrem Root-Objekt eine WebARSessionRoot-Komponente hinzu. Bei AR-Erlebnissen möchten Sie die Szene oft so skalieren, dass sie in die reale Welt passt.
Definieren Sie die Benutzerskala, um den Benutzer beim Betreten von AR im Verhältnis zur Szene zu verkleinern (< 1) oder zu vergrößern (> 1).
Definieren Sie, ob ein Objekt im Browser, in AR, in VR, in der First Person oder in der Third Person sichtbar ist
Fügen Sie dem Objekt, das Sie steuern möchten, eine XR Flag-Komponente hinzu.
Ändern Sie die Optionen im Dropdown nach Bedarf. Gängige Anwendungsfälle sind
Ausblenden von Böden beim Betreten von AR
Ausblenden von Avatar-Teilen in der First oder Third Person Ansicht. In der First-Person-Ansicht sollte eine Person zum Beispiel ihr eigenes Kopfmodell nicht sehen können.
Derzeit wird dies nur auf Oculus Quest 1, 2 und 3 im Oculus Browser unterstützt. Auf anderen Plattformen werden Benutzer aus ihrer aktuellen immersiven Sitzung geworfen und müssen auf der neuen Seite VR erneut betreten.
Erfordert die Aktivierung eines Browser-Flags: chrome://flags/#webxr-navigation-permission
Klicken Sie auf Objekte, um Links zu öffnen
Fügen Sie die OpenURL-Komponente hinzu, die es sehr einfach macht, verbundene Welten zu erstellen.
Auch wenn wir derzeit keine sofort einsatzbereite Integration externer Avatarsysteme anbieten, können Sie anwendungsspezifische Avatare oder benutzerdefinierte Systeme erstellen.
Einen benutzerdefinierten Avatar erstellen
Erstellen Sie ein leeres GameObject als Avatar-Wurzel
Fügen Sie ein Objekt mit dem Namen Head hinzu und fügen Sie eine XRFlag hinzu, die auf Third Person eingestellt ist
Fügen Sie Objekte mit den Namen HandLeft und HandRight hinzu
Fügen Sie Ihre Grafiken unterhalb dieser Objekte hinzu.
Es gibt eine Reihe experimenteller Komponenten, um ausdrucksstärkere Avatare zu erstellen. Zu diesem Zeitpunkt empfehlen wir, sie zu duplizieren, um eigene Varianten zu erstellen, da sie später geändert oder entfernt werden könnten.
Zufällige Spielerfarben
Als Beispiel für die Avatar-Anpassung können Sie eine PlayerColor-Komponente zu Ihren Renderern hinzufügen.
Diese zufällige Farbe wird zwischen den Spielern synchronisiert.
AugenrotationAvatarEyeLook_Rotation dreht GameObjects (Augen), um anderen Avataren und einem zufälligen Ziel zu folgen. Diese Komponente wird zwischen den Spielern synchronisiert.
AugenblinzelnAvatarBlink_Simple versteckt GameObjects (Augen) zufällig alle paar Sekunden und imitiert so ein Blinzeln.
Offset ConstraintOffsetConstraint ermöglicht das Verschieben eines Objekts im Verhältnis zu einem anderen im Avatar-Raum. Dies ermöglicht es beispielsweise, dass ein Body dem Head folgt, aber die Rotation ausgerichtet bleibt. Es ermöglicht auch den Aufbau einfacher Halsmodelle.
Limb ConstraintBasicIKConstraint ist ein sehr minimalistisches Constraint, das zwei Transforms und einen Hinweis benötigt. Dies ist nützlich, um einfache Arm- oder Beinketten zu konstruieren. Da die Rotation derzeit nicht richtig implementiert ist, müssen Arme und Beine möglicherweise rotationssymmetrisch sein, damit sie "richtig aussehen". Es heißt aus gutem Grund "Basic"!
Wenn Sie unterschiedliche HTML-Inhalte anzeigen möchten, je nachdem, ob der Client einen regulären Browser oder AR oder VR verwendet, können Sie einfach eine Reihe von HTML-Klassen verwenden.
Dies wird über HTML-Elementklassen gesteuert. Um Inhalte beispielsweise auf dem Desktop und in AR erscheinen zu lassen, fügen Sie ein <div class="desktop ar"> ... </div> innerhalb des <needle-engine>-Tags hinzu:
Inhalts-Overlays werden mithilfe der optionalen dom-overlay-Funktion implementiert, die normalerweise auf bildschirmbasierten AR-Geräten (Telefone, Tablets) unterstützt wird.
Augmented Reality-Erlebnisse auf iOS sind etwas eingeschränkt, da Apple WebXR derzeit auf iOS-Geräten nicht unterstützt.
:::tip Begrenzte Unterstützung für benutzerdefinierten Code in QuickLook Apple hat starke Einschränkungen hinsichtlich der Art von Inhalten festgelegt, die in QuickLook verwendet werden können. Daher können benutzerdefinierte Skriptkomponenten nicht automatisch für die Verwendung in AR auf iOS konvertiert werden. Sie können mithilfe unserer Everywhere Actions API Unterstützung für einige Arten von benutzerdefiniertem Code hinzufügen. :::
Hier ist ein Beispiel für ein Musikinstrument, das Everywhere Actions verwendet und daher in Browsern und in AR auf iOS-Geräten funktioniert. Es verwendet räumliches Audio, Animation und Tap-Interaktionen.
Es gibt auch andere Optionen, um iOS-Benutzer zu noch leistungsfähigeren interaktiven AR-Erlebnissen zu führen:
Verwendung des Kamerazugriffs und benutzerdefinierter Algorithmen auf iOS-Geräten. Man kann den Zugriff auf das Kamerabild anfordern und benutzerdefinierte Algorithmen ausführen, um die Geräteposition zu bestimmen. Obwohl wir derzeit keine integrierten Komponenten dafür bereitstellen, finden Sie hier einige Verweise auf Bibliotheken und Frameworks, die wir in Zukunft ausprobieren möchten:
Besuchen Sie chrome://flags in Ihrem Android Chrome-Browser
Suchen und aktivieren Sie die Option WebXR Incubations
:::
Ohne diese Spezifikation kann man immer noch den Zugriff auf das Kamerabild anfordern und benutzerdefinierte Algorithmen ausführen, um die Geräteposition zu bestimmen. Der Nachteil ist, dass Benutzer zusätzliche Berechtigungen wie Kamerazugriff akzeptieren müssen und das Tracking nicht so genau sein wird wie mit den nativen Fähigkeiten des Geräts.
Hier sind einige Bibliotheken, um Bild-Tracking basierend auf Kamerazugriff und lokalen Computer-Vision-Algorithmen hinzuzufügen:
Keine vollständige Code-Unterstützung, aber Needle werden zur Erstellung dynamischer, interaktiver USDZ-Dateien unterstützt.
erfordert Looking Glass Bridge und etwas eigenen Code,
offiziell unterstützt, siehe
1: Erfordert die Aktivierung eines Browser-Flags: chrome://flags/#webxr-navigation-permission2: Erfordert die Aktivierung einer Einstellung in den Entwickleroptionen3: Verwendet oder
Besuchen Sie unsere , um viele interaktive Beispiele sofort auszuprobieren. Oder testen Sie es live auf Ihrem Gerät, indem Sie auf die Schaltflächen QR-Code (für Telefone) oder Auf Quest öffnen (für Meta Quest-Headsets) unten klicken.
AR und VR aktivieren
Fügen Sie eine WebXR-Komponente hinzu.Optional: Sie können einen benutzerdefinierten Avatar festlegen, indem Sie auf ein verweisen.
Standardmäßig ist ein einfacher DefaultAvatar zugewiesen.
verwendet alle oben genannten Funktionen für ein plattformübergreifendes Multiplayer-Sandbox-Erlebnis. – #madebyneedle 💚
Needle Engine unterstützt den -Zustand. Dies ermöglicht Benutzern, nahtlos zwischen WebXR-Anwendungen zu wechseln, ohne eine immersive Sitzung zu verlassen – sie bleiben in VR oder AR.
Lesen Sie mehr über Scripting für XR in der
Beispiel Avatar Rig mit einfachem Halsmodell und Gliedmaßen-Constraints
Beispiel Avatar Prefab Hierarchie
Verwenden Sie die Klasse .ar-session-active, um spezifische Inhalte während der AR-Sitzung ein-/auszublenden. Die Pseudoklasse sollte derzeit nicht verwendet werden, da ihre Verwendung den WebXR Viewer von Mozilla beschädigt.
Es ist erwähnenswert, dass das Overlay-Element , unabhängig von angewendeten Stildefinitionen. Wenn Sie Elemente anders ausrichten möchten, sollten Sie einen Container innerhalb des Elements mit der Klasse class="ar" erstellen.
Needle Engine's wurden entwickelt, um diese Lücke zu schließen und automatische interaktive Funktionen auf iOS-Geräten für Szenen zu ermöglichen, die aus spezifischen Komponenten bestehen. Sie unterstützen eine Teilmenge der Funktionalität, die in WebXR verfügbar ist, zum Beispiel räumliches Audio, Bild-Tracking, Animationen und mehr. Weitere Informationen finden Sie in .
On-the-fly-Export von Inhalten als USDZ-Dateien. Diese Dateien können auf iOS-Geräten in AR angezeigt werden. Beim Export aus Szenen mit Everywhere Actions ist die Interaktivität dieselbe, mehr als ausreichend für Produktkonfiguratoren, narrative Erlebnisse und Ähnliches. Ein Beispiel ist , wo Kreationen (nicht die Live-Sitzung) in AR betrachtet werden können.
verwendet diesen Ansatz. Spieler können kollaborativ Text in die Szene auf ihren Bildschirmen platzieren und dann die Ergebnisse in AR auf iOS ansehen. Auf Android können sie auch direkt in WebXR interagieren. – #madewithneedle von Katja Rempel 💚
Führen von Benutzern zu WebXR-kompatiblen Browsern auf iOS. Je nach Zielgruppe können Sie Benutzer auf iOS beispielsweise zum von Mozilla führen, um AR auf iOS zu erleben.
(Open Source)
von FireDragonGameStudio
(Open Source)
(kommerziell)
Needle Engine unterstützt WebXR Bild-Tracking () auf Android und QuickLook Bild-Tracking auf iOS.
Zusätzliche Dokumentation finden Sie im Abschnitt .
:::warning WebXR Bild-Tracking befindet sich noch in einer "Draft"-Phase und ist nicht allgemein verfügbar Bislang konnten sich die Browser-Anbieter noch nicht auf die endgültige Image Tracking API für WebXR einigen. Solange die Spezifikation in der "Draft"-Phase ist (), müssen Sie und die Benutzer Ihrer App die folgenden Schritte ausführen, um WebXR ImageTracking auf Android-Geräten zu aktivieren:
von FireDragonGameStudio
(Open Source)
(Open Source)
Seite automatisch mit KI übersetzt
