透過処理

マテリアルで透過処理を使用するための操作ガイド

Windows
MacOS
Linux

水や草などの所定のサーフェスタイプを作成する場合、サーフェスを透過させるだけでなく、深度や色の感覚をサーフェスに与えなければなりません。 これらのプロパティは現実世界では Transparency (透過性) または Opacity (オパシティ) と呼ばれ、同じものに対して交互に使用して描写する場合が多いです。 ただし、Unreal Engine 4 (UE4) 内では、オパシティでサーフェスの透過度合を定義した時のサーフェスの透過状態を説明するために透過処理を使います。以下の操作ガイドでは、Unreal Engine 4 のマテリアルに透過処理を導入する方法に関して知っておくべき内容を説明します。

透過処理

透過処理 とは、光の通り抜けをブロックしたり、光が通り抜けられるようにするサーフェスの能力を表すために使われる用語です。 例えば、煉瓦は透過性のないオブジェクトですが、ステンドグラスは透過性があるオブジェクトです。 UE4 の透過処理機能は、ピクセルにある程度の透明度を持たせて、完全に不透明な状態にならないようにします。

Trans_Ramp_Example.png

上の画像は、透過処理を使いたい領域およびその領域の透過処理方法が定義しやすいように、UE4 で透過処理方法をテクスチャを使って表しました。 テクスチャは、上が黒または全部透過処理で下が白または透過処理なしのグラディエントです。 真ん中の領域は、テクスチャのピクセルがどのくらい黒または白に近いかによって、透明性が変わります。

透過処理の用途

透過処理は、現実世界の様々なサーフェス タイプのシミュレーションにも使用することができます。 UE4 で透過処理が最もよく使用されるのは、以下のアイテムです。

  • 髪の毛

  • Glass

  • 煙または火の視覚効果

  • デカールの影響

  • フォリッジ

髪と透過処理

UE4 で透過処理を行う場合、オパシティ と言う用語を耳にすることになります。 透過処理はサーフェスに透明性を与えられることを指し、オパシティはサーフェスの透明度を表します。 これを実際に処理してみたのが、下の画像です。

Trans_Opacity_Settings.png

マテリアルのオパシティは、左から右に向かって 0 から 1 へ増加します。 これにより、マテリアルが完全に透明な状態、または透過状態から、完全に不透明、または透過でない状態になります。 ただしこれは、マテリアルに透過処理を使用する設定がされている場合のみ起こります。 透過処理を使用する設定になっていないマテリアル上でオパシティを変更しても、マテリアルの透過状況は一切影響を受けません。

  • 透過処理: サーフェスを透明にするかどうかを定義します。

  • オパシティ: サーフェスの透明度あるいは不透明度 (透過の度合い) を定義します。

マテリアルで透過処理を使用する

以下のステップに従って、マテリアルに透過処理を使用する設定を行います。

このチュートリアルは、プロジェクトに スターター コンテンツ を含むと利用できるコンテンツに使用します。プロジェクトにスターター コンテンツを含まない場合、 プロジェクト間のコンテンツの移動に関する情報は コンテンツの移動 でご覧ください。こうすることで、スターター コンテンツを新規作成せずに追加することができます。

  1. まず コンテンツ ブラウザ右クリック し、ポップアップ メニューの [Create Basic Asset (基本アセットを作成)] セクションから [Material] を選択します。

    Trans_Create_New_Material.png

  2. マテリアルに 「Transparency_Material」 という名前を付けて、 マウスの左ボタン を使うか、またはコンテンツ ブラウザのマテリアルを ダブル クリック して開きます。

  3. マテリアルを開いた状態で、 [Material] セクションの [Details (詳細)] パネルで、[Blend Mode][Opaque] から [Translucent] に設定します。 Trans_Change_Blend_Mode.png

  1. Blend Mode が正しく設定されたので、以下のマテリアル式をマテリアル グラフに追加します。 以下の名前を使ってマテリアル パレットで検索するとノードが見つかります。 見つかったノードを マウスの左ボタン でクリックし、マテリアル グラフへドラッグしたら、 マウスの左ボタン を放してグラフにノードを配置します。

    • Vector Parameter x 1

    • Scalar Parameter x 2

    Trans_Required_Nodes.png

  2. 正しいマテリアル式ノードが追加されたら、全てを接続します。 まず最初に Vector Parameter ノードに 「Base_Color」 という名前を付け、カラー値をつけます。この例では、白がデフォルト カラーとして入力されました。 次に Vector Parameter ノードの出力を Base Color 入力に接続します。 その後で Scalar Parameter に 「Transparency_Amount」 という名前を付けて、デフォルト値を 0.5 に設定します。 そして Scalar Parameter 出力を Main Shader ノード上の Opacity 入力に接続します。

    Trans_Completed_Shader.png

  3. [Apply (適用)] ボタンと [Save (保存)] ボタンの両方を押して、マテリアル エディタを閉じます。
    R_Apply_&_Save.png

  4. コンテンツ ブラウザ Transparency_Material を探します。次にその上で 右クリック し、表示されたメニューから [Create Material Instance (マテリアル インスタンスを作成)] オプションを選択します。

  5. マテリアルの動作状況を確認するために、マテリアル インスタンスを置くオブジェクトを探す必要があります。「Starter Content」フォルダのコンテンツ ブラウザ内に、「Shapes」 フォルダがあります。 Shape_Sphere を見つけたら、マウスの左ボタン で選択し、マウスの左ボタン を長押ししたまま現在のレベルへドラッグします。ドラッグ先で マウスの左ボタン をリリースし、レベル内にメッシュを置きます。

    Trans_Add_Test_Mesh.png

  6. レベル内で何かテストするために、コンテンツ ブラウザにあらかじめ作成しておいた Transparency_Material_Inst を探します。マウスの左ボタン でそれを選択し、コンテンツ ブラウザから Shape_Sphere へドラッグします。 Shape_Sphere 上で マウスの左ボタン をリリースして、マテリアル インスタンスをメッシュへ適用します。

  7. マテリアル インスタンス がメッシュに適用されたら、コンテンツ ブラウザでそれを マウスの左ボタンダブルクリック してマテリアル インスタンスを開きます。開いたら、マウスの左ボタン でグレーアウトされているチェックマーク上をクリックして [Transparency_Amount] を有効にします。これで、[Transparency_Amount] の値を調節してオブジェクトの透過度を変更することができます。

透過処理&リフレクション

透過処理を使用しているオブジェクトは、以下のオプションを設定するとシーン リフレクションを表示できます。 ただし、リフレクションを有効にした透過マテリアルが沢山あると、パフォーマンスに問題が生じることがあることを覚えておいてください。

  1. 上記で作成した Transparency_Material を開くには、コンテンツブラウザでそのマテリアルを マウスの左ボタンダブルクリック します。[Translucency (透過処理)] セクションの [Details (詳細)] セクションで開いて、[Translucent Light Mode][TLM_Volumetric Non Directional] から [TLM Surface] へ変更します。 Trans_Change_LM.png

  1. マテリアル グラフ内で、 Transparency_Amount マテリアル式を選択し、キーボードで CTRL + W を押して 2 度複製します。完了すると、マテリアルグラフは以下のようになります。

    Trans_Dup_Nodes.png

  2. 2 つの Material Expression ノード名を 「Metallic」 と 「Roughness」 に変更します。メタリック Material Expression のデフォルト値を 1.0 に、Roughness のデフォルト値は 0 に設定します。そして各 Material Expression ノードを Main Material ノード上の対応する入力に接続します。

    Trans_Reflection_Final_Material.png

  3. [Apply (適用)] ボタンと [Save (保存)] ボタンの両方を押して、マテリアル グラフを閉じます。

    R_Apply_&_Save.png

  4. ここでレベルを見ると、リフレクションと透過処理をメッシュ上に確認できます。

    Trans_Reflection_In_Level.png

マテリアル インスタンスのパラメータを調節により、透過の見え方を完全に変えることができます。

Trans_Reflection_Different_Results.png

着色された透過処理

Thin Transparent シェーディング モデルとマテリアル式を使うと、着色された透過マテリアルを正確に表現することができます。このシェーディング モードは、透明性のある表面に対して正確に着色したバックグラウンドを使った白いスペキュラ ハイライトを可能にします。

Standard Translucent Shading Model

Thin Translucent Shading Model

[Material Details] パネルで以下のを設定して、Thin Translucent マテリアル出力を有効にします。

クリックしてフルサイズ表示。

  • Blend Mode: Translucent

  • Shading Model: Thin Translucent

  • Lighting Mode: Surface ForwardShading

着色された透過シャドウ

透過マテリアルは、光の伝達を使って着色されたシャドウを投影することができるケースがあります。マテリアルを通過するライトの量は、オパシティ値およびどれくらいの量のライトがマテリアルにキャストされているかによって決まります。

translucent_T.jpg

着色された透過シャドウは現時点では、静的ライティングLightmass のみで使用できます。

詳細は「着色された透過シャドウを使用する 」を参照してください。

透過処理&リフレクション

Trans_Shader_Complexity.png

透過処理をしたオブジェクトを重ねて多数レンダリングすると、lit 透過処理を使用している場合は特に、レンダリング / パフォーマンスがすぐにボトルネックになります。 この問題はオーバードローと呼ばれます。オーバードローは、透過処理をした多数のオブジェクトを重ねてレンダリングすると発生します。 透過処理のレンダリングは、透過処理対象レイヤーが増えるほど負荷が増していくため、オーバードローによりこのようなパフォーマンスの問題が発生します。

この問題の発生、および発生場所について特定しやすくするために、UE4 には Shader Complexity モードという特別なビューモードが備わっています。 Shader Complexity モードは、複雑度を色で表すことで、所定のサーフェスをレンダリングする複雑度を表示します。 緑表示が多いほどレンダリング負荷は低く、赤が多いほどレンダリング負荷が高いことになります。 このビューモードを有効にするには、以下の手順に従います。

  1. エディタ ビューポートの上部の [View Mode] オプションをマウスの左ボタンでクリックすると、 [Shader Complexity (シェーダーの複雑度)] が有効になります。現在、View Mode のデフォルト設定は Lit です。

    Trans_SC_View_Mode.png

  2. マウスの左ボタン で [View Mode] をクリックすると、メニューが表示されます。メニューから [Shader Complexity (シェーダーの複雑度)] オプションを選択します。

    Trans_Set_To_SC.png

  3. [Shader Complexity (シェーダーの複雑度)] オプションをクリックすると、レベル ビューポートはこのようになっているはずです。

    Trans_Shader_Complexity_On.png

このビューを見ると、パフォーマンスの問題がどこで発生しているのかが分かります。 赤くなっている部分はレンダリング負荷が非常に高く、緑の部分はレンダリング負荷が低いです。 100% 確実というわけでもなく、オーバードローをすべて取り除くのが望ましいわけでもないのですが、 このビュー モードは、パフォーマンス問題が発生しているその場所を特定したい場合に役立ちます。

透過処理のソートの優先度

シーン内に複数のオブジェクトが近寄って存在していると、透明性があるオブジェクトは、透明性がある別のオブジェクトの前や後ろに来た場合、 どちらを先にレンダリングするのか分からなくなる問題が発生することがあります。以下の例で、上記で作成したマテリアルとスターター コンテンツから lit smoke VFX を使ってこの問題を発生させてみます。

煙がメッシュの前に来ると、突然メッシュの後ろにポップすることに注目してください。 これを防ぐためには、煙の VFX がシーン内の他の透明性のあるオブジェクトより常に上位でレンダリングされる Translucency Sort Priority を設定する必要があります。 以下の手順に従って、VFX で [Translucency Sort Priority (透過処理のソート プライオリティ)] を変更します。

  1. まず、レベル内の全ての他の透過性のあるオブジェクトに優勢してレンダリングしたいオブジェクト (複数可) をマウスの左ボタンでクリックして選択します。ここの例では、煙の VFX を選択します。

    Trans_Select_VFX.png

  2. [Rendering] セクションの [Details (詳細)] パネルの 白い三角 をクリックして追加プロパティをエクスポーズします。

  3. オプション リストの [Translucency Sort Priority (透過処理のソート プライオリティ)] に、値を 100 と入力します。

    Trans_Set_Sort_Order.png

    デフォルトでは、レベルに追加されたものはすべて [Translucency Sort Priority] は 0 となっています。透過性があるオブジェクトを、他の透明性をもつオブジェクトの上位に描画したい場合は、正の値を使います。透過性があるオブジェクトを、他の透明性をもつオブジェクトの下位に描画したい場合は、負の値を使います。

  4. ではシーンの煙の VFX を見てみましょう。[Translucency Sort Priority] を 100 に設定すると、煙は常に透過性のある他のオブジェクトの上に描画されます。

  5. [Translucency Sort Priority] を 100 に設定すると、煙は常に透過性のある他のオブジェクトの後ろに描画されます。

[Translucency Sort Priority] の調整により、レベル内でのソート順位の問題を修正すると、ゲームプレイ中にエフェクトあるいはオブジェクトのスポーン時に別のソート問題が発生します。 従って、どの Translucency Sort Priority 番号をどれに使ったのか定義しておくと良いです。 例えば、スポーンされた全てのエフェクトの [Translucency Sort Priority] 値を 100 に設定したとします。 従って、レベル内でソート関係の問題が生じた場合、レベル内のオブジェクトの [Translucency Sort Priority] を最高で 99 まで調整することができます。 こうしておくと、スポーンされたゲーム エフェクトは、対象のレベル内にある [Translucency Sort Priority] オブジェクトの種類に関係なく、常に最上位でレンダリングされます。

まとめ

透過処理は非常にパワフルなので、3D プロジェクトで大活躍します。 ただし、パワフルなツールはたいがいそうですが、パワーを確実に抑制するように注意する必要があります。 リフレクションを使っている透明性があるオブジェクトの数は、できるだけ少なく留めておくようにすることを覚えておいてください。 また、エディタとゲームプレイの間は Shader Complexity モードを常にチェックし、透過処理によるオーバードローが最小になるようにします。

Tags
Select Skin
Light
Dark

Welcome to the new Unreal Engine 4 Documentation site!

We're working on lots of new features including a feedback system so you can tell us how we are doing. It's not quite ready for use in the wild yet, so head over to the Documentation Feedback forum to tell us about this page or call out any issues you are encountering in the meantime.

We'll be sure to let you know when the new system is up and running.

Post Feedback