テクスチャを使ったマップマテリアル

Tutorial

Beginner

+10XP

15 mins

(6)

Unity Technologies

テクスチャを使ったマップマテリアル

テクスチャとは、3D オブジェクトを包み込み、色や反射率などの特性を変化させる 2D マップのことです。このチュートリアルでは、テクスチャがどのように機能するかを学び、マテリアルを使ってオブジェクトに適用していきます。

このチュートリアルが終わるころには、次のことができるようになります:

  • マテリアルで使用されるテクスチャとマップの定義
  • URP/Lit シェーダーで設定可能なマップとその様々な効果について説明します。
  • UV の定義
  • Unity マテリアルのアセットを作成するために、3D モデリングプログラムがどのように使用されるかを説明します。
  • 画像を使ったマテリアルの Base Map の調整
  • テクスチャファイルのコレクションから、マテリアルをシミュレートするための適切なマップを選択します。

Languages available:

1. 概要

単色がない場合はどうすればよいですか?水玉模様、縞模様、斑点模様がある場合は?傷や腐食など、不完全な部分がある場合は? など

現実世界のオブジェクトは、反射率や滑らかさが一様でないものがほとんどです。そこで登場するのがマップです。マップ(Map)は、ゲームオブジェクトをシートのように包む 2D 画像で、メッシュ全体の色、鏡面性またはメタル質、物理的なテクスチャ、その他のプロパティを設定することができます。 マップを含む画像ファイルをテクスチャと呼びます。

このチュートリアルでは、画像ファイルをマップとしてマテリアルに使用し、リアルなバリエーションや特徴を作り出す方法を学びます。Shaders と Materials Gallery にある 6 つの奇妙に見える 2D 画像のパネルである Textures Exhibit を見ながら、テクスチャマップが 3D サーフェスに生命を与える様々な方法の例を探ります。

2. テクスチャとは?

テクスチャ(Textures)は、BMP、TIF、PNG、JPG など、みなさんがよくご存知の形式の通常の画像ファイルです。

画像ファイルのデータは、チャンネルで構成されています。グレースケール画像とも呼ばれる白黒画像は、各ピクセルのグレーの濃淡を示すチャンネルが 1 つだけです。カラー画像には、赤、緑、青(RGB)の 3 つのチャンネルが必要で、これらを組み合わせることで、コンピューターのディスプレイに表示される色を作り出します。

画像ファイルのフォーマットによっては、赤、緑、青、アルファ(RGBA)の 4 つのチャンネルを持つものもあります。アルファチャンネルは通常、透明度のデータを含んでいます。

画像ファイルの各チャンネルは、それ自体が数字の行列です。マテリアルでは、これらの数値は色や透明度以外にも、滑らかさ、鏡面性、メタル質などの特性を示し、さらに各ピクセルが向く方向によって物理的な特徴の見え方を表現することも可能です。

テクスチャファイルのソース

アーティストは通常、Blender® や Adobe® Substance 3D Painter® などの 3D モデリングソフトウェアで、モデルとともにテクスチャを作成します。メッシュとテクスチャを Unity にインポートした後、テクスチャを使用してマテリアルを作成します。

テクスチャファイルを含むマテリアルは、Unity Asset Store から、すぐに適用できる別のマテリアルとして、またはモデルに同梱されて入手できます。

また、通常の 2D 画像もテクスチャになります。現実世界の表面を撮影して、自分だけのテクスチャを作ることも可能です!ネットで画像を検索して使う場合は、他人のデータを責任を持って利用することを心がけましょう。

3. テクスチャファイルの検証

いくつかのテクスチャファイルをよく見てみましょう:

1. Project ウィンドウで、Assets > CreativeCore_Shaders > Textures > Tiled Textures フォルダーの順に選択して開きます。

2. Plastic_Albedo ファイルを選択します。これは PNG ファイルです。

3. Inspector で、画像のサムネイルとその上にあるツールバーを見つけます。RGBA ボタンを選択し、これらのチャンネルを表示します。ファイルがグレースケール(1 チャンネルの白黒)か、3 チャンネルの RGB か、4 チャンネルの RGBA かを確認するのに便利です。

4. さらに詳しく見るには、Project ウィンドウでテクスチャファイルをダブルクリックすると、Adobe® Photoshop® やフォトビューアーなど、そのファイル形式に対応したデフォルトのプログラムが起動されます。

4. Base Map テクスチャによる色の変更

Base Map テクスチャDiffuse または Albedo とも呼ばれる)は、オブジェクトの表面の拡散反射、つまり色を定義する通常の RGB または RGBA カラー画像ファイルで表します。

Base Map は、マップのアルファチャンネルに透明度の情報を含めることもできます。(透明度については後ほど検証します)。

1. テクスチャを試すには、作業台に戻って、変更したいマテリアルを探すか、新しいマテリアルを作成して使用します。

2. Project ウィンドウの Assets > CreativeCore_Shaders > Textures > Tiled Textures フォルダーの順に進み 、マテリアルの Base Map プロパティに適用するテクスチャを特定します。これらのテクスチャの名前には、albedo、diffuse、base などの単語が含まれています。

3. これらのテクスチャのいずれかを以下のいずれかの方法でマテリアルの Base Map に適用します:

  • Project ウィンドウから、マテリアルの Base Map プロパティの左側にある空ボックスにテクスチャをドラッグします。
  • 丸いアイコンを選択すると、プロジェクト内にある Base Map として使用可能なすべてのファイルが表示されます。

注:Base Map を消去するには、丸いアイコンを選択し、None を選択します。

4. 他の Base Map も試してみて、作業台のライトの下で検証してください。

5. カラーピッカーでベースカラーを設定し、Base Map のテクスチャを着色することを試してみてください。通常、この色はテクスチャの色を変更しないように白にしますが、時には色付けが有効な場合もあります。

5. タイル状のテクスチャ

Tiled Textures フォルダー内のテクスチャーは、任意のメッシュの周りにタイル状に配置するようにデザインされています。各ファイルのマップは、床のタイルのように単純に繰り返されます。Unity のアセットストアでは、シームレステクスチャのパッケージが販売されています。これらは、タイルとタイルの間に継ぎ目が生じないようにデザインされています。

引き続き、作業台のアイテムに様々な Base Map を適用して試してみてください。その際、Material Inspector で TilingOffset のプロパティを自由に調整してください。

注:Tilingと Offset の設定は、メッシュ上のすべてのマップに適用されます。

  • Tilingタイリング)とは、メッシュ表面の単位あたりのタイルの枚数です。数値が大きいほど、パターンは小さくなります。
  • Offsetオフセット)は、異なる点からタイリングを開始します。例えば、X Offset を 0.5 とすると、テクスチャの幅の半分でタイリングがオフセットされます。

6. UV マッピングされたテクスチャ

球体などのプリミティブやブロックのような単純な形状の場合、テクスチャマップがオブジェクトのメッシュのどの位置にあるかは重要ではありません。

ギャラリーの一番奥にいる Ellen のキャラクターをよく見てください。彼女の体は、皮膚、布、革、金属などの表面を持っていますが、これらがすべて 1 つのマテリアルになっています。このマテリアルのベースマップテクスチャは、Ellen の横にある Textures Exhibit で見ることができます。

このテクスチャが Ellen の体のメッシュに巻きついて、モデル上で見られる色を作り出しているのです。Ellen のようなキャラクターや細かいオブジェクトのモデルでは、メッシュに対するテクスチャマップの位置合わせは非常に重要です。

テクスチャはどのようにメッシュに巻き付けるのか?

モデリングアプリケーションで 3D モデルを作成する際、アプリケーションは UV マッピングと呼ばれる処理でこのテクスチャを生成します。

Autodesk® 3ds Max® や Maya®、Blender® などのモデリングアプリケーションで作成されたメッシュは、UV 座標と呼ばれる独自の 2D 座標のセットを生成します。UV 座標は通常の 2D 空間の XY 座標と同じですが、環境の座標系(XYZ)と区別するために UV と呼ばれています。UV 座標は、シーンの 3D 空間ではなく、メッシュに対する相対座標です。

UV マッピングとは、3D モデルの表面をアンラップ処理して平面にし、そこに 2D のテクスチャマップを適用する処理です。この過程で、モデリングアプリケーションは、テクスチャをモデルに巻き戻すことができる UV 座標を生成します。

モデリングによって、今回のキャラクター Ellen のような複雑なオブジェクトを作成することができます。Ellen はサブメッシュと呼ばれる複数のメッシュで構成されており、それぞれにマテリアルが設定されています。しかし、Ellen のサブメッシュは数個しかなく、首から下はすべて 1 つのサブメッシュで、1 つのマテリアルを必要とします。

UV マッピングは、アーティストがオブジェクトの表面をモデリングする際に、多くのメッシュデータや細部を表現するための別のテクスチャを使用せずに済むようにします。

7. テクスチャによる反射特性の変更

色のベースマップを適用するのと同じように、鏡面反射/金属反射率や滑らかさのマップを使用して、メッシュ上に他よりも光沢のある、または滑らかな特定の領域を作成することができます。

Textures Exhibit に展示されている 2 つ目のテクスチャー、Ellen のメタリックマップをご覧ください。

Ellen のボディマテリアルは Metallic ワークフローを使用しているため、このマップはグレースケールとなります。メタリックデータはテクスチャファイルの R、G、B チャンネルにありますが、シェーダーは R チャンネルのみを読み取ります。

3 つ目のテクスチャとして表示されているスムースネスマップは、テクスチャファイルのアルファチャンネルに格納されています。Ellen のボディモデルのさまざまな種類のサーフェスで、非常に多様なスムースネスを見ることができます。

8. テクスチャをモデルに合わせる

ここでは、スペキュラー/メタリックとスムースネス値のテクスチャマップに慣れるための練習をします。これらのテクスチャは、必ずしも見やすいとは言えない特性に対応しているため、識別が容易ではありません!

1. Scene ビューで、作業台の上にあるケトルの位置を確認します。

2. Project ウィンドウの Materials フォルダーで、新しいマテリアルを作成し、ケトルに適用します。名前を「Kettle」とします。

3. Textures フォルダー内の Kettle というサブフォルダーには、一連のテクスチャファイルが収められています。

4. これらのテクスチャを Inspector で確認します。RGB、そして時には A ボタンを使って、各チャンネルを表示することを忘れないでください。

5. テクスチャとマテリアルのプロパティについて知っていることを前提に、このケトルにベースカラー、鏡面性またはメタリック性、および滑らかさを与えるマップを特定します。(スペキュラーかメタリックか、どちらのワークフローを使うか決めてください)。

このパズルを解くためのヒントは:

  • Kettle_AKettle_F と書かれたファイルのうち、2 つだけ使います。
  • 明るい色は高い値、暗い色は低い値であることを覚えておいてください。例えば、スムースネスマップの白い部分は、最も滑らかな部分です。
  • Specular ワークフローは 3 つのカラーチャンネルを使用し、Metallic ワークフローは R のみを使用することを忘れないでください。

下の画像のようなケトルが出来上がれば成功です。ヘルプが必要な場合は、このチュートリアルの最後のステップに答えがあります。

この練習は、単純なマッチングゲームのように見えるかもしれませんが、インポートしたマテリアルを取り付ける際に、テクスチャを識別して正しく適用する、という重要なスキルの練習になるのです。この練習は、単純なマッチングゲームのように見えるかもしれませんが、インポートしたマテリアルを組み立てる際に、テクスチャを識別して正しく適用する、という重要なスキルの練習になるのです。

9. テクスチャファイルの探索

Adobe® Photoshop® などの画像編集ツールをお持ちであれば、2D ファイルを編集することでテクスチャを試すことができます。モデリングアプリケーションで見るような洗練された結果にはならないかもしれませんが、テクスチャで遊ぶのは楽しいものです。ケトルにロゴを追加してください。ただし、スムースネスマップまたはスペキュラー/メタリックマップだけにしてください。あるいは、ケトルの色を変えてみましょう。

10. 次のステップ

一応、上の演習でやったことを確認しておきましょう。Kettle_E はベースマップ、Kettle_B はメタリックマップです。Material 1 と名付けられたマテリアルには、これらのテクスチャが正しく適用されています。

テクスチャマッピングの基本がわかったところで、テクスチャやその他のプロパティで透明や半透明の効果を出す方法を見ていきましょう。

Complete this Tutorial