UE4のマテリアルを...
-
Upload
-epic-games-japan -
Category
Engineering
-
view
1.914 -
download
15
Transcript of UE4のマテリアルを...
![Page 1: UE4のマテリアルを もっと楽しもう!~マテリアルでぐっと広がるリアルタイムCG表現の幅~](https://reader031.fdocument.pub/reader031/viewer/2022012308/55ab99561a28ab1c7a8b47e9/html5/thumbnails/1.jpg)
UE4のマテリアルを もっと楽しもう!
~マテリアルでぐっと広がるリアルタイムCG表現の幅~
シモダジュンヤ(Epic Games) twitter @junyash UnrealEngine.com
![Page 2: UE4のマテリアルを もっと楽しもう!~マテリアルでぐっと広がるリアルタイムCG表現の幅~](https://reader031.fdocument.pub/reader031/viewer/2022012308/55ab99561a28ab1c7a8b47e9/html5/thumbnails/2.jpg)
講演内容(告知ページ向け)
UE4のマテリアル楽しめてますか? 怖くないですよ~\(^o^)/ 活用できれば表現の幅がぐっと広がります。 というか、使いこなせるとUE4がメチャクチャ楽しくなってきます。 ぜひ今回の勉強会で得られたノウハウを実際にエディタ上で試してみてください!
![Page 3: UE4のマテリアルを もっと楽しもう!~マテリアルでぐっと広がるリアルタイムCG表現の幅~](https://reader031.fdocument.pub/reader031/viewer/2022012308/55ab99561a28ab1c7a8b47e9/html5/thumbnails/3.jpg)
本日は…
このセッションではPBRの話はしません 期待されていたかたごめんなさい (^_^; この辺は最近、茄子さん(@nasubi_s)の背景アーティストのブログ(http://envgameartist.blogspot.jp/)が熱く、ここ数日も今日登壇されたもんしょさん(@monsho1977)や他の皆さんとtwitter上で熱いトークが繰り広げられています。 ぜひお二方をフォローしておきましょう!
![Page 4: UE4のマテリアルを もっと楽しもう!~マテリアルでぐっと広がるリアルタイムCG表現の幅~](https://reader031.fdocument.pub/reader031/viewer/2022012308/55ab99561a28ab1c7a8b47e9/html5/thumbnails/4.jpg)
そもそもUE4のマテリアルって何?
ノードベースのシェーダーです ❏リアルタイムプレビュー
(プレビューウインドウはもちろんノード内も)
ただしシェーダーのコンパイルが裏で走る
❏マテリアルインスタンスは完全にリアルタイム ❏ マテリアルで定義されたパラメータをリアルタイ
ム編集
![Page 5: UE4のマテリアルを もっと楽しもう!~マテリアルでぐっと広がるリアルタイムCG表現の幅~](https://reader031.fdocument.pub/reader031/viewer/2022012308/55ab99561a28ab1c7a8b47e9/html5/thumbnails/5.jpg)
オススメの機能
マテリアルインスタンス(超絶オススメ!) ❏シェーダーグラフを共用して制作を効率化 ❏シェーダーの切り替えや使用メモリの削減 ❏エディタ上でリアルタイムに編集可能 ❏ゲームプレイ中リアルタイムに変更可能! マテリアル関数 ❏良く使われるグラフを関数化して共用
![Page 6: UE4のマテリアルを もっと楽しもう!~マテリアルでぐっと広がるリアルタイムCG表現の幅~](https://reader031.fdocument.pub/reader031/viewer/2022012308/55ab99561a28ab1c7a8b47e9/html5/thumbnails/6.jpg)
シェーダー言語は使えるの?
はい、実はEngine/Shadersフォルダ内にHLSLで書かれたシェーダーがあります Shift+Ctrl+.(ピリオド)でエディタ上からコンパイルさせる事が可能です
![Page 7: UE4のマテリアルを もっと楽しもう!~マテリアルでぐっと広がるリアルタイムCG表現の幅~](https://reader031.fdocument.pub/reader031/viewer/2022012308/55ab99561a28ab1c7a8b47e9/html5/thumbnails/7.jpg)
ワールド位置オフセット
基本的にはバーテックスシェーダー内で モデルの頂点にオフセットを掛けるモノ 頂点ごとに異なるオフセットを掛けるのが肝 過去のタイトルでの利用例 ❏敵が船の一部を食べたり ❏風になびく旗や草木 ❏How to identify vertex/position/ID?
❏ World/Local position, vertex color, extra UV.
![Page 8: UE4のマテリアルを もっと楽しもう!~マテリアルでぐっと広がるリアルタイムCG表現の幅~](https://reader031.fdocument.pub/reader031/viewer/2022012308/55ab99561a28ab1c7a8b47e9/html5/thumbnails/8.jpg)
ワールド位置オフセット・デモ
デモ ❏スケール ❏回転
❏ 法線が回転しない事への対処は? →Normalに繋ぐ法線を回転してあげる
❏回転の中心や軸をずらす ❏高さに応じて回転角を変える
❏ どんな見栄えになると思います? https://vine.co/v/OUVWBXvjEQi
![Page 9: UE4のマテリアルを もっと楽しもう!~マテリアルでぐっと広がるリアルタイムCG表現の幅~](https://reader031.fdocument.pub/reader031/viewer/2022012308/55ab99561a28ab1c7a8b47e9/html5/thumbnails/9.jpg)
ペイント機能を活用せよ!
レベルエディタでペイントでき、マテリアルで 頂点カラーやテクスチャを自由に参照できる! ❏頂点ペイント ❏テクスチャペイント 使いドコロ ❏単純な例だと汚しのブレンド ❏風になびく葉や草のゆれ具合 ❏ Material Layerで自由に合成
![Page 10: UE4のマテリアルを もっと楽しもう!~マテリアルでぐっと広がるリアルタイムCG表現の幅~](https://reader031.fdocument.pub/reader031/viewer/2022012308/55ab99561a28ab1c7a8b47e9/html5/thumbnails/10.jpg)
マテリアルでメッシュをカット?
幾何学計算でピクセルを削る ❏球でくり抜く
❏ SQRT((WP-球P)・(WP-球P)) - 球R (結果がマイナスの場合にくり抜くとした場合)
❏面でカット ❏ (WP-面P)・Normailzed面V
❏マテリアル関数にしておくと便利ですね!
![Page 11: UE4のマテリアルを もっと楽しもう!~マテリアルでぐっと広がるリアルタイムCG表現の幅~](https://reader031.fdocument.pub/reader031/viewer/2022012308/55ab99561a28ab1c7a8b47e9/html5/thumbnails/11.jpg)
マテリアルで立体感を出す
ノーマルマップが適用されているだけでかなり立体感的な光源計算が適用され立体感が出ます さらに立体的に見せるには視線に応じてUVのサンプリングをずらすBump Offset(パララックスマッピング)が効果的
![Page 12: UE4のマテリアルを もっと楽しもう!~マテリアルでぐっと広がるリアルタイムCG表現の幅~](https://reader031.fdocument.pub/reader031/viewer/2022012308/55ab99561a28ab1c7a8b47e9/html5/thumbnails/12.jpg)
マテリアルで実際に立体化する!
テッセレーション ❏ポリゴン分割 ❏ PNトライアングル ディスプレースメント ❏分割されたサブポリゴンの頂点を変形
![Page 13: UE4のマテリアルを もっと楽しもう!~マテリアルでぐっと広がるリアルタイムCG表現の幅~](https://reader031.fdocument.pub/reader031/viewer/2022012308/55ab99561a28ab1c7a8b47e9/html5/thumbnails/13.jpg)
テッセレーションで立体化!
テッセレーション
![Page 14: UE4のマテリアルを もっと楽しもう!~マテリアルでぐっと広がるリアルタイムCG表現の幅~](https://reader031.fdocument.pub/reader031/viewer/2022012308/55ab99561a28ab1c7a8b47e9/html5/thumbnails/14.jpg)
ちょっと制作はひと休み
リアルタイムレンダリングの為にはGPUパフォーマンス大事です! 時々確認してほしいこと Shader Conplexity (F5) profilegpu
![Page 15: UE4のマテリアルを もっと楽しもう!~マテリアルでぐっと広がるリアルタイムCG表現の幅~](https://reader031.fdocument.pub/reader031/viewer/2022012308/55ab99561a28ab1c7a8b47e9/html5/thumbnails/15.jpg)
FUR
FURも今後面白そうなネタですが、今回はちょっと新たなものを用意できなかったので、現状で参考になりそうな情報。 Realistic Rendering Sample (https://docs.unrealengine.com/latest/JPN/Resources/Showcases/RealisticRendering/index.html)
Forum (https://forums.unrealengine.com/showthread.php?8957-Fur-Shader)
![Page 16: UE4のマテリアルを もっと楽しもう!~マテリアルでぐっと広がるリアルタイムCG表現の幅~](https://reader031.fdocument.pub/reader031/viewer/2022012308/55ab99561a28ab1c7a8b47e9/html5/thumbnails/16.jpg)
小技集(1)
DetailTexturing ❏マテリアルに近寄った際の解像度感UP
❏ 近寄られると解像度足んねーんだよ!近寄んなよ! って事ありませんか?
❏近寄った際に適用される局所領域のテクスチャを指定できます
❏もちろん、自分でノードを組む事も可能です
![Page 17: UE4のマテリアルを もっと楽しもう!~マテリアルでぐっと広がるリアルタイムCG表現の幅~](https://reader031.fdocument.pub/reader031/viewer/2022012308/55ab99561a28ab1c7a8b47e9/html5/thumbnails/17.jpg)
せっかく作ったマテリアル さらに魅せる画作りをしよう!
スカイライトを配置すると、HDRなIBLの適用も可能です。存在感というか実在感というか…浮かずに、リアル間・そこにある感がアップ⤴ ︎
![Page 18: UE4のマテリアルを もっと楽しもう!~マテリアルでぐっと広がるリアルタイムCG表現の幅~](https://reader031.fdocument.pub/reader031/viewer/2022012308/55ab99561a28ab1c7a8b47e9/html5/thumbnails/18.jpg)
せっかく作ったマテリアル、魅せる
Before
After (aokcubさん(http://aokcub.net/cg/dome/#author_info)の AoSKYのOpenEXRの空を.hdrに変換して利用。 せっかくなのでレンズフレアもサイズを大きく適用しました)
![Page 19: UE4のマテリアルを もっと楽しもう!~マテリアルでぐっと広がるリアルタイムCG表現の幅~](https://reader031.fdocument.pub/reader031/viewer/2022012308/55ab99561a28ab1c7a8b47e9/html5/thumbnails/19.jpg)
ポストプロセスマテリアル
ポストプロセスもマテリアルのシステムが適用できます ❏ Postprocess VolumeのBlendablesに設定 ❏ Blendable Location重要
❏ After Tonemapping ❏ Before Tonemapping ❏ Before Translucency
![Page 20: UE4のマテリアルを もっと楽しもう!~マテリアルでぐっと広がるリアルタイムCG表現の幅~](https://reader031.fdocument.pub/reader031/viewer/2022012308/55ab99561a28ab1c7a8b47e9/html5/thumbnails/20.jpg)
Color Gradingでの画作り
画面の色味の制御にはColor Grading https://docs.unrealengine.com/latest/JPN/Engine/Rendering/PostProcessEffects/ColorGrading/index.html
❏ Postprocess VolumeのColor Gradingに設定
![Page 21: UE4のマテリアルを もっと楽しもう!~マテリアルでぐっと広がるリアルタイムCG表現の幅~](https://reader031.fdocument.pub/reader031/viewer/2022012308/55ab99561a28ab1c7a8b47e9/html5/thumbnails/21.jpg)
さらに
ポストプロセスマテリアル以外の方法は? ❏ Shading Modelを追加する方法もあり
❏ Unreal Engine 4 (UE4) Advent Calendar 2014で公開予定 (http://qiita.com/advent-calendar/2014/ue4)
❏独自のライティングは別のアプローチも ❏ Stylizedデモの雲はマテリアルパラメータコレク
ションで、ライトの位置や色を与えてマテリアル内で適用というアプローチを利用
![Page 22: UE4のマテリアルを もっと楽しもう!~マテリアルでぐっと広がるリアルタイムCG表現の幅~](https://reader031.fdocument.pub/reader031/viewer/2022012308/55ab99561a28ab1c7a8b47e9/html5/thumbnails/22.jpg)
ありがとうございました
❏UE4 Advent Calendarまだ空きがありますので、ぜひ投稿してみてください。 http://qiita.com/advent-calendar/2014/ue4
❏Oculus Rift DK2用のデモ(もちろんUE4のもの)も懇親会で体験できます。