泡マテリアル🫧の作り方
泡のエフェクトはほとんどマテリアルで完結するので、最近作ってみたこちらの作り方をご紹介！ DOF を効かせていてちょっとズルい感じはしますが、こんな絵を無理矢理作ることもできそう。
🧩リファレンス
元々はこちらの動画が X で流れてきて、オシャレで良いなあと思って作り始めました。
🧩マテリアルの中身
マテリアルの全体構成はこちらですが、ノード１つ１つが読める大きさでは画像に収まり切らないので、要素ごとに解説していきます。
マテリアルの設定
結果的にほとんど透けてない見た目ですが、試行錯誤時には透けさせたり屈折を入れたりを試していたので Blend Mode は Translucent です。Shading Model は Unlit にしていますが、実際のゲーム中でシーンの明るさに馴染ませりしたい場合は DefaultLit にした方が良いですね。
フェイクのスペキュラ構成
UE5 に標準で含まれているキューブマップを使用して Reflection Vector で環境マップのように貼り付けています。宝石の作例でも紹介していて、氷などでも使えますし便利ですね✨
使用しているキューブマップはこちら。
/Engine/MapTemplates/Sky/DaylightAmbientCubemap
あとネットワークが大きめになったので Named Reroute ノードを使っています。
ノーマルマップ構成
ノーマルマップはこんな風に細かい起伏を入れたり強く効かせるのは今回の泡に合わないので‥
柔らかめのノーマルマップを選んでタイリングも粗めにしています。またタイリング数やUVスクロース速度を変えた２つを混ぜて複雑な波打ちに見えるようにしつつ、影響度も変えられるようにパラメータを追加しています。
ちなみにノーマルマップも UE5 標準で含まれているものを使用。
/DatasmithContent/Materials/Water/Textures/T_Water_LF_N
エッジ用の柔らかいノイズマスク
ノーマルマップと似たような感じでタイリング数とUVスクロール速度を変えた２つを Add（加算）で混ぜ合わせて、Power（累乗）でコントラストを付けた状態も別途利用しています。下段のテクスチャから右へ引っ張られている線は WPO でメッシュを変形させるのに利用しています。
テクスチャは Material Maker の Shard FBM ノード（参考）をそのまま出力したくらいの簡素なものを利用しています。
利用しているノードでプレビューさせるとこんな感じです。
| Add | Power | Texture2 |
|---|---|---|
 |
 |
 |
WPO での変形用の構成
先ほどの柔らかいマスク構成を利用して、メッシュを法線方向に含まらせています。
変形部分だけプレビューするとこんな感じ。強く変形させると球体モデルの「極」の部分で破綻するので、強く入れたいなら極の部分に変形のフェードを入れるなど工夫がいりそうです。
輪郭を強めにしたエッジ + ノイズマスク
球体モデルを前提にしたマテリアルなので、Fresnel と SmoothStep をベースに輪郭のグラデーションを作っています。そこに先ほどの柔らかいマスク構成を重ねつつ、目指す見た目になるよう Add / Multiply / Power で色々と混ぜ合わせたりコントラストを変えたりして構成がゴチャゴチャしているだけなので、この構成にしないといけない訳ではないです。
上段の SmoothStep が中央に黒い領域を作っていて、下段の SmoothStep で白く立ったエッジを作っています。右上の Multiply の部分で結果をプレビューしたものがこちら。
Opacity 用に調整
先ほどの構成に Add で 0.7 足して全体的に色を明るく底上げして Opacity に繋いでいるため、結果的にほとんど不透明に近い見た目になっています。
Opacity がどんな感じかプレビューしたものがこちら。
内側のカラー
「輪郭を強めにしたエッジ + ノイズマスク」を Lerp の Alpha で利用して、球体の内側の色とエッジの色とをマスク分けして着色していますが、その内側の色はこんな感じで Fresnel の外側を暗めの青に落として中心ほど明るい色になるような感じにしています。
プレビューするとこんな感じ。テクスチャは鳴潮の十字光を再現するために適当に作ったもの。。
エッジの内側のカラー
「輪郭を強めにしたエッジ + ノイズマスク」でマスク分けした外側の色はこんな感じです。２枚のテクスチャをUVスクロールして Add で重ね合わせているだけです。Make Vector 3 で黄色成分を抜いているのがちょっと工夫しているところでしょうか。
テクスチャはいつものように「フリー素材 ぱくたそ」さんから、赤い差し色と青っぽい色を入れたかったのでそれっぽいものをチョイス。自主制作用なのでシームレス加工など全く何もせずそのままコンテンツブラウザに放り込んで使っちゃってます。
プレビューするとこんな感じです。
Emissive Color 用に合体
フェイクのスペキュラに対して Power でぐっとコントラストを強くしてハイライト部分が浮き上がるようにして Multiply で 50 と高い輝度を与えています。これはハイライトが特に DOF をかけた状態で奇麗に Bloom が入ってキラキラするように調整したものです。また、そこに先ほどの球体の内側の色とエッジの色とを重ね合わせて、EyeAdaptationInverse で露出対応して完成✨
🧩余談：屈折と DOF が相性悪い？
元々はこんな感じで屈折の構成も作っていたのですが‥
PostProcessVolume の項目 Depth of Field 内の Focal Distance に値を入れると屈折の効き具合がかなり変わってしまいます。
Focal Distance に値を入れない場合はこちらのような感じ。
そのため屈折を効かせるのを諦めました。これは何か対処方法があるんでしょうか？
Discussion