【Substance Designer】スキャンマテリアル改造:カスタムなハイトマップで個性を加える

初めに

現代のゲーム開発において、スキャンマテリアルを活用することは、リアリズムや本物らしさを実現するための強力な近道となっています。Megascans、Textures.com、Substance Assets などのアセットを利用すれば、高品質なスキャンが可能となり、アセット制作を大幅にスピードアップできます。また、ゲーム世界を現実のディテールで支えることで没入感を高めることができます。

しかし、ここには落とし穴もあります。

スキャンマテリアルをそのまま使ってしまうと、結果が平凡でありきたり、時には生命感のないものになってしまうことが少なくありません。特に同時に複数使用してしまうと、その傾向は如実に表れます。工夫を加えなければ、背景は「どこかで見たような風景」に埋もれ、ゲームを際立たせる独自のアーティスティックな魅力を失いかねません。

そこで今回、汎用的なスキャンマテリアルをカスタムのハイトマップを用いて、独自性と視覚的な魅力を備えたアセットに変換する手法を紹介したいと思います。

この記事で紹介する 「Substance Designer のハイトグラフ」 は、 Booth にて無料配布 いたします。使用制限は一切ありませんので、ぜひ以下のリンクからダウンロードして、ご自身のワークフローで試してみてください。

ダウンロード

それでは始めましょう！

スキャンマテリアルの初期確認

今回、カスタムのハイトマップを使ってスキャンマテリアルをブラッシュアップする方法を示すために、典型的なケースとして「木の幹用マテリアルの作成」を取り上げます。ベースには、アメリカ産マツの樹皮をスキャンしたマテリアルを使用しています。以下は、そのマテリアルを幹メッシュに適用した状態の生レンダリングです。

ご覧の通り、この幹には表面の起伏や曲線が欠けており、幹が凡庸で平面的、そしていかにもコンピュータ生成のように見えてしまいます。細い枝に使う分には問題ありませんが、メインの幹に用いる際には表面の変化が不可欠です。この記事では、この点を中心に改善していきます。

Substance Designer グラフ ― 初期セットアップ

マーケットプレイスからテクスチャをダウンロードすると、通常は JPEG・TGA・PNG といった 8bit フォーマットのテクスチャファイル一式に加えて、EXR・HDR・PNG などの形式で保存された 16bit または 32bit のディスプレイスメント用ソースファイルが付属しています。

Substance Designer でマテリアルを編集する際には、ハイトマップとして 16bit 以上のファイルを使用することが非常に重要です。これにより、アーティファクトがスキャンデータから生成される追加マップに発生しないようにできます。

まず、 Albedo・AO・Normal・Roughness の JPEG ファイルと Displacement の EXR ファイルをリンクとして Substance Designer のグラフに読み込みます。それぞれのテクスチャについて、出力フォーマットのビット深度が正しいこと、またカラーモードが意図したタイプであることを確認してください。

次に、 Material Transform ノードを作成し、各テクスチャを入力として接続します。このノードを使うことで、グラフを整理しやすくなるだけでなく、すべてのテクスチャを一括で変形できるようになります。さらに、このセットアップによって マテリアルリンク表示モード（ショートカット: 2） を利用でき、グラフ操作を効率化できます。

幹の表面の形状用ハイトマップの作成

Substance Designer の全てのグラフは下記になります。

この記事の冒頭で紹介した BOOTH・Coyote Environment Team ページ のリンクから、このグラフをダウンロードできます。教育目的のため、グラフはできるだけシンプルにしていますが、同じ原則を応用すれば、簡単により複雑な表現を追加することも可能です。

順を追ってグラフを見ていきましょう。

ステップ 1：樹皮のシワのベースを作成する

ステップ 1.1：ベースシェイプの作成

1. Gradient Linear 2ノードを使って、ハイトマップを2つ作成します。
   1つの Rotation 値を 0 に設定し、水平方向の円柱形を作成します。
   もう1つの Rotation 値を 90 に設定し、垂直方向の円柱形を作成します。
2. 垂直方向のシェイプに対し、水平方向のシェイプをブレンドノードの乗算描画モードで合成します。
   これによって上下左右にグラデーションがかかり、カプセルのような形状になります。
   ・ブレンドノードの不透明度を、おおよそ 0.5〜1 の範囲に調整します。
   ・不透明度の値が高いほど、レンズ状または凸状のシルエットが強調されます。

ステップ 1.2：大型のシワを作成

1. Tile Generator Grayscaleノードを使用して、少数のシワの基本形状を散布します。
   ・Colorタブで描画モードを最大に設定します。
   ・Position、Rotation、Sizeの値を好みに合わせて調整します。
2. ベースパラメータータブで、ランダムシードの右にあるランダム化ボタンを複数回クリックし、望ましい結果が得られるまで繰り返します。
3. Tile Generator Grayscaleのパターンの方向に合わせて角度パラメーターを設定し、指向性ブラーを使用して水平方向のつなぎ目をなめらかにします。

ステップ 1.3：中型のシワの作成

1. ステップ 1.2:のTile Generator Grayscaleノードを複製します。
   ・インスタンスの数を増やします。
   ・必要に応じてパラメーターを微調整します。
2. ベースパラメータータブで、ランダムシードの右にあるランダム化ボタンを複数回クリックし、望ましい結果が得られるまで繰り返します。
3. より自然的な見た目を得るために、Blur HQ Grayscaleノードを使って結果を少しぼかします。

ステップ 1.4：シワを結合する

1. ブレンドノードを作成します：
   ・ステップ 1.2の中型のシワを背景のインプットに、Step 1.3の大型のシワを描画色のインプットとして使用します。
   ・乗算ブレンドモードを使ってシワを合成します。
   ・不透明度を調整して、好みに合わせて形状のバランスを取ります。
2. ここから、ステップ 1.1〜1.3に戻って以下の設定を調整しながら、2Dビューまたは3Dビューでこのステップの結果を確認して外観を整えてください：
   ・ステップ 1.1：ブレンドノードの不透明度値。
   ・ステップ 1.2：Tile Generator Grayscaleノードのランダムシード、散布するシェイプの数やその他の値。指向性ブラーノードの強度値や角度。
   ・ステップ 1.3：Tile Generator Grayscaleノードのランダムシード、散布するシェイプの数やその他の値。

ステップ 2：樹皮のシワを歪ませるためのノイズの制作

ステップ 2.1：方向性のあるノイズを作成する

1. Cloud 2ノードを作成します。ベースパラメータータブで、ランダムシードのタイトル右にあるランダム化ボタンを複数回クリックし、望ましい1結果が得られるまで繰り返します。
2. 指向性ブラーノードを2つ使用して、ノイズをなめらかにします。
   ・1つ目の指向性ブラーノードには高めの強度を設定し、角度を調整してノイズの主方向を定義します。
   ・もう1つの指向性ブラーノードには低めの強度と異なる角度を設定し、最初の方向に対して横方向にノイズをなめらかにします。
3. 上記の手順を繰り返して、別のノイズバリエーションを作成します。

ステップ 2.2：ノイズを混ぜて膨らませる

1. ステップ 2.1のノイズバリエーションをブレンドノードで合成し、描画モードを乗算に設定し、必要に応じて不透明度を調整します。
2. Mosaic Grayscaleノードを使用して、結果をわずかに膨らませます。

ステップ 3：よりも自然的な見た目を出すために、シワの歪みと膨張

ステップ 3.1：シワをワープさせる

1. ステップ 1.4で作成したシワマップを、ステップ 2.2のノイズを使用して指向性ワープノードでワープさせます。
   ・強度マップオフセットを0.5に設定します。
   ・ワープ角度および強度の値を必要に応じて調整します。
2. そこから、ステップ 2.1〜2.2に戻って、2Dビューまたは3Dビューで現在のステップの結果を確認しながら、以下の設定を調整して外観を整えてください：
   ・ステップ 2.1: Cloud 2ノードのランダムシード、指向性ブラーノードの角度および強度の値。
   ・ステップ 2.2: ブレンドノードの不透明度の値、およびMosaic Grayscaleノードの強度。

ステップ 3.2：仕上げ

1. Mosaic Grayscaleノードを使用して、シワをわずかに膨らませます。
2. Auto Levelsノードを使って、結果のハイトマップを正規化します。

スキャンマテリアルと表面の起伏をワープノードで合わせる

先ほど作成した幹の表面の起伏や曲線にスキャンマテリアルを合わせるには、指向性ワープノードとワープノードを組み合わせて使うことをおすすめします。ここでは、表面の起伏用ハイトマップを強度のインプットに入れて歪みのレベルを制御します。

これらのフィルターの仕組みがよくわからない場合は、以下のリンクを参照してください。

Substance Designer ヘルプ – ワープ
Substance Designer ヘルプ – 指向性ワープ

操作は簡単です。指向性ワープノードの角度を樹皮の折り目の方向に合わせ、指向性ワープとワープノードの強度の値を調整して、望む見た目になるまで微調整します。セットアップ例は以下の画像の通りです。

ご覧の通り、このグラフはかなり煩雑に見え、複数のノードを操作する必要があるため編集もしづらくなっています。残念ながら Substance Designer には、これを簡単に解決できる 標準のマテリアルワープノードは用意されていません。そこで、私は同じ機能を持ちつつ、より整理して使えるカスタムノードを作成して利用しています。

この記事の冒頭で紹介したリンクから、このノードはダウンロード可能です。使用する際は、SBS ファイルを Substance Designer パッケージと同じフォルダに置き、グラフにドラッグ＆ドロップしてください。設定は、指向性ワープおよびワープノードと同じです。このノードのおかげで制作時間を大幅に短縮できたので、ぜひ試してみてください。

マテリアルの仕上げ

マテリアルを仕上げるには、以下の手順を行います。

1. ハイトマップから幹のしわ用の ノーマルマップ を生成し、その結果を先程ワープしたノーマルマップと Normal Combine ノード で結合します。
2. Curvature Smooth ノードを使ってカーブマップを生成します。結果を利用して、ベースカラーやラフネス テクスチャに微妙な色や粗さの変化を加えます。
3. ハイトマップから幹のしわ用のアンビエントオクルージョンマップを生成し、その結果を先程ワープしたアンビエントオクルージョンマップと結合します。
4. ハイトマップを結合します。

ブレンドノードのブレンドモードは下記になります。

• ベースカラー: Overlay＊
• ラフネス: Subtract
• アンビエントオクルージョン: 乗算
• ハイトマップ: 乗算

＊より表現力のある Base Color を得るためには、Gradient Map ノードをデフォルトの白黒グラデーションのまま使うのではなく、少し工夫するのがおすすめです。

• 黒にはわずかに「寒色」を加える
• 白にはわずかに「暖色」を加える
• 中間はニュートラルなグレー（RGB 0.5, 0.5, 0.5）のままにする

こうすることで、凸凹が強調され、綺麗な色の変化が得られます。

これで以上になります！ゲームエンジンで結果を確認してみてください。幹がどれだけ自然に見えるようになったか実感できるはずです。

追記

さらに、幹の根元付近のモデリングするために、しわのハイトマップを利用することもできます。これにより、最小限の手間で木をよりリアルに見せることが可能です。
ただし、本記事の主題ではないため、この幹制作ワークフローの部分については詳しく触れませんでした。今後の記事でこのテクニックを紹介できればと思います。

参考サイト

BOOTH – COYOTE 背景班 – 【無料】記事連動ファイル: 幹ハイトマップのグラフ & Material Warpノード
Substance Designer ヘルプ – Material Transform
Substance Designer ヘルプ – リンク制作モード
Substance Designer ヘルプ – 指向性ワープ
Substance Designer ヘルプ – ワープ