Interface Immersive v2

Petit questionnement sur l’interface à la suite de mon premier projet d’interface immersive.
Entre temps, Apple a annoncé son Vision Pro. Tout d’abord, la vision d’apple est de soustraire la manette du processus interactif et de régler les interactions par l’usage du hand tracking et du eye tracking.
Est-ce une démarche pour se différencier des autres constructeurs de casque de VR ? Le youtubeur Marques Brownlee explique ainsi que pour la présentation du Vision Pro à la WWDC n’ont jamais évoqué le terme de réalité virtuelle mais de spatial computing pour produire une distance avec les autres acteurs de la VR — il explique ainsi qu’il s’agit d’une stratégie déjà employée par Apple dans d’autres secteurs, à l’instar de l’intelligence artificielle où leurs nouveaux produits intègrent des modèles de machine learning, mais aucun ne fait l’état « d’IA »1.

Intégrer dans le Sony PSVR2, dans le Meta Quest Pro et dans le Vision Pro d’apple, le eye tracking ajoute une surcouche de possibilité d’interface et d’optimisation. En optimisation déjà, il permet d’effectuer le rendu de l’image en plus haute résolution à l’endroit où se porte le regard avec la technique dite du foveated rendering. Puis ce système permet aussi l’élaboration d’un effet de survol sur les parties de l’interface observées par l’utilisateur•trice.
En soustrayant l’usage des manettes, qui sont peut être contres-intuitives, Le Vision Pro veut sans doute s’éloigner d’une image de la VR largement associée au jeu vidéo. Mais cette absence enlève les retours haptiques — vibration validant une opération — qui constituent un feedback. Par quelle moyen peut-on indiquer une validation ?

Le quest 2, avec lequel je réalise des expérimentations en VR, n’a pas de système de eye tracking intégré mais uniquement du hand tracking. J’avais déjà identifié et décomposé différents systèmes d’interaction en hand tracking dans ce post et sa suite.
Ainsi, appuyer sur un interrupteur avec le hand tracking, malgré l’absence de retour haptique ne pose pas trop problème. L’action de pousser était moins agréable et pincer pour attraper un objet n’était pas conformable.

Hand Tracking en dehors de la réalité virtuelle et color picker

Il existe déjà des intégrations d’interaction en handtracking dans des systèmes numériques. Par exemple, Les expérimentations web de nahuel gerth. Il utilise mediapipe.js pour récupérer les coordonnées des différents points de la main puis utilise P5 js pour afficher des signes et caractères typographiques sur l’input vidéo ou même le transformer. Dans un autre registre lors de la Biennales Exemplaire de 2021 à Toulouse, notre groupe de recherche de la HEAR avait produit une interface s’activant à distance, avec une reconnaissance des mains et un calcul de distance entre le pouce et l’index pour définir une quantité. Cette mesure remplace ainsi un slider dans le cadre d’une interface « standard ». Ce type slider montre ces limites avec sa valeur maximal, qui est différente selon chaque individu, selon la distance à la caméra etc… .

La forme la plus courantes des sliders est un segment dont un point est sélectionable d’une extrémité à l’autre. C’est un objet qui permet de choisir une valeur sur une dimension. Les colors picker présents dans les interfaces graphiques doivent proposer une interface simple pour sélectionner une valeur parmi des millions de possibilité.

Si l’on analyse ce color picker html, on peut décomposer l’interface en trois parties distinctes : un input en RGB avec trois entrées, un sliders pour la teinte et un sliders en deux dimensions pour la saturation et la valeur. L’input RGB est utile pour entrer un couleur de façon très précise mais les deux autres sliders permettent de choisir une couleur. La sélection se fait en espace HSV (Hue Saturation Value), car il est plus simple et « naturelle » qu’en RVB : la teinte est sélectionné d’un coté puis la valeur et la saturation de l’autre. La sélection de la valeur sur la saturation s’effectue dans une surface rectangulaire en deux dimensions bornés et continues.

Est-ce qu’on pourrait produire un sliders en 3D qui permettrait de choisir une couleur ?

Si dessus un prototype de sliders de couleurs 3d où les dimensions du cube sont associées au valeur HSL de l’output. C’est encore une ébauche, il faudrait déjà tester d’autres espaces colorimétriques (RGB, LAB …) puis aussi en terme de rendu de la « boite » de sélection, comment rendre compte du volume ?

Peut-être faut-il analyser d’autre color picker en deux dimension ?

Autre Color Picker ou le slider 2D correspond à la teinte sur la saturation
Color Picker Photoshop construit de la même manière que le premier présenté avec un slider 1D pour la teinte et un slider 2D pour la valeur sur la saturation
Color Picker Photoshop RVB avec un slider pour le B et un slider 2D pour le R sur le V
Slider LAB Photoshop avec la light sur un slider 1D et le A sur B pour le sliders en 2D.

Pinch is the new click !

Meta, Sony et maintenant Apple ont, dans leurs implémentations du « click », choisi le mouvement de pincer entre l’index et le pouce. Si il s’agit du clique gauche, alors qu’en est t’il du clique droit ?
J’ai ainsi pensé à intégrer un clique droit, un clique droit+ et un click droit++ par l’usage des différents doigt pour pincer, lorsque l’on pince avec le majeur au lieu de l’index.
J’ai réalisé un petit extrait où les différents cliques modifient les textures projetées dans l’espace.

Pinch to Scale

J’ai repris le geste du pinch présent sur les interfaces tactiles pour agrandir des objets virtuellement. L’idée c’est aussi de reprendre un geste accepté et largement utilisé par beaucoup de monde pour que son usage soit « intuitif ».

Resize avec les deux mains

J’ai réintégré mon système de grab to pinch développé sur ma proposition précédente. On pince dans le vide puis avec la distance entre nos deux mains on peut faire varier des paramètres.

Draw

Interface pour sculpter des volumes. En pinçant avec une mains on dessine, en faisant varier la distance entre l’index et le pouce sur l’autre main on module la taille du tracé.

Qu’est ce qui ce trame ?

En continuant les expérimentations graphiques en réalité virtuel j’ai pu mettre au point une petite technique pour tramer une texture depuis le shader. Il faut rendre par un logiciel de rendu de trame une « matrice » contenant pour des valeurs différentes les différents niveaux de trames superposé et avec un node step on peut ainsi passer d’un niveau de trame à l’autre.

« Matrice » de trame générée depuis Stockaster

Pour mieux comprendre le phénomène on peut faire varier le seuil dans Photoshop ce qui va révéler les differents niveaux de trame. Le node Step fonctionne comme le filtre seuil à la différence qu’il peut prendre en entré un texture en input au lieu d’une valeur uniforme. Cet exemple met en exergue les similitude des shaders avec des synthétiseurs visuels.

Ensuite l’intérêt de la démarche n’est pas uniquement de tramer des images dans Unity, ce qui est contre productif car cela consomme plus de ressource que d’importer une image préalablement tramée, mais de pouvoir l’utiliser sur des images générées (des bruits etc…) ou des images transformées ( les images sont modifiées en temps réel puis ensuite tramées). Dans cet exemple succinct, on trame un bruit de voronoi animé.

Extrait de ShaderGraph
Résultat du shader, les polygones sont animées

On obtient un effet assez complexe avec un système relativement simple.

Je vais tenter de poursuivre ces recherches notamment avec le colorpicker. Puis je mettrais en ligne le build (l’executable) du projet qui ne fonctionne malheureusement que sur Meta Quest 2 et pro. J’ai produit un petit montage des scènes en bout à bout pour montrer les interactions possibles.

[1] Apple’s Forbidden Words, 15 juin 2023, 9:55 (en ligne : https://www.youtube.com/watch?v=kvN5_GXlg2Y ; consulté le 3 juillet 2023)