【UE5】ポストプロセスマテリアルで遊んでみた 楓 – Unreal Engine 5.3

Unreal Engine

水ノ茉の宣伝

準備中...
ゲームを作る予定なの
水ノ茉こおり

始まり

フルスクリーンシェーダーで遊びます。

元ネタの調査

まずは Paint Bucket > Flood Mode: Global にしてパターンを見ましょうか。

6色ですね。

配置は適当にUVずらしたりタイルマスクすれば良さそうですね。

計算量の削減とか綺麗な実装は知らんです。

数学とか訳分からん。

デザイン系はUVをmodにぶち込めば大体解決するのでそれで進めますわ。

実装

ベースとなるノードの配置はこんな感じ。

三角形のサイズをピクセルで指定したかったのでスクリーン座標です。
あとは画面のリサイズ時に形状サイズが変わらないようにとかもありますが。

次に三角形をグリッド配置するのがこんな感じ。

float2 UV = 1.0 - fmod(BaseUV, 1.0);
float2 Tri = float2(step(UV.x + 0.5 * UV.y, 1.0), step(0.0, UV.x - 0.5 * UV.y));
float Alpha = Tri.x * Tri.y;
return Alpha;

fmodはMSが分かりやすいかな、剰余、モジュロ、余り算とか色々と名称があるあの子ですわ。

fmod、fmodf、fmodl
fmod、fmodf、fmodl の API リファレンス。これらは浮動小数点の剰余を計算します。

繰り返し系の表現をする時に便利なんよね。

1.0の場合はfractでもいいけど他の計算で1マス飛ばしとかするからそっちに記述合わせたいのでfmodで統一な感じ。

これ地味にGLSLとHLSLで関数名や挙動が違うから怠い。

UV座標をそれぞれ乗算することで三角形を表現してる感じ。

なんとなく分かるよね。

ユークリッド距離のイメージが近いのかな。知らんけど。

ここは感覚で掴むより計算結果で納得した方が合理的だと思うわ。

あとは1行飛ばしでズラしてあげればベース部分は完成ですね。

BaseUV.x += 0.5 * step(1.0, fmod(BaseUV.y, 2.0));
float2 UV = 1.0 - fmod(BaseUV, 1.0);
float2 Tri = float2(step(UV.x + 0.5 * UV.y, 1.0), step(0.0, UV.x - 0.5 * UV.y));
float Alpha = Tri.x * Tri.y;
return Alpha;

fmod(BaseUV.y, 2.0)でV座標が0.0 ~ 2.0でラップされるので、それをstep(1.0, …)で2値にしてあげると画像のパターンができるので、その箇所だけU座標を0.5オフセットしてる感じ。

愚直に書き書きしていたら終わったわ。

あとは色を付けて。

汎用性持たせるためにHSV色空間で制御しているんですが、各成分の差分最大が6しかないという驚きの事実。

ぶっちゃけ最初見た時は4色程度だと思っていたので、バケツで塗り潰しした時にビビったよね。

斜め半分領域は彩度と明度を調整する係数を乗っけて。

キャラを置いてエッジが滑らかになるようなアウトラインを引いて。

縁をマスクして完成。

めっちゃっぽいじゃん。

大満足なんだわ。

おわり!!!

昔はこういうのAviutlで再現してたんですけど、最近ではシェーダーという新たな選択肢を獲得したので、ちょっと楽しいことが増えました。

雑談

エロゲを原動力とした生まれたネタを公開できる範囲に落とし込んでみました。

まだ共通ルート抜けて楓さんと文化祭を回ってる途中です。

楓さんのあまりの可愛さに爆発しそうだったのでちょっと記事で気持ちを消化しました。

『シークレットラブ(仮)』2024年7月26日(金)発売 - HOOKSOFT
学園生活の「バレない恋」を楽しむ秘密の恋愛ADVゲーム!HOOKSOFT25作『シークレットラブ(仮)』2024年7月26日(金)発売

HOOKSOFTのガイドラインを調べて見たけど明記が曖昧な件。

HOOKSOFT OFFICIAL WEB SITE | ABOUT HOOKSOFT

ガイドラインの道中でBoothと出合いました。

HOOKSOFT 公式boothショップ - BOOTH
HOOKSOFT公式boothショップです。 姉妹ブランドのSMEE&ASaProjectのグッズもこちらでお取り扱いいたします。 発送日は新作&旧作共に毎月20日前後となり、その他のグッズ等も注文のタイミング次第では商品のご到着までお時間...

楓さんが居ました。

どういたしまして。

あとから知ったけど送料は公式購入よりBooth購入の方が安いっぽい?

というかユノスと同じラッセルだったのか。

毎回買うたびに思うんだけど別にタペストリー要らねぇんだよな。

飾った試しがない。

購入欲で満たされるからいいんだけどさ。

アクリルオーメントはゆずソフトのアクリルブロックが微妙だったから買わなかったわ。

アクリルプレートぐらいがちょうどいい。

ブロック程度に厚みがあって中身がすっからかんだとしょぼさが際立つから好かんです。

それするならプレートぐらい薄い方が値段と品質のバランスが良いと思う。

ブロックの中身がスノードームみたいにキラキラしていれば別なんだろうけどね。

だれか作ってクレメンス、買うンゴ。

『枯れない桜』という単語、いつ聞いても素敵ですね。

エロゲの登場人物の関係で辞書弄ってるから「さくら」で変換すると「桜良」になる件。

はやくリーメさんに服を着せたい。

あと水濡れ表現で衣類を透かしたいのよね。

不透明なら肌色決め打ちしてウェット計算なんだろうけど、後景の肌色だったり下着の色も反映したいのよな。

白ワンピのアセットは購入済みだから後は実装するだけ。

相も変わらずやりたいことが多すぎるンゴねぇ。