妹でもわかるUnrealEngine4

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

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

ポストプロセスマテリアルで中心以外をぼかす外伝 縦方向にぼかす

f:id:una_unagi:20180221000239p:plain

imoue.hatenablog.com

「以前作った……というかパクった、ラジアルブラーの作り方なんだけど、これを縦方向にするのは可能なのだろうか? という質問をもらったので、マテリアルのリハビリを兼ねて作ってみた」

f:id:una_unagi:20180221000421p:plain

「ラジアルブラーというのは、こういう画面中心に向かってぼかす感じのやつで」

妹「あーそういうのやったね。やったということは覚えている」

「原理としてはあの時のとほぼ同じ。ピクセルごとに周りの色と混ぜるという仕組みの、"周り"をどこにするかの違い。そのピクセルと画面中央との直線を基準にすれば円形に、中央は無視してそのピクセルの真上と真下とを混ぜれば縦のぼかしになる」

f:id:una_unagi:20180221001003p:plain

int TexIndex = 14;
float samples[10] = {-0.08,-0.05,-0.03,-0.02,-0.01,0.01,0.02,0.03,0.05,0.08};

/* 円形の時は毎回角度を調べるけど、今回は下で固定 */
/* (マイナスの数字を掛けると上になる) */
float2 dir = float2(0,1);
 
float4 sum = SceneTextureLookup(UV, TexIndex, false);
float2 pos = float2(0.0,0.0);
for(int i = 0; i<10; i++)
{
    pos = UV + dir * samples[i] * sampleDist;
    max(min(pos, ScreenMult * float2(1.0, 1.0)), float2(0.0,0.0));
    sum += SceneTextureLookup(pos, TexIndex, false);
}
sum *= 1.0/11.0;
return sum;

「ラジアルブラーのマテリアルから変更が必要な箇所は2つ。まずカスタムノードの、ボカシの方向を決めるところを変える。ボカす方向は常に真下と真上になるので、ここは固定値でよくなる。そもそも変数にする必要もなくなるけど、一応比較がしやすいように最低限の変更で」

f:id:una_unagi:20180221000201p:plain
今回は縦に

「次に中央部分だけぼかさない処理。これもラジアルブラーの時は円形だったけど、今回は縦に直した。マテリアルの下側の部分を直接エミッシブカラーにつなぐと、こういう感じになる」

f:id:una_unagi:20180221001841p:plain
前回は円形にくりぬいた

「なぜこのマテリアルでそうなるかという説明はむずかしいんだけど、縦横を考慮すると円になるわけだから、縦の部分だけ取り出して計算したというか。ともかくこれをLerpにつないで、白い部分はほぼ元の色のままで、黒い部分には周囲の色が強く出るようになる」

f:id:una_unagi:20180221001712p:plain
縦にボカしただけで出力した場合

「円のままでもそんなに違和感は出ないけど、Lerpせずにぼかした結果をそのまま出すとこうなるので、やっぱりなんからの形でボカシの強度にメリハリをつけた方がいいんだろうと思う」