読者です 読者をやめる 読者になる 読者になる

妹でもわかるUnrealEngine4

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

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

ポストプロセスマテリアルで中心以外をぼかす(4) Customノードのテスト

f:id:una_unagi:20170325235438p:plain

「Customノードというのは、マテリアルの中身をプログラムとして書けるノードのこと。普通のブループリントでいう数学式(MathExpression)ノードのような働きをする。といっても数学式ノードも使ったことなかった気がするんだけど」

妹「使ったことないね」

「とにかく作ったばかりのCustomノードというのは、Code欄に1が入ってるだけの、ほとんどプログラムに見えない状態。そしてOutputがFloat3の設定になってるから、3要素が全部1のVector型が出力ピンから出てくる」

妹「Float3? Vector3じゃなくて?」

「Customノードのプログラムではそういう風に書く。HLSLという言語で、これはUE4とは関係なく作られた物だから、細かい用語とか違いがある。C++言語に似ている」

f:id:una_unagi:20170326000517p:plain
他の数値を指定すると色が変わる

f:id:una_unagi:20170326000548p:plain
float3型のデータを作って、3要素それぞれを指定した色が出力ピンから出てくる

「このへんはすごく簡単。簡単だけど、簡単なのだったらあんまりCustomノード使う意味がなかったりする」

妹「これのドキュメントはどこにあるの?」

docs.unrealengine.com

「これ以外にそれらしい物は見つからなかった。HLSL自体のマニュアルをながめながら、いくつかある日本語を解説記事をみて、だいたいの勘で作るみたいな。上級者向けの機能ということで、そのへんは説明しなくてもわかるだろうという扱いになってる」

妹「そんな難しいやつじゃなくて、ループできるノードだけあればいいと思うんだけど……」

「ループで困った人はだいたいCustomノード使ってるみたい。それか昨日みたいな仕組みで強引に乗り切るか。兄もHLSLは使ったことないから、とりあえず今回はボカシに使いそうなノードに限って調べてみる」

ポストプロセスマテリアルで中心以外をぼかす(3) もっと真面目に画面をぼかす

マテリアル UE4.15

f:id:una_unagi:20170325010407p:plain

「昨日は4つのピクセルの色を平均する、というやり方でぼかしてたけど、今日はなんと9x9で81ピクセルの平均を取るやり方にした。とはいえ81回分もノードを組み合わせるのはやってられないので、マテリアル関数を使って整理した」

f:id:una_unagi:20170325010703p:plain
全体図

f:id:una_unagi:20170325010711p:plain
指定された近辺9ピクセルの色を数値として足す

f:id:una_unagi:20170325010718p:plain
指定したピクセルの色を数値とした足す

「流れとしては、昨日と同じ、色をどんどん足していって、最後にその回数で割るというもの。それが効率よく出来るように"ピクセルの色を調べて足す"という流れを関数にしてある。そして中間用にさらに9ピクセル分調べて足す関数を作ってある」

妹「整理するっていうからForLoopとか使うのかと思ったら違うんだ」

「マテリアルにはそういう感じのノードがないんだよ。だからノードでつなげていくのが手作業になって難しい」

妹「うーん、昨日よりは綺麗にぼけてるけど、まだだいぶ見えてるなあ。もう少しぼやけた感じがいいなあ……」

「9回ずつじゃなくもっと増やしていけばボケ方は強くなる。あとは昨日みたいに隣じゃなくちょっと離れた位置のピクセルを参照する手も。ただそういう調整は毎回やるの大変なので、あしたはCustomノードを使った方法を試してみる予定」

ポストプロセスマテリアルで中心以外をぼかす(2) 画面をぼかす

マテリアル UE4.15

「グラデーションのかかった円の処理は出来たから、次は画面をぼかす仕組みを作る。円を描くノードがなかったのと同じで、ぼかすというノードもないので、またどうにかして計算式を作る」

・現在表示中のピクセルから1つ上のピクセルの色を取得
・現在表示中のピクセルから1つ左のピクセルの色を取得
・現在表示中のピクセルから1つ右のピクセルの色を取得
・現在表示中のピクセルから1つ下のピクセルの色を取得
・4つのピクセルの、色を足して4で割る

「とりあえずこんな感じの処理を考えてみた。ポストプロセス中の画面は、内部的にはテクスチャになってて、そのテクスチャを加工する形になるから、テクスチャ上のピクセルという意味でテクセルという言い方をする」

妹「テクセルだとどう違うの?」

「まあ、小さいテクスチャを拡大して表示したり、逆に縮小したりするから、画面のピクセルとは一致しない場合があるから、そのへんを区別してるらしい。ポストプロセスの場合は多分1ピクセル=1テクセルの寸法でやってるから同じだと思う。機種によっては違うかもしれないけど」

f:id:una_unagi:20170323230537p:plain

「で、これがぼかしてみたやつなんだけど……一応左側半分はそのままで、右側にはボカシがかかってる」

妹「ぜんぜんわからん」

「わかんないよね……どうも周囲1ピクセルを混ぜたぐらいじゃ効果が薄いらしい。普通お絵かきソフトのボカシ機能とかも、もっと広範囲のピクセルを混ぜるものだから」

f:id:una_unagi:20170323230734p:plain

「これはちょっと改良して、3つ上、3つ左……と、ちょっと離れたところのピクセルを混ぜてみた」

妹「なんか変わってるのはわかる。でもまだちょっと弱いような」

f:id:una_unagi:20170323230924p:plain
上下左右に8離れたピクセルを参照

f:id:una_unagi:20170323230934p:plain
上下左右に20離れたピクセルを参照

f:id:una_unagi:20170323231159p:plain
現時点のポストプロセスマテリアル

「数を増やしていくと、ぼやっとはしてくるんだけど、ボカシというよりモザイクみたいな残像になる。結局距離を離しただけで4ピクセルなのは変わってないから、どうしても滑らかさが足りない」

妹「4つじゃなくて、もっと増やしてもいいのでは?」

「そうなんだけど、このままの設計で増やしていくとマテリアルがごちゃごちゃになるのは明らかだから、もうちょっと追加や変更がしやすいように改良が必要」

f:id:una_unagi:20170323231423p:plain

「ちなみにこれが、今日のぼかし(20版)と、昨日の円表示と組み合わせた物」

妹「何か処理がかかってるのはわかるけど、なんか回りがよく見えすぎな気がする。もうちょっとよく見えなくなっててほしい」

「円部分の白と黒とのバランスの問題もあるけど、ボカシの強度も足りないだろうね」