Designing Holograms 的制作

注意

请允许显示一个小型加载窗口来说明此页上的所有酷炫 GIF 和嵌入的视频。

了解如何针对混合现实而开发可能比较困难,因为媒介并非始终能很好地转换为 2D 设计过程。 在 Microsoft,我们创建了一款适用于 HoloLens 2 的免费应用,可帮助你直接学习混合现实 UX 设计的基础知识。 Designing Holograms 应用的独特方法深入介绍了混合现实行为、提示和建议,可帮助你创建自己的富有吸引力的、令人惊叹的 HoloLens 应用。 从 Microsoft Store 免费下载应用,并从 Microsoft 的混合现实设计团队那里学习!


Animated GIF of the head tracking scene in the Designing Hologram's demo room

Designing Holograms 的演示室(也称为玩偶屋)​

专为混合现实而设计

与许多人一样,我过去经常设计移动应用。 从 2D 设计世界完全转向空间计算(目前所有事物都位于这个世界中)是一项重大转变。 在混合现实中,应用不再局限于 2D 屏幕;事实上,它们几乎是自由的,位于现实世界中,并与真实对象进行交互。

对我而言,将 3D 体验与传统的 2D 设计过程联系起来是混合现实开发中最具挑战性的方面。 在与客户的对话中,我会听到这样的话:“我知道要包含哪些功能以及如何启动并运行它们。 这是代码,我可以按照文档和教程操作,但用户体验呢? 如此多的功能、不同的输入选项、不同的场景和物理环境,令人难以拒绝”。

Image from the HoloLens 2 Design Workshop in San Francisco来自旧金山 HoloLens 2 设计研讨会的图像[https://blogs.technet.microsoft.com/askperf/2008/11/18/disabling-unnecessary-services-a-word-to-the-wise/]()

教授机会

这最初并不明显,但后面会出现一个绝佳的机会,可将混合现实用作一种媒介来进行教授。

Designing Holograms 是一个介绍混合现实设计概念和建议的视觉体验。 只有你和一位虚拟教师展示混合现实设计概念。 所有内容都基于第三人称视角,体验均在你自己的空间中提供。


Designing Holograms 预告视频​

探索玩偶屋

玩偶屋是我们在整个应用中使用的虚拟环境。 此环境是一个 80 x 60 x 40 cm 的微型空间,其中包含大多数房间共有的基本元素,如墙、灯、家具、桌子和电视。 玩偶屋是应用体验的主要内容,因此我们需要确保它在任何环境中都能正常运作。 将它视为一个小型演示室,用于可视化各种混合现实概念。

玩偶屋调整行为的视频​

1:1 与 1:10 原型

我们最初的假设是 1:1 演示会非常棒,几乎像是看到真人教师一样。 用户会看到教师在现实生活中看到的一切。 但是,我们立即意识到存在以下几个问题:

  • 大多数开发人员会在办公室或比演示室更小的空间内运行应用,因此不合适。
  • 显示是累加的,这意味着整个虚拟环境都会覆盖在用户的空间内。 两张桌子、两张沙发和不整齐的墙面可能会让人感到困惑。
  • 并且最糟糕的是,虚拟环境在很大程度上受到视场的限制。

当我们尝试进行微型 1:10 缩放时,结果是一个逼真空间的奇妙的俯视图。 可以同时从任何角度看到正在进行的一切操作。 最令人吃惊的是,大多数测试人员发现观看小型版本具有更身临其境的体验,然后他们不会再切换回 1:1 缩放。 因此,我们决定弃用 1:1 版本,避免造成调整 UI 和应用的其他方面所需的其他工作。

Field of view with 1:1 scale​比例为 1:1 的视图字段[https://blogs.technet.microsoft.com/askperf/2008/11/18/disabling-unnecessary-services-a-word-to-the-wise/]()

Field of view with 1:10 scale比例为 1:10 的视图字段[https://blogs.technet.microsoft.com/askperf/2008/11/18/disabling-unnecessary-services-a-word-to-the-wise/]()

使用混合现实捕获

此应用的最具特色的功能之一是使用混合现实捕获来教授和演示混合现实设计概念。

Microsoft 在旧金山有一家混合现实捕获工作室。 Microsoft 还将这项技术授权给其他工作室,包括华盛顿特区的 Avatar Dimension、洛杉矶的 Metastage、伦敦的 Dimension Studios、首尔的 SK Telecom 和柏林的 Volucap。 可在此处找到有关混合现实捕获工作室的详细信息。


Daniel Escudero 的原始镜头,来自旧金山的混合现实捕获工作室中的 106 台摄像机之一​

捕获过程会生成关键帧网格、法线和纹理,可将其作为 OBJ/PNG 文件传送,以便进一步进行后期制作,或准备好作为 H.264 压缩的 MP4 文件播放。 可将这些文件导入到 Unity、Unreal、Native 和 WebXR 项目中。 文件可在 Windows、iOS、Mac、Android、Magic Leap 和 Playstation VR 上运行。


提供的捕获播放器用于分析包含具有音频和嵌入网格的视频的 mp4

操作捕获和虚拟对象

混合现实捕获会生成人物或动物的虚拟表示形式,但有时你可能需要这些字符以与其他虚拟对象进行交互。 下面两个示例展示了我们操作场景以实现此效果的不同方式。

头部视线调整

通过头部视线调整,你可以在运行时移动已捕获的人物的头部,这意味着你可以将捕获的人脸朝向某位用户。 在我们的示例中,我们使用它来展示视场和感兴趣的区域。 下面显示的是一个移动的 gameobject,作为头部视线的目标进行查看。 当我们将目标从一侧移到另一侧时,捕获的头部也随之移动。

我们使用这一技巧来确保空闲捕获始终面向位于玩具室中不同部分的全息影像。

The Capture’s head being moved at runtime following a target gameobject in Unity

捕获的头部在运行时跟随 Unity 中的目标 gameobject 移动

同步动画对象

第二个示例是将对象制成动画以与捕获的移动同步。 在应用的不同部分,我们每隔五帧导入了一次特定捕获的顺序 OBJ。 然后,在场景中对 OBJ 进行动画处理,以确保它们与捕获的相应帧匹配。 这是一个制作动画和关键帧的乏味过程,但结果很棒。 你现在可以看到混合现实捕获与非捕获对象的交互。

Synced animation between a Mixed Reality Capture and UI panel

混合现实捕获与 UI 面板之间的同步动画

UI 创作过程

开始 UI 设计时,我们想要展示全息影像需要提供的一些魔力和可能性。 在 3D 世界中简单地显示静态 2D 窗口和文本框并不合适。 触手可及的许多可能性还未出现,因此从一开始,我们就决定摆脱此想法,充分利用全息的 3D 空间。

首先,我们增加面板、图标和文本信息的厚度。 不过,作为用户,我看到的是文本框。 但我们还未实现带有图像的文本框。 我们接下来进一步利用混合现实工具包 (MRTK) 着色器。 MRTK 着色器成为了一种功能强大的工具,我们使用其模具功能向面板添加了反向深度。 这意味着,图标现在显示在透明面板后面,而不是在文本框前面添加元素。 作为用户,我现在看到的是我在现实世界中无法复制的东西,这就是全息魔法开始发生的地方。 此外,作为用户,我不太喜欢阅读,我在现实世界中已经完成了太多的阅读。

显然,图标比简单的文本具有更好的效果,为了提供更强大的指导,我开始创建了一组动画对象和虚拟形象,每个对象和虚拟形象都讲述一个小故事,内容是关于在各自场景中所做的事情以及使用方式。

Animated GIF of an interactive holographic menu system

核心概念

头部跟踪和眼动跟踪

手部跟踪

空间感知

全息帧

Animated GIF of a user looking around the dollhouse with the holographic frame highlighted

坐标系统

Animated GIF of a user looking around the dollhouse with the coordinate systems highlighted

眼动跟踪

Animated GIF of a user looking at stationary holograms with the eye gaze ray highlighted

空间扫描可视化效果和空间映射

Animated GIF of all surfaces inside the dollhouse being mapped

场景理解

Animated GIF of objects in the dollhouse being recognized

通过手部射线进行指向和提交

Animated GIF of a user raising his hand with a hand ray highlighted

“试用”时刻

Designing Holograms 讲授混合现实概念,但你可以在自己的房间内试用它们。 经过这些说明之后,我们先暂停一下,带你走出玩偶屋并开展交互活动。 下面是这些交互活动的一些示例:

Animated GIF of the hand tracking frame showing when hands are detected and when they enter the field of view

在检测到手部以及它们进入视场时显示的手部跟踪帧

Animated GIF of interacting with colliding crystals through far interaction

通过远距离交互与碰撞的晶体进行交互

Animated GIF of exploring near interaction affordances

探索近距交互视觉元素

关于团队

Picture of Daniel Escudero Daniel Escudero
首席技术设计师
Dan 是设计全息影像的创意总监,目前在旧金山的 Microsoft 混合现实学院担任设计主管,之前在伦敦的一家 Microsoft 混合现实工作室担任设计师。
Picture of Martin Wettig​ Martin Wettig​
资深 3D 美术师
Martin 负责 Designing Holograms 的 3D 艺术和 UI 设计,之前在位于柏林的一家 Microsoft 混合现实工作室担任资深 3D 美术师。

非常感谢混合现实设计团队分享了如此多的知识,也非常感谢 Object Theory 的出色人员成为项目的每一步发展中必不可少的团队成员。 非常感谢你们出色的才能、热情以及卓越的设计眼光。