Si vous avez déjà utilisé l'API WebXR Device, vous êtes presque prêt.
L'API WebXR Device a été publiée l'automne dernier dans Chrome 79. Comme indiqué à l'époque, l'implémentation de l'API dans Chrome est en cours. Chrome est heureux d'annoncer que certains travaux sont terminés. Chrome 81 introduit deux nouvelles fonctionnalités:
Cet article concerne la réalité augmentée. Si vous avez déjà utilisé l'API WebXR Device, vous serez ravi d'apprendre qu'il n'y a que très peu de nouveautés à découvrir. L'accès à une session WebXR est en grande partie identique. L'exécution d'une boucle de frame est essentiellement la même. Les différences résident dans les configurations qui permettent d'afficher le contenu de manière appropriée pour la réalité augmentée. Si vous n'êtes pas familier avec les concepts de base de WebXR, vous devez lire mes articles précédents sur l'API WebXR Device ou au moins connaître les sujets abordés. Vous devez savoir comment demander et entrer dans une session, et vous devez savoir comment exécuter une boucle de frame.
Pour en savoir plus sur les tests de positionnement, consultez l'article associé Positionner des objets virtuels dans des vues du monde réel. Le code de cet article est basé sur l'exemple de session d'AR immersive (source de démonstration) des exemples d'API WebXR Device du groupe de travail sur le Web immersif.
Avant de vous intéresser au code, vous devez utiliser l'exemple de session de RA immersive au moins une fois. Vous devez disposer d'un téléphone Android moderne équipé de Chrome 81 ou version ultérieure.
À quoi cela sert-il ?
La réalité augmentée sera un ajout intéressant à de nombreuses pages Web existantes ou nouvelles, car elle leur permettra d'implémenter des cas d'utilisation de la RA sans quitter le navigateur. Par exemple, il peut aider les utilisateurs à apprendre sur des sites éducatifs et permettre aux acheteurs potentiels de visualiser des objets dans leur maison lorsqu'ils font des achats.
Prenons le deuxième cas d'utilisation. Imaginez simuler le placement d'une représentation grandeur nature d'un objet virtuel dans une scène réelle. Une fois placée, l'image reste sur la surface sélectionnée, apparaît à la taille qu'elle aurait si l'élément réel se trouvait sur cette surface et permet à l'utilisateur de l'entourer, de s'en rapprocher ou de s'en éloigner. Cela permet aux spectateurs d'obtenir une compréhension plus approfondie de l'objet qu'avec une image en deux dimensions.
Je vais peut-être un peu trop vite. Pour réaliser ce que j'ai décrit, vous avez besoin de fonctionnalités de RA et de moyens de détecter les surfaces. Cet article concerne la première option. L'article associé sur l'API WebXR Hit Test (dont le lien figure ci-dessus) traite de ce dernier.
Demander une session
La demande d'une session est très semblable à ce que vous avez vu précédemment. Commencez par vérifier si le type de session souhaité est disponible sur l'appareil actuel en appelant xr.isSessionSupported()
. Au lieu de demander 'immersive-vr'
comme précédemment, demandez 'immersive-ar'
.
if (navigator.xr) {
const supported = await navigator.xr.isSessionSupported('immersive-ar');
if (supported) {
xrButton.addEventListener('click', onButtonClicked);
xrButton.textContent = 'Enter AR';
xrButton.enabled = supported; // supported is Boolean
}
}
Comme précédemment, un bouton "Accéder à la RA" s'active. Lorsque l'utilisateur clique dessus, appelez xr.requestSession()
, en transmettant également 'immersive-ar'
.
let xrSession = null;
function onButtonClicked() {
if (!xrSession) {
navigator.xr.requestSession('immersive-ar')
.then((session) => {
xrSession = session;
xrSession.isImmersive = true;
xrButton.textContent = 'Exit AR';
onSessionStarted(xrSession);
});
} else {
xrSession.end();
}
}
Une propriété de commodité
Vous avez probablement remarqué que j'ai mis en surbrillance deux lignes dans le dernier exemple de code.
L'objet XRSession
semble avoir une propriété appelée isImmersive
. Il s'agit d'une propriété pratique que j'ai créée moi-même et qui ne fait pas partie de la spécification. Je l'utiliserai plus tard pour prendre des décisions sur ce que je dois montrer au spectateur. Pourquoi cette propriété ne fait-elle pas partie de l'API ? Étant donné que votre application peut avoir besoin de suivre cette propriété différemment, les auteurs de la spécification ont décidé de garder l'API propre.
Lancer une session
Rappelez-vous à quoi ressemblait onSessionStarted()
dans mon article précédent:
function onSessionStarted(xrSession) {
xrSession.addEventListener('end', onSessionEnded);
let canvas = document.createElement('canvas');
gl = canvas.getContext('webgl', { xrCompatible: true });
xrSession.updateRenderState({
baseLayer: new XRWebGLLayer(session, gl)
});
xrSession.requestReferenceSpace('local-floor')
.then((refSpace) => {
xrRefSpace = refSpace;
xrSession.requestAnimationFrame(onXRFrame);
});
}
Je dois ajouter quelques éléments pour prendre en compte le rendu de la réalité augmentée. Désactiver l'arrière-plan Tout d'abord, je vais déterminer si j'ai besoin de l'arrière-plan. C'est la première fois que j'utilise ma propriété de commodité.
function onSessionStarted(xrSession) {
xrSession.addEventListener('end', onSessionEnded);
if (session.isImmersive) {
removeBackground();
}
let canvas = document.createElement('canvas');
gl = canvas.getContext('webgl', { xrCompatible: true });
xrSession.updateRenderState({
baseLayer: new XRWebGLLayer(session, gl)
});
refSpaceType = xrSession.isImmersive ? 'local' : 'viewer';
xrSession.requestReferenceSpace(refSpaceType).then((refSpace) => {
xrSession.requestAnimationFrame(onXRFrame);
});
}
Espaces de référence
Dans mes articles précédents, j'ai à peine abordé les espaces de référence. L'exemple que je décris en utilise deux. Il est donc temps de corriger cette omission.
Un espace de référence décrit la relation entre le monde virtuel et l'environnement physique de l'utilisateur. Pour ce faire, il:
- Spécification de l'origine du système de coordonnées utilisé pour exprimer les positions dans le monde virtuel.
- Indique si l'utilisateur doit se déplacer dans ce système de coordonnées.
- Indique si ce système de coordonnées a des limites prédéfinies. (Les exemples présentés ici n'utilisent pas de systèmes de coordonnées avec des limites prédéfinies.)
Pour tous les espaces de référence, la coordonnée X indique la gauche et la droite, la coordonnée Y indique le haut et le bas, et la coordonnée Z indique l'avant et l'arrière. Les valeurs positives correspondent respectivement à la droite, à la hausse et à l'arrière.
Les coordonnées renvoyées par XRFrame.getViewerPose()
dépendent du type d'espace de référence demandé.
Nous y reviendrons plus tard lorsque nous aborderons la boucle de frame. Pour le moment, nous devons sélectionner un type de référence adapté à la réalité augmentée. Là encore, cette méthode utilise ma propriété de commodité.
let refSpaceType
function onSessionStarted(xrSession) {
xrSession.addEventListener('end', onSessionEnded);
if (session.isImmersive) {
removeBackground();
}
let canvas = document.createElement('canvas');
gl = canvas.getContext('webgl', { xrCompatible: true });
xrSession.updateRenderState({
baseLayer: new XRWebGLLayer(session, gl)
});
refSpaceType = xrSession.isImmersive ? 'local' : 'viewer';
xrSession.requestReferenceSpace(refSpaceType).then((refSpace) => {
xrSession.requestAnimationFrame(onXRFrame);
});
}
Si vous avez consulté l'exemple de session d'AR immersive, vous remarquerez que la scène est initialement statique et pas du tout en réalité augmentée. Vous pouvez faire glisser votre doigt et balayer l'écran pour vous déplacer dans la scène. Si vous cliquez sur "START AR" (DÉMARRER LA RA), l'arrière-plan disparaît et vous pouvez vous déplacer dans la scène en déplaçant l'appareil. Les modes utilisent différents types d'espaces de référence. Le texte en surbrillance ci-dessus montre comment cette sélection s'effectue. Il utilise les types de références suivants:
local
: l'origine se trouve à la position de l'utilisateur au moment de la création de la session. Cela signifie que l'expérience n'a pas nécessairement de niveau bien défini et que la position exacte de l'origine peut varier d'une plate-forme à l'autre. Bien qu'il n'y ait pas de limites prédéfinies pour l'espace, le contenu doit pouvoir être vu sans autre mouvement que la rotation. Comme vous pouvez le voir dans notre propre exemple d'AR, il est possible de se déplacer dans l'espace.
viewer
: utilisé le plus souvent pour le contenu présenté en ligne sur la page, cet espace suit l'appareil de visionnage. Lorsqu'il est transmis à getViewerPose, il ne fournit aucun suivi et signale donc toujours une pose à l'origine, sauf si l'application le modifie avec XRReferenceSpace.getOffsetReferenceSpace()
. L'exemple utilise cela pour activer le panoramique de l'appareil photo par commande tactile.
Exécuter une boucle de frames
Conceptuellement, rien ne change par rapport à ce que j'ai fait dans la session de RV décrite dans mes articles précédents. Transmettez le type d'espace de référence à XRFrame.getViewerPose()
.
Le XRViewerPose
renvoyé correspond au type d'espace de référence actuel. L'utilisation de viewer
par défaut permet à une page d'afficher des aperçus de contenu avant que l'autorisation de l'utilisateur ne soit demandée pour la RA ou la RV. Cela illustre un point important: le contenu intégré utilise la même boucle de frame que le contenu immersif, ce qui réduit la quantité de code à gérer.
function onXRFrame(hrTime, xrFrame) {
let xrSession = xrFrame.session;
xrSession.requestAnimationFrame(onXRFrame);
let xrViewerPose = xrFrame.getViewerPose(refSpaceType);
if (xrViewerPose) {
// Render based on the pose.
}
}
Conclusion
Cette série d'articles ne couvre que les principes de base de l'implémentation de contenus immersifs sur le Web. De nombreuses autres fonctionnalités et cas d'utilisation sont présentées dans les exemples d'API WebXR Device du groupe de travail sur le Web immersif. Nous venons également de publier un article sur les tests de positionnement qui explique une API permettant de détecter des surfaces et de placer des éléments virtuels dans une vue d'appareil photo réelle. Consultez-les et suivez le blog web.dev pour en savoir plus au cours de l'année à venir.
Photo de David Grandmougin sur Unsplash