![見出し画像](https://assets.st-note.com/production/uploads/images/121677805/rectangle_large_type_2_b109a7f37dd7d2b2ac40fe7aee133f0d.png?width=1200)
【3DCG】UEで水マテリアルをつくってみる【Tips】
こんにちは、クリエイティブディビジョン背景セクションです。
背景セクションからは前回の記事に引き続き、UEを用いた記事をお届けします。
どうぞよろしくお願いいたします。
水マテリアルというと難しそうなイメージがあると思いますが、意外と簡単に作れちゃう!?
作り方もいろいろありますが、今回は簡単にシンプルに作っていこうと思います。
水のある背景にぜひ役立ててみてください!
はじめに
本題に入る前に…UEのバージョンは5.1を使用しています。またマテリアルの機能で「Single Layer Water」を使用します。
(UE4では4.27前のバージョンにはないのでご注意ください)
また、詳しいノードの説明は割愛しますので基本的な知識がある方向けになります。
Single Layer Water
まずは新規でマテリアルを作成したらSingle Layer Waterの設定をしていきます。
詳細のShading Modelを「SingleLayerWater」に変更します。
Blend Modeは「Opaque」のままで大丈夫です。
そしたらSingleLayerWaterを使うための出力ノード「SingleLayerWaterMaterialOutput」を追加しましょう。
![](https://assets.st-note.com/img/1695179033216-K8MIdtjkUf.png?width=1200)
ではノードをつなげていきます。
まずはMaterialOutputから、
反射させるためにラフネスに低い値を定数(Constantノード)でつなげます。
水なので透明度が欲しいですね。
同じく定数でオパシティに0をつなげます。
![](https://assets.st-note.com/img/1695179039180-eT6ZpZhWf4.png)
次にSingleLayerWaterMaterialOutputです。
色々見慣れない項目がありますが、
とりあえず「Absorption Coefficients」に色(Constant3Vector)を以下のようにつなげます。
Absorption Coefficientsはどれくらい光を吸収するかを設定する値になります。
水は赤色を多く吸収するため青く見えるのでAbsorption Coefficientsに赤色を入れると深くなるにつれて青になります。
今回は直観的に調整したいので1から割って逆にします。またこの値は距離になるので調整しやすくするために大きな値で割ってます。
つなげたノードはパラメータ化しておくと後で調整ができます。
![](https://assets.st-note.com/img/1695179047692-sQLQBJfdK4.png?width=1200)
ここまで出来たら平面に適用してみましょう。
これだけでなんだか水っぽくなった感じがしませんか?
![](https://assets.st-note.com/img/1695179058343-x1TAwt8Aso.png?width=1200)
波アニメ
このままではあまりにもツルツルで平面なので、
水面をゆらがせてさらに水っぽくしてみます。
サブスタンスペインター等で波用のノーマルマップを用意してください。
簡単にノイズをノーマルマップ化したものでも大丈夫です。
このノーマルによって波の感じも変わるので色々試してみてくださいね。
![](https://assets.st-note.com/img/1695179069280-ys513AURv4.png?width=1200)
ノーマルマップをTexture Sampleノードで読み込みます。
Pannerノードを使いUVアニメーションさせます。
Speed XとSpeed Yで動き方を制御できます。
座標に「World Postion」を使用してます。
UVに影響されないので水メッシュを拡大縮小してもタイリングを維持できますね。
World Postionをそのまま使うと値が大きくてタイリング数が多いので1024で割ってます。
また、平面座標として使うために「Component Mask」でRとGチャンネルを抜き出しています。
![](https://assets.st-note.com/img/1695179083447-85WCBUdkBP.png?width=1200)
上で作成したノードを複製して、「BlendAngleCorrectedNormals」関数を使用して2つのノーマルマップをブレンドさせます。
複製したノードの値は上のものとは違う値にしましょう。
同じにしてしまうと動きが重なるだけで意味がありません…
2つの違う動きのノーマルが波のように見えるわけですね。
少しノーマルが強かったので「Flatten Normal」でノーマルを弱めてます。
![](https://assets.st-note.com/img/1695179074950-AgeA7tBbr3.png?width=1200)
マテリアルの結果ノードのNormalにつなげてみましょう。
これでゆらぐ水面が出来ました。
![](https://assets.st-note.com/img/1695274351337-bkSdABpOvL.png?width=1200)
屈折
透明なものといえば光の屈折ですね。
水の屈折を追加していきたいと思います。
水の屈折率1.333を入れるのですが、「Fresnel」を使って上から見ると水底がみえて、角度がつくと水底が見えない表現を入れてみましょう。
フレネル反射というやつですが物理の勉強は割愛します笑
1と1.333を「Linear Interpolate」(Lerp)でブレンドします。Alphaにフレネルをつなげて角度が浅いと1に角度がきついと1.333になります。
1は屈折なしですね。
波のノーマルも考慮したいのでFresnelノードのNormalにアニメーションさせているノーマルをつなげます。
![](https://assets.st-note.com/img/1695186933214-y86SnDTaNB.png?width=1200)
深みが増しました。
屈折を入れると透明なものって感じがしますね!
![](https://assets.st-note.com/img/1695179139379-TdhSso5zxb.png?width=1200)
しかし、面積の大きい水面とかでは画面の端っこがおかしくなったりします。
大きな水面には適さないようですね…。
![](https://assets.st-note.com/img/1695179149851-lLAnuzh1dE.png?width=1200)
![](https://assets.st-note.com/img/1695179152932-mvHUFEiHZx.png?width=1200)
詳細のRefraction Modeを「Index Of Refraction」から「Pixel Normal Offset」にすることで解消できます。
ただし、こちらは残念ですが物理計算ではなくなります。
![](https://assets.st-note.com/img/1695179158973-DGEIWs0diq.png)
なので先ほどの屈折率で1.333入れたところに「2」にしてみました。
![](https://assets.st-note.com/img/1695186961693-Ye2U1V1TSw.png?width=1200)
すると以下のようになりました。
![](https://assets.st-note.com/img/1695186993935-XF8pBgBfYW.png?width=1200)
ちなみに…
SingleLayerWaterの「Scattering Coefficients」ですが、光が水の中でどれだけ拡散するかの値です。拡散する量が多いと牛乳や温泉のお湯のような見た目になります。俗に言うコロイド溶液と言うやつですね。
![](https://assets.st-note.com/img/1695187008446-O4MIHbfXWx.png?width=1200)
![](https://assets.st-note.com/img/1695187011901-TzCBE1Ib2L.png?width=1200)
まとめ
特に複雑なことはしてませんがシンプルに水マテリアルが作れましたね!
ノーマルマップ、色味等は調整していますが背景に使用してみました。
![](https://assets.st-note.com/img/1695187033001-pxc33oaHPJ.png?width=1200)
あくまでも一例であり色々な作り方があります。
他にもコースティクスやノーマルではなく実際にメッシュを波打たせてみたり、スタイライズドな表現にしたり…と夢が広がりますね!
ぜひ作ってみてくださいね。
▼過去の【Tips】記事もぜひご覧ください!
広報からのおしらせ
ここまでご覧いただいた皆さまに、プロモーション担当からお知らせです🌼
BBDSではデザイナーを積極募集中です!
募集要項&エントリーは↓こちら↓からご確認いただけます☺
皆さまとお会いできるのを楽しみにしております!
==================================================
●BBDS公式HP https://www.kurohige.jp/
●BBDS公式Twitter https://twitter.com/BlackBeardDS
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか?