3D アプリランチャーの設計ガイダンス3D app launcher design guidance

Windows Mixed Reality イマーシブ (VR) ヘッドセットを使用する場合は、山と水で囲まれた崖に家として視覚化された Windows Mixed Reality ホームを入力します (ただし、他の環境を選択して独自に作成することもできます)。When you put on a Windows Mixed Reality immersive (VR) headset, you enter the Windows Mixed Reality home, visualized as a house on a cliff surrounded by mountains and water (though you can choose other environments and even create your own). このホームの領域内では、ユーザーは、必要に応じて、必要な3D オブジェクトとアプリを自由に配置して整理することができます。Within the space of this home, a user is free to arrange and organize the 3D objects and apps that they care about any way they want. 3d アプリランチャーは、アプリを起動するために選択できる、ユーザーの mixed reality ハウスの "物理" オブジェクトです。A 3D app launcher is a “physical” object in the user’s mixed reality house that they can select to launch an app.

例:Floaty 鳥3D アプリランチャーExample: Floaty Bird 3D app launcher
Floaty 鳥3D アプリランチャーの例 (架空のアプリ)Floaty Bird 3D app launcher example (fictional app)

3D アプリランチャー作成プロセス3D app launcher creation process

3D アプリランチャーを作成するには、次の3つの手順を実行します。There are 3 steps to creating a 3D app launcher:

  1. 設計と concepting (この記事)Designing and concepting (this article)
  2. モデリングとエクスポートModeling and exporting
  3. アプリケーションに統合します。Integrating it into your application:

設計の概念Design concepts

非常になじみのあるすばらしいFantastic yet familiar

アプリランチャーが存在する Windows Mixed Reality 環境は、パート fantastical/sci です。The Windows Mixed Reality environment your app launcher lives in is part familiar, part fantastical/sci-fi. 最適なランチャーは、この世界の規則に従います。The best launchers follow the rules of this world. アプリから使い慣れた代表的なオブジェクトを取得しながら、実際の現実のルールの一部を曲げられる方法を考えてみましょう。Think of how you can take a familiar, representative object from your app, but bend some of the rules of actual reality. マジックが生成されます。Magic will result.

にくいIntuitive

アプリランチャーを確認するときは、アプリを起動する目的を明確にする必要があり、混乱を招くことはありません。When you look at your app launcher, its purpose - to launch your app - should be obvious and shouldn’t cause any confusion. たとえば、décor が崖家の1つの部分と混同されないように、ランチャーが明らかであることを確認してください。For example, be sure your launcher is an obvious-enough representative of your app that it won’t be confused for a piece of decor in the Cliff House. アプリランチャーは、ユーザーにタッチまたは選択を招待する必要があります。Your app launcher should invite people to touch/select it.

例:新しいメモ3D アプリランチャーExample: Fresh Note 3D app launcher
新鮮ノート3D アプリランチャーの例 (架空のアプリ)Fresh Note 3D app launcher example (fictional app)

ホームスケールHome scale

3D アプリランチャーは崖家に存在し、その既定のサイズは、空間内の他の "物理" オブジェクトと同じ意味になります。3D app launchers live in the Cliff House and their default size should make sense with the other “physical” objects in the space. 家の植物や家具など、ランチャーを設置している場合は、自宅でも、サイズにも気が付いています。If you place your launcher beside, say, a house plant or some furniture, it should feel at home, size-wise. 開始点としては、どのように表示されるかを確認することをお勧めします。ただし、ユーザーが必要に応じてスケールアップまたはスケールダウンできることに注意してください。A good starting point is to see how it looks at 30 cubic centimeters, but remember that users can scale it up or down if they like.

独自の機能Own-able

アプリランチャーは、ユーザーが自分のスペースにあるように感じられるオブジェクトのように感じます。The app launcher should feel like an object a person would be excited to have in their space. これらの機能は実質的にこのような処理を行っているので、ランチャーは、ユーザーが近くにいると思っていたようなものと考える必要があります。They’ll be virtually surrounding themselves with these things, so the launcher should feel like something the user thought was desirable enough to seek out and keep nearby.

例:Astro ワープ3D アプリランチャーExample: Astro Warp 3D app launcher
Astro ワープ3D アプリランチャーの例 (架空のアプリ)Astro Warp 3D app launcher example (fictional app)

認識可能なRecognizable

3D アプリランチャーは、"アプリのブランド" を表示している人にすぐに表す必要があります。Your 3D app launcher should instantly express “your app’s brand” to people who see it. アプリに星型の文字や特に識別可能なオブジェクトがある場合は、設計の大きな部分としてそれを使用することをお勧めします。If you have a star character or an especially identifiable object in your app, we recommend using that as a big part of your design. 現実の世界では、オブジェクトはロゴだけでなくユーザーからも関心を引くことができます。In a mixed reality world, an object will draw more interest from users than just a logo alone. 認識可能なオブジェクトは、ブランドを迅速かつ明確に伝えることができます。Recognizable objects communicate brand quickly and clearly.

容量Volumetric

お客様のアプリは、ロゴを平面に配置して1日に呼び出すだけではありません。Your app deserves more than just putting your logo on a flat plane and calling it a day. ランチャーは、ユーザーの領域において、魅力的で3D な物理オブジェクトのように感じます。Your launcher should feel like an exciting, 3D, physical object in the user’s space. アプリの Macy の感謝祭のパレードにバルーンを設定することをお勧めします。A good approach is to imagine your app was going to have a balloon in the Macy’s Thanksgiving Day Parade. だれかが言っている人は、どこにいるかということです。Ask yourself, what would really wow people as it came down the street? すべての表示角度からはどのようになりますか。What would look great from all viewing angles?

Logo only Logo only

More recognizable with a character More recognizable with a character

Flat approach, not surprisingly, feels flat Flat approach, not surprisingly, feels flat

Volumetric approach better showcases your app Volumetric approach better showcases your app

優れた3D モデルのヒントTips for good 3D models

ベスト プラクティスBest practices

  • アプリランチャーのディメンションを計画するときは、約30cm のキューブに対して撮影します。When planning dimensions for your app launcher, shoot for roughly a 30cm cube. そのため、1:1:1 のサイズ比率です。So, a 1:1:1 size ratio.
  • モデルは1万ポリゴン以下である必要があります。Models must be under 10,000 polygons. トライアングルの数と詳細レベルの詳細については、LODs を参照してください。Learn more about triangle counts and levels of details (LODs)
  • 可能な場合は、イマーシブヘッドセットでテストします。Test on an immersive headset when possible.
  • 可能な限りモデルのジオメトリに詳細をビルドします。詳細については、テクスチャに依存しないでください。Build details into your model’s geometry where possible – don’t rely on textures for detail.
  • "水のきつい" 閉じたジオメトリを構築します。Build “water tight” closed geometry. でモデル化されていない穴はありません。No holes that are not modeled in.
  • オブジェクトで自然な素材を使用します。Use natural materials in your object. 現実の世界に構築することを想像してください。Imagine crafting it in the real world.
  • モデルの距離とサイズが異なることを確認します。Make sure your model reads well at different distances and sizes.
  • モデルの準備ができたら、「資産のエクスポートに関するガイドライン」を参照してください。When your model is ready to go, read the exporting assets guidelines.

テクスチャの微妙な詳細情報を含むモデルModel with subtle details in the texture
テクスチャの微妙な詳細情報を含むモデルModel with subtle details in the texture

回避すべき事項What to avoid

  • ハイコントラストの詳細や、小さな、ビジーのパターン、テクスチャは使用しないでください。Don't use high-contrast details or small, busy patterns and textures.
  • シンジオメトリは使用しないでください。距離が適切ではなく、別名が正しくありません。Don't use thin geometry – it doesn’t work well at a distance and will alias badly.
  • モデルの一部が1:1:1 のサイズ比を超えて拡張されないようにしてください。Don't let parts of your model extend too much beyond the 1:1:1 size ratio. スケーリングの問題が発生します。It will create scaling problems.

ハイコントラストの小さなビジーパターンを避けるAvoid high-contrast, small busy patterns
ハイコントラスト、小さい、ビジーパターンを避けるAvoid high-contrast, small, busy patterns

型を処理する方法How to handle type

ベスト プラクティスBest practices

  • 種類は、アプリランチャーの約 1/3 (またはそれ以上) で構成することをお勧めします。We recommend your type comprises about 1/3 of your app launcher (or more). Type は、ランチャーが実際にランチャーであることをユーザーに知らせる主要な作業であり、非常に大きな場合に便利です。Type is the main thing that gives people an idea that your launcher is, in fact, a launcher so it’s nice if it’s pretty substantial.
  • 型を大きくするのは避けてください。アプリランチャーのコアディメンション (より多く以下) の範囲内に保持してください。Avoid making type super wide – try to keep it within the confines of the app launchers core dimensions (more or less).
  • フラット型は機能しますが、特定の角度や特定の環境で表示するのが難しい場合があることに注意してください。Flat type can work, but be aware that it can be hard to view from certain angles and in certain environments. これを実現するには、それをソリッドオブジェクトまたは背景に配置することを検討してください。You might consider putting it a solid object or backdrop behind it to help with this.
  • ディメンションを型に追加すると、3D では見栄えが良くなります。Adding dimension to your type feels nice in 3D. 種類の面の網掛けは、読みやすさを向上させるのに役立ちます。Shading the sides of the type a different, darker color can help with readability.

Flat type without a backdrop can be hard to view from certain angles and in certain environments Flat type without a backdrop can be hard to view from certain angles and in certain environments

Type with a built-in backdrop can work well Type with a built-in backdrop can work well

Extruded type can work well if you shade the sides Extruded type can work well if you shade the sides

機能する色を入力するType colors that work

  • WhiteWhite
  • Black
  • 明るい半彩度の色Bright semi-saturated color

機能する色を入力します。Type colors that work.
機能する色を入力するType colors that work

回避すべき事項What to avoid

問題の原因となる色を入力するType colors that cause trouble

  • ミッドトーンMid-tones
  • 灰色Gray
  • 彩度が高い色または desaturated の色Over-saturated colors or desaturated colors

問題の原因となる色を入力します。Type colors that cause trouble.
問題の原因となる色を入力するType colors that cause trouble

照明Lighting

アプリランチャーのライティングは、崖ハウス環境から取得されます。The lighting for your app launcher comes from the Cliff House environment. ライトとシャドウの両方で適切に見えるように、家全体の複数の場所でランチャーをテストしてください。Be sure to test your launcher in several places throughout the house so it looks good in both light and shadows. このドキュメントに記載されている他の設計ガイダンスに従っている場合は、崖家のほとんどの照明に対してランチャーが非常に優れた形になっているはずです。The good news is, if you’ve followed the other design guidance in this document, your launcher should be in pretty good shape for most lighting in the Cliff House.

環境内のさまざまなライトをランチャーがどのように検索するのかをテストするのに適しているのは、テラス (芝生を使用した具体的な領域) の外側と背面のどこにあるかを問わず、Studio、メディアルームです。Good places to test how your launcher looks in the various lights in the environment are the Studio, the Media Room, anywhere outside and on the Back Patio (the concrete area with the lawn). もう1つの優れたテストは、それを半分のライトと半分に配置し、外観を確認することです。Another good test is to put it in half light and half shadow and see what it looks like.

起動ツールがライトとシャドウの両方で適切であることを確認します。Make sure your launcher looks good in both light and shadows.
起動ツールがライトとシャドウの両方で適切であることを確認します。Make sure your launcher looks good in both light and shadows

テクスチャTexturing

テクスチャの作成Authoring your textures

3D アプリランチャーの終了形式は、glb ファイルになります。これは、(物理的にベースになった) .PBR パイプラインを使用して作成されます。The end format of your 3D app launcher will be a .glb file, which is made using the PBR (Physically Based Rendering) pipeline. これは厄介なプロセスである可能性があります。すでにない場合は、技術的アーティストを使用することをお勧めします。This can be a tricky process - now is a good time to employ a technical artist if you haven't already. 勇気 DIY がある場合は、まず、情報を調査して、.pbr の用語について学習して、内部で何が起きているかを確認すると、よくある間違いを避けることができます。If you’re a brave DIY-er, taking the time to research and learn PBR terminology and what’s happening under the hood before you begin will help you avoid common mistakes.

例:新しいノートアプリExample: Fresh Note app
新鮮ノート3D アプリランチャーの例 (架空のアプリ)Fresh Note 3D app launcher example (fictional app)

推奨 authoring toolRecommended authoring tool

最終的なファイルを作成するには、Allegorithmic による物質塗装を使用することをお勧めします。We recommend using Substance Painter by Allegorithmic to author your final file. 物質コピーの作成に慣れていない場合は、次のチュートリアルを参照してください。If you’re not familiar with authoring PBR shaders in Substance Painter, here’s a tutorial.

(また、 3D コートQuixel Suite 2、またはmarmoset toolbagは、これらのいずれかを使い慣れている場合にも機能します)。(Alternately 3D-Coat, Quixel Suite 2, or Marmoset Toolbag would also work if you’re more familiar with one of these.)

ベスト プラクティスBest practices

  • アプリランチャーオブジェクトが .PBR 用に作成されている場合、そのオブジェクトを崖家環境に変換するのは非常に簡単です。If your app launcher object was authored for PBR, it should be pretty straightforward to convert it for the Cliff House environment.
  • シェーダーは金属/粗さのフローを想定しています。 Unreal の .PBR シェーダーは、近いファクシミリです。Our shader is expecting a Metal/Roughness work flow – The Unreal PBR shader is a close facsimile.
  • テクスチャをエクスポートするときは、推奨されるテクスチャのサイズを考慮してください。When exporting your textures keep the recommended texture sizes in mind.
  • 次のように、リアルタイムライティング用にオブジェクトを構築してください。Make sure to build your objects for real-time lighting — this means:
    • 影を描画しない (影を描画する)Avoid baked shadows – or painted shadows
    • テクスチャに含まれる光源を避けますAvoid baked lighting in the textures
    • いずれかの .PBR マテリアル作成パッケージを使用して、シェーダー用に生成された適切なマップを取得します。Use one of the PBR material authoring packages to get the right maps generated for our shader

関連項目See also