Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
UE4のマテリアルを
もっと楽しもう!
~マテリアルでぐっと広がるリアルタイム
CG表現の幅~
シモダジュンヤ(Epic Games)
twitter @junyash
UnrealEngine.com
講演内容(告知ページ向け)
UE4のマテリアル楽しめてますか?
怖くないですよ~\(^o^)/
活用できれば表現の幅がぐっと広がります。
というか、使いこなせるとUE4がメチャクチ
ャ楽しくなってきます。
ぜひ今回の勉強会で得られたノウハウを実...
本日は…
このセッションではPBRの話はしません
期待されていたかたごめんなさい (^_^;
この辺は最近、茄子さん(@nasubi_s)の背景アーテ
ィストのブログ(http://envgameartist.blogspot.jp/)が熱
く...
そもそもUE4のマテリアルって何?
ノードベースのシェーダーです
❏ リアルタイムプレビュー
(プレビューウインドウはもちろんノード内も)
ただしシェーダーのコンパイルが裏で走
る
❏ マテリアルインスタンスは完全にリアル
タイム
❏ マテリア...
オススメの機能
マテリアルインスタンス(超絶オススメ!)
❏ シェーダーグラフを共用して制作を効率化
❏ シェーダーの切り替えや使用メモリの削減
❏ エディタ上でリアルタイムに編集可能
❏ ゲームプレイ中リアルタイムに変更可能!
マテリアル関数...
シェーダー言語は使えるの?
はい、実はEngine/Shadersフォルダ内にHLSL
で書かれたシェーダーがあります
Shift+Ctrl+.(ピリオド)でエディタ上からコン
パイルさせる事が可能です
ワールド位置オフセット
基本的にはバーテックスシェーダー内で
モデルの頂点にオフセットを掛けるモノ
頂点ごとに異なるオフセットを掛けるのが肝
過去のタイトルでの利用例
❏ 敵が船の一部を食べたり
❏ 風になびく旗や草木
❏ How to ide...
ワールド位置オフセット・デモ
デモ
❏ スケール
❏ 回転
❏ 法線が回転しない事への対処は?
→Normalに繋ぐ法線を回転してあげる
❏ 回転の中心や軸をずらす
❏ 高さに応じて回転角を変える
❏ どんな見栄えになると思います?
https...
ペイント機能を活用せよ!
レベルエディタでペイントでき、マテリアルで
頂点カラーやテクスチャを自由に参照できる!
❏ 頂点ペイント
❏ テクスチャペイント
使いドコロ
❏ 単純な例だと汚しのブレンド
❏ 風になびく葉や草のゆれ具合
❏ Mate...
マテリアルでメッシュをカット?
幾何学計算でピクセルを削る
❏ 球でくり抜く
❏ SQRT((WP-球P)・(WP-球P)) - 球R
(結果がマイナスの場合にくり抜くとした場合)
❏ 面でカット
❏ (WP-面P)・Normailzed面V
...
マテリアルで立体感を出す
ノーマルマップが適用されているだけでかな
り立体感的な光源計算が適用され立体感が出
ます
さらに立体的に見せるには視線に応じてUV
のサンプリングをずらすBump Offset(パラ
ラックスマッピング)が効果的
マテリアルで実際に立体化する!
テッセレーション
❏ ポリゴン分割
❏ PNトライアングル
ディスプレースメント
❏ 分割されたサブポリゴンの頂点を変形
テッセレーションで立体化!
テッセレーション
ちょっと制作はひと休み
リアルタイムレンダリングの為にはGPUパフ
ォーマンス大事です!
時々確認してほしいこと
Shader Conplexity (F5)
profilegpu
FUR
FURも今後面白そうなネタですが、今回はちょ
っと新たなものを用意できなかったので、現状
で参考になりそうな情報。
Realistic Rendering Sample
(https://docs.unrealengine.com/la...
小技集(1)
DetailTexturing
❏ マテリアルに近寄った際の解像度感UP
❏ 近寄られると解像度足んねーんだよ!近寄んな
よ!
って事ありませんか?
❏ 近寄った際に適用される局所領域のテク
スチャを指定できます
❏ もちろん、自...
せっかく作ったマテリアル
さらに魅せる画作りをしよう!
スカイライトを配置すると、HDRなIBLの適
用も可能です。存在感というか実在感という
か…浮かずに、リアル間・そこにある感がア
ップ⤴︎
せっかく作ったマテリアル、魅せる
Before
After
(aokcubさん(http://aokcub.net/cg/dome/#author_info)の
AoSKYのOpenEXRの空を.hdrに変換して利用。
せっかくなのでレンズフレ...
ポストプロセスマテリアル
ポストプロセスもマテリアルのシステムが適
用できます
❏ Postprocess VolumeのBlendablesに設
定
❏ Blendable Location重要
❏ After Tonemapping
❏ B...
Color Gradingでの画作り
画面の色味の制御にはColor Grading
https://docs.unrealengine.com/latest/JPN/Engine/Rendering/PostPr
ocessEffects/C...
さらに
ポストプロセスマテリアル以外の方法は?
❏ Shading Modelを追加する方法もあり
❏ Unreal Engine 4 (UE4) Advent
Calendar 2014で公開予定
(http://qiita.com/adve...
ありがとうございました
❏ UE4 Advent Calendarまだ空きがありま
すので、ぜひ投稿してみてください。
http://qiita.com/advent-calendar/2014/ue4
❏ Oculus Rift DK2用のデ...
Upcoming SlideShare
Loading in …5
×

UE4のマテリアルを もっと楽しもう!~マテリアルでぐっと広がるリアルタイムCG表現の幅~

12,296 views

Published on

UE4のマテリアルをもっと楽しもう!
~マテリアルでぐっと広がるリアルタイムCG表現の幅~
という題で2014/12/6に開催されたUE4ビギナー勉強会(TOKYO#3)にてマテリアルのもろもろをご紹介させていただきました。

もんしょさんのこちらのご講演の後にさせていただいたので、もんしょさんのスライドを見てからの方がより深く理解できると思います。
http://monsho.blog63.fc2.com/blog-entry-147.html

Published in: Engineering
  • Be the first to comment

UE4のマテリアルを もっと楽しもう!~マテリアルでぐっと広がるリアルタイムCG表現の幅~

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

×