Appareils compatibles

Needle Engine prend en charge la spécification complète WebXR specification, y compris l'AR et la VR. WebXR est un standard web officiel qui apporte des expériences immersives sur le web, avec tous les avantages du web : aucune installation, pas de boutique d'applications, aucun SDK requis.

Tous les appareils dotés d'un navigateur peuvent exécuter des applications créées avec Needle. Si le navigateur prend en charge WebXR, vos applications fonctionneront également automatiquement en XR, en utilisant nos composants intégrés. Cela inclut les navigateurs de bureau, les navigateurs mobiles, de nombreux navigateurs sur les casques AR/VR, mais aussi d'autres technologies émergentes comme les écrans Looking Glass, les lunettes intelligentes, et plus encore.

Le tableau suivant répertorie certains des appareils que nous avons vérifiés comme fonctionnant avec Needle Engine. Lorsqu'un nouvel appareil compatible WebXR sort, il fonctionnera directement avec vos applications. C'est l'un des grands avantages de la construction avec le navigateur comme plateforme – la compatibilité n'est pas limitée à un ensemble spécifique d'appareils ou de SDKs.

¹: Nécessite l'activation d'un flag de navigateur : chrome://flags/#webxr-navigation-permission²: Nécessite l'activation d'une option dans les paramètres Développeur ³: Utilise les Everywhere Actions ou d'autres approches

Exemples VR, AR et QuickLook

Visitez nos Exemples Needle Engine pour essayer de nombreux exemples interactifs dès maintenant. Ou, essayez-le en direct sur votre appareil en cliquant sur les boutons QR Code (pour téléphones) ou Open on Quest (pour casques Meta Quest) ci-dessous.

Ajouter des capacités VR et AR à une scène

Les capacités AR, VR et réseau dans Needle Engine sont conçues pour être modulaires. Vous pouvez choisir de n'en supporter aucune, ou d'ajouter seulement des fonctionnalités spécifiques.

Capacités de base

1. Activer l'AR et la VR Ajoutez un composant WebXR. Optionnel : vous pouvez définir un avatar personnalisé en référençant un Prefab d'Avatar. Par défaut, un DefaultAvatar de base est assigné.

2. Activer la téléportation Ajoutez un composant TeleportTarget aux hiérarchies d'objets sur lesquelles on peut se téléporter. Pour exclure des objets spécifiques, définissez leur calque sur IgnoreRaycasting.

Multijoueur

1. Activer le réseau Ajoutez un composant SyncedRoom.

2. Activer la synchronisation de la vue de bureau Ajoutez un composant SyncedCamera.

3. Activer le chat vocal Ajoutez un composant VoIP.

Castle Builder utilise tout ce qui précède pour une expérience sandbox multijoueur multiplateforme. — #madebyneedle 💚

Composants AR spéciaux

1. Définir la racine et l'échelle de la session AR Ajoutez un composant WebARSessionRoot à votre objet racine. Pour les expériences AR, vous souhaitez souvent mettre la scène à l'échelle pour l'adapter au monde réel.
2. Définir l'échelle de l'utilisateur pour rétrécir (< 1) ou agrandir (> 1) l'utilisateur par rapport à la scène lors de l'entrée en AR.

Contrôler l'affichage des objets pour la XR

1. Définir si un objet est visible dans le Navigateur, AR, VR, Première Personne, Troisième Personne Ajoutez un composant XR Flag à l'objet que vous souhaitez contrôler.

2. Modifier les options dans la liste déroulante selon les besoins. Les cas d'utilisation courants sont

   • masquer les sols lors de l'entrée en AR
   • masquer des parties d'Avatar dans les vues Première Personne ou Troisième Personne. Par exemple, en vue première personne, une personne ne devrait pas voir son propre modèle de tête.

Voyager entre les mondes VR

Needle Engine prend en charge l'état sessiongranted. Cela permet aux utilisateurs de naviguer de manière transparente entre les applications WebXR sans quitter une session immersive – ils restent en VR ou en AR.

Actuellement, cela n'est supporté que sur Oculus Quest 1, 2 et 3 dans le navigateur Oculus. Sur d'autres plateformes, les utilisateurs seront éjectés de leur session immersive actuelle et devront entrer à nouveau en VR sur la nouvelle page. Nécessite l'activation d'un flag de navigateur : chrome://flags/#webxr-navigation-permission

• Cliquer sur des objets pour ouvrir des liens Ajoutez le composant OpenURL qui facilite grandement la construction de mondes connectés.

Scripting

En savoir plus sur le scripting pour la XR dans la documentation scripting XR

Avatars

Bien que nous ne fournissions pas actuellement d'intégration prête à l'emploi pour les systèmes d'avatar externes, vous pouvez créer des avatars spécifiques à l'application ou des systèmes personnalisés.

• Créer un Avatar personnalisé
  • Créez un GameObject vide comme racine d'avatar
  • Ajoutez un objet nommé Head et ajoutez un XRFlag défini sur Third Person
  • Ajoutez des objets nommés HandLeft et HandRight
  • Ajoutez vos graphiques sous ces objets.

Composants d'Avatar expérimentaux

Il existe un certain nombre de composants expérimentaux pour construire des Avatars plus expressifs. À ce stade, nous recommandons de les dupliquer pour créer vos propres variantes, car ils pourraient être modifiés ou supprimés ultérieurement.

Exemple de Rig d'Avatar avec modèle de cou de base et contraintes de membres

• Couleurs aléatoires du joueur À titre d'exemple de personnalisation d'avatar, vous pouvez ajouter un composant PlayerColor à vos renderers. Cette couleur aléatoire est synchronisée entre les joueurs.

• Rotation des yeuxAvatarEyeLook_Rotation fait pivoter les GameObjects (yeux) pour suivre d'autres avatars et une cible aléatoire. Ce composant est synchronisé entre les joueurs.

• Clignement des yeuxAvatarBlink_Simple cache aléatoirement des GameObjects (yeux) toutes les quelques secondes, émulant un clignement.

Exemple de hiérarchie de Prefab d'Avatar

• Contrainte d'OffsetOffsetConstraint permet de décaler un objet par rapport à un autre dans l'espace d'Avatar. Cela permet, par exemple, d'avoir un Corps suivant la Tête mais en maintenant la rotation nivelée. Cela permet également de construire des modèles de cou simples.

• Contrainte de membreBasicIKConstraint est une contrainte très minimaliste qui prend deux transforms et un indice. C'est utile pour construire de simples chaînes de bras ou de jambes. Comme la rotation n'est pas correctement implémentée actuellement, les bras et les jambes peuvent devoir être symétriques en rotation pour "paraître corrects". Elle s'appelle "Basic" pour une raison !

Superpositions de contenu HTML en AR

Si vous souhaitez afficher un contenu html différent selon que le client utilise un navigateur normal ou l'AR ou la VR, vous pouvez simplement utiliser un ensemble de classes html. Ceci est contrôlé via les classes d'éléments HTML. Par exemple, pour faire apparaître du contenu sur le bureau et en AR, ajoutez un <div class="desktop ar"> ... </div> à l'intérieur de la balise <needle-engine> :

<needle-engine>
    <div class="desktop ar" style="pointer-events:none;">
        <div class="positioning-container">
          <p>votre contenu pour AR et bureau va ici</p>
          <p class="only-in-ar">Ceci ne sera visible qu'en AR</p>
        <div>
    </div>
</needle-engine>

Les superpositions de contenu sont implémentées en utilisant la fonctionnalité optionnelle dom-overlay qui est généralement supportée sur les appareils AR basés sur écran (téléphones, tablettes).

Utilisez la classe .ar-session-active pour montrer/cacher du contenu spécifique pendant que vous êtes en AR. La pseudo-classe :xr-overlay ne devrait pas être utilisée à ce stade car son utilisation casse le WebXR Viewer de Mozilla.

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

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

Il est à noter que l'élément de superposition sera toujours affiché en plein écran pendant la XR, indépendamment du style appliqué. Si vous souhaitez aligner différemment les éléments, vous devriez créer un conteneur à l'intérieur de l'élément class="ar".

Réalité Augmentée et WebXR sur iOS

Les expériences de Réalité Augmentée sur iOS sont quelque peu limitées, car Apple ne prend pas actuellement en charge WebXR sur les appareils iOS.

Les Everywhere Actions de Needle Engine sont conçues pour combler cette lacune, apportant des capacités interactives automatiques aux appareils iOS pour les scènes composées de composants spécifiques. Elles supportent un sous-ensemble des fonctionnalités disponibles dans WebXR, par exemple l'audio spatial, le suivi d'image, les animations, et plus encore. Voir la documentation pour plus d'informations.

Instrument de musique – Support WebXR et QuickLook

Voici un exemple d'instrument de musique qui utilise les Everywhere Actions et fonctionne donc dans les navigateurs et en AR sur les appareils iOS. Il utilise l'audio spatial, l'animation et les interactions par tapotement.

Everywhere Actions et autres options pour l'AR sur iOS

Il existe également d'autres options pour guider les utilisateurs iOS vers des expériences AR interactives encore plus performantes :

3. Exporter du contenu à la volée en fichiers USDZ. Ces fichiers peuvent être affichés sur les appareils iOS en AR. Lorsqu'ils sont exportés depuis des scènes avec Everywhere Actions, l'interactivité est la même, plus que suffisante pour les configurateurs de produits, les expériences narratives et similaires. Un exemple est Castle Builder où les créations (pas la session en direct) peuvent être visualisées en AR.

Encryption in Space utilise cette approche. Les joueurs peuvent placer du texte en collaboration dans la scène sur leurs écrans, puis visualiser les résultats en AR sur iOS. Sur Android, ils peuvent également interagir directement dans WebXR. — #madewithneedle by Katja Rempel 💚

1. Guider les utilisateurs vers des navigateurs compatibles WebXR sur iOS. Selon votre public cible, vous pouvez guider les utilisateurs sur iOS vers, par exemple, le WebXR Viewer de Mozilla pour faire l'expérience de l'AR sur iOS.

2. Utiliser l'accès à la caméra et des algorithmes personnalisés sur les appareils iOS. On peut demander l'accès à l'image de la caméra et exécuter des algorithmes personnalisés pour déterminer la pose de l'appareil. Bien que nous ne fournissions pas actuellement de composants intégrés pour cela, voici quelques références de bibliothèques et de frameworks que nous souhaitons essayer à l'avenir :

   • AR.js (open source)
     • Experimental AR.js integration par FireDragonGameStudio
   • Mind AR (open source)
   • 8th Wall (commercial)

Suivi d'image

Needle Engine prend en charge le WebXR Image Tracking (Démo Live) sur Android et le QuickLook Image Tracking sur iOS.

Vous pouvez trouver de la documentation supplémentaire dans la section Everywhere Actions.

Sans cette spécification, on peut toujours demander l'accès à l'image de la caméra et exécuter des algorithmes personnalisés pour déterminer la pose de l'appareil. L'inconvénient est que les utilisateurs devront accepter des autorisations supplémentaires comme l'accès à la caméra, et que le suivi ne sera pas aussi précis qu'avec les capacités natives de l'appareil.

Voici quelques bibliothèques pour ajouter le suivi d'image basé sur l'accès à la caméra et des algorithmes de vision par ordinateur locaux :

• Experimental AR.js integration with Needle Engine par FireDragonGameStudio
• AR.js (open source)
• Mind AR (open source)

Références

WebXR Device APIcaniuse: WebXRComportements préliminaires USD d'Apple

Page automatiquement traduite à l'aide de l'IA