BLOGブログ

2015.07.31UE4/Material

[UE4] Imposterを使ってみる(多視点対応のビルボード)

今回の記事では、Imposterという機能をご紹介します。

 

Imposterを使うと視点によってテクスチャ(フリップブック)が切り替わる特殊なビルボードを作ることができます。

下のキャプチャはStarter Contentsに入っているイス(SM_Chair)のメッシュから作成したテクスチャを、Imposterを使ってビルボードとして表示したものです。

20150731_ImposterDemo01

 

 

 

 

ただの板ポリにもかかわらず立体物に見えるという面白い視覚効果が得られます。

 

では、Imposterを使ってみましょう。 大まかな流れは以下のとおりです。

1.  RenderToTextureブループリントを設定

2. Imposter用のテクスチャを画像ファイルとして保存

3. テクスチャを読み込み、Imposter用のマテリアルを設定

※UE4のバージョンは4.8.3を使用しています。

 

 

1. RenderToTextureの設定

まず、Starter Contentsを含むプロジェクトを用意し、新しい空白のLevelを作り開きます。

コンテンツブラウザー右下のView OptionsでShow Engine Contentをオンにして、Engine ContentからRenderToTexture_LevelBPというブループリントを検索します。

20150731_Imposter01

 

 

 

 

 

 

RenderToTexture_LevelBPをワールド座標(0,0,0)に配置します。

Transformは初期値以外の値が入っていない状態にして下さい。

20150731_Imposter02

 

 

 

 

次に、GameModeを切り替えます。

World SettingsよりGame Mode OverrideをRenderToTexture_Gameに変更します。

World Settingsが表示されていない場合は、上部のWindowメニュー内にチェックが入っているか確認して下さい。

20150731_Imposter03

 

 

 

 

 

では、Levelに配置したRenderToTexture_LevelBPを選択して、Detailパネルから下図のように設定します。

20150731_Imposter04

 

 

 

 

 

 

 

Caputure Settings項ではRender Typeを 3D Imposter Spritesに設定し、出力するテクスチャの解像度やマテリアルの要素を決定します。

 

Render 3D Imposter Sprites項では、キャプチャするメッシュを指定し、Frames Around Z Rotationで一枚のテクスチャに収めるフレーム数を決定します。

Imposterはテクスチャの切り替えにフリップブックを使用しています。

この数値を大きくすれば切り替わりが滑らかになりますが、その代わりに1フレーム当たりの解像度は小さくなります。

また、Imposter Enumで視点の軸を制限できるので、遠景に表示するものなど上下の視点変更に対応する必要がないならば、ここで指定しておきましょう。

メッシュを指定するとビューポートに次のような変化が起きます。

20150731_Imposter05

 

 

 

 

 

 

 

 

メッシュが指定したフレーム数で複製配列されていますね。

右下カメラプレビューを見ると、次の工程で保存するテクスチャがどのようなものかわかります。

 

さて、最後の設定としてメッシュマテリアルのNormalを調整する必要があります。

SM_Chairに割り当てられているM_Chairを開きましょう。

20150731_Imposter06

 

 

 

 

上図のように、まずMaterial項のTangent Space Normalのチェックを外しオフにします。

次に、ノーマルマップをTransformImposterNormalsというマテリアルファンクションを経由して、マテリアル入力につなぎます。

マテリアルを保存し適用したら、RenderToTextureの設定は以上です。

 

2. Imposter用のテクスチャを画像ファイルとして保存

では、次にテクスチャを画像ファイルとして書き出します。

テクスチャの書き出しはConsole Commandで行ないますが、先にHigh Resolution Screenshotウィンドウを開いておく必要があります。

ビューポート左上の▼からHigh Resolution Screenshotを開き、 Include Buffer Visualization Targetsのチェックを入れます。

なお、このフローティングウィンドウは閉じずにそのまま開いたままです。

20150731_Imposter07

 

 

 

 

 

 

PlayからNew Editor Windowを選びます。

20150731_Imposter07b

 

 

 

 

 

 

 

 

@を押し、ウィンドウ下部にConsoleが表示されたら

ke * rendertextures

と入力しEnterを押します。

 

20150731_Imposter08

 

 

 

 

するとプロジェクトフォルダ以下\Saved\Screenshots\Windows\内にテクスチャが.png形式で保存されます。

これでImposter用のテクスチャが作成できました。

 

3. テクスチャを読み込み、Imposter用のマテリアルを設定

では、保存されたテクスチャをコンテンツブラウザに読み込み、マテリアルを設定していきましょう。

今回は、BaseColor, DecalMask, Roughness,WorldNormalの4種類のテクスチャを読み込みました。

20150731_Imposter08b

 

 

 

 

テクスチャを読み込んだら、ダブルクリックしてTexture Editorを開き、sRGBのチェックを外しておきます。

WorldNormalのテクスチャに関してはDetailのCompression項からNormalMapに設定を変更します。変更と同時にTexture項のsRGBのチェックも外れます。

20150731_Imposter09

 

 

 

 

 

 

 

 

では、新規マテリアルを作成し下図のようにノードを組みます。

20150731_Imposter10

 

 

 

 

 

 

先程と同様に、Material項のTangent Space Normalのチェックを外しオフにしておきます。

マテリアルのBlend ModeはMaskedに変更します。

ImposterUVsというマテリアルファンクションを呼び出し、そこからのUV出力を各テクスチャのUV入力に繋げるようにして下さい。

ImposterUVsのFramesX,Yは前述のフレーム数です。

SpriteWidth,Heightは表示サイズとなります。

 

このマテリアルをPlane(板ポリ)に貼り付ければ完成です。

20150731_ImposterDemo02