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

妹でもわかるUnrealEngine4

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

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

UMGウィジェットにポストプロセスは効かない

「ウィジェットを配置してて、ふと気になったので確認したんだけど、ウィジェットの表示にポストプロセスは効かないみたい。2値化を無視して元の色が出てくる」妹「それはポストプロセスマテリアルだけ? それともポストプロセスっぽいの全部?」「たぶん全…

ポストプロセスマテリアルによる簡易LUT

「ルックアップテーブル(LUT)による色変換で、色々情報をもらったんだけど、今のところ中間色が出ないようなLUTを使う方法は見つかってなくて、それでポストプロセスの標準機能ではなく、マテリアルでそういう処理を組めばいいのでは? と思ってやってみたの…

ポストプロセスマテリアルを使った2値化+輪郭線

「LUTによる2値化は上手く行かなかったので、ポストプロセスマテリアルで作ったみた」妹「白黒じゃないんだ」「原理的にはこれ何色でもいいから、今回は淡い色合いにして、それにプラスして先日作った輪郭線のマテリアルも入れた。どっちもタイミングの設定…

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

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

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

「ポストプロセスは色々面白そうなので、引き続き調査中」妹「これは画面の色調を変えたの?」「いやこれは変えない設定にしたつもりなのに、何故か変わっちゃってる件の調査」docs.unrealengine.com「この中のルックアップテーブル(LUT)というやつを試して…

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

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

マテリアルによるトゥーンアウトライン研究(9) 外側にアウトライン生成するポストプロセスマテリアル

「研究の結果、だいたい納得のいくマテリアルが出来た」妹「これは外側に線入ってるの?」「多分そうなってる……と思う。虫眼鏡でじっくり調べたわけじゃないけど、線を太くしても中のキャラクタの大きさ変わらなかったから上手くいってるはず」ポストプロセ…

マテリアルによるトゥーンアウトライン研究(8) 内側と外側のどちらに線を入れるか

妹「線を内側に出すのと外側に出すのって、そんなに違うものなの? お絵かきソフトとかでやる時はあんまり変わんなかったと思うんだけど」「内側と外側というのは、より手前にある物体の表面に線があるか、奥にある物体の表面に線があるかという違いなんだけ…

マテリアルによるトゥーンアウトライン研究(7) 先行事例の研究

qiita.com「UE4を使ったトゥーンレンダリング(ノンフォトリアル)の事例はいくつかあるんだけど、説明が日本語で、かつ導入が簡単なのがEpicのシモダさんが作った物。ポストプロセスマテリアルがすぐ使える状態で公開されてる」「これは線がみやすいように…

マテリアルによるトゥーンアウトライン研究(6) 法線データの参照

「アウトラインを出す方法には、深度(奥行き)を使った方法の他に、法線を使った方法もあるらしい。法線が急に大きく変化してる場所は、ポリゴンの角度がきつい場所なんだから、そこに線を入れとけばいいという考え方」妹「法線ってなんだっけ? 聞いたこと…

マテリアルによるトゥーンアウトライン研究(5) シンプルすぎるアウトライン表示

「まずはサンプルのマテリアルを調べようかと思ったけど、必要のなさそうな部分がかなりあってわかりにくいかったら、まずは細かいことを考えずに深度から単純に線を引くようなマテリアルを作ってみた」妹「線でてないとこが結構あるね」「深度差のとこを100…

マテリアルによるトゥーンアウトライン研究(4) サンプルのマテリアルを別プロジェクトに入れてみる

「しばらく脱線してたけど、今日からはまたトゥーンアウトラインの方をやる予定」前回の記事 imoue.hatenablog.com「まずはStylizedRenderingのポストプロセスマテリアルを、テンプレートプロジェクトに移行する。これで線がどういう感じになるかの確認」「…

色んなポストプロセスマテリアルを見て回る

「ラジアルブラーのポストプロセスマテリアルは上手くいったけど、他にももっと色々良いのあるんじゃないかと思って調べてみた」docs.unrealengine.com unrealengine.hatenablog.com「まずマテリアルを使わなくても、標準のポストプロセスで出来ること、とい…

ポストプロセスマテリアルで中心以外をぼかす(8) マテリアルブループリント版のラジアルブラー

「妹がラジアルブラーのやつでもう少し綺麗にぼかしたやつが欲しいというので、マテリアルブループリントに移植したやつを作った。なかなか大変だった」妹「いいじゃんいいじゃん、こういう感じ」「今回は見栄えをよくするために、サンプルのSunTempleプロジ…

マテリアル用デバッグ命令

「マテリアルを編集してると、この計算合ってるのかな? と不安になることがあるんだけど、そういう時に便利なのがDebugなんとかという命令。例えばDebugFloat2Valueノードと使うと、Vector2の数字が画面に表示できる。ウィンドウが小さいと上手く表示されな…

ポストプロセスマテリアルで中心以外をぼかす(7) ラジアルブラーでぼかす

「海外フォーラムでラジアルブラーという、中心から広がるようなボカシ方の、カスタムマテリアルを見つけたから、今日はそれを試してみた。中心からだんだんボケていくというのは、こっちのイメージが近いんじゃないかと思って」妹「それはいいと思うけど、…

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

妹「こりゃ妹にはわかりませんな……」「やってることはマテリアルブループリントで作ってたのと同じで、周囲81ピクセルの色を均等に混ぜるやり方。昨日までのはプログラムといっても1行だけだったけど、ループをさせるとなるとなかなかそうもいかなくて。ブ…

ポストプロセスマテリアルで中心以外をぼかす(5) CustomノードからSceneTexture:PostProcessInput0を取得する

「とりあえずCustomノードから、PostProcessInput0の数字を調べることに成功した。そのままだとちゃんと計算出来てるのか、それともマテリアルが無効になってるのかわからなかったから、とりあえず✕3して、明るくなるようにした」SceneTextureLookup(uv, 14,…

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

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

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

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

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

「グラデーションのかかった円の処理は出来たから、次は画面をぼかす仕組みを作る。円を描くノードがなかったのと同じで、ぼかすというノードもないので、またどうにかして計算式を作る」・現在表示中のピクセルから1つ上のピクセルの色を取得 ・現在表示中…

ポストプロセスマテリアルで中心以外をぼかす(1) マテリアルによる円の表示

妹「ポストプロセスのやつなんだけど、ひょっとしてこれ使うと画面の中心以外をぼかすっていうのが出来たりしない?」「できると思うけど、何に使うの?」妹「ロックオンしてる時とかに、そこ以外あんまり見えない感じの演出をやりたいと思ったことがあるん…

マテリアルによるトゥーンアウトライン研究(3) SceneTextureノードの色々

SceneTexture:SceneDepth(を6000で割った物)「ポストプロセスマテリアルの中では、色以外の情報も色々操作できる。だいたいSceneTextureというノード経由で、各ピクセルごとの情報を調べることが出来る。あんまり使わなそうなのもあるけど、上の画像は、そ…

マテリアルによるトゥーンアウトライン研究(2) ポストプロセスマテリアルとは何か

「StylizedRenderingサンプルは全体的にイラスト風の表示になってるけど、おおまかにわけると3つの処理に分かれてる」・色の塗り方をアニメ風に(セルシェーディング)→普通のマテリアル ・画用紙っぽい質感→ポストプロセスマテリアル ・黒の輪郭線→ポスト…

マテリアルによるトゥーンアウトライン研究(1) とりあえず眺めてみる

「マテリアルを使い方もだいぶわかってきたから、今度はちょっとトゥーンレンダリングというやつをやってみようと思う」妹「ゼルダみたいな?」「ゼルダのは色の塗り方というか、光のあたり方を調節してるやつだと思うんだけど、どちらかというと輪郭線の方…

Paper2D用のマテリアルを作る(5) SpriteTextureSamplerをコピーした後は名前を戻す

「今回マテリアルで色々遊んでいて発生したトラブルなんだけど、コピーして作ったSpriteTextureSamplerノードに、色々ピンをつないでも正常に表示されない。名前のところが SpriteTexture_1 と、この_1が付いてることによって、正常に表示されなくなる」妹「…

Paper2D用のマテリアルを作る(4) StaticSwitchParameterで複数の処理を分岐させる

マテリアルとマテリアルインスタンスの仕組みと問題点の共有 (Epic Games Japan: 篠山範明) #UE4DD from エピック・ゲームズ・ジャパン Epic Games Japan www.slideshare.net「先日UE4のマテリアルの勉強会があったらしいんだけど、これによるとStaticSwitch…

Paper2D用のマテリアルを作る(3) いい感じに色を混ぜる

「昨日なんでグレースケール化処理をやってたかというと、グレースケールにした後でSpriteColorと混ぜた方が、発色が綺麗になるから。といってもこのへんは好みの問題もあるんだけど」妹「右の方は緑っぽいね」「冠とか肌とかの黄色成分が残ってるから、水色…

Paper2D用のマテリアルを作る(2) グレースケール化

「まずはグレースケールにするマテリアルというのを作ってみる。グレースケール化というのは、RGBから輝度に変換する処理だから、そういうマテリアルになってる」妹「輝度というのは……」「明るさの一種なんだけど、なんというかこう、お絵かきソフトに付いて…

Paper2D用のマテリアルを作る(1) まずはコピーして基本構造の調査

「ゲーム作りの途中なんだけど、2~3日ほど脱線して、マテリアル作りをやろうと思う。」妹「色違いのやつ?」「それもあるんだけど、ダメージエフェクトとかチャージとかみたいな処理でも、自作マテリアルは要りそうな気がするから、ここで一通り調べとこ…

水のマテリアル研究⑬ 反射ではなくベースカラーで対処する案

「HTML5でもちゃんと表示できる水マテリアルの2つ目の案。そもそも反射しない水を作ろうと言うもの。波模様をそのままベースカラーに入れる」妹「白黒の模様に、色をつけてるの?」「最初は画像自体に色の付けようとして、加算レイヤで重ねようとしたんだけ…

水のマテリアル研究⑫ 反射しそうなところにベースカラーで色をつける

「反射してるとこって、光を反射してちょっと白っぽくなってるから、白くすればいいんじゃないかなあ……という考え方で作ったマテリアル。これはHTML5の表示。反射とは違うから、緑のブロックの近くが緑になったりはしてない。一律に白っぽくなる」妹「あー、…

水のマテリアル研究⑪ HTML5にすると金属が鏡面反射してない

「だいたい水の構造がわかったので、懸案事項の1つだった、HTML5だと水がなんか変だという問題に着手する」「やっぱり水の色が変。というか、メタリックの数値が効いてない感じがする」 「謎の要素とかがないようにシンプルに組んだけど駄目だった。パソコ…

水のマテリアル研究⑩ ノーマルマップの合成

「これまでの研究で、M_LakeWater_01マテリアルの構造はだいたい解明できたけど、もう1つちょっと変なのが残ってる」「2つのノーマルマップをAddノードで接続してる。これは2つの法線ベクトルの中間、足して2で割ったような角度になる。同じのを2つ足し…

水のマテリアル研究⑨ ノーマルマップの色が場面によって違う理由

「ノーマルマップの画像っていうのは、青みがかった灰色が初期値、つまり法線をいじってない状態になるんだけど、これがUE4で読み込むともっと濃い青の画像になる。その理由を図にするとこんなかんじになる」「要するに画像にマイナスの色というのがなくて、…

水のマテリアル研究⑧ 数字やテクスチャの調整はマテリアルインスタンスを作ると速い

「昨日のやつで、ノーマルマップがどんなのでも波に見えるんじゃないか? という疑問があったので、ちょっと試してみた。その結果、ただの十字状ノーマルマップだと水には見えないというのがわかった」妹「そりゃあそうなるでしょう……」「で、こういうのを試…

水のマテリアル研究⑦ 自分でノーマルマップを作る

「ではノーマルマップを自分で作ってみよう、って話になるんだけど、といってもRGBを法線のベクトルと考えてイラストを描く……なーんてことは、人類にはちょっと難しい」妹「とすると……ZBrushとかで水面を作るとかしないと駄目なのかなあ?」「それも含めて、…

水のマテリアル研究⑥ ノーマルマップで生成される波

「いよいよ一番むずかしそうな、ノーマルマップの部分に入っていく。ノードのほとんどがこのノーマルマップに関わってる」妹「ノーマルマップなってなんだっけ? なんか聞いたことあるような気はするんだけど」「ポリゴンの形を変えずに、光が反射する方向を…

水のマテリアル研究・番外編 Motion_4WayChaosで変な画像を表示する

「Motion_4WayChaosの動作は、別の画像に差し替えるともっとわかりやすくなるのでは? と思って、適当な矢印画像を作ってみたんだけど、あんまりわかりやすくはならなかったかも」妹「すけた矢印がたくさん動いてるってのはわかった」「本当は進行方向に合わ…

水のマテリアル研究⑤ Motion_4WayChaosというマテリアル関数の仕組み

「水マテリアルのノーマルとラフネスのところは、ノード数はそんなに多くなさそうに見えるんだけど、途中にMotion_4WayChaosというマテリアル関数が入ってて、この中身が結構ボリュームあるから複雑になってる。でも波がうにょうにょ動く部分なんで重要」「…

水のマテリアル研究④ ワールド座標を使ったマテリアル

「マテリアルの中にワールド座標(WorldPotision)っていうノードがあるんだけど、これが結構重要で、水のマテリアルを見ると、ラフネスとノーマルの複雑なやつの最初も全部これになっている」「これは”そのピクセルがワールド座標でいうとどのへんなのか?”を…

水のマテリアル研究③ ラフネスを下げないと水面に反射しない

「昨日メタリックにしても反射しなかったのは、ラフネスが標準値だったから。ラフネスが0がツルツル、1がザラザラになる。標準値は0.5だからあんまり反射しなかった」「ラフネス値のノードを見ると、実はLerpで0.15と0.15を混ぜてるので、Alphaに何をつない…

水のマテリアル研究② 水は金属なのかどうか

「水のマテリアルを見ていると、メタリックの数値が0.8になっていた。これは金属っぽさを表す数値で、0は金属じゃないやつ、1は金属のやつ。錆びた金属なんかが中間になるらしい」妹「水は……金属ではないよね? 多分」「そうだけど、水面は鏡のように顔が映…

水のマテリアル研究① 近い場所と遠い場所、水の色が違う

「昨日色々話を聞いてきたんだけど、水のマテリアルは複雑だけど1つ1つ見れば解読は可能だという話をしてて、これはちょうど気になってるやつだったから、今使ってるやつを解読してみようかと」「今回の目的としては、これをなんとかしたい。何かシミみた…

HTML5用の水マテリアル研究

「しばらく進んでなかったUnrealEngine4のゲームのHTML5出力計画だけど、ラーニングのとこにある"水面の表現"のとこにあるサンプルアセットをHTML5化して実験したところ、M_LakeWater_01_Instを使うといい感じに出来ることがわかった」妹「あれおかしいな。…

HTML5用の水面調整

imoue.hatenablog.com の話の続き妹「ちょっと水面のマテリアルを別のに変えてみたんだけど、これでHTML5にするかどうなるだろ?」「今度は水っぽいね。砂っぽくはない」妹「でもちょっと光の反射がきついかなあ……」 Windows版で表示したもの「反射自体はあ…

とんびとあぶらあげ HTML5化実験

「先日妹が作ったゲームをHTML5用にパッケージ化してみようと思って、一応成功はしたんだけど……なんかこんな感じになった」妹「今回は変数とかも全部英語にしてあるからバッチリ。……って、地面が砂になってるじゃないか!」「なんかこうなってた。多分水のマ…

油揚げのマテリアル

妹「油揚げに色がついた」「これはどうやったの? マテリアル?」妹「マテリアルに、たしか地面だったかな、サンプルのやつの。そこからノーマルマップを流用した。ツルツルだとやっぱりおかしいから、微妙なデコボコ感が必要」妹「そして色も変えたらそれっ…

エビフライのマテリアル

妹「そういえば、昨日は結局マテリアルをどうやって設定したか書いてなかったんだけど」「あんまりたいした話ではないんだけど、まずBlenderで保存したfbxを読み込む。ZBrushで作ったfbxそのままでもいいけど、その場合やっぱりサイズが小さすぎるから、小さ…

3DCoatを使って色を塗ろうとした

「着色はZBrushで出来るんだけど、今回は3D-Coatを使ってみようかと思う」妹「聞いたことない単語ですぞ」「だいぶ前にセールの時に買ったんだけど、なんか上手く使えなくてそのままになってるソフト」妹「もったいない……でも使えないんじゃ駄目なのでは?」…