Проектирование содержимого для голографического дисплеяDesigning content for holographic display

Расположение с улнар стороны

При проектировании содержимого для более holographic см существует несколько элементов, которые необходимо учитывать для достижения наилучшего опыта.When designing content for holographic displays, there are several elements that you need to consider for achieving the best experience. Ниже мы рассмотрели некоторые из наших рекомендаций, и вы можете узнать больше о характеристиках holographic на странице цвет, освещение и материалы .We've listed some of our recommendations below and you can learn more about the characteristics of holographic displays at Color, light and materials page.


Трудности с ярким цветом на большой поверхностиChallenges with bright color on a large surface

На основе нашего исследования и тестирования HoloLens мы обнаружили, что использование ярких цветов в большой области экрана может привести к появлению нескольких проблем:Based on our HoloLens experience research and testing, we found that using bright colors in a large area of the display can cause several issues:

Выносливости глазEye fatigue

Так как holographic — аддитивный, голограммы с яркими цветами используют более светлое изображение.Since holographic display is additive, holograms with bright colors use more light. Яркий, однородный цвет в большой области экрана может легко привести к выносливости глазу для пользователя.Bright, solid color in a large area of the display can easily cause eye fatigue for the user.

Рука перекрытияHand occlusion

Яркий цвет затрудняет для пользователя возможность видеть свои руки при непосредственном взаимодействии с объектами.Bright color makes it difficult for the user to see their hands when directly interacting with objects. Поскольку пользователь не может видеть свои руки, он затрудняет воспринимать глубину и расстояние между рукой или пальцем на целевую поверхность.Since the user can't see their hands, it becomes difficult to perceive the depth/distance between the hand/finger to the target surface. Курсор пальца помогает компенсировать эту ошибку, но по-прежнему может быть непростой на светлой белой поверхности.The Finger Cursor helps compensate for this issue, but it can still be challenging on a bright white surface.

Цвет и рука перекрытия затрудняют прокрасить руку на экранную отпечатку содержимогоColor and hand occlusion Difficult to see the hand on the bright colored content backplate

Единообразие цветаColor uniformity

Из-за характеристик holographic дисплеев может стать блотчи большой яркий участок на экране.Because of the characteristics of holographic displays, a large bright area on the display can become blotchy. Используя темные цветовые схемы, можно избежать этой проблемы.By using dark color schemes, you can minimize this issue.

Рекомендации по проектированию для выбора цветаDesign guidelines for color choices

Использовать темный цвет для фона пользовательского интерфейсаUse dark color for the UI background

С помощью темной цветовой схемы можно сократить выносливости глаз и повысить уверенность в взаимодействии Direct руки.By using the dark color scheme, you can minimize eye fatigue and improve the confidence on direct hand interactions.

Примеры темного цвета, используемые для фона содержимого примеры темных цветов, используемых для фона содержимогоExamples of dark color used for the content background Examples of dark color used for the content background

Использовать полужирный или жирный шрифтUse semibold or bold font weight

HoloLens позволяет отображать привлекательный текст с высоким разрешением.HoloLens allows your experience to show beautiful high-resolution text. Однако рекомендуется избегать тонких весов шрифтов, таких как светлое или частичное освещение, поскольку вертикальные штрихи могут заменяться небольшим размером шрифта.However, it's recommended that you avoid thin font weights such as light or semi-light because the vertical strokes can jitter in small font size.

Жирный или плотный жирный шрифт (Верхняя панель) улучшает выделение полужирным шрифтом или плотного начертания шрифта (Верхняя панель) улучшает читаемость .Bold or semi-bold font weight (upper panel) improves the legibility Bold or semi-bold font weight (upper panel) improves the legibility

Использование Холографикбаккплате материала МРТКUse MRTK’s HolographicBackplate material

Материал Холографикбаккплате применяется к нескольким панелям пользовательского интерфейса в оболочке HoloLens.The HolographicBackplate material is applied to several UI panels in the HoloLens shell. Одной из его функций является иридесценцеый результат, видимый пользователям при сдвиге их расположения на основе панели.One of its features is an iridescence effect that is visible to users as they shift their position based on the panel. Цвет экранной формы немного смещается по заранее заданному спектру, создавая эффектный и динамический визуальные эффекты, не мешая удобочитаемости содержимого.The backplate color shifts subtly across a predefined spectrum, creating an engaging and dynamic visual effect without interfering with content readability. Эта тонкая смена цвета также позволяет компенсировать незначительное нерегулярность цвета.This subtle shift in color also serves to compensate for any minor color irregularities.

Трудности с прозрачной или полупрозрачной интерфейсной службой пользовательского интерфейсаChallenges with transparent or translucent UI backplate

Прозрачные примеры пользовательского интерфейса примеры прозрачной формы интерфейса пользователяTransparent UI examples Examples of transparent UI backplate

Сложность и специальные возможности визуального элементаVisual complexity and accessibility

С тех пор, как и в случае с физической средой, было бы снижено читаемость содержимого или пользовательского интерфейса в прозрачных или полупрозрачных окнах.Since holographic objects blend with the physical environment, content or UI legibility on transparent or translucent windows could be degraded. Кроме того, если прозрачные объекты помещаются поверх других, это может усложнить взаимодействие пользователя из-за непонятной глубины.Additionally, when transparent holographic objects are overlaid on top of each other, it could make it difficult for the user to interact because of the confusing depth.

ПроизводительностьPerformance

Чтобы прозрачные или полупрозрачные объекты отображались правильно, они должны быть отсортированы и смешиваться с любыми объектами, которые существуют в фоновом режиме.For transparent or translucent objects to render correctly they must be sorted and blended with any objects, which exist in the background. Сортировка прозрачных объектов требует снижения затрат ресурсов ЦП, так как смешивание имеет существенные затраты на GPU, так как не позволяет GPU выполнять скрытое удаление поверхности через z-отбор (т. е.Sorting of transparent objects has a modest CPU cost, blending has considerable GPU cost because it doesn't allow the GPU to do hidden surface removal via z-culling (i.e Тестирование глубины).depth testing). Отсутствие разрешения на удаление скрытой поверхности увеличивает количество операций, необходимых для окончательной отрисовки пикселя.Not allowing hidden surface removal increases the number of operations needed for the final rendered pixel. Это обеспечивает дополнительные ограничения частоты заполнения.This puts on more pressure fill rate constraints.

Нестабильность с голограммами с ЛСР технологией глубиныHologram stability issue with Depth LSR technology

Для повышения стабильной репроецирования или голограммы в области стабильности приложение может отправить в систему буфер глубины для каждого отображаемого кадра.To improve holographic reprojection, or hologram stability, an application can submit a depth buffer to the system for every rendered frame. При использовании буфера глубины для РЕПРОЕКЦИИ необходимо написать буфер глубины для каждого отображаемого цвета в пикселях соответствующей глубины.When using the depth buffer for reprojection, you need to write a depth buffer for every color rendered pixel a corresponding depth. Любой пиксель с значением глубины также должен иметь значение Color.Any pixel with a depth value should also have color value. Если приведенное выше руководство не соблюдается, области готовых к просмотру образа, в которых отсутствуют допустимые сведения о глубине, могут быть переработаны таким образом, что создает артефакты, которые часто отображаются как искажения в виде волнового вида.If the above guidance isn't followed, areas of the rendered image that lack valid depth information may be reprojected in a way that produces artifacts, which are often visible as a wave-like distortion.

Рекомендации по проектированию прозрачных элементовDesign guidelines for transparent elements

Использовать прозрачный фон пользовательского интерфейсаUse opaque UI background

По умолчанию прозрачные или полупрозрачные объекты не записывают глубину, чтобы обеспечить правильное смешение.By default, transparent or translucent objects don't write depth to allow for proper blending. Способы устранения этой проблемы: использование непрозрачных объектов, обеспечение того, что прозрачные объекты появляются близко к непрозрачным объектам (например, полупрозрачную кнопку перед непрозрачной заменой), заставляя прозрачные объекты для записи глубины (неприменимы во всех сценариях) или выводят объекты прокси-сервера, которые вносят в конец фрейма только значения глубины.Ways to mitigate this issue include, using opaque objects, ensuring translucent objects appear close to opaque objects (such as a translucent button in front of an opaque backplate), forcing translucent objects to write depth (not applicable in all scenarios), or rendering proxy objects, which only contribute depth values at the end of the frame.

Решения в МРТК — Unity: https://microsoft.github.io/MixedRealityToolkit-Unity/Documentation/hologram-stabilization.html#depth-buffer-sharing-in-unitySolutions within MRTK-Unity: https://microsoft.github.io/MixedRealityToolkit-Unity/Documentation/hologram-stabilization.html#depth-buffer-sharing-in-unity

Используя сплошную и непрозрачную форму, можно защититься от четкости и уверенности в взаимодействии.By using a solid and opaque backplate, we can secure legibility and interaction confidence.

Уменьшение количества затронутых пикселовMinimize the number of pixels affected

Если проект должен использовать прозрачные объекты, попробуйте максимально ограничить число затронутых пикселов.If your project must use transparent objects, try to minimize the number of pixels affected. Например, если объект отображается только при определенных условиях (например, в эффекте свечения), отключите объект, если он полностью невидимый (вместо присвоения цвету аддитивного цвета черному).For example, if an object is only visible under certain conditions (like an additive glow effect), disable the object when it's fully invisible (instead of setting the additive color to black). Для простых двумерных фигур, созданных с помощью «Quad» с альфа-маской, рассмотрите возможность создания сетки фигуры с непрозрачным шейдером.For simple 2D shapes created using a quad with an alpha mask, consider creating a mesh representation of the shape with an opaque shader instead.




Темные примеры пользовательского интерфейса в МРТК (набор средств для смешанной реальности) для UnityDark UI examples in MRTK (Mixed Reality Toolkit) for Unity

Мртк предоставляет множество примеров стандартных блоков пользовательского интерфейса на основе темных цветовых схем.MRTK provides many UI building block examples based on the dark color schemes.



См. также разделSee also