How do I minimize eye fatigue

Designing content for holographic display

  • 4 minutes to read

When designing content for holographic displays, there are several elements that you need to consider for achieving the best experience. We have some of our recommendations listed below 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

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:

Eyes fatigueEye fatigue

Since holographic display is additive, holograms with bright colors use more light. A bright, full-tone color in a large area of ​​the display can easily cause eye fatigue for the user. Bright, solid color in a large area of ​​the display can easily cause eye fatigue for the user.

Hand occlusionHand occlusion

Bright color makes it difficult for the user to see their hands when directly interacting with objects. Since the user cannot see their hands, it is 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.

difficult to display the background image of the light-colored content .Difficult to see the hand on the brightly colored content backplate

Color uniformityColor uniformity

Because of the characteristics of holographic displays, a large bright area on the display can become blotchy. Using dark color schemes can minimize this problem .By using dark color schemes, you can minimize this issue.

Design guidelines for color choices

Use the dark color for the UI background.Use dark color for the UI background

By using the dark color scheme, you can minimize eye fatigue and improve the confidence on direct hand interactions.

which are used for the content background .Examples of dark color used for the content background

Use semibold or bold font widthUse semibold or bold font weight

Hololens allows your experience to show beautiful high-resolution text. b. 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.

or the semibold font weight (upper area) and improves readability .Bold or semi-bold font weight (upper panel) improves the legibility

Using mrtk's holographic backplate materialUse MRTK’s HolographicBackplate material

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 based on your location One of its features is an iridescence effect that is visible to users as they shift their position based on the panel. The background color shifts very easily over a predefined spectrum, creating an appealing and dynamic visual effect without the 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

Examples of transparent UI backplateExamples of transparent UI backplate

Visual complexity and accessibilityVisual 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.

powerperformance

For transparent or translucent objects to render correctly they must be sorted and blended with any objects, which exist in the background. Sorting transparent objects has a low number of CPU costs. the combination has considerable GPU costs because the GPU does not allow hidden surface removal by z-culling (i.e. 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 .depth testing. Removing hidden surfaces increases the number of operations needed for the final rendered pixel. 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 problem with the deep LSR technologyHologram 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 Any pixel with a depth value should also have color value. If the above guidance is not followed, areas of the rendered image that do not have valid depth information can be re-created in some way projected, which creates artifacts often visible as wave-like distortion. 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 backgroundUse opaque UI background

By default, transparent or translucent objects don't write depth to allow for proper blending. Ways to fix this problem include using not transparent objects, which ensure that the overlapping objects are displayed close to non-transparent objects (e.g. a translucent button in front of a non-transparent backplate), enforcing translucent objects to provide depth (not applicable in all scenarios) and rendering proxy objects 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 en d of the frame.

Solutions in mrtk-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.

Minimizing the number of pixels affectedMinimize the number of pixels affected

If your project must use transparent objects, try to minimize the number of pixels affected. b. 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). For simple 2D shapes created with a quad with an alpha mask, you should instead use a grid representation of the shape with an opaque shader 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.




Dark UI examples in MRTK (Mixed Reality Toolkit) for Unity

Mrtk provides many examples of user interface building blocks based on the dark color schemes.MRTK provides many UI building block examples based on the dark color schemes.



See alsoSee also