妹でもわかるUnrealEngine4

毎日更新? 妹に説明するために書いてるけど、たまにわかってない場合もあるUnrealEngine4を中心としたゲーム制作の話。略すとイモリアル

毎日更新? 妹に説明するために書いてるけど、たまにわかってない場合もあるUnrealEngine4を中心としたゲーム制作の話。略すとイモリアル

ポストプロセス LUTの弱点・階調化フィルタ

f:id:una_unagi:20170413014027p:plain

f:id:una_unagi:20170413014424p:plain

「昨日はピクセルの場所に関係ないフィルタならいけるって書いちゃったけど、厳密に言うとそれでも駄目なやつがある。例えば上のスクリーンショットは2値化フィルタを書けたLUTを使ってるんだけど」

妹「2値になってないね。グレーがいっぱいある」

「グレー部分が出来るのはポストプロセス処理が完全に無効化出来てないせいのもありそうなんだけど、二値化処理自体にも問題がある。LUTって、16x16の画像を横に16個並べた、256x16というサイズの画像を使ってる。でもこれだと色は4096種類しかない。RGBそれぞれが16段階しかないということ」

妹「わたしが知ってるやつは、0から255までと書いてあったような」

「今のパソコンの、いわゆるフルカラー表示というのはそうなってる。256階調。だからLUTにピッタリ同じ色がないっていう場合はしょっちゅうあって、そういう時はご近所の色から計算して中間の色で表示することになってる。だから黒と白の境界線あたりの色はグレーになる可能性がある。偶然そういう色がなければ2階調に見えることもあるだろうけど」

妹「白と黒だけで表示したい場合はどうすれば?」

「基本的にはポストプロセスマテリアルでやるのが良さそうな気がする。いったん16階調化するポストプロセスマテリアルを実行して、その後LUTを通すという案も試してみたんだけど、どうも狙った色にならずに成功しなかった」

ポストプロセスのカラーグレーディング

f:id:una_unagi:20170412000810p:plain

「ポストプロセスは色々面白そうなので、引き続き調査中」

妹「これは画面の色調を変えたの?」

「いやこれは変えない設定にしたつもりなのに、何故か変わっちゃってる件の調査」

docs.unrealengine.com

f:id:una_unagi:20170412001149p:plain

「この中のルックアップテーブル(LUT)というやつを試していたんだけど、公式サイトからダウンロードした、デフォルト値のテクスチャをそのまま使ってるのに、何故か色が変わってしまった。で、これは一箇所設定しないといけない場所があることがわかった」

f:id:una_unagi:20170412001505p:plain

「ルックアップテーブル用の画像は、2Dスプライトを作る時とかと同じで、テクスチャアセットとして読み込む。ただ設定値が2Dの場合とは違うみたい。ここをColorLookupTableと設定しておくと、なんか正しい色……つまり最初と同じ色になった」

妹「そのルックアップテーブルというのはどういう風に使うものなの?」

「原理としては、色ごとに対応表みたいなのを作って、その通りに色を置き換えていくという仕組み。基本の画像はRGBが綺麗に並んでるんだけど、その画像の赤があった部分を青に塗り換えておくと、赤いはずのポリゴンが全部青く表示される、みたいな。」

妹「その対応表作るのってむずかしくない?」

「1色ごとやると大変。普通はPhotoShopとかでフィルタをかけて使う。今回はKritaでやってみた」

f:id:una_unagi:20170412002206p:plain

f:id:una_unagi:20170412002316p:plain

「Kritaで調整した色合いと同じように、UE4の画面が書き換わる」

妹「なんだか気持ち悪い色に」

「ちゃんと調整する時は、LUT用の画像だけじゃなくて、元の画面のスクリーンショットも別レイヤで読み込んでおいて、同時にフィルタをかけるようにするといいらしい。今回は色が変わればいいやと思ってテキトウに作ってしまったけど」

f:id:una_unagi:20170412002743p:plain

「今回やったぐらいの加工だと、他のソフトでLUT作らなくてもUE4内の設定でも出来る。暗い部分だけ赤味を付けるなんてことも。ゲーム中の処理速度はLUTとどっちが速いのかわからないけど、こっちの方が色々手間かからなくて楽」

妹「あ、これって例えば、そのLUTというやつの画像をぼかしたら、画面もぼかせたりということは……」

f:id:una_unagi:20170412003317p:plain

f:id:una_unagi:20170412003321p:plain

「一応画面は変化するんだけど、思ったような変化はしなかった。ボカシ処理は画面上の隣のピクセルとの間を曖昧にしたいわけだけど、LUT画像で隣にあるピクセルとは無関係だから。ピクセルの場所に関係なく効くフィルタなら、想定通りの効果が出るはず」

ポストプロセスマテリアル実行のタイミング

f:id:una_unagi:20170410230351p:plain
After Tonemapping

f:id:una_unagi:20170410230523p:plain
Before Tonemapping

f:id:una_unagi:20170410230613p:plain
Before Translucency

f:id:una_unagi:20170410230713p:plain
Replacing the Tonemapper

「これは昨日作ったポストプロセスマテリアルの、空の網目模様を消したバージョンなんだけど、同じマテリアルでも実行のタイミングで全然見た目が違う、というのが今日のテーマ」

f:id:una_unagi:20170410230907p:plain

「設定場所は、マテリアルのエディタの中で、どのノードも選択してない時に出る詳細の欄にあるBlendableLocation。4種類の設定から選ぶ」

妹「なんだか見た目が違うというのはわかる」

「ポストプロセスは途中で色んな処理が入ってるから、どのタイミングでやるか、というので結果が違ってくる。ちなみに今まで作ったポストプロセスマテリアルは、全部AfterTonemappingで作ってた。これが初期値だから。タイミングとしては最後。ここで設定したエミッシブカラーはそのまま最終結果になる」

妹「他のは違うの?」

「BeforeTonemappingの場合だと、トーマッピングの前だから、その後に明るさとかの調整がある。だから線の色が黒のままじゃなく、少し薄くなってる部分がある」

妹「BeforeTranslucencyは線が消えちゃってるように見えるけど……」

「消えてはないんだけど、奥にある物体をぼかす処理の前に線を書き込んでる。それで線も含めてぼかしがかかってる。キャラクターの足元とかは線がわりと残ってる」

妹「そういえば線の部分の奥行きってどうなってるんだろ?」

「ポストプロセスマテリアルでは深度の上書きはしてないから、元々その場所にあった物体の奥行きになる。内側に線を入れる場合は物体と同じ奥行きだけど、外側に入れる場合は背景の部分の値のままだと思う」

妹「足元だけ線が残るのもそのせい?」

「足の部分は背景が手前側の床だから、わりと近い。でも頭や体は遠くの床とか階段だから、そっちと同じ強度のぼかしがかかってる状態」

妹「それもなんだか不自然な」

「そのへんの問題も考えて、どのタイミングでやるのが一番見栄えがいいかを考える必要がある」

妹「ReplacingTonemappingというのは? なんかこれだけ妙にどす黒いけど」

「これはトーマッピングの最中に割り込む設定。これはちょっと特殊だから、それ専用のマテリアルを作る場合以外は使わないはず。普通にやるとポストプロセスを無視した素の状態の色が出てくる」

f:id:una_unagi:20170410232100p:plain

f:id:una_unagi:20170410232109p:plain

「複数のポストプロセスマテリアルを併用する場合も、順番をどっちが先にするかは大事。ぼかしと輪郭線、どっちもAfterTonemapptingで、ただ順番だけが違うという設定」

妹「これだったら、上の方がいいかなあ」

「その場合は、輪郭線マテリアルを先にして、ボカシは後にする」

f:id:una_unagi:20170410232503p:plain

「BlendbleLocationが同じマテリアル同士の場合、BlendblePriorityでどっちが先か決まる。数字が大きい方が後で、初期値は0。他のより先にしたい時にマイナスを入れるのもあり」

妹「その数字も同じだった場合は?」

「その場合でもやっぱり順番にやってるみたいけど、どういう仕組みで順番が決まってるのかはわからなかった」