UE4 のマテリアル入門 (4) マテリアルでマスクを使う (前編)

ビデオの内容紹介 
前回「UE4 のマテリアル入門 (3)」で作ったマテリアルに手を加えていきます。最終的には、マテリアルをいくつかのセクションに分割してさまざまな色を付けることになりますが、この前編ではまず、あるテクニックを使ってマテリアルに分割線を入れて、その線を際立たせるところまで学習します。

原題 Introduction to Materials in UE4 – 4 – Using Masks within Materials, Pt1

前回完成図と結果
4001
4003

今回完成図と結果
5001
5002

作成上の注意点
① 一番上の Texture Sample ノードは T_Ceramic_Tile_M です。コンテンツ ブラウザからマテリアルエディタにドラッグアンドドロップします。
4005

② 一番下の Texture Sample ノードは T_Ceramic_Tile_N です。やはりコンテンツ ブラウザからマテリアルエディタにドラッグアンドドロップします。
4006

③ Multiply (乗算) ノードは、マテリアルエディタで右クリックして multi で検索すると出てきます。
4007

④ Mask (マスク) ノードは、マテリアルエディタで右クリックして mask で検索して、ComponentMask を選択します。
4008

⑤ Append (付け加え) ノードは、マテリアルエディタで右クリックして append で検索して、AppendVector を選択します。
4009

⑥ Append ノードに接続していて、数字の 0 が表示されている小さなノードは、値 0 の定数です。これを出すには、キーボードで 1 を押下しながら、左クリックします。または、constant で検索して Constant を選択します。

⑦ Add (加算) ノードは、マテリアルエディタで右クリックして add で検索して、Math の下にある Add を選択します。
4010

グラフの意味
① Texture Sample ノードで T_Ceramic_Tile_M を使う意味をチュートリアルでは述べています。その意味は、簡潔に言うと分割線 (タイルとタイルの間にある線) を木目のテクスチャに追加するために使われています。どういうことか、順を追って見ていきましょう。

まず、T_Ceramic_Tile_M を選択状態にして Details パネルの Texture アイコンをダブルクリックするとテクスチャエディタが開かれます。
4011
ここで、左上 View から次のように Red だけにチェックを入れるようにすると、
4012
白黒だけの表示 (グレースケール) になります。
4013
白いところは Red が使われており、黒いところは Red が使われていません。タイルを区分する「分割線」の部分に Red が使われていないため黒くなっています。この黒い線を前回作成したマテリアルに加えます。足し算するわけではなく、次のようにして Multiply (乗算) を利用します。

たとえば、あるピクセルの R、G、B が (0.6, 0.2, 0.1) であるならば、それに 0 を掛ける (乗算する) と (0, 0, 0) つまり黒になります。ここで掛ける 0 とは、先ほどの「分割線」の値 (グレースケールの黒=0=赤が使われていない部分の値) です。また、(0.6, 0.2, 0.1) に 1 を掛けると、(0.6, 0.2, 0.1) で変わりません。ここで掛ける 1 とは、先のタイルの各面 (グレースケールの白=1=赤が使われている部分の値) です。これによって、0 を掛けられた部分は黒抜きされ、1 を掛けられた部分は元のテクスチャ (つまり木目のテクスチャ) のままで変化はありません。このことを指してマスクと言っています。

まとめると、マスクの手法を利用して元のテクスチャに「分割線」を加えたことになります。

② T_Ceramic_Tile_N を使う意味についても考えます。T_Ceramic_Tile_N は法線マップです。法線マップは前回のUE4 のマテリアル入門 (3) マテリアルにテクスチャを追加するで取り上げたように、表面の凸凹を擬似的に表現するためのものです。これは先ほどのタイルの法線バージョンなので、「分割線」がへこんで見えるようになります。

凸凹の表現のために使用する要素は、x (A)、y (G) 成分であるため、Mask ノードを使って、z (B) の成分をカット (マスク) しています。これは、Details パネルで R、G だけにチェックが入っている状態にすることで可能です。

このタイルの法線マップと前回使用した木目の法線マップを Add で加算することになりますが、タイルの法線マップには B の成分がないため、木目の法線マップと互換性がありません。

そこで、Append (付け加え) ノードを利用して、B 成分を追加します。ただし加算に無害な?値 0 を追加しています。

この加算によって、上にある結果図のように、「分割線」に深みが出てきます。この処理を行わなければ、次のように「分割線」は、拡大して再掲結果図に比べるとぼんやりとして平坦な感じがします。(スクリーンショットをクリックすると拡大されます。)
4014
4015

再掲結果図
5002

以下、後編に続きます。お疲れさまでした!


About なつのや

アンリアル・エンジン 4 を基礎から勉強するためのサイト「UE4 の学び部屋」を開いています。どうぞよろしくお願いいたします。
マテリアル

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>