ホログラフィック ディスプレイのコンテンツを設計するDesigning content for holographic display

Ulnar side location

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 user research and testing on various types of HoloLens experiences, we found that using bright colors in a large area of the display can cause several issues:

目の疲労Eye fatigue

Holographic display は加法であるため、明るい色はより多くの光を使用してホログラムを表示します。Since holographic display is additive, bright color uses more light to display holograms. ディスプレイの大きな領域に明るい色を使用すると、ユーザーにとって目の疲労が簡単になります。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 cannot 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 表示の特性により、画面上の大きな明るい領域が blotchy になることがあります。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

UI の背景に濃い色を使用する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.

ダーク UI の例コンテンツの背景に使用される濃い色の例Dark UI examples Examples of dark color used for the content background

Semibold または太字のフォントの太さを使用するUse semibold or bold font weight

HoloLens を使用すると、美しい高解像度のテキストを表示できます。HoloLens allows your experience to show beautiful high-resolution text. ただし、縦方向のストロークが小さいフォントサイズでジッターになる可能性があるため、光や半光などの細いフォントの重みを使用しないことをお勧めします。However, it is recommended that you avoid thin font weights such as light or semi-light because the vertical strokes can jitter in small font size.

濃い UI の例太字または半太字のフォントの太さ (上部パネル) では、読みやすくなります。Dark UI examples Bold or semi-bold font weight (upper panel) improves the legibility

MRTK の HolographicBackplate マテリアルを使用するUse MRTK’s HolographicBackplate material

HolographicBackplate マテリアルは、HoloLens シェルのいくつかの UI パネルに適用されます。The HolographicBackplate material is applied to several UI panels in the HoloLens shell. その機能の1つは、ユーザーがパネルに対して位置をシフトするときに表示される iridescence 効果です。One of its features is an iridescence effect that is visible to users as they shift their position in relation to 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.

透明または半透明の UI backplate に関する課題Challenges with transparent or translucent UI backplate

透過的 な ui の例透過 ui バックプレートの例Transparent UI examples Examples of transparent UI backplate

視覚的な複雑さとアクセシビリティVisual complexity and accessibility

Holographic オブジェクトは物理環境とブレンドされるため、透明または半透明のウィンドウでコンテンツまたは UI が読みやすくなり、パフォーマンスが低下する可能性があります。Since holographic objects are blended with the physical environment, the legibility of the content or UI on the transparent or translucent window could be degraded. さらに、transparent holographic オブジェクトが相互に重なっていると、ユーザーが混乱を招くことがあるため、ユーザーが対話するのが困難になる可能性があります。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. 透過的なオブジェクトを並べ替えると CPU コストが非常に大きくなります。これにより、GPU では、z カリング (つまり、Sorting of transparent objects has a modest CPU cost, blending has considerable GPU cost because it does not allow the GPU to perform hidden surface removal via z-culling (i.e 詳細テスト)。depth testing). 非表示サーフェイスの削除を許可しない場合は、レンダリングされた最後のピクセルに対して計算する必要がある操作の数が増加するため、フィルレートの制約に対する負荷が大きくなります。Not allowing hidden surface removal increases the number of operations that need to be computed for the final rendered pixel, and thus puts more pressure on fill rate constraints.

深さ LSR テクノロジを使用したホログラムの安定性の問題Hologram stability issue with Depth LSR technology

Holographic の再プロジェクションやホログラムの安定性を向上させるために、アプリケーションは描画されたすべてのフレームに対して深度バッファーをシステムに送信できます。To improve holographic reprojection, or hologram stability, an application can submit a depth buffer to the system for every rendered frame. Reprojection の深度バッファーを使用する場合は、対応する深度値をレンダリングするすべてのカラーピクセルが深度バッファーに書き込まれる必要があります (さらに、深度値を持つすべてのピクセルに色の値が必要です)。When using the depth buffer for reprojection one rule is that for every color pixel rendered a corresponding depth value must be written to the depth buffer (and any pixel with a depth value should also have color value). 上記のガイダンスに従っていない場合、有効な深度情報のないレンダリングされたイメージの領域は、成果物を生成する方法で再投影される可能性があります (多くの場合、波形に似たゆがみとして表示されます)。If the above guidance is not followed, areas of the rendered image that lack valid depth information may be reprojected in a way that produces artifacts (often visible as a wave-like distortion).

設計ガイドラインDesign guidelines

不透明な UI の背景を使用するUse opaque UI background

既定では、透明または半透明のオブジェクトは、適切にブレンドできるように深度を書き込みません。By default, transparent or translucent objects do not 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.

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.

影響を受けるピクセル数を最小限に抑える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 is fully invisible (instead of setting the additive color to black). アルファマスクを持つクワッドを使用して作成された単純な2D 図形の場合は、代わりに不透明なシェーダーを使用して図形のメッシュ表現を作成することを検討してください。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.




Unity 用の濃い UI の例 (Mixed Reality Toolkit)Dark UI examples in MRTK (Mixed Reality Toolkit) for Unity

Mrtk には、濃色配色に基づく多数の UI 構成ブロックの例が用意されています。MRTK provides many UI building block examples based on the dark color schemes.



関連項目See also