シンプルスタイライゼーション

シンプルスタイライゼーション Senior Software Engineer, Developer Relations Takashi Suzuki 2024 Epic Games Japan

Simple Stylization Techniques in Unreal Engine | GDC 2024 https://www.youtube.com/watch?v=exMzwH7EJUY Simple Stylization Techniques in Unreal Engine 5 https://dev.epicgames.com/community/learning/talks-and-demos/XayP/fortnite-simple-stylization-techniques -in-unreal-engine-5

• https://www.docswell.com/s/EpicGamesJapan/53P8EK-UE5_1_World Buliding_Core#p2

プラグインとアセット紹介 VRM4U https://ruyo.github.io/VRM4U/ 東北ずん子ずんだもんプロジェクト https://zunko.jp/ Stylized Rendering sample https://www.unrealengine.com/marketplace/en-US /product/stylized-rendering

• https://www.docswell.com/s/EpicGamesJapan/53P8EK-UE5_1_World Buliding_Core#p2

スタート地点

目次 草をなじませよう 簡単トゥーンシェーディング ポストプロセス

目次 草をなじませよう 簡単トゥーンシェーディング ポストプロセス

草をなじませよう

スタイライズドな草 ● ● ● シンプルなシェーディング 影なし 地面とのマッチングがいまいちで浮い ているように見える

スタイライズドな草 ● ● ● シンプルなシェーディング 影なし 地面とのマッチングがいまいちで浮い ているように見える ➡地面と草の色をブレンドしたい

ランタイム バーチャル テクスチャ @ EPIC Dev Community https://dev.epicgames.com/documentation/ja-jp/unreal-engine/runtime-virtual-texturing-in-unreal-engine?a pplication_version=5.3

• https://www.docswell.com/s/EpicGamesJapan/53P8EK-UE5_1_World Buliding_Core#p2

Runtime Virtual Texture ● ● ● ● 描画先として、 Runtime Virtual Texture アセットを利用 ランタイムで上空からレンダリング タイル化されたテクスチャ ○ 近いほどより精細に レンダリング結果をキャッシュ ○ 複雑なシェーディングの最適化にも

Runtime Virtual Texture ● 注意点 ○ 追加のメモリ ○ 解像感の差が出る場合も ○ プロジェクト設定

動作時の Runtime Virtual Texture のようす

RVT書き込み (ランドスケープ ) ● ● 対象アクター ○ Draw in Virtual Textures を設定 マテリアル ○ Runtime Virtual Texture Outputに出力 ○ (Option)Runtime Virtual Texture Sampleを 読み込んで使うようにする

RVTを使う(草のマテリアル ) ● ● Runtime Virtual Texture Sample ○ BaseColor ○ Normal(WorldSpace) スペキュラやラフネスは不要ならサンプリング しなくてよい

結果

結果

草をなじませるの結果 ● ● とりあえず地面とのマッチングは改善 本来の草の色とブレンドしても良い

目次 草をなじませよう 簡単トゥーンレンダリング ポストプロセス

簡単 トゥーンシェーディング

トゥーンシェーディング 手法 あれこれ

Hi-fi RUSH ● ● ● ● レンダリングパスの全体に手を入れている GBufferの用途を大幅に変更 プロジェクトに則した影描画など 『Hi-Fi RUSH』開発事例 グラフィックスと最適化紹介 ○ https://www.youtube.com/watch?v=gb7qXLnlaB4

• https://www.youtube.com/watch?v=gb7qXLnlaB4

Guilty Gear -Strive● ● ● 限定的なエンジン改造 ○ デフュージョンフィルタ ○ 二つのカスタム法線 ■ ライティング用 ■ アウトライン用 ○ 背景用の影色グラデーション キャラクターシェーディング ○ ディファードレンダリング ○ Unlitマテリアル 西川善司の「試験に出るゲームグラフィックス」 「GUILTY GEAR Xrd -SIGN-」で実現された 「アニメにしか見えないリアルタイム 3Dグラフィックス」の秘密 ○ https://www.4gamer.net/games/216/G021678/20140703095/ © ARC SYSTEM WORKS

• https://www.4gamer.net/games/216/G021678/20140703095/

Fortnite ● ● ● トゥーンシェーディング用にエンジン改造は無し マテリアルでトゥーンシェーディング VRM4Uの内蔵マテリアルも近い実装

簡単 トゥーンシェーディング

Overlay Material ● ● OverlayMaterialスロットにセットするだけ StaticMesh/SkeletalMesh ○ Nanite非対応 5.1

Overlay Material の動作 ● ● 同じメッシュをオーバーレイマテリアルで 再描画 半透明なら半透明パスで描画

カラーカーブアセット ● キャラクターに当たっているライト量に対してどの ような色にするか

出力される色スケール→ トゥーンシェーディング 入力される色の比率→ (ライティング結果/ベースカラー)

カーブアトラス ● ● ● 複数のカラーカーブをテクスチャにアトラス化 カラーカーブを変更すると自動更新 CurveAtlusRawParamterノード ○ カーブアトラスとカーブアセットを設定

マテリアル

OverlayMaterial を適用

OverlayMaterial の作例紹介 [UE5] 透過オーバーレイマテリアルを使ってみよう @ Histria ブログ https://historia.co.jp/archives/32130/

• https://www.docswell.com/s/EpicGamesJapan/53P8EK-UE5_1_World Buliding_Core#p2

目次 草をなじませよう 簡単トゥーンシェーディング ポストプロセス

周辺マスク付き ポストプロセス

Niagara シミュレーション ステージ

Niagara ● ● ● ● UnrealEngine内蔵のVFX用システム CPUまたはGPUで実行 モジュールを組み合わせて色々な表現を実現する モジュール＝入力＋プログラム＋出力 ○ ノードベースプログラミングで拡張

Simulation Stage ● ● ● ● より柔軟な更新処理 GPUで実行 更新処理をループ実行 サンプル ○ Content Example ■ Niagara_Advanced_Particles ■ Niagara_Fluids

イテレーション ● IterationSource ○ Emitter ○ DataInterface ■ RenderTarget ■ Grid2DCollection ■ Grid3DCollection

Grid の初期化 ● ● Grid2DCollection::SetNumCells Grid2DSetResolution ○ NiagaraFluidプラグインのノード

UserParameters ● ● 外部に公開する変数 ○ NiagaraSystemComponentを 通じて設定 外部レンダーターゲット ○ TextureRenderTarget ○ UserParamtersウィンドウで アセットを直接バインド出来る

作成した NiagaraSystem ● SimulationStage ○ 初期化Grid2d初期化 ○ プレイヤーポジションを Grid2Dに描画 ○ AdvectGrid(流体シム) ○ Grid2dをRenderTargetに描画

スクラッチパッド ● 再利用しない「使い捨て」のモジュールスクリ プト StackContext ● Grid2Dなどをイテレーションする時は STACKCONTEXT ネームスペースの変数に書き込む

ブループリント連携 ● Set Niagara Variable

シミュレーションステージ の結果 ● ● プレイヤー周辺を RTに描画 さらに流体の効果を追加

ポストプロセス実装 2023 Private & Confidential

輪郭線

輪郭線

紙の質感

紙の質感

完成

結果 ● シミュレーションステージを 活用して複雑な効果を実現できた

ポストプロセスプラグイン紹介 PPLineDrawing https://github.com/alwei/PPLineDrawing Stylized Post Process for Unreal Engine 5 https://3dnchu.com/archives/stylized-post-proce ss-for-ue5/

• https://3dnchu.com/archives/stylized-post-process-for-ue5/
• https://github.com/alwei/PPLineDrawing

まとめ ● ● アンリアルエンジンは「エンジン改造なし」でもスタイライズドレンダリングを行うこと ができます 本日解説した有用な機能 ● ● ● ● ● ● Runtime Virtual Texture Overlay Material Color Curve Curve Atlus Post Process Material Niagara Simulation Stage

Thank you! — Epic Games Japan 2024