La realización del diseño de hologramasThe making of Designing Holograms

Nota

Permita que una pequeña ventana de carga tenga en cuenta todos los archivos GIF y los vídeos insertados en esta página.Please allow for a small loading window to account for all the cool GIFs and embedded videos on this page.

Aprender a diseñar una realidad mixta puede ser difícil, ya que el medio no siempre se convierte bien en procesos de diseño 2D.Learning how to design for mixed reality can be hard because the medium doesn't always translate well to 2D design processes. Aquí, en Microsoft, hemos creado una aplicación gratuita para HoloLens 2 que le ayudará a conocer los aspectos básicos del diseño de la experiencia de usuario de realidad mixta de primera mano.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. El enfoque único de la aplicación de diseño de hologramas se adentra en comportamientos de realidad mixta, sugerencias y recomendaciones para ayudarle a crear aplicaciones de HoloLens atractivas y increíbles propias.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. Descargue la aplicación de forma gratuita desde el Microsoft Store y aprenda del equipo de diseño de la realidad mixta de Microsoft.Download the app for free from the Microsoft Store and learn from Microsoft’s Mixed Reality Design Team!


GIF animado de la escena de seguimiento de cabeza en el salón de demostración del holograma de diseño

Diseñar el salón de demostración del holograma (también conocido como la casa de muñecas)Designing Hologram’s demo room (also known as the doll house)

Diseño para la realidad mixtaDesigning for mixed reality

Al igual que muchos de los demás, se usa para diseñar aplicaciones móviles.Like many of you, I used to design mobile apps. Desde un mundo de diseño 2D, pasar a todo en informática espacial, donde todo está ahora en todo el mundo, era un cambio significativo.Coming from a 2D design world, jumping into full on spatial computing, where everything is now in the world, was a significant shift. En realidad mixta, las aplicaciones ya no se limitan a una pantalla 2D; de hecho, son casi gratis, se colocan en el mundo real e interactúan con objetos reales.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.

Para mí, la conexión de experiencias 3D a procesos de diseño 2D convencionales es el aspecto más desafiante del desarrollo de realidad mixta.To me, connecting 3D experiences to conventional 2D design processes is the most challenging aspect of mixed reality development. En conversaciones con los clientes, oigo cosas como "sé qué características incluir y cómo ponerlas en funcionamiento.In conversations with customers, I would hear things like “I know what features to include and how to get them up and running. Código, puedo seguir los documentos y tutoriales, pero la experiencia del usuario.It’s code, I can follow the docs and tutorials, but the user experience? Muchas características, distintas opciones de entrada, diferentes escenarios y entornos físicos, son abrumadoras ".So many features, different input options, different scenarios, and physical environments, it’s overwhelming".

Imagen de la imagen de HoloLens 2 Design Workshop en San Francisco del taller de diseño de hololens 2 en San FranciscoImage from the HoloLens 2 Design Workshop in San Francisco Image from the HoloLens 2 Design Workshop in San Francisco

Una oportunidad para enseñarAn opportunity to teach

No resultó obvio al principio, pero se presentó una excelente oportunidad para usar la realidad mixta como medio para enseñarla.It wasn’t obvious at first, but an excellent opportunity was presented to use mixed reality as a Medium to teach it.

El diseño de hologramas es una experiencia visual que explica los conceptos y las recomendaciones del diseño de realidad mixta.Designing Holograms is a visual experience that explains mixed reality design concepts and recommendations. Simplemente usted y un profesor virtual muestran conceptos de diseño de realidad mixta.It’s just you and a virtual teacher demonstrating mixed reality design concepts. Todo está desde una perspectiva de tercera persona con la experiencia firmemente en su propio espacio.Everything is from a third person perspective with the experience firmly in your own space.


Vídeo de diseño de hologramasDesigning Holograms trailer video

Exploración de la casa de muñecasExploring the doll house

La casa de muñecas es el entorno virtual que usamos en toda la aplicación.The doll house is the virtual environment we use throughout the app. El entorno es una habitación en miniatura de 80 x 60 x 40 cm que contiene los elementos básicos que la mayoría de los salones tienen en común, como las paredes, las lámparas, el mobiliario, una tabla y un televisor.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 casa de muñecas es el protagonist principal de la experiencia de la aplicación, por lo que es necesario asegurarse de que funcionaría bien en cualquier entorno.The doll house is the main protagonist of the app experience, so we needed to make sure it would work great in any environment. Piense en ello como un pequeño salón de demostración para visualizar todo tipo de conceptos de realidad mixta.Think of it as a small demo room for visualizing all sorts of mixed reality concepts.

Vídeo del comportamiento de ajuste de dollhouseVideo of the Dollhouse adjustment behavior

1:1 prototipos de vs 1:101:1 vs 1:10 prototypes

Nuestra suposición inicial era que las demostraciones de 1:1 serían increíbles, casi como mirar a un profesor real.Our initial assumption was that 1:1 demonstrations would be amazing, almost like looking at a real life teacher. El usuario verá todo lo que ve el profesor en una escala de vida real.The user would see everything that the teacher sees at a real life scale. Sin embargo, inmediatamente se ha dado cuenta de que hay algunos problemas:However, we immediately realized that there would be a few problems:

  • La mayoría de los desarrolladores ejecutarán sus aplicaciones en oficinas o salas más pequeñas que el salón de demostración, por lo que no cabe.Most developers will run their apps in offices, or rooms smaller than the demo room, so it wouldn’t fit.
  • Las pantallas son aditivas, lo que significa que todo el entorno virtual se superpone a la habitación de un usuario.Displays are additive, meaning the entire virtual environment will be overlaid over a user’s room. Esto puede resultar confuso con dos tablas, quizás bisofás y paredes que no se alinean.That can get confusing with two tables, maybe double couches, and walls that don’t align.
  • Y el peor de los entornos virtuales están muy restringidos por un campo de vista.And worst of all a virtual environment heavily constrained by a field of view.

Cuando se intentó una pequeña escala de 1:10, el resultado era una fantástica vista de pájaro de un salón realista.When we tried out a mini 1:10 scale, the result was a fantastic birds-eye view of a realistic room. Podría ver todo lo que estaba pasando desde cualquier ángulo al mismo tiempo.You could see everything that was going on from any angle all at the same time. Lo más sorprendente es que la mayoría de los evaluadores lo encontraron mucho más envolventes para ver una versión pequeña y, después, nunca se han vuelto a la escala 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. Por lo tanto, hemos decidido rechazar la versión 1:1 y evitar el trabajo adicional necesario para adaptar la interfaz de usuario y otros aspectos de la aplicación.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.

Campo de vista con el campo de escala 1:1 de la vista con la escala 1:1Field of view with 1:1 scale Field of view with 1:1 scale

Campo de vista con el campo de escala 1:10 de la vista con la escala 1:10Field of view with 1:10 scale Field of view with 1:10 scale

Uso de la captura de realidad mixtaUsing Mixed Reality Capture

Una de las características más característicos de esta aplicación es el uso de la captura de realidad mixta para enseñar y demostrar conceptos de diseño de realidad mixta.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 tiene un estudio de captura de realidad mixta en San Francisco.Microsoft has a Mixed Reality Capture studio in San Francisco. Microsoft también concede licencias para esta tecnología a otros estudios, que incluyen la dimensión de Avatar en Washington D.C., metastage en los Ángeles, estudios de Dimension en Londres, SK Telecom en Seúl y Volucap en Berlín.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. Puede encontrar más información sobre nuestros estudios de captura de realidad mixta aquí.You can find more information on our Mixed Reality Capture Studios here.


Material de estudio de Daniel escudero de una de las cámaras 106 en el estudio de captura de realidad mixta en San Francisco.Raw footage of Daniel Escudero from one of the 106 cameras in the Mixed Reality Capture Studio in San Francisco.

El proceso de captura genera una malla, normales y texturas fotogramas clave, que se pueden entregar como archivos OBJ/PNG para posteriores a la producción o listas para su reproducción como un archivo MP4 comprimido 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. Estos archivos se pueden importar en proyectos Unity, no reales, nativos y WebXR.These files can be imported into Unity, Unreal, Native, and WebXR projects. Los archivos se pueden ejecutar en Windows, iOS, Mac, Android, Magic Leap y PlayStation VR.Files can run on Windows, iOS, Mac, Android, Magic Leap, and Playstation VR.


El reproductor de captura proporcionado para analizar MP4 que contienen vídeo con audio y mallas incrustadas.The Capture Player provided to analyze mp4s that contain video with audio and embedded meshes.

Manipular capturas y objetos virtualesManipulating captures and virtual objects

Las capturas de realidad mixta producen representaciones virtuales de personas o animales, pero en ocasiones puede que necesite esos caracteres para interactuar con otros objetos virtuales.Mixed Reality Captures produce virtual representations of people or animals, but at times you may need those characters to interact with other virtual objects. En los dos ejemplos siguientes se muestran distintas formas de manipular las escenas para lograr este efecto.The following two examples show different ways we manipulated the scenes to achieve this effect.

Ajuste de mira hacia abajoHead Gaze Adjustment

El ajuste Headgaze permite trasladar el encabezado de una persona capturada en tiempo de ejecución, lo que significa que podría tener una superficie de captura hacia un usuario.Headgaze adjustment lets you move a captured person’s head at runtime, meaning you could have a capture face towards a user. En nuestro caso, se usa para mostrar el campo de vista y el campo de interés.In our case, we used it to show the field of view and field of interest. Lo que se ve a continuación es un GameObject en movimiento que actúa como un destino para que la mirada mire.What you see below is a moving gameobject acting as a target for the head gaze to look at. A medida que se mueve el destino de lado a lado, se sigue el encabezado de la captura.As we move the target from side to side, the head of the capture follows.

Usamos este truco para asegurarnos de que la captura inactiva siempre se encontraba en los hologramas colocados en distintas partes de la casa de muñecas.We used this trick to make sure that the idle capture would always face towards holograms placed in different parts of the doll house.

El encabezado de la captura se mueve en el tiempo de ejecución después de un GameObject de destino en Unity.

El encabezado de la captura se mueve en el tiempo de ejecución después de un GameObject de destino en Unity.The Capture’s head being moved at runtime following a target gameobject in Unity.

Sincronizar objetos animadosSyncing Animated Objects

El segundo, estaba animando objetos para sincronizar con el movimiento de una captura.The second one, was animating objects to sync with a capture’s movement. En diferentes partes de la aplicación, se han importado obj secuenciales de una captura específica cada cinco fotogramas.In different parts of the app, we imported sequential OBJs of a specific capture every five frames. Después, los obj se animaron en la escena para asegurarse de que coincidirían con el fotograma correspondiente de la captura.The OBJs were then animated in the scene to make sure they would match the corresponding frame of the capture. Es un proceso tedioso de animación y fotogramas clave, pero el resultado es excelente.It’s a tedious process of animating and keyframing, but the result is great. Ahora puede ver una captura de realidad mixta que interactúa con objetos no capturados.You can now see a Mixed Reality Capture interacting with non-captured objects.

Animación sincronizada entre una captura de realidad mixta y un panel de interfaz de usuario

Animación sincronizada entre una captura de realidad mixta y un panel de interfaz de usuarioSynced animation between a Mixed Reality Capture and UI panel

Proceso de creación de interfaz de usuarioUI creative process

Cuando comenzamos el diseño de la interfaz de usuario, quisiéramos mostrar algunos de los casos de magia y la posibilidad de que los hologramas lo ofrezcan.When we started the UI design, we wanted to show some of the magic and possibility that holograms have to offer. Simplemente mostrar ventanas 2D estáticas y cuadros de texto no se siente bien en el mundo 3D.Simply showing static 2D windows and text boxes doesn’t feel right in the 3D world. Muchas de las posibilidades que hay a mano no se muestran, así que desde el principio decidimos apartarse de eso y hacer uso completo del espacio 3D holográfica.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.

En primer lugar, empezamos por agregar cierto grosor a los paneles, iconos e información de texto.At first, we started with adding some thickness to the panels, icons, and text information. Aún así, como usuario, lo que veo es un cuadro de texto.Still, as a user, what I see is a text box. Cuadros de texto con imágenes, pero no estamos ahí.Text boxes with images, but we aren't there. Hemos ido más lejos mediante el uso de los sombreadores de kit de herramientas de realidad mixta (MRTK).We went further by making use of the Mixed Reality Toolkit (MRTK) shaders. Los sombreadores de MRTK se convierten en una herramienta eficaz y hicimos uso de sus características de estarcido para agregar profundidad negativa a los paneles.The MRTK shaders became a powerful tool, and we made use of its stencil features to add negative depth to the panels. Esto significa que, en lugar de agregar elementos delante de un cuadro de texto, los iconos aparecen ahora detrás de un panel transparente.That means instead of adding elements in front of a text box, the icons now appear behind a transparent panel. Lo que veo ahora como usuario es algo que simplemente no puedo replicar en el mundo real, y aquí es donde se empezó a producir holográfica mágica.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. Además, como usuario realmente no me gustaría leer, hago mucho en el mundo físico.Also as a user I don’t really like to read, I do a lot already in the physical world.

Obviamente, los iconos funcionan mucho mejor que el texto sencillo, para proporcionar una guía aún más eficaz y, a continuación, empezaron a crear un conjunto de objetos animados y avatares, cada uno de ellos indicando una pequeña historia sobre lo que se hace en el escenario respectivo y cómo se usa.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 animado de un sistema de menús de Holographic interactivo

Conceptos principalesCore concepts

Marco holográficoHolographic frame

GIF animado de un usuario que mira el dollhouse con el marco holográfica resaltado

Sistemas de coordenadasCoordinate systems

GIF animado de un usuario que busca Dollhouse con los sistemas de coordenadas resaltados

Seguimiento de los ojosEye tracking

GIF animado de un usuario que mira los hologramas estacionales con el rayo ojo mirado

Visualización de detección de salón y asignación espacialRoom scan visualization and spatial mapping

GIF animado de todas las superficies dentro del dollhouse que se está asignando

Descripción de escenasScene understanding

GIF animado de objetos en el dollhouse que se está reconociendo

Punto y confirmación con rayos manoPoint and commit with hand rays

GIF animado de un usuario que levanta su mano con un rayo de mano resaltado

Momentos "pruébelo""Try it out" moments

El diseño de hologramas enseña conceptos de realidad mixta, pero también le permite probarlos en su habitación.Designing Holograms teaches mixed reality concepts, but it also allows you to try them in your room. Después de algunas de esas explicaciones, se pone en pausa y sacamos de la casa de muñecas y en un momento interactivo.After some of those explanations, we pause and take you out of the doll house and into an interactive moment. Estos son algunos ejemplos de esos momentos interactivos:Here are some examples of those interactive moments:

GIF animado del marco de seguimiento de mano que se muestra cuando se detectan manos y cuando entran en el campo de la vista

El marco de seguimiento de mano que se muestra cuando se detectan manos y cuando entran en el campo de la vista.The hand tracking frame showing when hands are detected and when they enter the field of view.

GIF animado de interactuar con cristales en conflicto a través de la interacción Far

Interactuar con los cristales en conflicto a través de la interacción lejanaInteracting with colliding crystals through far interaction

GIF animado de explorar prestaciones de casi interacción

Exploración de las prestaciones de casi interacciónExploring near interaction affordances

Acerca del equipoAbout the team

Picture of Daniel Escudero Daniel EscuderoDaniel Escudero
Diseñador técnico líderLead Technical Designer
Dan es el director creativo sobre el diseño de hologramas y actualmente funciona como responsable de diseño de la Academia de la realidad mixta de Microsoft en San Francisco y antes era un diseñador en uno de los estudios de realidad mixta de Microsoft en 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
Artista Senior en 3DSenior 3D Artist
Martin lidera el diseño de la interfaz de usuario y la imagen en 3D al diseñar hologramas y antes era un artista Senior en 3D en uno de los estudios de realidad mixta de Microsoft en Berlín.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.

Le agradecemos enormemente el equipo de diseño de la realidad mixta con el fin de compartir tanto conocimiento como el increíble personal en teoría de objetos para ser integrantes de los compañeros de equipo en cada paso del proyecto.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. Gracias por su gran talento, por su pasión y una mirada excepcional para el diseño.Thank you all for you amazing talent, for your passion and exceptional eye for design.