Stylized PostProcess for Unreal Engine 5 機能紹介とv2.0への展望
18.9K Views
October 20, 24
スライド概要
講演者：3D人
「Unreal Engine Meetup Connect - Vol.4 - TA編」の講演資料です。
アーカイブ動画：
https://youtu.be/Z6OSqWo2UxI
イベントページ：
https://leon-gameworks.connpass.com/event/328282/
Googleスライド：
https://docs.google.com/presentation/d/1pRfDOzVXqLuXSgZIT-KTlFpn48Zks67Iq4yVZeYuf9s/edit?usp=sharing
Unreal Engine をメインとするゲーム会社、株式会社Leon Gameworks のアカウントです。
関連スライド
各ページのテキスト
Stylized PostProcess for Unreal Engine 5 機能紹介とv2.0への展望 Unreal Engine Meetup Connect - Vol.4 - TA編 #UEMConnect ※Docswell 公開用一部修正ver 3dnchu.com 1
自己紹介 3D人（スリィディンチュ） X：@ymt3d CG Artist / TA / Game Developer / CG Bloger 個人HM：Yamato3D 仕事の傍ら ひっそりと趣味の情報メモブログサイ ト3D人（3dnchu.com）を2010年にスタートしほぼ 毎日更新しています。 趣味ツール：Unreal Engine, Blender Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 2
それ以外の活動 3Dスキャナ＆3Dプリンタ、ペンタブ液タブの製品 レビューYoutube動画や UEやBlender関連のアセットの配布 AIを使ったBlenderアドオン制作 昨年末頃からは Blender関連の配信イベントなどを中心に 少しだけ活動の幅を広げております。 Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 3
本講演について １．旧: Simple Hatching PostProcess Material for UE4 の紹介 ２．Stylized Post Process for Unreal Engine 5 v1.0 の紹介 ３．Stylized Post Process for Unreal Engine 5 v2.0 への妄想 Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 4
旧: Simple Hatching PostProcess Material for UE4 Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 5
旧: Simple Hatching PostProcess Material for UE4 の紹介 Simple Hatching PostProcess Material for UE4 とは？ 動画リンク：https://www.youtube.com/watch?v=N1MwUIwdU7Q 2021年4月公開の 無料のハッチングポストプロセス Simple Hatching PostProcess Material for UE4 Noise Nodeを引き伸ばして適用する シンプルな実装 ※Gumroad上で無料公開 ※アウトライン部分は alwei氏の PPLineDrawing を使用 Simple Hatching PostProcess Material for UE4：https://3dnchu.com/archives/simple-hatching-pp-ue4-free/ PPLineDrawing：https://github.com/alwei/PPLineDrawing Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 6
Stylized Post Process for Unreal Engine 5 v1.0 Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 7
Stylized Post Process for Unreal Engine 5 v1.0 の紹介 Stylized Post Process for Unreal Engine 5 v1.0 とは？ 2023年6月公開 Simple Hatching PostProcess Material for UE4 をハッチング以外の要素を追加し Unreal Engine 5向けに完全に作り直したもの ・アウトライン描画 ※参考 PPLineDrawing Crease,Depth,Normal,Edge,Shading,Curveture ・ハッチング Noiseでのプロシージャル、カスタムテクスチャ ・ハーフトーン ディザー ・シンプルなトゥーンシェーディング ・ノイズ歪め ・Distance Field Shadow ※Githubにて無料公開！ Gumroadでは寄付受付 Stylized Post Process for Unreal Engine 5：https://3dnchu.com/archives/stylized-post-process-for-ue5/ Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 8
Stylized Post Process for Unreal Engine 5 v1.0 の紹介 適用例 動画リンク：https://www.youtube.com/watch?v=G-_1xHfr3_E Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 9
Stylized Post Process for Unreal Engine 5 v1.0 の紹介 なぜポストプロセスに拘るのか Stylized表現における ポストプロセスとマテリアルの違い マテリアル（多くのゲームはこれが多い） ・細部表現が得意（特定のメッシュやパーツごとの調整、特定のテクスチャを使用したマスク表現） ・カスタマイズ性が高い（各メッシュごとに独自のマテリアル設定や調整が可能） ・設定コストが高い ・高度な事を行う場合はエンジン改造が必須 ・本制作向き ポストプロセス ・画面一括で適用可能 ・シーンの要素を適度に活用可能 ・確認までのスピードが早い ・シーン全体の調和性が高い ・個別の調整が不可能 ・透過部分の処理やエフェクトとの合成に難あり ・プロトタイプ、LookDev向き Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 10
Stylized Post Process for Unreal Engine 5 v1.0 の紹介 なぜStylized Post Processを作ったのか 確認が早い！ Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 11
Stylized Post Process for Unreal Engine 5 v1.0 の紹介 なぜStylized Post Processを作ったのか 設定が簡単！ Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 12
主な機能紹介 Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 13
Stylized Post Process for Unreal Engine 5 v1.0 の紹介 ライン描画：Crease ※参考 PPLineDrawing Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 14
Stylized Post Process for Unreal Engine 5 v1.0 の紹介 ライン描画：Edge ※参考 PPLineDrawing Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 15
Stylized Post Process for Unreal Engine 5 v1.0 の紹介 ライン描画：Normal 法線情報をもとに生成 Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 16
Stylized Post Process for Unreal Engine 5 v1.0 の紹介 ライン描画：Depth 深度情報をもとに生成 Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 17
Stylized Post Process for Unreal Engine 5 v1.0 の紹介 ライン描画：Shading 陰影情報を本に生成 Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 18
Stylized Post Process for Unreal Engine 5 v1.0 の紹介 ライン描画：Curvature（簡易実装） お試し WorldNormalとDDX DDYを使ったもの 低解像度で使えたものではないのですが・・ Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 19
Stylized Post Process for Unreal Engine 5 v1.0 の紹介 そういえば…話がそれますが・・・ Blender風のCavity ポストプロセスが UEマケプレでリリースされ ていました いい感じに見えます 要チェックです ※プラグインです Cavity Blender Post Process： https://www.unrealengine.com/marketplace/en-US/product/65816850c04b4210ba8a1c4a407d9fab Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 20
Stylized Post Process for Unreal Engine 5 v1.0 の紹介 ハッチング ノイズを使用したハッチング Triplanar or Screen Space UE4時代から使用していたもの Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 21
Stylized Post Process for Unreal Engine 5 v1.0 の紹介 ハッチング カスタムテクスチャを使用したハッチング Triplanar or Screen Space RGBでストロークの段階分けなどに対応 Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 22
Stylized Post Process for Unreal Engine 5 v1.0 の紹介 ハッチング Screen Spaceの追加機能 ハッチングを スクリーンスペースでマッピングする際に WorldNormalをCamera Spaceにし わずかに歪めてます シンプルですが効果的です Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 23
Stylized Post Process for Unreal Engine 5 v1.0 の紹介 ハーフトーン・ディザー よくあるやつ Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 24
Stylized Post Process for Unreal Engine 5 v1.0 の紹介 トゥーンシェーディング シーンの陰影情報をもとに使用しているので Lumenにも対応 Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 25
Stylized Post Process for Unreal Engine 5 v1.0 の紹介 フォグ ただのポスプロフォグ Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 26
Stylized Post Process for Unreal Engine 5 v1.0 の紹介 Sharp Filter シャープフィルターは Stylizedと相性が良い よくある手法で Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 27
Stylized Post Process for Unreal Engine 5 v1.0 の紹介 OilPaint Filter 比較的軽量な油絵フィルター Custom HLSL Shader ShaderToyのものを参考にGLSL→HLSL化 参考 Oil Painiting Shader ：https://www.shadertoy.com/view/fstfzM Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 28
Stylized Post Process for Unreal Engine 5 v1.0 の紹介 Kuwahara Filter お馴染みKuwaharaフィルター Custom HLSL Shader 参考 UE4 - Tutorial - Painterly Post Processing - Kuwahara Filter：https://www.youtube.com/watch?v=Pe3Yt3DUp04 Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 29
Stylized Post Process for Unreal Engine 5 v1.0 の紹介 Distance Field Shadow Distance Field を使用した影 影の中でも表示出来るメリットが有る ※Distance Fieldを使用するので、 WPOメッシュ 非推奨 Skeletal Mesh 非対応 2023年の Advent Calendarにて解説 Mesh Distance Fieldsで表現模索＆ Stylized系マテリア ルで使えるかもしれない副産物 - UE Advent Calendar 2023：https://3dnchu.com/archives/mesh-distance-fiel d-ue5-advent23/ Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 30
Stylized Post Process for Unreal Engine 5 v1.0 の紹介 ノイズで歪め＆ゆらゆらアニメーション Gifアニメリンク：https://drive.google.com/file/d/1-gqVTcIFW25JcYFk-HeN1FrGvoTrGvNs/view?usp=sharing ノイズでハッチングやラインを歪ませつつ ゆらゆらゆらゆらアニメーション Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 31
Stylized Post Process for Unreal Engine 5 v1.0 の紹介 1つのマスターマテリアルで可読性重視 あえて全て１つのマテリアル内で完結するように しました（一部機能を除き） 可読性を高めつつ フォルダ階層を気にせず マテリアルのファイルを簡単にプロジェクトに導 入可能にする為です Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 32
Stylized Post Process for Unreal Engine 5 v1.0 の紹介 1つのマスターマテリアルで可読性重視 あえて全て１つのマテリアル内で完結するように しました（一部機能を除き） 可読性を高めつつ フォルダ階層を気にせず マテリアルのファイルを簡単にプロジェクトに導 入可能にする為です と綺麗事を言いつつ 機能追加を重ねてきた為 かなりとっ散らかってきたなぁ という印象・・・ Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 33
ということで Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 34
Stylized Post Process for Unreal Engine 5 v2.0 Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 35
Stylized Post Process for Unreal Engine 5 v2.0 の妄想 Stylized Post Process for Unreal Engine v2.0 妄想（仮） 修正点 ・「Overlay Material（オーバーレイマテリアル）」での実装 ・ポストプロセスと同時に管理する為の マテリアル関数化 ・その他機能追加：背面法アウトライン ・その他色々いれる予定 Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 36
Stylized Post Process for Unreal Engine 5 v2.0 の妄想 オーバーレイマテリアルとは？ Overlay Materialとは、Unreal Engine 5.1から追加された新機能で す。 メッシュを2回レンダリングして、別の マテリアルを画像編集ソフトのレイ ヤーのように重ねることができるもの です。 この機能を使うことで、後付のエフェ クトの追加や、メッシュを複製して重 ねる必要があった背面法を使ったア ウトラインなどを、 1つのメッシュだけ で表現できるようになりました。 ※現状Naniteメッシュには非対応 Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 37
Stylized Post Process for Unreal Engine 5 v2.0 の妄想 なぜオーバーレイマテリアル？ 項目 Mesh Material Overlay Material Post Process 手法 背面法、専用シェーダー、 メッシュ属性の活用／頂点カ ラー／専用テクスチャ／ ←両方扱える → （強引に） 主に Scene Textureの要素を使用 調整範囲 マテリアル毎 ←両方扱える → （強引に） 画面ごとに一律 作業コスト 高い 各メッシュに対して個別に設 定が必要 ←中間→ （たぶん） 低い 一度設定すればシーン全体に適 用可能 ええやん！ Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 38
Stylized Post Process for Unreal Engine 5 v2.0 の妄想 Epicさんも推奨？ Overlay Materialを使用した技法 Epic GamesのGDC 2024講演 「Simple Stylization Techniques in Unreal Engine」 でも紹介されていました。 参考 Simple Stylization Techniques in Unreal Engine | GDC 2024：https://www.youtube.com/watch?v=exMzwH7EJUY Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 39
Stylized Post Process for Unreal Engine 5 v2.0 の妄想 オーバーレイマテリアル対応にあたり… → 機能や要素ごとにマテリアル関数化しました Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 40
Stylized Post Process for Unreal Engine 5 v2.0 の妄想 オーバーレイマテリアル対応にあたり… ポストプロセス オーバーレイマテリアル ポストプロセスとオーバーレイマテリアルの関数は共通です Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 41
Stylized Post Process for Unreal Engine 5 v2.0 の妄想 ポストプロセスとオーバーレイマテリアルの処理はほぼ共通ですが オーバーレイではこっち 一部の処理だけ分岐させています Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 42
Stylized Post Process for Unreal Engine 5 v2.0 の妄想 とりあえず現行機能の移植は出来ました Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 43
Stylized Post Process for Unreal Engine 5 v2.0 の妄想 背面法アウトラインを実装 青：背面法 赤：Scene Texture処理 背面法と旧ポスプロ処理を同時に使用可能 Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 44
Stylized Post Process for Unreal Engine 5 v2.0 の妄想 背面法アウトライン：FOVに応じた太さ調整 画角が変わっても大体同じ印象（最適な計算模索中・・ Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 45
Stylized Post Process for Unreal Engine 5 v2.0 の妄想 背面法アウトライン：距離に応じた太さ調整 補正前 補正後 遠くに行くほど太くなる（最適な計算模索中・・ Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 46
Stylized Post Process for Unreal Engine 5 v2.0 の妄想 背面法アウトライン用おまけ補助ツール ソフトエッジ法線（ RGB）とハードエッジ（ A）を頂点カラーに格納する Geometry Script（制作中 Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 47
Stylized Post Process for Unreal Engine 5 v2.0 の妄想 背面法アウトライン用おまけ補助ツール 静止物は概ねこちらで対応可能ですが 頂点カラーを他に使いたいケースも多いので UVに埋め込む方式も検討中 Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 48
Stylized Post Process for Unreal Engine 5 v2.0 の妄想 とりあえず使えるようになりました オブジェクトごとに個別の表現が可能に！ Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 49
Stylized Post Process for Unreal Engine 5 v2.0 の妄想 キャラはオーバーレイ＋背景はポスプロで検証しやすい！ Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 50
Stylized Post Process for Unreal Engine 5 v2.0 の妄想 作り込まれたキャラクターへの適用検証はこれから… モデルはゼンレスゾーンゼロの無料配布データ： https://3dnchu.com/archives/zenless-zone-zero-character-mmd-model/ Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 51
Stylized Post Process for Unreal Engine 5 v2.0 の妄想 今後の課題 背面法の課題 ソフト法線格納を頂点カラーや UVにベイクする事で 静止物やStatic Meshには問題なく使用できるが スキニング有りモデルへの適用は課題が残る ※参考 アークシステムワークスCEDEC 2024セッション ３Dでキレイな線を引くために。ギルティギアシリーズのトゥーンライン制御テクニック https://cedil.cesa.or.jp/cedil_sessions/view/2952 Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 52
Stylized Post Process for Unreal Engine 5 v2.0 の妄想 今後の課題 背面法の透過部分は課題アリ 本体メッシュ側に 個別の情報をもたせることで回避可能 とりあえず Masked + Ditherマテリアルを入れつつ 透過領域の背面法アウトラインを不可視にした状態 → Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 53
Stylized Post Process for Unreal Engine 5 v2.0 の妄想 v2.0のリリースに向けた残りの追加予定機能 ・トゥーンシェーディング機構の見直し Visual Tech Artさんが公開した物理ベースセルシェーディング解説動画 最高の学習動画です！一部機構を取り入れたいと考えています Physically Based Cel Shading：https://www.youtube.com/watch?v=eBS3BOI5KnM その他に・・ ・Stylized風ストロークの追加 ・法線マップによるペイントストロークの歪み Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 54
Stylized Post Process for Unreal Engine 5 v2.0 の妄想 v2.0のリリースに向けた残りの追加予定機能 ・パーツ毎の細かな調整機能 ・透過部分対策 ・オブジェクトの情報を使った追加のアプローチ Boundを使ったグラデーション 座標基準のグラデーション ソフト法線の活用 Rim（Fresnel）ライト ・Velocityに応じた線を出すやつ（検証中没にしたもの→ まだまだやること多い・・・ Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 55
Stylized Post Process for Unreal Engine 5 v2.0 の妄想 Github＆Gumroadに加えてFABでも公開予定 年内公開を目標に・・ Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 56
さいごに Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 57
さいごに UE関連アセット色々作りたい！ 2025年はUE関連アセットなどを制作し 公開していきたいと考えています！ ・3Dアセット ・マテリアルアセット ・Geometry Script Tool ・Blue Print Tool ・PCG ・etc… 開発中：Sprite Sheets 風 WPO Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 58
さいごに Blender関連アセットも色々作りたい！ あとは一応Blenderも… 一緒になにかしたい方はお声がけください！ 開発中：3DPrint風GeoNode(Blender) Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 59
Stylized Post Process for Unreal Engine 5 v2.0 の妄想 話はそれますが…試してみたいこと ・Overlaymaterial を TArray の Overlay Materialsにして 複数のオーバーレイマテリアルをセット出来るようにする。 という中国の方がエンジン改造をしているのを見かけた いつか試してみたい… ・UE5.5の新機能も気になる… UserSceneTexture Multipass Postprocess Material など…その他新しい機能の調査も Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 60
さいごに フォロー＆チャンネル登録 お願いします 3D人：https://3dnchu.com/ Github：https://github.com/ymt3d X：https://x.com/ymt3d Youtube：https://www.youtube.com/@3dnchu-youtube Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 61
ご清聴 ありがとうございました！ Stylized Post Process in Unreal Engine 5 機能紹介とv2.0への展望 3dnchu.com 62