创建全息用户界面

这篇帖子是由内容创建者模拟器的创作者凯文·沃特斯和费尔南多·拉马洛客串撰写的。这篇文章假设有一些Unity的基本知识，并且熟悉Look Glass显示屏和HoloPlay Unity插件。有关详细信息，请访问此页面。

嘿你好啊！我们是Looking Glass内容创建器模拟器(CCS)的开发者，这是MadeWith上提供的一个古怪的工具，可以使用互联网GIF创建有趣和奇怪的3D立体图。这篇文章概述了我们是如何为CCS创建全息用户界面的，一些最佳实践，以及我们在可下载的Unity包中包含了哪些工具和技术。

由于容器服务严重依赖播放器的用户界面，所以我们对这个项目的UI有一些特殊的要求：

它必须简单，易于使用，并尽可能地依赖图标。

就像在开发虚拟现实头盔的早期一样，在全息界面上没有太多现有的研究或工作可以复制或开始，所以我们必须想出自己的技术来实现可读性和可用性的目标。

在项目早期，我们制作了主要交互的原型，并找到了工作最好的相机设置。我们坚持这个相机角度，并基于相机不会移动的假设进行UI布局。始终在Looking Glass显示器上进行测试是很重要的--在普通的二维显示器上很难真正感受到3D效果！

很快就清楚了，我们需要在场景中定义UI所在的不同区域，以及允许UI元素到达多深以避免与场景的几何图形重叠，反之亦然。

为了确保即使场景的几何体距离场景太近或超出其在场景中的位置，UI元素仍然可读，我们渲染了一些UI元素，使其始终位于几何体的前面。

最后，使用阈值和平滑度值调整图标的外观。确保在您的Looking Glass显示屏上显示图标时执行此操作，以获得最佳效果。要在场景中的其他图像中使用该图标，不需要重新生成SDF-只需在图像组件的源图像字段中选择它。

在Looking Glass中，我们使用了四种主要技术来提高文本的可读性：

我们保持了比2D游戏中更大的字体大小，并坚持使用粗体字体。

在“镜片深度”中有一个“甜蜜点”，那就是事物看起来最锐利的地方。如果离这个焦面太近或太远，物体看起来就不那么清晰了。这对于常规几何体来说不是问题，但是当您显示需要可读的文本或图标时，它就变得非常重要。

重要的是要使用景深后期处理效果来使场景的远近部分更加模糊，并隐藏显示中固有的一些瑕疵(还可以使主要区域中的对象“弹出”)，但这不适用于文本。我们了解到，文本需要非常接近这个最佳位置，才能达到最好的可读性。

其他非基于文本的UI元素可以追溯到更远的地方，有一些方法可以通过模糊一些边缘来保持它们的可读性(下面有更多介绍)。

TextMeshPro的材质包括一个“平滑度”滑块，它可以模糊字体的边缘。这有助于消除显示器上的一些“锯齿状像素效果”。这与我们在图标中使用的上述SDF技术相同。

只要我们的文本对象后面没有清晰的实心背景，我们就会通过复制文本对象几次并使后面的文本变暗来增加一些体积和深度。这将有助于将文本与背景元素分开，额外的好处是创建一种赋予字母深度的微妙效果。

除了文本之外，我们为2D精灵增加深度的一个简单方法是将它们的多个实例层叠在一个“堆栈”中。这在显示器上创造了一种简单但整洁的效果，当你环视场景时，图像“弹出”，感觉更像置身于世界中，侧面有深度。

您可以将包含的组件RepeatRenderer.cs用于易于使用的脚本，该脚本将自动复制您的精灵并赋予其深度。

我们已经将我们为content Creator Simulator构建的大部分内容放到了一个整洁的Unity包中，您可以在您自己的Look Glass项目中使用它。它包括按钮和文本的预制件，可以很好地呈现在显示屏上，以及一个完整的模板，该模板带有跨不同屏幕移动的脚本。如果您的Looking Glass Unity项目依赖于用户与大量UI元素的交互，我们希望这是一个很好的起点。

具有工作按钮、不同屏幕、教程文本和其他可在Looking Glass中使用的UI的完整工作模板。

非常感谢您的收看，希望能对您有所帮助！如果你最终用我们的全息UI包制作了一些东西，别忘了给我们贴上标签。关注Look Glass Factory的Twitter、Facebook、LinkedIn和YouTube。