BLOG

シンラボメンバーのあれこれ

  1. HOME
  2. ブログ
  3. 代表通信
  4. 代表技術通信~Unreal Engineで点群表示④ まずはUE4のチュートリアル(5)

代表技術通信~Unreal Engineで点群表示④ まずはUE4のチュートリアル(5)

こんばんは。代表の草場です。

今回は、オンラインコースのUnreal Editor の基本 – マテリアルについてです。チュートリアル紹介みたいになってきましたね。

最初のマテリアル P2

さて、プラスティックマテリアルとメタリックマテリアルができました。さらにディテールを追加して、これらを影に移動してマテリアルの動作とPBRを活用するヒントを確認します。

まずマスターマテリアルに戻ります。
マスターマテリアルとマテリアルインスタンスを操作する方法を示します。
マスターマテリアルのエディタで、線形補間ノードを追加します。lerpノードとか呼ばれるみたいです。エディタで右クリックで、LinearInterpolateを検索、選択します。LinearInterpolateノードにカーソル合わせてctrl + Alt押すと、詳細な説明が出てきます。

このLinearInterpolateノードはアルファを受け取ります。
アルファ値(アルファち、alpha value)とは、デジタル画像データにおいて色情報とは別に、画素(ピクセル)ごとに設けられた付加情報を表す数値である。特に透明度(不透明度)として利用されることが多い(Wikipedia参照)。

一つ目の入力と二つ目の入力としてアルファを受け取ります。そしてそのアルファを利用して、2つの入力をブレンドします。
使い方は以下です。まずはテクスチャデータを用意してアルファをつなぎます。それからAチャンネル、Bチャンネルを使ってテクスチャデータをブレンドします。このLerpノードを使って、テクスチャ情報をフィードしたり、値を乗算したりします。
このLerpノードもパラメタ化できます。右クリックしてtextureと入力し、利用可能なノードを確認します。TextureSample、TextureSampleParameter2Dがあるので、そのノードをそれぞれ作成します。TextureSampleはハードコードされたノード、TextureSampleParameter2Dはパラメタ化されたノードです。このTextureSampleParameter2DはMyTextureという名前にします。独自のマテリアルインスタンスからアクセスして変更できるからです。TextureSampleノードは使わないので消します。

ではTextureSampleParameter2DとLinearInterpolateノードをつないでいきます。TextureSampleParameter2DノードのRGBデータはそのままアルファに接続します。この真の意図は、グレースケールデータを提供することです。R,G,Bのどの部分でもいいので、それをアルファと接続します。LinearInterpolateノードのAチャンネルとBチャンネルにはスカラーデータをフィードします。Aチャンネル上で右クリック、パラメタへ昇格をクリック、Roughness_Lowと名付けます。Bチャンネル上で右クリック、パラメタへ昇格をクリック、Roughness_Highと名付けます。そしてLerpノードをM_MasterMaterialのラフネスと接続します。見た目は以下。

Roughness_High、Roughness_Lowのパラメタを入力します。デフォルト値は0です。
Roughness_Lowを0.3に、Roughness_Highを0.9に設定してみます。

Lerpノードはテクスチャデータを受け取り、Roughness LowとRoughness_Highをブレンドします。基本的にはテクスチャをフィードすると、Lerpノードはそのテクスチャの白と黒を受け取り、それらを0.3と0.9で協調します。
このノードの操作を確認します。さらにこのノードをベールマテリアルにフィードして乗算してテクスチャを強調することもできます。
Multiplyノードを作り、BaseColourノードのRGBチャンネルとMultplyノードのAチャンネル接続。さらに、MyTextureノードのAチャンネルとMultplyノードのBチャンネル接続します。そして、MultplyノードをM_MasterMaterialのBase_colorと接続します。
線がごちゃごちゃしてきたので、線上でダブルクリックするとRerouteノードできるので、それを使って移動させます。

法線情報も設定します。
法線(normal)って何に使われるかというと、光の濃淡を法線ベクトルから計算することで、ポリゴンのレンダリング時の陰影を表現することができます。実際に画像で見たほうがわかりやすいです(法線マップについての基礎知識まとめ参照)。

法線マップとはマテリアルのサーフェスにディテールを追加するためのテクスチャデータです。使いこなすべし。再度、TextureSampleParameter2Dを追加して、MyNormalMapと名付け、M_MasterMaterialのNormalと接続(フィード)します。これをそのままコンパイルするとエラーになります。というのは、MyNormalMapの詳細タブのSampler TypeがColourとなっているためです。Normalに変えるべし。そしてテクスチャもDefautlNormalにします。詳細タブのテクスチャをクリックして、下部の表示オプションをクリック、エンジンコンテンツを表示を有効にし、defaultnormalで検索しデフォルト法線を選びます。

保存して、マテリアルインスタンスへの影響を確認します。マスターマテリアルを変更したので、そこから作られたマテリアルインスタンスにも影響があるはず。MI_Plastic見てみると、確かにMyNormalMapとMyTextureが追加されています。

ビューポートをみると、リアルタイムにインスタンスの更新情報が反映されて、球のテクスチャが変化しています。

MI_Metalのパラメタをいじります。新しく追加されたRoughness_High、Roughness Lowを有効にします。MyNormalMapとMyTextureもオンにします。そうするとRoughness Low、Roughness_High、がいじれて、さらにテクスチャもいじれます。例えば、MyNormalMapで、Concrete_Base02_Nを選択。MyNormalMapでConcrete_Base02_Dを選択。コンクリートができました。

法線よくわからん。

見栄えをよくするために、Roughness_Highを0.55、Roughness Lowを0.05あたりにします。この辺は理屈があるのでしょうか?コンクリートっぽくなりました。色も金色に戻します。もう少し反射を強くしたいので、Roughness_Highは0.25あたりに。保存をきちんとしましょう。。

MI_Plasticも設定します。上記同様、Roughness_High、Roughness Low、MyNormalMap、MyTextureを有効にします。MyNormalMapで、Concrete_Base02_Nを選択。MyNormalMapでConcrete_Base02_Dを選択。Roughness_Highを0.65、Roughness Lowを0.05あたりに。色はオレンジに。

出来ました。金色の金属球とペイントされたコンクリートの球です。

作成した二つの球をコピーします。これを暗い場所に移動させます。どのように見えるでしょうか?
まず、反射を再構築(ビルドでリフレクションキャプチャを再構築クリック)して、反射プローブを更新します。
F11クリックして全画面表示します。暗い場所にあるマテリアルと明るい場所にあるマテリアルが同一、と言えます。メタリックの金色の反射もあるし、コンクリートです。暗がりで変化していません。

物理ベースのシェーディングとレンダリングの登場前は、このようなことは非常に難しく、ほぼ不可能であったそうです。

まとめます。

設定値はサーフェスマテリアルドメインと、不透明ブレンドモード、デフォルトライティングといずれもシンプルです。
パラメタノードと色を操作するベクターパラメタノードがあります。これには実際のテクスチャを乗算しています。テクスチャニードの赤チャンネルが接続しているLerpノードにはRoughness LowとRoughness_Highがつながています。
それからSpecularとMetalicの値を操作するパラメタノードがあります。
さらにNormalを操作するのが法線マップです。

これが基本となるPRBマテリアルを構築しています。これを使って、メタリックの値などを設定しなおして遊んでみましょう。

最後にバリアントの作成のやり方の説明をします。
M_MasterMaterialで右クリック、マテリアルインスタンスの作成、インスタンスができました。MI_RedMetalと名前を付けます。ダブルクリックで開いて、ベースの色は赤色、Metalは金属にしたいので1、MyNormalMapはConcrete_Tiles_N、MyTextureはConcrete_Tiles_Dに設定。Roughnessは良しなに設定。
ビューポートでマテリアル球を複製し、そこに今作ったマテリアルインスタンスをドラッグ&ドロップする。

出来ました!

 

 

関連記事