Création d’hologrammesThe making of Designing Holograms

Notes

Veuillez tenir compte d’une petite fenêtre de chargement pour tenir compte de tous les gif et vidéos incorporées dans cette page.Please allow for a small loading window to account for all the cool GIFs and embedded videos on this page.

Il peut être difficile de savoir comment concevoir pour la réalité mixte, car le support ne traduit pas toujours bien les processus de conception 2D.Learning how to design for mixed reality can be hard because the medium doesn't always translate well to 2D design processes. Chez Microsoft, nous avons créé une application gratuite pour HoloLens 2 afin de vous aider à apprendre les principes fondamentaux de la conception d’expérience utilisateur de la réalité mixte.Here at Microsoft, we've created a free app for the HoloLens 2 to help you learn the fundamentals of mixed reality UX Design firsthand. L’approche unique de la conception d’une application d’hologrammes s’approche des comportements de réalité mixte, des conseils et des recommandations pour vous aider à créer vos propres applications HoloLens attrayantes et étonnantes.The unique approach of the Designing Holograms app dives into mixed reality behaviors, tips, and recommendations to help you create engaging and amazing HoloLens apps of your own. Téléchargez gratuitement l’application à partir de la Microsoft Store et apprenez de l’équipe de conception de la réalité mixte de Microsoft !Download the app for free from the Microsoft Store and learn from Microsoft’s Mixed Reality Design Team!


GIF animé de la scène de suivi des têtes dans le design de la salle de démonstration de l’hologramme

Conception de la salle de démonstration de l’hologramme (également appelée maison de poupée)Designing Hologram’s demo room (also known as the doll house)

Conception pour la réalité mixteDesigning for mixed reality

Comme beaucoup d’entre vous, j’ai utilisé pour concevoir des applications mobiles.Like many of you, I used to design mobile apps. En provenance d’un monde de conception 2D, le saut dans le monde de l’informatique spatiale, où tout est présent dans le monde, était un changement significatif.Coming from a 2D design world, jumping into full on spatial computing, where everything is now in the world, was a significant shift. En réalité mixte, les applications ne sont plus limitées à un écran 2D ; en fait, ils sont presque gratuits, placés dans le monde réel et interagissent avec les objets réels.In mixed reality, apps aren't confined to a 2D screen anymore; in fact, they're almost free, placed in the real world and interacting with real objects.

Pour moi, la connexion des expériences 3D aux processus de conception 2D conventionnels est l’aspect le plus difficile du développement de la réalité mixte.To me, connecting 3D experiences to conventional 2D design processes is the most challenging aspect of mixed reality development. Dans les conversations avec les clients, j’entends des choses telles que «je sais quelles sont les fonctionnalités à inclure et comment les mettre en service.In conversations with customers, I would hear things like “I know what features to include and how to get them up and running. C’est le code, je peux suivre les documents et les didacticiels, mais l’expérience de l’utilisateur ?It’s code, I can follow the docs and tutorials, but the user experience? De nombreuses fonctionnalités, des options d’entrée différentes, des scénarios différents et des environnements physiques sont insurmontables.So many features, different input options, different scenarios, and physical environments, it’s overwhelming".

Image de l’atelier de conception HoloLens 2 de l’image San Francisco de l’atelier de conception hololens 2 de San FranciscoImage from the HoloLens 2 Design Workshop in San Francisco Image from the HoloLens 2 Design Workshop in San Francisco

Une opportunité d’enseignerAn opportunity to teach

Ce n’était pas évident dans un premier temps, mais une excellente opportunité était présentée pour utiliser la réalité mixte comme un support pour l’enseigner.It wasn’t obvious at first, but an excellent opportunity was presented to use mixed reality as a Medium to teach it.

La conception d’hologrammes est une expérience visuelle qui explique les concepts et les recommandations en matière de conception de la réalité mixte.Designing Holograms is a visual experience that explains mixed reality design concepts and recommendations. C’est juste vous et un enseignant qui démontre les concepts de conception de la réalité mixte.It’s just you and a virtual teacher demonstrating mixed reality design concepts. Tout est un point de vue de la troisième personne avec l’expérience dans votre propre espace.Everything is from a third person perspective with the experience firmly in your own space.


Vidéo sur la conception d’hologrammesDesigning Holograms trailer video

Exploration de la maison de poupéeExploring the doll house

La maison de poupée est l’environnement virtuel que nous utilisons dans toute l’application.The doll house is the virtual environment we use throughout the app. L’environnement est une salle miniature 80 x 60 x 40 cm qui contient les éléments de base que la plupart des chambres ont en commun, comme les murs, les lampes, les meubles, une table et un téléviseur.The environment is an 80 x 60 x 40-cm miniature room that contains the basic elements that most rooms have in common, like walls, lamps, furniture, a table, and a TV. La maison de poupée est le Protagonist principal de l’expérience de l’application. nous avons donc dû nous assurer qu’elle fonctionnera très bien dans n’importe quel environnement.The doll house is the main protagonist of the app experience, so we needed to make sure it would work great in any environment. Considérez-le comme une petite salle de démonstration pour visualiser toutes sortes de concepts de réalité mixte.Think of it as a small demo room for visualizing all sorts of mixed reality concepts.

Vidéo du comportement de réglage DollhouseVideo of the Dollhouse adjustment behavior

1:1 et prototypes 1:101:1 vs 1:10 prototypes

Notre hypothèse initiale était que les démonstrations 1:1 seraient étonnantes, presque comme en regardant un professeur réel.Our initial assumption was that 1:1 demonstrations would be amazing, almost like looking at a real life teacher. L’utilisateur verra tout ce que voit l’enseignant à une échelle réelle.The user would see everything that the teacher sees at a real life scale. Toutefois, nous avons immédiatement réalisé que quelques problèmes se produisaient :However, we immediately realized that there would be a few problems:

  • La plupart des développeurs exécutent leurs applications dans des bureaux ou des salles plus petites que la salle de démonstration, ce qui ne peut pas être le cas.Most developers will run their apps in offices, or rooms smaller than the demo room, so it wouldn’t fit.
  • Les affichages sont additifs, ce qui signifie que l’ensemble de l’environnement virtuel sera reporté sur la salle d’un utilisateur.Displays are additive, meaning the entire virtual environment will be overlaid over a user’s room. Cela peut être confus avec deux tables, peut-être des cloisons doubles et des murs qui ne s’alignent pas.That can get confusing with two tables, maybe double couches, and walls that don’t align.
  • Et pire de tous les environnements virtuels sont fortement limités par un champ de vue.And worst of all a virtual environment heavily constrained by a field of view.

Lors d’une tentative de mise à l’échelle de la mini-1:10, le résultat était une vue d’ensemble des oiseaux fantastique dans une salle réaliste.When we tried out a mini 1:10 scale, the result was a fantastic birds-eye view of a realistic room. Vous pouvez voir tout ce qui se passe depuis n’importe quel angle en même temps.You could see everything that was going on from any angle all at the same time. Ce qui était le plus surprenant, c’est que la plupart des testeurs ont trouvé qu’il s’agissait d’une plus grande immersion pour voir une petite version, alors ils n’ont jamais rétabli l’échelle 1:1.What was most surprising is that most testers found it so much more immersive to see a small version, then they never toggled back to the 1:1 scale. Nous avons donc décidé de mettre en fait la version 1:1 et d’éviter le travail supplémentaire requis pour adapter l’interface utilisateur et d’autres aspects de l’application.So we decided to actually scrap the 1:1 version and avoid the extra work required to adapt UI and other aspects of the app.

Champ de vue avec un champ d’affichage à l’échelle 1:1 avec une échelle de 1:1Field of view with 1:1 scale Field of view with 1:1 scale

Champ de vue avec un champ d’affichage à l’échelle 1:10 avec une échelle de 1:10Field of view with 1:10 scale Field of view with 1:10 scale

Utilisation de la capture de réalité mixteUsing Mixed Reality Capture

L’une des fonctionnalités les plus caractéristiques de cette application est l’utilisation de la capture de réalité mixte pour enseigner et démontrer les concepts de conception de la réalité mixte.One of the most characteristic features of this app is the use of Mixed Reality Capture to teach and demonstrate mixed reality design concepts.

Microsoft dispose d’une réalité mixte de capture Studio à San Francisco.Microsoft has a Mixed Reality Capture studio in San Francisco. Microsoft concède également cette technologie à d’autres Studios, y compris la dimension d’avatar à Washington D.C., la réétape à Los Angeles, les Studios de dimension à Londres, SK Telecom à Séoul et Volucap à Berlin.Microsoft also licenses this technology to other studios, which include Avatar Dimension in Washington D.C., Metastage in Los Angeles, Dimension Studios in London, SK Telecom in Seoul, and Volucap in Berlin. Vous trouverez des informations supplémentaires sur nos Studios de capture de réalité mixte ici.You can find more information on our Mixed Reality Capture Studios here.


Métrage brut de Daniel Escudero à partir de l’une des caméras 106 dans la réalité mixte capture Studio à San Francisco.Raw footage of Daniel Escudero from one of the 106 cameras in the Mixed Reality Capture Studio in San Francisco.

Le processus de capture génère un maillage, des normales et une texture KeyFrame, qui peuvent être fournis sous la forme de fichiers OBJ/PNG pour une nouvelle publication, ou prêts pour la lecture en tant que fichier MP4 compressé H. 264.The capture process generates a keyframed mesh, normals, and texture, which can be delivered as OBJ/PNG files for further post-production, or ready for playback as an H.264 compressed MP4 file. Ces fichiers peuvent être importés dans des projets Unity, inréel, natif et WebXR.These files can be imported into Unity, Unreal, Native, and WebXR projects. Les fichiers peuvent s’exécuter sur Windows, iOS, Mac, Android, Magic LEAP et PlayStation VR.Files can run on Windows, iOS, Mac, Android, Magic Leap, and Playstation VR.


Lecteur de capture fourni pour analyser les fichiers MP4 à qui contiennent des vidéos avec des panneaux audio et incorporés.The Capture Player provided to analyze mp4s that contain video with audio and embedded meshes.

Manipulation des captures et des objets virtuelsManipulating captures and virtual objects

Les captures de réalité mixte produisent des représentations virtuelles de personnes ou d’animaux, mais il peut arriver que vous ayez besoin de ces caractères pour interagir avec d’autres objets virtuels.Mixed Reality Captures produce virtual representations of people or animals, but at times you may need those characters to interact with other virtual objects. Les deux exemples suivants illustrent les différentes façons dont nous avons manipulé les scènes pour atteindre cet effet.The following two examples show different ways we manipulated the scenes to achieve this effect.

Réglage du pointage de la têteHead Gaze Adjustment

L’ajustement de Headgaze vous permet de déplacer la tête d’une personne capturée au moment de l’exécution, ce qui signifie que vous pouvez avoir un visage de capture pour un utilisateur.Headgaze adjustment lets you move a captured person’s head at runtime, meaning you could have a capture face towards a user. Dans notre cas, nous l’avons utilisé pour afficher le champ de vue et le champ d’intérêt.In our case, we used it to show the field of view and field of interest. Ce que vous voyez ci-dessous est un gameobject de déplacement qui joue le rôle de cible pour le regard de la tête.What you see below is a moving gameobject acting as a target for the head gaze to look at. À mesure que nous déplaçons la cible d’un côté à l’autre, l’en-tête de la capture suit.As we move the target from side to side, the head of the capture follows.

Nous avons utilisé cette astuce pour s’assurer que la capture inactive serait toujours dirigée vers des hologrammes placés dans des parties différentes de la maison de poupée.We used this trick to make sure that the idle capture would always face towards holograms placed in different parts of the doll house.

La tête de capture qui est déplacée au moment de l’exécution après un gameobject cible dans Unity

La tête de capture qui est déplacée au moment de l’exécution après un gameobject cible dans Unity.The Capture’s head being moved at runtime following a target gameobject in Unity.

Synchronisation d’objets animésSyncing Animated Objects

Le deuxième, qui consistait à animer des objets à synchroniser avec le mouvement d’une capture.The second one, was animating objects to sync with a capture’s movement. Dans les différentes parties de l’application, nous avons importé des ne comportaient séquentielles d’une capture spécifique toutes les cinq frames.In different parts of the app, we imported sequential OBJs of a specific capture every five frames. Les ne comportaient ont ensuite été animés dans la scène pour s’assurer qu’ils correspondent au frame correspondant de la capture.The OBJs were then animated in the scene to make sure they would match the corresponding frame of the capture. Il s’agit d’un processus fastidieux d’animation et de keyencadrement, mais le résultat est parfait.It’s a tedious process of animating and keyframing, but the result is great. Vous pouvez maintenant voir une capture de réalité mixte qui interagit avec des objets non capturés.You can now see a Mixed Reality Capture interacting with non-captured objects.

Animation synchronisée entre une capture de réalité mixte et un panneau d’interface utilisateur

Animation synchronisée entre une capture de réalité mixte et un panneau d’interface utilisateurSynced animation between a Mixed Reality Capture and UI panel

Processus créatif de l’interface utilisateurUI creative process

Lorsque nous avons commencé la conception de l’interface utilisateur, nous souhaitons montrer une partie de la magie et des possibilités offertes par les hologrammes.When we started the UI design, we wanted to show some of the magic and possibility that holograms have to offer. Il n’est pas simple d’illustrer les fenêtres 2D statiques et les zones de texte dans le monde 3D.Simply showing static 2D windows and text boxes doesn’t feel right in the 3D world. La plupart des possibilités en main ne s’affichent pas. donc, dès le début, nous avons décidé de ne plus en sortir et d’utiliser pleinement l’espace 3D holographique.Many of the possibilities at hand just don't show up, so right from the beginning we decided to move away from that and make full use of holographic 3D space.

Dans un premier temps, nous avons commencé à ajouter de l’épaisseur aux panneaux, aux icônes et aux informations de texte.At first, we started with adding some thickness to the panels, icons, and text information. Toutefois, en tant qu’utilisateur, ce que je vois est une zone de texte.Still, as a user, what I see is a text box. Les zones de texte avec des images, mais ce n’est pas le cas.Text boxes with images, but we aren't there. Nous sommes allés plus loin en utilisant les nuanceurs MRTK (Mixed Reality Toolkit).We went further by making use of the Mixed Reality Toolkit (MRTK) shaders. Les nuanceurs MRTK sont devenus un outil puissant et nous avons utilisé leurs fonctionnalités de stencil pour ajouter une profondeur négative aux panneaux.The MRTK shaders became a powerful tool, and we made use of its stencil features to add negative depth to the panels. Cela signifie qu’au lieu d’ajouter des éléments devant une zone de texte, les icônes s’affichent désormais derrière un panneau transparent.That means instead of adding elements in front of a text box, the icons now appear behind a transparent panel. Ce que je vois maintenant en tant qu’utilisateur, c’est qu’il n’est plus possible de répliquer plus dans le monde réel, et c’est là où holographique magique a commencé à se produire.What I see now as a user is something that I just can’t replicate anymore in the real world, and this is where holographic magic started to happen. En outre, comme un utilisateur que je n’aime pas lire, je fais déjà beaucoup de choses dans le monde physique.Also as a user I don’t really like to read, I do a lot already in the physical world.

Évidemment, les icônes fonctionnent beaucoup mieux que le simple texte. pour fournir une aide encore plus puissante, j’ai commencé à créer un ensemble d’objets animés et d’avatars, chacun d’entre eux indiquant un petit récit sur ce qui est fait dans le scénario respectif et sur la manière dont il est utilisé.Obviously icons work a lot better than simple text does, to provide an even more powerful guidance, I then started creating a set of animated objects and avatars, each of them telling a tiny story about what is being done in the respective scenario and how it’s being used.

GIF animé d’un système de menu holographique interactif

Principaux conceptsCore concepts

Image holographiqueHolographic frame

GIF animé d’un utilisateur qui regarde le Dollhouse avec le cadre holographique mis en surbrillance

Systèmes de coordonnéesCoordinate systems

GIF animé d’un utilisateur qui regarde le Dollhouse avec les systèmes de coordonnées mis en surbrillance

Eye-trackingEye tracking

GIF animé d’un utilisateur cherchant des hologrammes stationnaires avec le point de regard de l’oeil en surbrillance

Visualisation de l’analyse de la salle et mappage spatialRoom scan visualization and spatial mapping

GIF animé de toutes les surfaces à l’intérieur du Dollhouse mappé

Compréhension des scènesScene understanding

GIF animé d’objets dans le Dollhouse qui est reconnu

Pointer et valider avec des rayons de mainPoint and commit with hand rays

GIF animé d’un utilisateur qui soulève sa main avec un rayon de la main mis en surbrillance

« Essayer » les moments"Try it out" moments

La conception d’hologrammes enseigne les concepts de réalité mixte, mais vous permet également de les essayer dans votre salle.Designing Holograms teaches mixed reality concepts, but it also allows you to try them in your room. Après quelques-unes de ces explications, nous suspendons et vous revenons à la maison de poupée et à un moment interactif.After some of those explanations, we pause and take you out of the doll house and into an interactive moment. Voici quelques exemples de ces moments interactifs :Here are some examples of those interactive moments:

GIF animé du frame de suivi de la main montrant quand les mains sont détectées et quand elles entrent dans le champ de la vue

Frame de suivi de la main qui indique quand les mains sont détectées et quand elles entrent dans le champ de la vue.The hand tracking frame showing when hands are detected and when they enter the field of view.

GIF animé de l’interaction avec les cristaux en collision via une interaction lointaine

Interaction avec les cristaux en collision via une interaction lointaineInteracting with colliding crystals through far interaction

GIF animé de l’exploration des intuitivité near interaction

Exploration des intuitivité near interactionExploring near interaction affordances

À propos de l’équipeAbout the team

Picture of Daniel Escudero Daniel EscuderoDaniel Escudero
Concepteur technique du prospectLead Technical Designer
Dan est le directeur créatif de la conception d’hologrammes et travaille actuellement en tant que responsable de la conception de l’Académie de la réalité mixte de Microsoft à San Francisco, et était auparavant un concepteur dans l’un des Studios de réalité mixte de Microsoft à Londres.Dan is the Creative Director on Designing Holograms and currently works as Design Lead for the Microsoft’s Mixed Reality Academy in San Francisco, and was previously a Designer in one of Microsoft’s Mixed Reality Studios in London.
Picture of Martin Wettig Martin WettigMartin Wettig
Artiste 3D SeniorSenior 3D Artist
Martin domine la conception de l’interface utilisateur et de l’art 3D sur la conception d’hologrammes et était auparavant un artiste 3D senior chez l’un des Studios de réalité mixte de Microsoft à Berlin.Martin leads 3D Art and UI Design on Designing Holograms and was previously a Senior 3D Artist at one of Microsoft’s Mixed Reality Studios in Berlin.

Nous vous remercions de l’équipe de conception de la réalité mixte pour le partage d’une grande connaissance et des gens étonnants de la théorie des objets pour être des coéquipiers essentiels à chaque étape du projet.A huge thank you to the Mixed Reality Design Team for sharing so much knowledge, and to the amazing folks at Object Theory for being essential teammates through every step of the project. Nous vous remercions tout pour vos talents exceptionnels, pour votre passion et vos yeux de la conception.Thank you all for you amazing talent, for your passion and exceptional eye for design.