Het maken van Hologrammen

Notitie

Sta een klein laadvenster toe om rekening te houden met alle cool GIF's en ingesloten video's op deze pagina.

Learning het ontwerpen voor mixed reality kan lastig zijn omdat het medium niet altijd goed kan worden vertaald in 2D-ontwerpprocessen. Hier bij Microsoft hebben we een gratis app voor de HoloLens 2 om u te helpen de basisprincipes van mixed reality UX-ontwerp te leren. De unieke benadering van de Hologrammen-app ontwerpen gaat in op mixed reality-gedrag, tips en aanbevelingen om u te helpen aantrekkelijke en geweldige HoloLens-apps te maken. Download de app gratis van de Microsoft Store en leer van het Mixed Reality Design Team van Microsoft.


GIF-animatie van de scène voor het volgen van het hoofd in de demoruimte Van hologrammen ontwerpen

De demoruimte van Hologram ontwerpen (ook wel bekend als het huis)

Ontwerpen voor mixed reality

Zoals velen van u heb ik gebruikt voor het ontwerpen van mobiele apps. Vanuit een 2D-ontwerpwereld was het een belangrijke verschuiving om vol te springen over ruimtelijke computing, waar alles zich nu in de wereld voordeed. In mixed reality worden apps niet meer beperkt tot een 2D-scherm; In feite zijn ze bijna gratis, geplaatst in de echte wereld en werken ze met echte objecten.

Voor mij is het verbinden van 3D-ervaringen met conventionele 2D-ontwerpprocessen het meest uitdagende aspect van mixed reality ontwikkeling. In gesprekken met klanten zou ik het volgende horen: "Ik weet welke functies ik moet opnemen en hoe ik ze kan laten werken. Het is code, ik kan de documenten en zelfstudies volgen, maar de gebruikerservaring? Zo veel functies, verschillende invoeropties, verschillende scenario's en fysieke omgevingen, dat is overweldigend.'

Afbeelding van de HoloLens 2 Design Workshop in San Francisco Image van de HoloLens 2 Design Workshop in San Francisco

Een kans om te leren

Het was in eerste instantie niet duidelijk, maar er werd een uitstekende kans gepresenteerd om mixed reality als medium te gebruiken om dit te leren.

Het ontwerpen Hologrammen is een visuele ervaring waarin de mixed reality en aanbevelingen worden uitgelegd. Alleen u en een virtuele docent demonstreren mixed reality ontwerpconcepten. Alles is vanuit het perspectief van een derde persoon met de ervaring in uw eigen ruimte.


Een video Hologrammen trailer ontwerpen

Het huis verkennen

Het huis is de virtuele omgeving die in de hele app wordt gebruikt. De omgeving is een miniatuurruimte van 80 x 60 x 40 cm die de basiselementen bevat die de meeste ruimten gemeenschappelijk hebben, zoals muren, stenen, stenen, een tabel en een tv. Het huis is de belangrijkste plek voor de app-ervaring, dus we moesten ervoor zorgen dat het in elke omgeving goed zou werken. U kunt het zien als een kleine demoruimte voor het visualiseren van mixed reality concepten.

Video van het aanpassingsgedrag van Het huis

1:1 vs. 1:10 prototypen

Onze eerste aanname was dat 1:1 demonstraties geweldig zouden zijn, bijna zoals we naar een echte docent zouden kijken. De gebruiker zou alles zien wat de docent in de echte wereld ziet. We hebben ons echter onmiddellijk gerealiseerd dat er een paar problemen zouden zijn:

  • De meeste ontwikkelaars voeren hun apps uit in kantoren of in ruimten die kleiner zijn dan de demoruimte, zodat deze niet past.
  • Weergaven zijn additief, wat betekent dat de hele virtuele omgeving wordt weergegeven boven de ruimte van een gebruiker. Dat kan verwarrend zijn met twee tabellen, bijvoorbeeld dubbele bankjes en muren die niet zijn uitgelijnd.
  • En het ergste van alle virtuele omgevingen die sterk worden beperkt door een weergaveveld.

Toen we een minischaal van 1:10 uitproproerden, was het resultaat een fantastische blik op een realistische ruimte. U kon alles zien wat er op hetzelfde moment vanuit elke hoek aan de hand was. Wat het meest verrassend was, is dat de meeste testers het zo veel indrender vinden om een kleine versie te zien, dat ze nooit terug naar de schaal 1:1 hebben geschaald. Daarom hebben we besloten om de versie 1:1 daadwerkelijk te verwijderen en te voorkomen dat er extra werk nodig is om de gebruikersinterface en andere aspecten van de app aan te passen.

Weergaveveld met 1:1-schaalVeld van weergave met 1:1-schaal

Weergaveveld met 1:10-schaalVeld van weergave met schaal 1:10

Met Vastleggen in mixed reality

Een van de meest kenmerkfuncties van deze app is het gebruik van Vastleggen in mixed reality om de ontwerpconcepten mixed reality leren en demonstreren.

Microsoft heeft een Vastleggen in mixed reality studio in San Francisco. Microsoft licentiet deze technologie ook voor andere studio's, waaronder Avatar Dimension in Washington D.C., Metastage in Los Angeles, Dimension Studio's in Londen, SK Telecom inIngen en Volucap in Parijs. U vindt hier meer informatie over onze Vastleggen in mixed reality Studio's.


Onbewerkte beelden van Daniel Escudero van een van de 106 camera's in Vastleggen in mixed reality Studio in San Francisco.

Het vast leggen genereert een mesh, normalen en patroon van het keyframed, dat kan worden geleverd als OBJ-/PNG-bestanden voor verdere postproductie of kan worden afgespeeld als een gecomprimeerd MP4-bestand met H.264. Deze bestanden kunnen worden geïmporteerd in Unity-, Unreal-, Native- en WebXR-projecten. Bestanden kunnen worden uitgevoerd op Windows, iOS, Mac, Android, Magic Leap en Playstation VR.


De Capture Player die is opgegeven voor het analyseren van mp4's die video met audio en ingesloten meshes bevatten.

Vastleggen en virtuele objecten bewerken

Mixed Reality Captures produceren virtuele representaties van personen of dieren, maar soms hebt u deze tekens nodig om te communiceren met andere virtuele objecten. De volgende twee voorbeelden laten verschillende manieren zien waarop we de scènes hebben gemanipuleerd om dit effect te bereiken.

Aanpassing van hoofd staren

Met headgaze-aanpassing kunt u het hoofd van een vastgelegde persoon tijdens runtime verplaatsen, wat betekent dat u een vastgelegd gezicht naar een gebruiker kunt hebben. In ons geval hebben we deze gebruikt om het veld van de weergave en het interesseveld weer te geven. Wat u hieronder ziet, is een bewegend gameobject dat als doel optreedt voor de hoofd staren om naar te kijken. Als we het doel van de ene naar de andere kant verplaatsen, volgt de kop van de opname.

We hebben deze trick gebruikt om ervoor te zorgen dat de niet-actieve opname altijd wordt geconfronteerd met hologrammen die op verschillende delen van het huis zijn geplaatst.

Het hoofd van de Capture wordt verplaatst tijdens runtime na een doel-gameobject in Unity

Het hoofd van de Capture wordt verplaatst tijdens runtime na een doel-gameobject in Unity.

Bewegende objecten synchroniseren

De tweede was het animeren van objecten om te synchroniseren met de verplaatsing van een opname. In verschillende onderdelen van de app hebben we om de vijf frames sequentiële OBJs van een specifieke opname geïmporteerd. De OBJs werden vervolgens in de scène animaties gemaakt om ervoor te zorgen dat ze overeenkomen met het bijbehorende frame van de opname. Het is een omslachtig proces van het maken van een animating en keyframing, maar het resultaat is geweldig. U ziet nu een Vastleggen in mixed reality interactie met niet-vastgelegde objecten.

Gesynchroniseerde animatie tussen een Vastleggen in mixed reality en het deelvenster Gebruikersinterface

Gesynchroniseerde animatie tussen een Vastleggen in mixed reality en het deelvenster Gebruikersinterface

Creatieve gebruikersinterface

Toen we met het ontwerp van de gebruikersinterface begonnen, wilden we enkele van de magic en de mogelijkheid laten zien die hologrammen te bieden hebben. Het weergeven van statische 2D-vensters en tekstvakken werkt niet goed in de 3D-wereld. Veel van de beschikbare mogelijkheden komen niet voor, dus hebben we vanaf het begin besloten om daar vanaf te gaan en volledig gebruik te maken van de holografische 3D-ruimte.

Eerst begonnen we met het toevoegen van een dikte aan de panelen, pictogrammen en tekstinformatie. Maar wat ik als gebruiker zie, is een tekstvak. Tekstvakken met afbeeldingen, maar we zijn er niet. We zijn verder gegaan door gebruik te maken van de Mixed Reality Toolkit(MRTK)-shaders. De MRTK-shaders werden een krachtig hulpmiddel en we hebben gebruik gemaakt van de stencilfuncties om negatieve diepte toe te voegen aan de panelen. Dit betekent dat de pictogrammen nu achter een transparant deelvenster worden weergegeven in plaats van elementen toe te voegen vóór een tekstvak. Wat ik nu als gebruiker zie, is iets dat ik niet meer kan repliceren in de echte wereld, en dit is waar holografische magic begon te gebeuren. Als gebruiker wil ik niet graag lezen, maar ik doe al veel in de fysieke wereld.

Pictogrammen werken natuurlijk veel beter dan eenvoudige tekst. Om nog krachtigere richtlijnen te bieden, ben ik vervolgens begonnen met het maken van een set bewegende objecten en avatars, die elk een klein verhaal vertellen over wat er in het betreffende scenario wordt gedaan en hoe deze worden gebruikt.

GIF-animatie van een interactief holografische menusysteem

Basisconcepten

Head Tracking en Oogtracking

Handtracking

Spatial Awareness

Holographic-frame

GIF-animatie van een gebruiker die door het huis kijkt met het holografische frame gemarkeerd

Systemen coördineren

GIF-animatie van een gebruiker die door het huis kijkt met de coördinatensystemen gemarkeerd

Oogtracking

GIF-animatie van een gebruiker die naar stationaire hologrammen kijkt met de oogfoto gemarkeerd

Visualisatie van ruimtescans en ruimtelijke toewijzing

GIF-animatie van alle oppervlakken in het kaartenhouse dat wordt gebruikt

Scène-inzicht

GIF-animatie van objecten in het huis dat wordt herkend

Wijzen en door te geven met handfoto's

GIF-animatie van een gebruiker die zijn hand opdrijf met een hand ray gemarkeerd

'Try it out' (Uitproberen)

Bij het ontwerpen Hologrammen u mixed reality concepten, maar u kunt ze ook proberen in uw kamer. Na enkele van deze uitleg onderbreken we u en nemen we u mee uit het huis en gaan we op een interactief moment. Hier zijn enkele voorbeelden van die interactieve momenten:

GIF-animatie van het handtrackingframe dat laat zien wanneer handen worden gedetecteerd en wanneer ze het weergaveveld invoeren

Het frame voor handtracking dat laat zien wanneer handen worden gedetecteerd en wanneer ze het weergaveveld invoeren.

GIF-animatie van interactie met botsende crystal's via veel interactie

Interactie met botsende crystal's via een verre interactie

GIF-animatie van het verkennen van de betaalbaarheid van bijna-interacties

Near interaction affordances verkennen

Over het team

Picture of Daniel Escudero Daniel Escudero
Lead Technical Designer
Dan is de Creative Director bij Designing Hologrammen en werkt momenteel als Design Lead voor de Mixed Reality Academy van Microsoft in San Francisco en was voorheen designer in een van de Mixed Reality Studio's van Microsoft in Londen.
Picture of Martin Wettig Martin Afk.
Senior 3D Artist
Martin leidt 3D Art and UI Design on Designing Hologrammen en was voorheen Senior 3D Artist bij een van de microsoft Mixed Reality Studio's in Parijs.

Hartelijk dank aan het Mixed Reality Design Team voor het delen van zoveel kennis en aan de fantastische mensen bij Objecttheorie omdat ze tijdens elke stap van het project essentiële teamleden zijn. Hartelijk dank voor uw fantastische talent, voor uw passie en uitzonderlijke oog voor ontwerp.