Unterstützte Geräte

Needle Engine unterstützt die vollständige WebXR-Spezifikation, 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.

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.

¹: Erfordert die Aktivierung eines Browser-Flags: chrome://flags/#webxr-navigation-permission²: Erfordert die Aktivierung einer Einstellung in den Entwickleroptionen ³: Verwendet Everywhere Actions oder andere Ansätze

VR-, AR- und QuickLook-Beispiele

Besuchen Sie unsere Needle Engine Samples, 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.

Hinzufügen von VR- und AR-Funktionen zu einer Szene

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.

Grundfunktionen

1. AR und VR aktivieren Fügen Sie eine WebXR-Komponente hinzu. Optional: Sie können einen benutzerdefinierten Avatar festlegen, indem Sie auf ein Avatar Prefab verweisen. Standardmäßig ist ein einfacher DefaultAvatar zugewiesen.

2. 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.

Multiplayer

1. Networking aktivieren Fügen Sie eine SyncedRoom-Komponente hinzu.

2. Desktop Viewer Sync aktivieren Fügen Sie eine SyncedCamera-Komponente hinzu.

3. Voice Chat aktivieren Fügen Sie eine VoIP-Komponente hinzu.

Castle Builder verwendet alle oben genannten Funktionen für ein plattformübergreifendes Multiplayer-Sandbox-Erlebnis. – #madebyneedle 💚

Spezielle AR-Komponenten

1. 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.
2. Definieren Sie die Benutzerskala, um den Benutzer beim Betreten von AR im Verhältnis zur Szene zu verkleinern (< 1) oder zu vergrößern (> 1).

Steuerung der Objektanzeige für XR

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.

2. Ä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.

Reisen zwischen VR-Welten

Needle Engine unterstützt den sessiongranted-Zustand. Dies ermöglicht Benutzern, nahtlos zwischen WebXR-Anwendungen zu wechseln, ohne eine immersive Sitzung zu verlassen – sie bleiben in VR oder AR.

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.

Scripting

Lesen Sie mehr über Scripting für XR in der XR-Scripting-Dokumentation

Avatare

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.

Experimentelle Avatar-Komponenten

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.

Beispiel Avatar Rig mit einfachem Halsmodell und Gliedmaßen-Constraints

• 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.

Beispiel Avatar Prefab Hierarchie

• 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"!

HTML-Inhalts-Overlays in AR

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:

<needle-engine>
    <div class="desktop ar" style="pointer-events:none;">
        <div class="positioning-container">
          <p>Ihr Inhalt für AR und Desktop kommt hier rein</p>
          <p class="only-in-ar">Dies wird nur in AR sichtbar sein</p>
        <div>
    </div>
</needle-engine>

Inhalts-Overlays werden mithilfe der optionalen dom-overlay-Funktion implementiert, die normalerweise auf bildschirmbasierten AR-Geräten (Telefone, Tablets) unterstützt wird.

Verwenden Sie die Klasse .ar-session-active, um spezifische Inhalte während der AR-Sitzung ein-/auszublenden. Die Pseudoklasse :xr-overlay sollte derzeit nicht verwendet werden, da ihre Verwendung den WebXR Viewer von Mozilla beschädigt.

.only-in-ar {
  display: none;
}

.ar-session-active .only-in-ar {
  display:initial;
}

Es ist erwähnenswert, dass das Overlay-Element während der XR-Sitzung immer im Vollbildmodus angezeigt wird, 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.

Augmented Reality und WebXR auf iOS

Augmented Reality-Erlebnisse auf iOS sind etwas eingeschränkt, da Apple WebXR derzeit auf iOS-Geräten nicht unterstützt.

Needle Engine's Everywhere Actions 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 der Dokumentation.

Musikinstrument – WebXR- und QuickLook-Unterstützung

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.

Everywhere Actions und andere Optionen für iOS AR

Es gibt auch andere Optionen, um iOS-Benutzer zu noch leistungsfähigeren interaktiven AR-Erlebnissen zu führen:

3. 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 Castle Builder, wo Kreationen (nicht die Live-Sitzung) in AR betrachtet werden können.

Encryption in Space 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 💚

1. Führen von Benutzern zu WebXR-kompatiblen Browsern auf iOS. Je nach Zielgruppe können Sie Benutzer auf iOS beispielsweise zum WebXR Viewer von Mozilla führen, um AR auf iOS zu erleben.

2. 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:

   • AR.js (Open Source)
     • Experimentelle AR.js-Integration von FireDragonGameStudio
   • Mind AR (Open Source)
   • 8th Wall (kommerziell)

Bild-Tracking

Needle Engine unterstützt WebXR Bild-Tracking (Live-Demo) auf Android und QuickLook Bild-Tracking auf iOS.

Zusätzliche Dokumentation finden Sie im Abschnitt Everywhere Actions.

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:

• Experimentelle AR.js-Integration mit Needle Engine von FireDragonGameStudio
• AR.js (Open Source)
• Mind AR (Open Source)

Referenzen

WebXR Device APIcaniuse: WebXRApples vorläufige USD-Verhaltensweisen Seite automatisch mit KI übersetzt