Das Entwerfen von hologramsThe making of Designing Holograms

Hinweis

Gestatten Sie einem kleinen lade Fenster, alle coolen GIFs und eingebetteten Videos auf dieser Seite zu berücksichtigen.Please allow for a small loading window to account for all the cool GIFs and embedded videos on this page.

Das Erlernen des Entwurfs für gemischte Realität kann schwierig sein, da das Medium nicht immer gut in 2D-Entwurfs Prozesse übersetzt.Learning how to design for mixed reality can be hard because the medium doesn't always translate well to 2D design processes. Wir haben hier bei Microsoft eine kostenlose App für die hololens 2 erstellt, um Ihnen das Erlernen der Grundlagen von Mixed Reality UX-Entwurf zu erleichtern.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. Der einzigartige Ansatz der APP zum Entwerfen von holograms ist in gemischtes Realitäts Verhalten, Tipps und Empfehlungen integriert, um Ihnen die Erstellung ansprechender und verblüffender hololens-apps zu erleichtern.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. Laden Sie die App kostenlos von der Microsoft Store herunter, und lernen Sie von dem Mixed Reality-Design Team von Microsoft.Download the app for free from the Microsoft Store and learn from Microsoft’s Mixed Reality Design Team!


Animiertes GIF der Head Tracking-Szene im Demoraum des Entwurfs holograms

Entwerfen von Hologram als Demoraum (auch als "Puppenhaus" bezeichnet)Designing Hologram’s demo room (also known as the doll house)

Entwerfen für gemischte RealitätDesigning for mixed reality

Wie viele von Ihnen habe ich zum Entwerfen mobiler Apps verwendet.Like many of you, I used to design mobile apps. Aus einer 2D-Entwurfs Welt, die sich vollständig bei räumlichen Computing, wo alles heute auf der Welt ist, befindet, war es eine bedeutende Umstellung.Coming from a 2D design world, jumping into full on spatial computing, where everything is now in the world, was a significant shift. In gemischter Realität sind apps nicht mehr auf einen 2D-Bildschirm beschränkt. Tatsächlich sind Sie fast kostenlos, werden in der realen Welt platziert und interagieren mit echten Objekten.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.

Für mich ist das Verbinden von 3D-Erfahrungen mit konventionellen 2D-Entwurfs Prozessen der anspruchsvollste Aspekt der Mixed Reality-Entwicklung.To me, connecting 3D experiences to conventional 2D design processes is the most challenging aspect of mixed reality development. In Konversationen mit Kunden würde ich Folgendes hören: "Ich weiß, welche Features eingeschlossen werden müssen und wie Sie Sie einrichten und ausführen.In conversations with customers, I would hear things like “I know what features to include and how to get them up and running. Es handelt sich um Code, ich kann die Dokumentation und Lernprogramme, aber die Benutzer Darstellung befolgen?It’s code, I can follow the docs and tutorials, but the user experience? Viele Features, verschiedene Eingabeoptionen, verschiedene Szenarien und physische Umgebungen sind überwältigend.So many features, different input options, different scenarios, and physical environments, it’s overwhelming".

Bild aus dem Design Workshop hololens 2 im San Francisco- Image aus dem hololens 2-Entwurfs Workshop in San FranciscoImage from the HoloLens 2 Design Workshop in San Francisco Image from the HoloLens 2 Design Workshop in San Francisco

Eine Gelegenheit zum vermittelnAn opportunity to teach

Zuerst war es nicht offensichtlich, aber es wurde eine hervorragende Gelegenheit geboten, gemischte Realität als Mittel zu verwenden, um es zu vermitteln.It wasn’t obvious at first, but an excellent opportunity was presented to use mixed reality as a Medium to teach it.

Das Entwerfen von holograms ist eine visuelle Darstellung, in der gemischte Entwurfskonzepte und-Empfehlungen erläutert werden.Designing Holograms is a visual experience that explains mixed reality design concepts and recommendations. Es handelt sich lediglich um einen virtuellen Lehrer, der gemischte Realitäts Entwurfskonzepte demonstriert.It’s just you and a virtual teacher demonstrating mixed reality design concepts. Alles ist von einer dritten Person, die die benutzerfreundliche Darstellung in Ihrem eigenen Bereich hat.Everything is from a third person perspective with the experience firmly in your own space.


Entwerfen von holograms-Nachspann VideosDesigning Holograms trailer video

Erkunden des PuppenhausesExploring the doll house

Das Puppenhaus ist die virtuelle Umgebung, die in der gesamten App verwendet wird.The doll house is the virtual environment we use throughout the app. Bei der Umgebung handelt es sich um einen 80 x 60 x 40-cm-Miniatur Raum, der die grundlegenden Elemente enthält, die die meisten Räume gemeinsam haben, wie z. b. Wände, Lampen, Möbel, eine Tabelle und ein TV.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. Das Puppenhaus ist der Hauptprotagonist der APP-Umgebung, daher mussten wir sicherstellen, dass es in jeder Umgebung gut funktioniert.The doll house is the main protagonist of the app experience, so we needed to make sure it would work great in any environment. Sehen Sie sich dies als kleinen Demo Raum an, in dem Sie alle Arten gemischter Realitäts Konzepte visualisieren.Think of it as a small demo room for visualizing all sorts of mixed reality concepts.

Video zum Anpassungs Verhalten von DollhouseVideo of the Dollhouse adjustment behavior

1:1 vs 1:10-Prototypen1:1 vs 1:10 prototypes

Unsere anfängliche Annahme war, dass 1:1 Demonstrationen erstaunlich waren, fast wie man sich einen echten Lehrer ansieht.Our initial assumption was that 1:1 demonstrations would be amazing, almost like looking at a real life teacher. Dem Benutzer werden alle Elemente angezeigt, die der Lehrer in einer realen lebensskala sieht.The user would see everything that the teacher sees at a real life scale. Wir haben jedoch sofort erkannt, dass es einige Probleme gibt:However, we immediately realized that there would be a few problems:

  • Die meisten Entwickler führen Ihre apps in Büros oder Räumen aus, die kleiner sind als der Demoraum, sodass es nicht passt.Most developers will run their apps in offices, or rooms smaller than the demo room, so it wouldn’t fit.
  • Anzeigen sind additiv, was bedeutet, dass die gesamte virtuelle Umgebung über dem Raum eines Benutzers überlagert wird.Displays are additive, meaning the entire virtual environment will be overlaid over a user’s room. Dies kann mit zwei Tabellen verwirrend werden, möglicherweise mit doppelten Couches und Wänden, die nicht ausgerichtet sind.That can get confusing with two tables, maybe double couches, and walls that don’t align.
  • Und das schlechteste aus einer virtuellen Umgebung, die stark durch ein Sichtfeld eingeschränkt ist.And worst of all a virtual environment heavily constrained by a field of view.

Als wir eine Mini-1:10-Skala ausprobiert haben, war das Ergebnis eine fantastische Vogelperspektive in einem realistischen Raum.When we tried out a mini 1:10 scale, the result was a fantastic birds-eye view of a realistic room. Sie können alles, was in jedem beliebigen Winkel passiert ist, gleichzeitig sehen.You could see everything that was going on from any angle all at the same time. Was am offensichtlichsten war, ist, dass die meisten Tester es so viel mehr einsehen, dass Sie eine kleine Version sehen konnten, und dann nie wieder zur 1:1-Skala gewechselt.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. Wir haben uns entschieden, die Version 1:1 zu bereinigen und die zusätzliche Arbeit zu vermeiden, die zum Anpassen der Benutzeroberfläche und anderer Aspekte der APP erforderlich ist.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.

Sichtfeld mit 1:1-Skalierungs Feld Ansicht mit 1:1-SkalaField of view with 1:1 scale Field of view with 1:1 scale

Sichtfeld mit 1:10-Skalierungs Feld Ansicht mit 1:10-SkalaField of view with 1:10 scale Field of view with 1:10 scale

Verwenden der Mixed Reality-ErfassungUsing Mixed Reality Capture

Eines der charakterischsten Features dieser APP ist die Verwendung der gemischten Reality-Erfassung, um gemischte Entwurfskonzepte für die Realität zu vermitteln und zu veranschaulichen.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 verfügt über eine Mixed Reality Capture Studio in San Francisco.Microsoft has a Mixed Reality Capture studio in San Francisco. Microsoft lizenziert diese Technologie auch an andere Studio, die eine Avatar-Dimension in Washington D.C., metastage in Los Angeles, Dimensions-Studios in London, SK Telecom in Seoul und volucap in Berlin enthalten.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. Weitere Informationen zu unseren Mixed Reality Capture-Studiosfinden Sie hier.You can find more information on our Mixed Reality Capture Studios here.


Unformatierte Text Aufnahmen von Daniel Escudero von einer der 106-Kameras im Mixed Reality Capture Studio in San Francisco.Raw footage of Daniel Escudero from one of the 106 cameras in the Mixed Reality Capture Studio in San Francisco.

Der Erfassungsprozess generiert ein keyframed Mesh, Normals und eine Textur, die als obj/PNG-Dateien zur weiteren Nachbereitung bereitgestellt werden können, oder zur Wiedergabe als H. 264-komprimierte MP4-Datei.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. Diese Dateien können in Unity-, Unreal-, Native-und webxr-Projekte importiert werden.These files can be imported into Unity, Unreal, Native, and WebXR projects. Dateien können unter Windows, Ios, Mac, Android, Magic Leap und Play Play VR ausgeführt werden.Files can run on Windows, iOS, Mac, Android, Magic Leap, and Playstation VR.


Der Erfassungs Player, der zum Analysieren von MP4 Bitrate bereitgestellt wird, die Videos mit Audiodaten und eingebetteten Meshes enthaltenThe Capture Player provided to analyze mp4s that contain video with audio and embedded meshes.

Bearbeiten von Erfassungen und virtuellen ObjektenManipulating captures and virtual objects

Gemischte Reality-Erfassungen führen zu virtuellen Darstellungen von Personen oder Tieren. Manchmal benötigen Sie diese Zeichen jedoch möglicherweise, um mit anderen virtuellen Objekten zu interagieren.Mixed Reality Captures produce virtual representations of people or animals, but at times you may need those characters to interact with other virtual objects. In den folgenden beiden Beispielen werden verschiedene Möglichkeiten veranschaulicht, wie die Kulissen bearbeitet wurden, um diesen Effekt zu erzielen.The following two examples show different ways we manipulated the scenes to achieve this effect.

Anpassung des Head-BlicksHead Gaze Adjustment

Durch die Anpassung von headblick können Sie den Kopf einer erfassten Person zur Laufzeit verschieben, was bedeutet, dass Sie für einen Benutzer ein Erfassungs Gesicht haben könnten.Headgaze adjustment lets you move a captured person’s head at runtime, meaning you could have a capture face towards a user. In unserem Fall haben wir Sie verwendet, um das Feld für die Ansicht und das gewünschte Feld anzuzeigen.In our case, we used it to show the field of view and field of interest. Im folgenden sehen Sie ein bewegliches gameobject, das als Ziel für den Haupt Blick fungiert.What you see below is a moving gameobject acting as a target for the head gaze to look at. Wenn das Ziel von Seite zu Seite verschoben wird, wird der Anfang der Erfassung befolgt.As we move the target from side to side, the head of the capture follows.

Wir haben diesen Trick verwendet, um sicherzustellen, dass die im Leerlauf befindliche Erfassung stets mit holograms in unterschiedlichen Teilen des Puppenhauses konfrontiert wird.We used this trick to make sure that the idle capture would always face towards holograms placed in different parts of the doll house.

Der Kopf der Erfassung, der zur Laufzeit nach einem Ziel-gameobject in Unity verschoben wird

Der Kopf der Erfassung, der zur Laufzeit nach einem Ziel-gameobject in Unity verschoben wird.The Capture’s head being moved at runtime following a target gameobject in Unity.

Synchronisieren von animierten ObjektenSyncing Animated Objects

Die zweite war das Animieren von Objekten, die mit einer Erfassungs Bewegung synchronisiert werden sollen.The second one, was animating objects to sync with a capture’s movement. In unterschiedlichen Teilen der APP haben wir alle fünf Frames das sequenzielle OBJS einer bestimmten Erfassung importiert.In different parts of the app, we imported sequential OBJs of a specific capture every five frames. Die OBJS wurde dann in der Szene animiert, um sicherzustellen, dass Sie mit dem entsprechenden Frame der Erfassung übereinstimmen.The OBJs were then animated in the scene to make sure they would match the corresponding frame of the capture. Es ist ein mühsamer Prozess der Animation und der Keyframes, aber das Ergebnis ist hervorragend.It’s a tedious process of animating and keyframing, but the result is great. Sie können jetzt eine gemischte Reality-Erfassung sehen, die mit nicht erfassten Objekten interagiert.You can now see a Mixed Reality Capture interacting with non-captured objects.

Synchronisierungs Animation zwischen einem gemischten Reality-Erfassungs-und UI-Panel

Synchronisierungs Animation zwischen einem gemischten Reality-Erfassungs-und UI-PanelSynced animation between a Mixed Reality Capture and UI panel

Kreativer UI-ProzessUI creative process

Als wir das Design der Benutzeroberfläche gestartet haben, wollten wir einige der magischen und möglichen Möglichkeiten zeigen, die holograms anbieten müssen.When we started the UI design, we wanted to show some of the magic and possibility that holograms have to offer. Das einfache darstellen von statischen 2D-Fenstern und Textfeldern ist in der 3D-Welt nicht richtig.Simply showing static 2D windows and text boxes doesn’t feel right in the 3D world. Viele der Möglichkeiten werden nicht angezeigt. Wir haben also von Anfang an entschieden, von diesem Weg zu kommen, und machen den Holographic 3D-Raum vollständig zu nutzen.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.

Zunächst haben wir begonnen, den Bereichen, Symbolen und Textinformationen eine gewisse Stärke hinzuzufügen.At first, we started with adding some thickness to the panels, icons, and text information. Als Benutzer sehen Sie das Textfeld.Still, as a user, what I see is a text box. Text Felder mit Bildern, aber wir sind nicht vorhanden.Text boxes with images, but we aren't there. Wir haben mit den Shader von Mixed Reality Toolkit (mrtk) fortgefahren.We went further by making use of the Mixed Reality Toolkit (MRTK) shaders. Die mrtk-Shader wurden zu einem leistungsfähigen Tool, und wir nutzten unsere Schablonen Features, um den Bereichen negative Tiefe hinzuzufügen.The MRTK shaders became a powerful tool, and we made use of its stencil features to add negative depth to the panels. Das heißt, anstatt Elemente vor einem Textfeld hinzuzufügen, werden die Symbole jetzt hinter einem transparenten Panel angezeigt.That means instead of adding elements in front of a text box, the icons now appear behind a transparent panel. Ich sehe jetzt als Benutzer etwas, das ich einfach nicht mehr in der realen Welt replizieren kann. an dieser Stelle begann Holographic Magic.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. Auch als Benutzer, den ich nicht gerne lesen möchte, mache ich noch viel in der physischen Welt.Also as a user I don’t really like to read, I do a lot already in the physical world.

Natürlich funktionieren Symbole viel besser als der einfache Text, um eine noch leistungsfähigere Anleitung bereitzustellen. Anschließend begann ich mit der Erstellung eines Satzes von animierten Objekten und Avatars, von denen jeder eine kleine Story darüber erzählt, was im jeweiligen Szenario passiert und wie es verwendet wird.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.

Animiertes GIF eines interaktiven Holographic-Menüsystems

Wichtige KonzepteCore concepts

Holografischer RahmenHolographic frame

Animiertes GIF eines Benutzers, der das "Dollhouse" durchsucht, wobei der Holographic Frame hervorgehoben ist

KoordinatensystemeCoordinate systems

Animiertes GIF eines Benutzers, der das Dollhouse mit hervorgehobenen Koordinatensystemen ansieht

Eyetracking – BlickverfolgungEye tracking

Animiertes GIF eines Benutzers, der stationär holograms mit hervorgehobenem Eye Eye-Ray ansieht

Raum Scan Visualisierung und räumliche ZuordnungRoom scan visualization and spatial mapping

Animiertes GIF aller Oberflächen innerhalb des zu zugeordneten Dollhouse

Grundlegendes zu SzenenScene understanding

Animiertes GIF von Objekten im "Dollhouse" erkannt

Punkt und Commit mit Hand StrahlenPoint and commit with hand rays

Animiertes GIF eines Benutzers mit hervorgehobenem Hand Strahl

Augenblicke ausprobieren"Try it out" moments

Der Entwurf von holograms vermittelt gemischte Reality-Konzepte, aber Sie können Sie auch in Ihrem Raum ausprobieren.Designing Holograms teaches mixed reality concepts, but it also allows you to try them in your room. Nach einigen dieser Erläuterungen halten wir Sie an der Puppenstube und werden in einen interaktiven Moment einsteigen.After some of those explanations, we pause and take you out of the doll house and into an interactive moment. Im folgenden sind einige Beispiele für diese interaktiven Momente aufgeführt:Here are some examples of those interactive moments:

Animiertes GIF des Hand Verfolgungs Rahmens, der angezeigt wird, wenn die Hände erkannt werden, und wenn Sie das Sichtfeld eingeben.

Der handverfolgungsframe, der angezeigt wird, wenn die Hände erkannt werden, und wenn Sie das Feld der Ansicht eingeben.The hand tracking frame showing when hands are detected and when they enter the field of view.

Animiertes GIF der Interaktion mit kollidierenden Kristallen durch die weite Interaktion

Interagieren mit kollidierenden Kristallen durch die weite InteraktionInteracting with colliding crystals through far interaction

Animiertes GIF zum Durchsuchen von Near Interaktionen

Erkunden von Near Interaktion-auffortungenExploring near interaction affordances

Informationen zum TeamAbout the team

Picture of Daniel Escudero Daniel EscuderoDaniel Escudero
Leitender technischer DesignerLead Technical Designer
Dan ist der Creative Director zum Entwerfen von holograms und funktioniert zurzeit als Entwurfs Leiter für die gemischte Reality Academy von Microsoft in San Francisco und war zuvor ein Designer in einem der Mixed Reality-Studio von Microsoft in London.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
Senior 3D-KünstlerSenior 3D Artist
Martin leitet 3D-Grafiken und UI-Design für das Entwerfen von holograms ein und war zuvor Senior 3D-Artist in einem der Mixed Reality-Studio von Microsoft in 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.

Ein großer Dank für das Mixed Reality-Entwurfs Team für die gemeinsame Nutzung von Kenntnissen und für die erstaunlichen Menschen in der Objekt Theorie , dass Sie in jedem Schritt des Projekts wesentliche Teammitglieder sind.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. Vielen Dank für ihre faszinierenden Talente, für Ihre Leidenschaft und das besondere Design.Thank you all for you amazing talent, for your passion and exceptional eye for design.