もっとマテリアルを知るために

もっと マテリアルを知るために シェーダーが見えるぞ

公開資料補足 本資料には多数の動画(APNG)が含まれており、資料の閲覧に 利用しているサービスによっては正常に再生されません。 閲覧に問題がある場合、以下の Google Slides の共有リンク から元資料を御覧ください。 Google Slides 上で見る

• https://docs.google.com/presentation/d/1hNMdoMkm8dqejD2dfrDfgpxWLjAMx6L9HxIYppqd4Dw/edit?usp=sharing

自己紹介 すとんりばー ● Unreal Engine / C++ / Rust / Linux などが好き。 ● 趣味は読書と創作。 ● 2000年生まれの中卒エンジニア。 ● 現在(2024年4月)はフリー。 ● UE Tokyo という勉強会もやっています。 技術ブログ: strv.dev GitHub: strvert Twitter : @strvert email: [email protected] STONRIVER ( Riku Ishikawa )

突然ですが UEのマテリアル入門の一幕

UE のマテリアルに入門した人にありそうなこと 「マテリアルってなんだろう？ ドキュメントを見てみよう……」

UE のマテリアルに入門した人にありそうなこと 「マテリアルってなんだろう？ ドキュメントを見てみよう……」 「なるほど！ この機能を使うと3Dモデルの色を決められるんだな」

UE のマテリアルに入門した人にありそうなこと 「すごい！ノードを繋いで見た目を決定するんだ！」

UE のマテリアルに入門した人にありそうなこと 「ノードで処理が書けるからテクスチャの調整もできる！」

UE のマテリアルに入門した人にありそうなこと 「TexCoord ってやつを使えば拡大縮小とかもできちゃった！」

UE のマテリアルに入門した人にありそうなこと 「マテリアル完全に理解した」

UE のマテリアルに入門した人にありそうなこと 「でも、もっとできることありそうだな。作例を見てみよう……」

UE のマテリアルに入門した人にありそうなこと 「でも、もっとできることありそうだな。作例を見てみよう……」 ただの板ポリ 「なんか形変わってないか……？」

UE のマテリアルに入門した人にありそうなこと 「でも、もっとできることありそうだな。作例を見てみよう……」 SpotLight の Details 「ライトがマテリアルで制御されてる？？」

UE のマテリアルに入門した人にありそうなこと 「でも、もっとできることありそうだな。作例を見てみよう……」 SpotLight の Details 「えっ、直方体にマテリアルを設定したら雲が！？」

UE のマテリアルに入門した人にありそうなこと 「でも、もっとできることありそうだな。作例を見てみよう……」 SpotLight の Details 「画面にマテリアルを！？！？」

UE のマテリアルに入門した人にありそうなこと 「マテリアルってなんだ....?」

ということで 今日の話の主な対象者

ということで 今日の話の主な対象者 レンダリングとかシェーダーとか よく知らんけどマテリアル触ってる/もっと触りたい人

ということで 今日の話の主な対象者 レンダリングとかシェーダーとか よく知らんけどマテリアル触ってる/もっと触りたい人 ここまでの話を聞いて自明だと思った人は コーヒーでも淹れてきてください

シェーダーって何？

シェーダーって何？ 現代のコンピュータでは、CPU と GPU で、異なる種類と目 的のプログラムを書く必要がある。 CPU 処理を書く方法 C/C++, C#, Rust, Python, … よく聞くプログラミング言語 GPU 処理を書く方法 GLSL, HLSL, … シェーダー言語と呼ばれるタイプ のプログラミング言語 得意なこと 得意なこと 複雑な分岐や高度な命令を駆使し た汎用目的の処理の実行 比較的単純な命令の逐次実行を大 量のデータに対して並列で実行

シェーダーって何？ C/C++ とか C# とか、よく聞くプログラミング言語はCPU向 けの言語。 CPU 処理を書く方法 C/C++, C#, Rust, Python, … よく聞くプログラミング言語 GPU 処理を書く方法 GLSL, HLSL, … シェーダー言語と呼ばれるタイプ のプログラミング言語 得意なこと 得意なこと 複雑な分岐や高度な命令を駆使し た汎用目的の処理の実行 比較的単純な命令の逐次実行を大 量のデータに対して並列で実行

シェーダーって何？ GPU で動く処理を書くのがシェーダー(言語)と呼ばれるプロ グラミング言語。 CPU 処理を書く方法 C/C++, C#, Rust, Python, … よく聞くプログラミング言語 GPU 処理を書く方法 GLSL, HLSL, … シェーダー言語と呼ばれるタイプ のプログラミング言語 得意なこと 得意なこと 複雑な分岐や高度な命令を駆使し た汎用目的の処理の実行 比較的単純な命令の逐次実行を大 量のデータに対して並列で実行

シェーダーって何？ リアルタイムレンダリングなどは GPU の領分。 GPU にやらせるには、シェーダーを書かなきゃいけない。 CPU 処理を書く方法 C/C++, C#, Rust, Python, … よく聞くプログラミング言語 GPU 処理を書く方法 GLSL, HLSL, … シェーダー言語と呼ばれるタイプ のプログラミング言語 得意なこと 得意なこと 複雑な分岐や高度な命令を駆使し た汎用目的の処理の実行 比較的単純な命令の逐次実行を大 量のデータに対して並列で実行

シェーダーって何？ 現代では、3Dモデルを描画させるとか、表面の質感を調整す るとか、テクスチャを貼るとかでもシェーダーの記述が必要。 CPU 処理を書く方法 C/C++, C#, Rust, Python, … よく聞くプログラミング言語 GPU 処理を書く方法 GLSL, HLSL, … シェーダー言語と呼ばれるタイプ のプログラミング言語 得意なこと 得意なこと 複雑な分岐や高度な命令を駆使し た汎用目的の処理の実行 比較的単純な命令の逐次実行を大 量のデータに対して並列で実行

でもわたし シェーダー書いたことないけど UE で質感調整とかやってるよ

マテリアルで....

マテリアルはビジュアルシェーダー言語 それもそのはず。UE のマテリアルとは、シェーダー用の ビジュアルプログラミング言語。 CPU GPU Blueprint Material UE 世界の2大ビジュアルプログラミング言語

マテリアルはビジュアルシェーダー言語 それもそのはず。UE のマテリアルとは、シェーダー用の ビジュアルプログラミング言語。 CPU GPU Blueprint Material UE 世界の2大ビジュアルプログラミング言語

マテリアルはビジュアルシェーダー言語 こうしたビジュアルプログラミング言語も、最終的には何らか の形で CPU や GPU で実行される。 CPU GPU Blueprint Material HLSLMaterialTranslator Kismet Compiler Bytecode Kismet VM CPU 実行 HLSL Platform Compiler Platform Format GPU 実行

マテリアルはビジュアルシェーダー言語 マテリアルは、シェーダー言語である HLSL に変換して、 シェーダーとしてコンパイルして GPU 実行される。 マテリアルを シェーダーに変換して コンパイルして 実行 Material HLSL Platform Format GPU 実行

マテリアルはビジュアルシェーダー言語 すると、以下のことが知りたくなる。 Material HLSL Platform Format GPU 実行 マテリアルが生成するのか？ どんなシェーダーを

これがわかれば

もっと マテリアルを知るために

シェーダー超基礎

シェーダーの種別と役割 シェーダーには、言語の種類の他に、なんの処理を書くものか で種別がある。 Vertex Shader Pixel Shader Compute Shader 頂点の位置を決めるぞ メッシュを塗る色を決めるぞ GPU に汎用計算させるぞ ※ もっとある

シェーダーの種別と役割 メッシュを描画するときに欠かせないのはこのふたつ。 メッシュデータに対して、VS, PS が順に走って画を作る。 Pixel Shader Vertex Shader VS, PS が順に実行される。 STEP 1 STEP 2

シェーダーの種別と役割 描画上の異なる役割を担う。 Pixel Shader Vertex Shader 頂点の位置を決める。 ピクセルの色を決める。 ● 画面上のどこに？ ● どんな形状で？ ● ポリゴンがある ピクセルをどんな色で？

シェーダーの種別と役割 描画上の異なる役割を担う。 Pixel Shader Vertex Shader どう置くのか どう塗るのか 担当 担当 頂点の位置を決める。 ピクセルの色を決める。 ● 画面上のどこに？ ● どんな形状で？ ● ポリゴンがある ピクセルをどんな色で？

シェーダーの種別と役割 適用される処理は一緒だが、頂点やピクセルに添付された パラメータを入力とすることで結果に違いが出る。 Vertex Shader おもな属性の例 ● UV ● Normal ● 頂点インデックス ● 頂点カラー ● 頂点オフセット Pixel Shader おもな属性の例 ● UV (補間) ● Normal (補間) ● 頂点カラー (補間) こういう処理は並列化しやすいので GPU が上手

シェーダーの種別と役割 単に計算回数と対象の違いでもある。 VS は各頂点を、PSは各ピクセルを1個ずつ処理する。 Vertex Shader Pixel Shader VS PS VS PS ︙ ︙ 頂点回数だけ実行 塗るピクセル回数だけ実行 メッシュの頂点位置を スクリーン上の位置に変換 塗る必要があるピクセルを塗る

マテリアルとシェーダー

マテリアルとシェーダー シェーダーで画面が描かれることはわかったとして、 マテリアルの何がどうシェーダーに変換されるのか？ マテリアルの Graph は1つしかなくて、 VS とか PS とか分かれてない。

マテリアルとシェーダー 重要なのは、マテリアルの出力ノード。 出力プロパティは、VS もしくは PS から利用される。 PS 出力ノードのピンの先は、 事前に HLSL として用意された VS や PS と「繋がって」いる！ VS

マテリアルとシェーダー 出力プロパティは、それぞれ繋がるシェーダーの種類が違う。 PS VS プロパティ シェーダー種別 Base Color Pixel Shader Metallic Pixel Shader Roughness Pixel Shader Emissive Color Pixel Shader World Position Offset Vertex Shader CustomizedUV系 Vertex Shader プロパティ利用先の例

マテリアルとシェーダー マテリアルとHLSLは直接繋がらないので、出力ピンから逆算 して、関連するマテリアル処理をHLSLに変換して接続する。 マテリアルは有向非巡回グラフ どこにもつながっていない 宙ぶらりんなノードはHLSL変換に 一切寄与しない アセットの参照にはなるので テクスチャとかには気をつけよう！

マテリアルとシェーダー この例では、WPO に接続されたノードの部分は HLSL 変換後 に VS で利用される。 World Position Offset は VS が頂点の位置を決定するときに追加の オフセットを与えることができる。 だから マテリアルでメッシュを変形できる。

マテリアルとシェーダー Base Color に接続されたノードの部分は HLSL 変換後に PS で利用される。 Base Color は PS で素材の色として 利用される。 だから マテリアルでテクスチャをサンプルして色 に使ったり、処理で色を決定したりするこ とができる。

マテリアルとシェーダー マテリアルは HLSL 生成器。生成した HLSL を、エンジンの HLSL コードと組み合わせて、最終的なシェーダーを作る。 Vertex Shader 生成済VS用処理 ＋ VSの雛形 ＋ PSの雛形 Pixel Shader 生成済PS用処理 メッシュ描画 エンジン シェーダー

マテリアルとシェーダー マテリアルは HLSL コードを生成するだけ。 コードの利用先を変えれば、メッシュ描画以外にも使える。 Vertex Shader Light Function VS Light Function エンジン シェーダー Pixel Shader 生成済PS用処理 Light Function の マテリアルは PS しか生成しない VS はエンジンで固定 ＋ PSの雛形

マテリアルとシェーダー マテリアルから生成された HLSL はエディタ上で確認するこ ともできる。

マテリアルとシェーダー (エンジニア語) UE のマテリアル生成では、 MaterialTemplate.ush というテン プレートファイルを穴埋めする形が採用されている。 マテリアルが生成したコード片でテンプレートを埋めて、専用の ush ファイルが作成される。これをエンジンが実装したシェー ダーで include することでマテリアル処理が描画処理に乗る。 マテリアルを切り替えることは、include するマテリアルの シェーダーを変更することに相当する。

マテリアルは色や材質を 決めるだけのものじゃない

マテリアルは汎用的な HLSL ジェネレータ 仕組みを知るとわかるように、マテリアルの本質的な役割は HLSL コードを生成すること。 生成されたコードの処理結果の使い方次第で、色や材質以外の 様々な処理に利用されうる。

マテリアルは汎用的な HLSL ジェネレータ この視点から冒頭の作例を見直す。 WPO で Vertex Shader が行う頂点位置の計算にオフセットを かけて、マテリアルから頂点を移動しているだけ。 色や質感はふつうに Pixel Shader でつけている。

マテリアルは汎用的な HLSL ジェネレータ Volume Domain のマテリアル。 ある位置でどれくらい光が減衰するかどうかの 係数を計算するマテリアルを書く。 これで生成された HLSL コードを Volumetric Fog の描画プロセスで利用するこ とで、Fog をマテリアルで制御できている。

マテリアルは汎用的な HLSL ジェネレータ Light Function Domain のマテリアル。各方向にライトがどのくらいの強度で光 を発するかを書く。 これで生成された HLSL コードを、ShadowMask (影を表すやつ)への書き込みに 使う。それを前提にライト計算をすると、ライトが制御される。

マテリアルは汎用的な HLSL ジェネレータ 1. マテリアルを書くと 1. 影が書き込まれ 2. ライトを計算し 文章だとよくわかんないと思うので図示。 3. 完成

マテリアルは汎用的な HLSL ジェネレータ Post Process Domain のマテリアル。レンダリング結果の画面を素材として、後 処理を加えるシェーダーを生成する。 入力画面をテクスチャとして扱うことで、色の変更やUVによる変形を実現でき る。 Pixel Shader のみ生成する。

材質とかいうレベルじゃないよ マテリアルと聞くと、「素材」「材料」のような印象を受け る。わかりやすいが、実際はそれ以上の汎用システム。 なんかもっとこう、シェーダーを生成するグラフであることが わかるような名前はないものか……？

!! Shader Graph

一歩目にやさしい名前だね 最初の理解として、色や材質を指定するマテリアルだと説明さ れるのは、わかりやすくてよいことでしょう。

さいごに ここまでのことがわかると わかる Tips をひとつ

ノードがVSとPSのどちらで処理されるか意識しよう よくある、UV を時間で横スクロールすることでテクスチャが 横スクロールするようにしたマテリアル。

ノードがVSとPSのどちらで処理されるか意識しよう よくある、UV を時間で横スクロールすることでテクスチャが 横スクロールするようにしたマテリアル。 これ、最適化の余地があります。

VS と PS の計算回数 ここで、VS と PS の計算回数の特性をみてみる。 Vertex Shader Pixel Shader STEP 1 STEP 2

VS と PS の計算回数 VS は頂点回数、PS はピクセル回数の計算が走る。 下の図くらい荒い画面でも、PS のほうが計算回数が多い。 Vertex Shader Pixel Shader 計算: 8回 計算: 30回

VS と PS の計算回数 VS は解像度が増えても頂点数が変わらないので固定だが、 PS は処理するピクセルが増えるので計算回数も増える。 Pixel Shader Vertex Shader 512x512の画面に描画 画面総ピクセル数 約26万 計算: 8回 計算: 17万回くらい

ノードがVSとPSのどちらで処理されるか意識しよう すべてのノードが Base Color の出力に連なっている。 つまり、すべての計算が Pixel Shader で行われている。 Vertex Shader に移動できる部分はないか？ と考える。

値の補間を知って活用する VS は位置決め以外に、追加処理を行って値を PS に渡せる。 「頂点のあいだ」のピクセルでは、入力が補間される。 Pixel Shader Vertex Shader VS から PS への受け渡しは 値の「補間」が起こる STEP 1 STEP 2

値の補間を知って活用する たとえば VS で頂点単位に色を計算して、PS で受け取り、そ のまま塗る色として利用すると、中間領域はうまく遷移する。 Pixel Shader Vertex Shader VSからPSへ渡す値は 自動で補間される STEP 1 VS が出力した色を そのままPSで塗った例 STEP 2

値の補間を知って活用する 自動補間で十分で、真にピクセル単位で計算する必要のないも のは、Vertex Shader で計算した方がよい。 Pixel Shader Vertex Shader この補間は超低コスト！ GPU が全面サポート STEP 1 STEP 2

単純なUVスクロールは VS でやろう このマテリアルの UV 移動は、単調な横移動。 VS で計算した UV を補間して PS で使うのでよさそう。 UV スクロール のようす

単純なUVスクロールは VS でやろう なんとマテリアルにはこれのための機能がある。 Vertex Interpolator ノードを挟むだけで、前後を VS/PS に 分断できる。重い処理ほど効果が大きい。 補間して PSに渡す！ VS で計算！ x 頂点数 PS でテクスチャ をサンプル！ x ピクセル数

Customized UVs 時間の都合上割愛するが、同じく VS に処理を移動できる機能 としては Customized UVs がある。 一度に渡せるチャンネル数や使い勝手に違いがあるので確認す ることを推奨。

なんでも移動できるわけじゃないよ もちろん、なんでも移動できるわけではない。 たとえば、表示テクスチャのサンプルなどは、頂点単位だと密 度が足りず、補間でもどうにもならない。 ←こんなメッシュに表示しているので、4点でサンプルしても黒しか取れず、補間しても黒

とはいえ早すぎる最適化は避けよう 実際のところ、今回紹介した UV スクロールを VS へ移動するようなこと は負荷軽減に大した効果をおよぼさない。 そもそも、今回の例のように PS で UV の Panner を行っても、ピクセル 処理で加算命令がすこし増える程度でしかない。 実用的には、もっと明らかに重い処理を書く場合の設計や、測定で見つ かったボトルネックへの対抗策として知っておく程度がよい。 意図としては章題のとおり、ここまでのことがわかるとわかる Tipsであ り、シェーダーとマテリアルの関連を理解すると、理解可能なマテリア ルの機能や応用が増えるという実例を示すものであることに注意。

まとめ

生成されるシェーダーが見えるようになるとよい ● 置いたノードが、VS と PS どちらで実行されるかわかる。 ● 書いている処理が、頂点単位、ピクセル単位、どちらで実行 すべきかわかる。 など、シェーダーの性質を踏まえてマテリアルがかけるように なるとよい。 「これは BP ではなくマテリアル側で処理しちゃえ」みたいな ことも増える。マテリアルの最適化にもつながる。

マテリアルを開拓しよう 時間の都合上話せなかったものがたくさん！ ネットにも情報が少ない領域なので、開拓していきましょう。 ● マテリアルノード(Material Expression)の拡張 (エンジン改造は不要) ○ カスタム出力ノード ○ マテリアルへの Compute Shader 処理に組み込み ○ HLSL Tree によるあたらしい HLSL 生成システムの拡張性がアツい ■ r.MaterialEnableNewHLSLGenerator ● マテリアルが生成した HLSL を使う側のシェーダーも作成できる。マテリア ルでカスタマイズ可能なシェーダーが作れる ○ この記事にちょっと書いた

• https://strv.dev/blog/unrealengine--lets-implement-a-single-mesh-renderer-3#マテリアルを利用した描画処理を行えるシェーダーの作成

ご清聴 ありがとうございました 質問や指摘などあれば @strvert まで