UE4のマテリアルを もっと楽しもう！

～マテリアルでぐっと広がるリアルタイムCG表現の幅～

シモダジュンヤ（Epic Games） twitter @junyash UnrealEngine.com

講演内容（告知ページ向け）

UE4のマテリアル楽しめてますか？ 怖くないですよ～＼(^o^)／ 活用できれば表現の幅がぐっと広がります。 というか、使いこなせるとUE4がメチャクチャ楽しくなってきます。 ぜひ今回の勉強会で得られたノウハウを実際にエディタ上で試してみてください！

本日は…

このセッションではPBRの話はしません 期待されていたかたごめんなさい (^_^; この辺は最近、茄子さん（@nasubi_s）の背景アーティストのブログ（http://envgameartist.blogspot.jp/）が熱く、ここ数日も今日登壇されたもんしょさん（@monsho1977）や他の皆さんとtwitter上で熱いトークが繰り広げられています。 ぜひお二方をフォローしておきましょう！

そもそもUE4のマテリアルって何？

ノードベースのシェーダーです ❏リアルタイムプレビュー

（プレビューウインドウはもちろんノード内も）

ただしシェーダーのコンパイルが裏で走る

❏マテリアルインスタンスは完全にリアルタイム ❏ マテリアルで定義されたパラメータをリアルタイ

ム編集

オススメの機能

マテリアルインスタンス（超絶オススメ！） ❏シェーダーグラフを共用して制作を効率化 ❏シェーダーの切り替えや使用メモリの削減 ❏エディタ上でリアルタイムに編集可能 ❏ゲームプレイ中リアルタイムに変更可能！ マテリアル関数 ❏良く使われるグラフを関数化して共用

シェーダー言語は使えるの？

はい、実はEngine/Shadersフォルダ内にHLSLで書かれたシェーダーがあります Shift+Ctrl+.(ピリオド)でエディタ上からコンパイルさせる事が可能です

ワールド位置オフセット

基本的にはバーテックスシェーダー内で モデルの頂点にオフセットを掛けるモノ 頂点ごとに異なるオフセットを掛けるのが肝 過去のタイトルでの利用例 ❏敵が船の一部を食べたり ❏風になびく旗や草木 ❏How to identify vertex/position/ID?

❏ World/Local position, vertex color, extra UV.

ワールド位置オフセット・デモ

デモ ❏スケール ❏回転

❏ 法線が回転しない事への対処は？ →Normalに繋ぐ法線を回転してあげる

❏回転の中心や軸をずらす ❏高さに応じて回転角を変える

❏ どんな見栄えになると思います？ https://vine.co/v/OUVWBXvjEQi

ペイント機能を活用せよ！

レベルエディタでペイントでき、マテリアルで 頂点カラーやテクスチャを自由に参照できる！ ❏頂点ペイント ❏テクスチャペイント 使いドコロ ❏単純な例だと汚しのブレンド ❏風になびく葉や草のゆれ具合 ❏ Material Layerで自由に合成

マテリアルでメッシュをカット？

幾何学計算でピクセルを削る ❏球でくり抜く

❏ 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/latest/JPN/Resources/Showcases/RealisticRendering/index.html)

Forum (https://forums.unrealengine.com/showthread.php?8957-Fur-Shader)

小技集(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 ❏ Before Tonemapping ❏ Before Translucency

Color Gradingでの画作り

画面の色味の制御にはColor Grading https://docs.unrealengine.com/latest/JPN/Engine/Rendering/PostProcessEffects/ColorGrading/index.html

❏ Postprocess VolumeのColor Gradingに設定

さらに

ポストプロセスマテリアル以外の方法は？ ❏ Shading Modelを追加する方法もあり

❏ Unreal Engine 4 (UE4) Advent Calendar 2014で公開予定 （http://qiita.com/advent-calendar/2014/ue4）

❏独自のライティングは別のアプローチも ❏ Stylizedデモの雲はマテリアルパラメータコレク

ションで、ライトの位置や色を与えてマテリアル内で適用というアプローチを利用

ありがとうございました

❏UE4 Advent Calendarまだ空きがありますので、ぜひ投稿してみてください。 http://qiita.com/advent-calendar/2014/ue4

❏Oculus Rift DK2用のデモ（もちろんUE4のもの）も懇親会で体験できます。