UE4 オンラインラーニング PBR マテリアルの作成を見る(3/3)

UE4
2020.07.25
  1. はじめに
  2. コース概要
    1. 第3部
    2. サンプルファイル
    3. 前提条件 & 前提知識
  3. 3.1 Tinted Glass Part 1: Using Vertex Colors to Create Localized Material 色付きグラス 頂点カラーを使用してローカライズされたマテリアルを作る
    1. マテリアル作成
  4. 3.2 Tinted Glass Part 2: Using Vertex Colors to Create Localized Material 色付きグラス 頂点カラーを使用してローカライズされたマテリアルを作る
    1. ペイントモードの使い方の解説
    2. マテリアルを修正
  5. 3.3 Tinted Glass Part 3: Using the Fresnel Function and Planar Reflections to add more realism フレネル関数と平面反射を使用してよりリアルに
    1. ベースカラーの定義
    2. Opacity + Metalic + ラフネスの定義
    3. 結果
    4. 平面反射を追加
  6. 3.4 Tinted Glass Part 4: Adding a Frosted Glass Effect 摺りガラス効果の追加
  7. 3.5 Displacement Mapping Part 1: Using Displacement Mapping to Create Rug and Fur Material Effects ディスプレースメントマッピングを使用してラグやファーマテリアル効果を作る
    1. マテリアル作成
  8. 3.6 Displacement Mapping Part 2: Using Vertex Colors to Control the displacement mapping effect 頂点カラーを使ってディスプレイスメントマッピング効果の制御をする
    1. 3.7 Vertex Animation – Using Materials To create Animated surfaces 頂点アニメーション – アニメーションする表面をマテリアルで作成する
  9. メモ
    1. 最終問題のメモ
    2. マテリアル関数 Fresnel Function についてのメモ
      1. Normal Vector 法線ベクトル
    3. テッセレーション
      1. World Displacement
      2. Tesselation Multiplier テッセレーション乗数
    4. 英語メモ
      1. Bear in mind 心に留める
    5. マテリアル Lighting Modeについて

はじめに

先日見たデザインビジュアライゼーションでのマテリアル入門が面白かったため続けてPBRマテリアルの作成も見ることに

コース概要

第3部

ディスプレイスメントマッピングを用いてシャギー

  • Material Examples マテリアル例
    • Tinted & Frosted Glass 色付けされたガラス面
      • マテリアルと一緒に頂点カラーを使う方法の紹介
    • Shaggy Rugs シャギーラグ
      • ディスプレイスメントマッピングを使うことでナイスなShaggyエフェクトがつけられる
    • Animated Curtains 動くカーテン

サンプルファイル

前提条件 & 前提知識

  • UE4.0 以降がインストールされていること
  • マテリアルに関する基本的な知識
    • なければマテリアル入門クラス等を見てくださいとのこと

3.1 Tinted Glass Part 1: Using Vertex Colors to Create Localized Material 色付きグラス 頂点カラーを使用してローカライズされたマテリアルを作る

厚いガラスの表面は、最も厚い部分から見ると色が付いていることがよくあります。 頂点カラーを使用してオブジェクトの特定の部分にのみ色付けを追加するための効果的なマテリアルテクニック、およびフレネルマテリアル関数と平面反射の使用について説明します。 まず、最初のシェーダを設定することから始めます。

以降のチャプターではいくつかの例とマテリアルのテクニックを紹介していくとのこと。

  • 頂点カラーの使い方
  • カラスの表面に曇りやぼやけた外観を追加する為に使用するマテリアル関数

ArchViz_Interior マップではガラス製のテーブルのマテリアルの最終結果をみることができる。

  • エッジのみに色付けする方法はいくつかある
    • 頂点カラーを使用する方法
      • オブジェクトに対するマテリアルエフェクトの位置の制御ができる
      • パフォーマンスへの影響を最大限に抑えるシンプルなオプション

マテリアル作成

Exercises マップで作業を行っていく

  1. M_Glass マテリアルを Workingフォルダに作成し開く
  2. Resultノードに透明マテリアルを設定できるように、Blend Mode を Translucent にする
  3. float3 ノードを配置しベースカラーに接続
  4. float1 ノードを配置して0.2として Opacity に接続
  5. Refraction(屈折)の定義
    • 1 ～ 1.2(最大1.52)までを Fresnel の値に基づいて決定する
    • IOR は光の屈折率
    • これまでの完成図
    • 一旦上記のマテリアルをマテリアルインスタンスを作成し適用する
  6. M_Glassのマテリアルインスタンス MI_Glass を作成する
  7. テーブル(エレメント1)に適用する

3.2 Tinted Glass Part 2: Using Vertex Colors to Create Localized Material 色付きグラス 頂点カラーを使用してローカライズされたマテリアルを作る

Unreal Engineの頂点ペイントツールを使用して頂点カラー情報をテーブルトップに追加する方法について説明ます。そして、頂点カラーノードを使用してテーブルの端に青緑色の色合いを適用するようにマテリアルを設定します。

  • 頂点カラーを使うには頂点カラー情報がメッシュにある必要があるとの事
  • 他の3Dモデリングツールで作成しUE4にインポートした場合、頂点カラー情報も一緒にインポートされる。
    • Unreal 内でもその作業は行える。ここではUnrealのVertex Painting Toolを使用する

ペイントモードの使い方の解説

動画を見たほうがわかりやすいです。ここではメモだけを残します。

  1. ペイントモードを表示する
  2. カラー表示モードを RGB Channels(またはRed Channel)に設定
  3. 全てを黒く塗りつぶす
    • ペイントをクリック
    • Paint Color で塗りつぶしの色を選択
    • 塗りつぶし
    • 黒はマテリアルシェーダーで影響を受けない部分を表している
      • 🤔つまり今はシェーダー上で何をしても無効ということですね
    • 黒はマテリアルシェーダー内で反転できる
      • 🤔つまり黒に対して効果をつけたい場合はつけられるという事ですね
    • ここではテーブルの端だけをペイントしていく
  4. 筆の色を白にして、ブラシサイズを小さくする

  • Enable Brush Flow と Ignore Back-Facingにチェックを付けておけば動画と同じ設定
  • 上記の設定じゃなければ異なった結果になるため注意
  • テーブルの四隅を順番に(トップと端の中間あたり)クリックする
    • ペイントするときは画面に表示されている部位にも注意。
    • 下記のような見え方の時、死角となるテーブルの裏側は色を塗らない設定になっている模様
    • 裏側は黒いままで端 + トップが白くなっている状態
    • 次はトップだけを黒い色にする
  • 色を黒にする
  • エッジが見えずトップだけが見えているような場所から端っこをクリックする
    • 1度だけクリックを四隅で繰り返す
      • クリックする場所により色の濃さが変わるため、何度からクリックする必要があるかもしれません
    • 結果 端だけが白くなっている
    • これが頂点ペインティングであり、この情報はマテリアルに取り込むことができる
    • どこを縁(端)とするかが定義完了
  • 最後にカラー表示モードを Off にして終わる
    • 🤔これをした意味はよくわかりません。後々悪い影響があるから off にする必要があるのか？それとも後片付けという意味なのか。

メモ
– ここでテーブルに対して施した頂点ペイントはこのオブジェクトのみに適用されている
– 大本のメッシュにはこの情報は適用されていない為、コンテンツブラウザから別のところにテーブルを配置してもこの情報は引き継がれない
– しかし適用ボタンを押すことでソースアセットに適用する事もできる

マテリアルを修正

  1. M_Glass を開く
  2. Vertex Color ノードを配置
    • このノードでメッシュのVertexカラー情報にアクセスできる
  3. ベースカラー定義
    • 縁のみに薄緑色を適用するセットアップ
    • 色合いの強さを調整できる Tint Intensity パラメータ付き

3.3 Tinted Glass Part 3: Using the Fresnel Function and Planar Reflections to add more realism フレネル関数と平面反射を使用してよりリアルに

色付きガラスシェーダで作業を続けます。フレネルマテリアル関数を使用して様々な色を着色し、平面反射を使用して卓上表面のより正確な反射を取得することにより、シェーダのリアリズムを改善します。

ベースカラーの定義

  1. マテリアル関数の Fresnel Function を追加する
  2. float3(薄緑)の接続を削除し、Fresnel_Functionへ載せ替え
    • Frensel_Function は最後のメモに簡単にまとめる

Opacity + Metalic + ラフネスの定義

  • Opacity
    • ここでもVertex Colorを使用する
    • Vetex Color を引いた後で Clamp している
    • Clamp の Min が 0.1, Max 0.95
    • EdgeOpacity(縁の透過度)が 0 で Vertex Color の縁が 1 = clamp(0 – 1) = 0.1 となる
    • Lighting

Metalic と ラフネスを有効にするため、Lighting Mode を Surface ForwardShading(最も品質が高く高負荷)にする

  • Metalic
    • パラメータ化 最大値 1.0
  • ラフネス
    • パラメータ化 デフォルト値 0.02 最大値 1.0

結果

  • 何もいじっていない状態
  • 値を調整

更に平面反射を利用してテーブル上の反射をより見栄え良くする

平面反射を追加

  1. 平面反射を追加
  2. 位置とサイズを調整

よりリアルさが追加された事が確認できる

平面反射は非常に平らなサーフェスに有効だが、有機的な形状には効果的ではない事に注意ください。との事

3.4 Tinted Glass Part 4: Adding a Frosted Glass Effect 摺りガラス効果の追加

色付きガラステクニックに関する最終章では、スパイラルブラーマテリアル関数を使用してリアルな摺りガラス効果を追加する方法を確認します。

Spiralblur カスタムマテリアル関数

  1. M_Glass を開く
  2. SpiralBlur-SceneTexture を配置

    • このノードを使ってエミッシブカラーとオパシティを制御する
  3. オパシティ
    • もともとのEdgeOpacityは生かしたまま効果を追加する為、引き算の後で Add を追加
  4. エミッシブカラー
    • Vertex Color を 1-x して反転させ、SpiralBlurをかけることで縁以外に機能するようにしている
  5. 保存して閉じる
  6. MI_Glassで調整する
  7. これに加えラフネスを使えば地面の水たまりをシミュレートしたりできる

3.5 Displacement Mapping Part 1: Using Displacement Mapping to Create Rug and Fur Material Effects ディスプレースメントマッピングを使用してラグやファーマテリアル効果を作る

ディスプレイスメントマッピングは、テクスチャマップを使用してジオメトリに物理的な詳細を追加するための優れた方法です。 通常、平らなジオメトリや興味深い効果が得られる壁にレンガパターンを追加するような場合に使用されます。 毛足の長いラグマットの外観を作成するディスプレイスメントマッピングを作成する方法をみていきます。

  • DirectX11対応のビデオカードがリリースされた当時、新しいハードウェア機能が導入されリアルタイムで動的ジオメトリ分割が可能となった。
    • これによりディスプレイスメントテクスチャマップを使用してビデオカード上のオブジェクトのポリゴン数を増やせるようになった
    • 詳細にモデルを作成せずともオブジェクト内でより高いレベルの物理的詳細を追加可能となった
    • 壁のレンガのようなものに最適
      • 以前であれば法線マップ、バンプマップを使用してレンガの凹凸を表現していた
    • ディスプレイスメントマップはサーフェスに特殊効果を付加するための方法

ここではラグにシャグエフェクトを付加するマテリアルテクニックを紹介するとの事。

マテリアル作成

  1. Exercises マップを開く
  2. 詳細パネルのテッセレーションから Flat Tessellation を設定する

    • 有効にすると Result ノードの World Displacement と Tesselation Multiplier が有効化される
    • 本記事のメモに動画内で解説のあったことをまとめておく
    • ワールド空間の頂点空間へのアクセスが必要 (VertexNormalWSが必要)
    • ベースカラーのテクスチャ: T_Rug_D
    • Normalのテクスチャ: T_Rug_N
    • ワールドディスプレースメントのテクスチャ: T_Rub_R
    • 各Texture Sampleノードにはタイリングを制御するために Tiling カスタムマテリアル関数が接続されている

3.6 Displacement Mapping Part 2: Using Vertex Colors to Control the displacement mapping effect 頂点カラーを使ってディスプレイスメントマッピング効果の制御をする

頂点の色を使用してディスプレイスメントマッピングエフェクトを制御し、毛足の長いラグマットの作業を続けます。 頂点カラーを使用すると、ラグのエッジに沿った効果を無効にして、シェーダの視覚的な問題を排除することができます。

  1. ２つのノードを調整可能にするためにパラメータ化
  2. 保存して閉じる
  3. M_Rug のマテリアルインスタンス MI_Rug を作成する
  4. カーペットに MI_Rug を適用する
  5. MI_Rugを開き、テッセレーションをより確認しやすくするため「ブラシのワイヤームレーム」で表示する
    • Tessellation が0のため、現状では何も適用されていない状態を見ている
  6. Tessellation の値を 2にする
    • メッシュにポリゴンがかなり追加されたことが確認できる
  7. Tessellation の値を 4にする。(さっきのは確認、こちらは本番)
  8. 保存してビューポートから見てみる
    • 垂直方向に毛が逆立っている事がわかる
  9. DisplacementIntensity を変えると縦の長さが高くなる

    • DisplacementIntensity: 12
    • 高さを上げるとマッピングが一部おかしくなり床から外れたようにも見えてしまう

頂点カラーを使用してラグのエッジに沿ってディスプレイスメントマッピング効果をブレンドする事ができる。

  1. ラグを選択してペイントモードに切り替え、カラー表示モードは RGB Channels にする。ラグが消えるので一時的に WorldGridMaterial に切り替えて表示させる
  2. 白で塗りつぶす
  3. 端の方は Displacement map が無効になるように隅っこの方は黒くぬるブラシサイズに注意
    • 結果 🤔5分くらいかかりましたね。もっと楽にペイントできればいいのに
    • 🤔私は動画を止めて塗りましたが、どうやら異なった方法でやっています。と言っても手動で塗り事には変わりませんが。動画は実際に毛並みを見ながら調整する方法です。
  4. ノードを変更

結果 😅毛並みを見ながらペイントし、筆のサイズをより小さくしたりするとより端とディスプレイスメントの移行部分をなめらかにできます。やり方は分かったのでこれ以上深追いしないことにします。

3.7 Vertex Animation – Using Materials To create Animated surfaces 頂点アニメーション – アニメーションする表面をマテリアルで作成する

マテリアルに関する最後の例では、頂点カラーと混合した頂点ベースのアニメーションを使用して、シーンのカーテンに穏やかな風を加えます。

最後の例では、World Position Offset 入力を見ていきます。この入力によってメッシュのここの頂点を元の位置から移動または回転させることができます。

  • このファイルには M_Curtains マテリアルと M_Curtains2 がある
  • M_Curtains は風のエフェクトを付加したマテリアル
  • M_Curtains2 は M_Curtains の風のエフェクトがないバージョン
    • ここでは M_Curtains2 を使用していくとの事

😅めちゃくちゃ複雑なので動画を見てください

メモのみ

  • ワールド位置オフセットが利用可能になっている
    • この入力を使ってメッシュの頂点がアニメーションさせれられる
    • まずどこでエフェクトが発生するのか制御する必要がある
  • エフェクトの発生もとを取得するため Vertex Color を使用する
    • 尚下に行くほど徐々にアニメーションさせるためのペイントがすでに施されている
    • 右側が M_Curtain2 をもととした MI_Curtains2 が設定されている
  • 動く物体のため、ムーバブルに設定

    • 🤔ダイナミックなライティングをする物体ということですね
  • このタイプのアニメーションは便利な半面いくつかの制限がある

メモ

最終問題のメモ

  • 頂点カラーを利用するとマテリアルで複数のレイヤーが使えるようになる
    • 黒0 → 白1 のレイヤー
  • スクリーンでレンダリングされたメッシュの法線を取得できるマテリアルノードはピクセル法線 PixelNormalWSを使う
  • ディスプレイスメント マップによりメッシュ上の頂点の位置が変わります。強度が強すぎると、メッシュとその頂点はどうなりますか？
    • 過剰なディスプレイスメントはメッシュを分離したり、アーティファクトを引き起こすことがある。

マテリアル関数 Fresnel Function についてのメモ

Normal Vector 法線ベクトル

  • 使用にあたってワールド空間のピクセルの法線への参照を取得する必要がある
    • PixelNormalWSを使う

テッセレーション

テッセレーション は、コンピュータグラフィックスの画像演算手法の1つである。2次元画像上で3次元の複雑な立体を表現するのために多数のポリゴン が用いられるが、テッセレーションはこのポリゴンメッシュをさらに分割して表現することで、画像をより詳細かつ滑らかで現実感のあるものにする技術である。 Wikipedia

World Displacement

  • Displacementマップを接続する先
  • ディスプレイスメントマップは２種類ある
    • グレースケール
    • EXR形式のファイル(ベクターディスプレイスメントマップ)
      • オーバーハングなどグレースケールでは得られないその他の細かい詳細の再現が可能になる
  • ワールド空間の頂点空間へのアクセスが必要 (VertexNormalWSが必要)

Tesselation Multiplier テッセレーション乗数

  • ワールドディスプレイスメントマップを実行するためにメッシュに追加するポリゴンの数を制御する
  • テッセレーションの数が多いほど細かくなる

英語メモ

Bear in mind 心に留める

  • 似た言葉に keep in mind や have in mind がある

マテリアル Lighting Modeについて

  • マテリアル詳細パネルのややしたの位置にある
  • Blend Mode を Translucent にしたときに有効化される
  • デフォルトでは Volumetric NonDirectionalが選択されている
    • 最も低負荷・低品質
    • Lighting Mode を Surface ForwardShading(最も品質が高く高負荷)にすると
    • Resultノードでは多くの出力ピンが有効化される事がわかる
タイトルとURLをコピーしました