透過性を使用する

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

Choose your operating system:

Windows

macOS

Linux

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

透過性

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

Trans_Ramp_Example.png

上の画像では、透過性を持たせる領域と透過性の度合いを定義しやすくするために、テクスチャを使って UE4 で透過性がどのように機能するのかを示しました。 テクスチャは一番上は黒 (または完全に透過) で、一番下に向かって白 (透過性なし) に変化しています。 中央部分は、テクスチャのピクセルの黒または白への距離によって透明性が変わります。

透過性の用途

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

  • 髪の毛

  • ガラス

  • 煙または火の視覚効果

  • デカールの影響

  • フォリッジ

透明性とオパシティ

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

Trans_Opacity_Settings.png

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

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

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

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

以下の手順に従って、マテリアルに透過性を使用する設定を行います。

このチュートリアルでは、プロジェクトに スターター コンテンツ を含むと利用できるコンテンツを使用します。プロジェクトにスターター コンテンツを含んでいない場合、 プロジェクト間でコンテンツを移動させる方法について「

[コンテンツの移動](Basics/AssetsAndPackages/Migrate)
」を参照してください。こうすることで、スターター コンテンツを新規作成せずに追加することができます。

  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

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

    • Vector Parameter x 1

    • Scalar Parameter x 2

    Trans_Required_Nodes.png

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

    Trans_Completed_Shader.png

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

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

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

    Trans_Add_Test_Mesh.png

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

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

透過性と反射

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

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

    Trans_Change_LM.png

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

    Trans_Dup_Nodes.png

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

    Trans_Reflection_Final_Material.png

  4. [Apply] ボタンと [Save] ボタンを押して、マテリアル グラフを閉じます。

    R_Apply_&_Save.png

  5. ここでレベルを見ると、メッシュ状に反射と透過性を確認できます。

    Trans_Reflection_In_Level.png

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

Trans_Reflection_Different_Results.png

透過に色を付ける

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

標準の Translucent シェーディング モデル

Thin Translucent シェーディング モデル

[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 モードを常にチェックし、透過性によるオーバードローが最小になるようにしてください。

Unreal Engine のドキュメントを改善するために協力をお願いします!どのような改善を望んでいるかご意見をお聞かせください。
調査に参加する
閉じる