詳細テクスチャを追加する

マテリアルに詳細テクスチャを使用し、近距離での外観を向上するためのガイドです。

Choose your operating system:

Windows

macOS

Linux

マテリアルを非常に近距離で表示すると、マテリアルに使用されているテクスチャは分解され、ピクセル化される場合があることに気づくでしょう。パフォーマンスを最適化するため、テクスチャは多くの場合、適度な距離で表示すると優れた外観になる解像度にスケーリングされていますが、近距離で細部を表示するには不十分なこともあります。

この問題に対処するため、 詳細テクスチャ と呼ばれるテクスチャを使用すると、近距離でマテリアルを表示した場合にピクセル化されて表示されるのを防ぐことができます。

詳細テクスチャ

詳細テクスチャ (Detail texturing) を使用すると、オブジェクトの元のディフューズと法線テクスチャに対し、繰り返しを多数行うディフューズと法線テクスチャのレイヤーを重ねることで、テクスチャにディテールがあるような錯覚を生み出すことができます。 これにより、近い範囲から通常表示した場合よりもディテールが優れているような錯覚を生み出すことができます。

詳細テクスチャを実際に適用した例を以下に示します。

Brick Material with and without detail texture

左側 (「1」のラベル) のマテリアルでは、詳細テクスチャを使用し、サーフェスに対して高頻度のディテールを追加しています。右側 (「2」のラベル) のマテリアルでは、詳細テクスチャを使用していません。左側の画像の方が鮮明で、右側の画像よりもディテールに優れています。

詳細テクスチャ ノードの詳細

パレット またはコンテキスト メニューで「詳細テクスチャ」を検索すると、 Detail Texturing マテリアル関数が見つかります。これがマテリアルに詳細テクスチャを適用する唯一の方法ではありませんが、 マテリアル関数 にはすべてのロジックが含まれているため、ワークフローの観点からはこれが最も迅速な方法です。テクスチャの入力を指定するだけで済みます。

Detail Texturing Material Function node

プロパティ

説明

Scale (S)

詳細テクスチャのスケールを設定します。値を大きくするとタイリングが増え、値を小さくするとタイリングが少なくなります。

Diffuse (V3)

ディフューズテクスチャの入力です。

DetailDiffuse (T2d)

ディフューズの詳細テクスチャの入力です。この入力は、Texture Object のみを受け入れることができます。

DiffuseIntensity (S)

詳細ディフューズ テクスチャの強度を制御します。

Normal (V3)

法線マップ テクスチャの入力です。

DetailNormal (T2D)

法線マップ詳細テクスチャの入力です。この入力は、Texture Object のみを受け入れることができます。

NormalIntensity (S)

詳細法線マップテクスチャの強度を制御します。

Texture Sample を Texture Object に変換する

Detail Texturing マテリアル関数が適切に動作するには、詳細テクスチャとして使用するテクスチャを、通常の Texture Sample から Texture Object に変換する必要があります。次の手順に従って、これを行います。

  1. 詳細テクスチャに使用するテクスチャ サンプルを見つけます。

    Regular texture sample

  2. Texture Sample ノードを右クリックし、コンテキスト メニューから [Convert To Texture Object (テクスチャ オブジェクトに変換)] を選択します。

    Convert Texture Sample to Texture Object

  3. Texture Sample が Texture Object に変換されます。

    Texture Object node

詳細テクスチャをマテリアルに使用する方法

マテリアルで詳細テクスチャを使用するには 2 つの方法がありますが、以下では両方を説明します。2 つの方法の主な違いは、作成済みの Detail Texturing マテリアル関数を使用するか、またはマテリアル グラフで詳細テクスチャのロジックを手動で作成するかの違いです。最終的にいずれも同じ結果となるため、これらの方法に良し悪しはありません。具体的なマテリアルおよびプロジェクトのニーズに応じて、使用する方法を選択してください。

次のセクションで使用しているすべてのコンテンツは、Unreal Engine の スターター コンテンツ に含まれています。以下で説明する技法はどのテクスチャにも適用できますが、それぞれの手順に従う場合はプロジェクトに スターター コンテンツ が含まれていることを確認してください。

テスト用に使用する新しいマテリアルを作成します。コンテンツ ブラウザ右クリック し、コンテキスト メニューの [Create Basic Asset (基本アセットを作成)] から [Material (マテリアル)] を選択します。マテリアルに、「DetailTexturing」などのわかりやすい名前を付けます。

Create new Material

Detail Texturing マテリアル関数を使用する

  1. コンテンツ ブラウザ のアセットを ダブルクリック してマテリアルを開きます。マテリアル エディタが開きます。

  2. スターター コンテンツ内にある、次の 4 つのテクスチャを見つけます。コンテンツ ブラウザからマテリアル グラフに、これらをドラッグします。

    • T_Brick_Clay_Old_D

    • T_Brick_Clay_Old_N

    • T_Ground_Gravel_D

    • T_Ground_Moss_N

    完了すると、マテリアル グラフは以下のようになるはずです。

    Four texture sample nodes

  3. マテリアル グラフで 右クリック し、コンテキスト メニューで「Detail Texturing」を検索します。。[Misc (その他)] カテゴリの [DetailTexturing] をクリックし、マテリアル関数をグラフに追加します。

    Material Editor right-click search menu

  4. マテリアル グラフに DetailTexturing マテリアル関数が作成されます。

    DetailTexturing Material Function in graph

  5. この例では、 T_GroundGravel_DT_Ground_Moss_N が詳細テクスチャとして使用されます。詳細テクスチャをマテリアル関数に接続するには、Texture Object に変換する必要があります。T_GroundGravel_DT_Ground_Moss_N を右クリックし、それらを Texture Object に変換します。

    Detail textures converted to texture objects

  6. 下の画像のようにすべてのノードを接続します。2 つのレンガのテクスチャは、 Diffuse 入力 と Normal 入力に接続します。また、2 つの Texture Object は、 DetailDiffuse ピンと DetailNormal ピンに接続します。Diffuse 出力を Base Color に、Normal 出力を Main Material ノードの Normal 出力に接続します。

    Material Function wired

  7. テクスチャのスケールおよび強さを制御するには、追加の値が必要です。これらの入力には、 Constant マテリアル表現式または スカラー パラメータ を使用できます。この例では、それぞれ、「Scale」、「Diffuse Intensity」、および「Normal Intensity」という名前の 3 つのスカラー パラメータを使用しています。これらのノードの 3 つのすべてで、デフォルト値は 1 に設定されています。

    Three scalar parameters

  8. スカラー パラメータを対応する入力に接続します。完了すると、マテリアル グラフは以下のようになるはずです。

    Final Material graph

  9. スカラー パラメータの値を調整することで、詳細テクスチャの外観を変更できます。Scale の値を「1」にし、次に「5」にし、最後に「10」に設定した場合を以下に示します。詳細テクスチャがタイル化される回数がメッシュ全体で増加し、テクスチャ自体の外観が小さく (または細かく) なります。

    Detail tiling at different scales

詳細テクスチャを手動で設定する

何らかの理由で Detail Texturing マテリアル関数を使用できない場合は、以下のマテリアル表現式および手順を使用し、マテリアル グラフ内でこの関数を作成することができます。

  1. コンテンツ ブラウザ でサムネイルを右クリックし、コンテキスト メニューから [Duplicate (複製)] を選択して 1 つ目のマテリアルを複製します。新しいマテリアル DetailTexturing_02 の名前を変更し、ダブルクリックしてマテリアル エディタで開きます。

    Create another Material

  2. 4 つのテクスチャ以外はすべて削除します。また、2 つの Texture Object を Texture Sample に再度変換して戻す必要があります。各 Texture Object ノードで右クリックし、コンテキスト メニューから [Convert to Texture Sample (テクスチャ サンプルに変換)] を選択します。

    Convert to texture sample

  3. 詳細テクスチャを手動で作成するには、次のマテリアル表現式のノードが必要です。以下はそれぞれ、パレット で検索するか、右クリック のコンテキスト メニューの検索バーを使用して検索できます。

    • Texture Coordinate x 1

    • Clamp x 1

    • Scalar Parameter x 2

    • Add x 2

    • Multiply x 3

    完了すると、マテリアル グラフは以下のようになるはずです。

    All required Material expression nodes

  4. すべてのノードをグラフに追加したら、以下のようにノードの接続を開始します。以下の画像は、グラフの Base Color 部分の正しい構成を示しています。完了すると、マテリアル グラフは以下のようになるはずです。

    画像を拡大するにはクリックします。

  5. [Base Color] セクションで作成された、テクスチャのスケールを制御するロジックは、法線マップとともに再利用できます。以下のようにノードを接続します。

    画像を拡大するにはクリックします。

  6. Base Color と法線マップがすべて接続されたため、マテリアルはコンパイル、保存、および利用される準備が完了しました。

    画像を拡大するにはクリックします。

詳細テクスチャのヒントとコツ

次のセクションでは、マテリアルで詳細テクスチャを使用するためのさまざまな方法について、ヒントとコツをいくつか紹介します。

距離ベースの詳細テクスチャ

テレインなど、大規模なサーフェスを取り扱う場合は、テクスチャがシームレスであっても繰り返しが目立ち、テクスチャの外観を損ねていることに気づくかもしれません。これは、特に遠い距離から表示した場合に顕著です。

これを修正するには、以前に作成した詳細マテリアルを変更し、カメラが近づいた場合にあるテクスチャを表示し、カメラが遠ざかった場合に別のテクスチャを表示するようにします。多くの場合、これは「距離に基づくテクスチャのブレンド」と呼ばれます。これは、以下の手順に従って実装できます。

  1. まず、 DetailTexturing_02 マテリアルを複製し、その名前を「DistanceFade」に変更します。マテリアルを開きます。

  2. 元のマテリアルからほとんどのノードの接続を削除できますが、4 つのテクスチャは削除しないでください。以下の Scale Controls のラベルが付いたセクションも維持する必要があります。以下のマテリアル表現式を検索し、グラフに追加します。

    • World_Position x 1

    • Camera_Position_WS x 1

    • Distance x 1

    • Divide x 1

    • Power x 1

    • Clamp x 1

    • Constant x 2

    完了すると、マテリアル グラフは以下のようになるはずです。

    Distance fade nodes

  3. 2 つの Constant マテリアル表現式の値を 5124 に変更し、以下に示す構成のようにノードを接続します。テクスチャのブレンドが発生する距離は、Divide マテリアル表現式 (サンプル画像で 512 に設定されているもの) に接続された、最初の Constant によって制御されています。以下に示すマテリアル グラフは、距離に基づくテクスチャのブレンドに必要なすべてのロジックを提供します。

    Distance fade Material logic

  4. これで、残りのグラフに Distance fade ロジックを接続できるようになりました。まず、2 つの 線形補間 (Lerp) ノードをグラフに追加します。Lerp ノードの Alpha 入力によって、2 つのテクスチャの間の遷移が駆動されます。下図のように、マテリアルの接続を完了します。

  5. エフェクトをプレビューするには、[Material] プレビュー ビューポートで 右マウス ボタン を押したままにし、上下に動かします。これによって、グラフをズームイン/アウトできます。球体からカメラが 512 単位離れると、マテリアルはレンガから小石に遷移します。この処理を確認できない場合は、Divide ノードに接続されている Constant の値を調整できます。値を 512 よりも小さくすると、遷移がより早く発生します。

まとめ

詳細テクスチャは非常に強力なツールであり、ベースとなるテクスチャを詳細テクスチャによって補うことでマテリアルの外観を向上します。詳細テクスチャはピクセル化をある程度隠すのに役立ちますが、プレイヤーのカメラをオブジェクトに対して極端にズームインすると、詳細テクスチャのメリットは失われるため、注意してください。また、詳細テクスチャを追加すると、マテリアルへのルックアップが 2 つ以上追加される場合があるため、特にモバイル プラットフォームではパフォーマンスやメモリの問題につながることがあります。

タグ