3D アプリ起動ツールの設計ガイダンス3D app launcher design guidance

山と水で囲まれた cliff に存在する家として視覚化されます、ホーム 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). この領域内で、ユーザーは無料、3 D オブジェクトとどのように、関心のあるアプリを整理します。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. A 3D アプリ起動ツール「物理」のオブジェクトでは、ユーザーがアプリを起動するを選択することを実際に家を混在です。A 3D app launcher is a “physical” object in the user’s mixed reality house that they can select to launch an app.

例:フローティング Bird 3D アプリ起動ツールExample: Floaty Bird 3D app launcher
フローティング Bird 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 環境では、一部使いやすく、パーツ ファンタジック/sci-fi です。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. たとえば、ランチャーがも親しみやすく、Cliff の家のについて混乱しないこと、アプリの明らかなのに十分なの代表であることを確認します。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

Cliff 家に住んで 3D アプリ ランチャーと、既定のサイズが、領域の「物理」の他のオブジェクトを使用する意味を確認してください。3D app launchers live in the Cliff House and their default size should make sense with the other “physical” objects in the space. 場合は、横にある、ランチャーを配置すると、たとえば、家の工場またはいくつかの家具、ように思われる size-wise、自宅で。If you place your launcher beside, say, a house plant or some furniture, it should feel at home, size-wise. 出発点として適していますが、30 の立方センチメートルで外観を確認が、ユーザーことができます、スケール アップまたはスケール ダウン必要な場合に注意してください。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.

例:3.5. コンフィグレーション Warp の 3D アプリ起動ツールExample: Astro Warp 3D app launcher
3.5. コンフィグレーション Warp 3D アプリ起動ツールの例 (架空のアプリ)Astro Warp 3D app launcher example (fictional app)

認識可能ですRecognizable

3D アプリ起動ツールは、それを表示してユーザーを「アプリのブランド」を express 瞬時にする必要があります。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

平面にロゴを配置して、つもりだけでは、アプリが必要です。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

  • を、アプリ起動ツールの寸法を計画するときは、約 30 cm キューブの撮影してください。When planning dimensions for your app launcher, shoot for roughly a 30cm cube. これは、1:1:1 の比率。So, a 1:1:1 size ratio.
  • モデルには、10,000 多角形を使用する必要があります。Models must be under 10,000 polygons. 三角形の数とレベル (Lod) の詳細の詳細については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.
  • "Water 緊密な"閉じられたジオメトリを作成します。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 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.
  • Super ワイド型しないように – ようにするアプリケーション ランチャーの範囲内でコア ディメンション (増減) お試しください。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
  • 彩度が過剰または再度が下げられた色Over-saturated colors or desaturated colors

問題を引き起こす色を入力します。Type colors that cause trouble.
問題を引き起こす種類の色Type colors that cause trouble

照明Lighting

アプリ起動ツールのライティング、Cliff 家環境に由来します。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. 良い知らせは、このドキュメントでその他の設計ガイダンスに従った場合、ランチャー、Cliff 家でほとんどの照明の形をとても良いです。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). 別の適切なテストでは、半分の光と影の半分に配置し、どのように見えるを参照してください。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 アプリ起動ツールの終了の形式を PBR (物理的に基づくレンダリング) パイプラインを使用して作成された .glb ファイルとなります。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-er、時間をかけて調査および 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)

オーサリング ツールをお勧めしますRecommended authoring tool

使用することをお勧めします。物質のコピー/貼り付けAllegorithmic、最終的なファイルを作成しています。We recommend using Substance Painter by Allegorithmic to author your final file. 物質ペインタ、ここで PBR シェーダーの作成に詳しくない場合、チュートリアルします。If you’re not familiar with authoring PBR shaders in Substance Painter, here’s a tutorial.

(または3D CoatQuixel 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 のアプリ ランチャー オブジェクトが作成された場合、は、Cliff 家環境に変換する非常に簡単ですがあります。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:
    • ベークド shadows – や影を描画しないようにAvoid baked shadows – or painted shadows
    • テクスチャでベークド照明を回避します。Avoid baked lighting in the textures
    • パッケージを作成する PBR 材料の 1 つを使用して、シェーダーの生成された適切なマップを取得するにはUse one of the PBR material authoring packages to get the right maps generated for our shader

関連項目See also