Multiplyノード

この記事ではUnreal EngineのマテリアルノードであるMultiplyを解説する。

補足：足し算(Add)ノードを知りたい場合は次の記事へ

【マテリアル基礎】Addノードとは【Unreal Engine】 | 謎の技術研究部

基本

Multiplyは「乗算(掛け算)」の意味。

またDivide(割り算)ノードもあるが、ここでは掛け算のみ。

ショートカット

Mキーを押しながらノード画面を左クリックすると出せる

画像に掛け算

演算系のノードなので、なにか数学的な計算に使うのかな？と思うかもしれない。

もちろんそういうケースもあるが、Multiplyは画像と画像の掛け算に使うのがメインだと思っておいて良い。

とは言え初心者は「画像をかけ合わせたらどうなるの？」というイメージが全く出てこないと思う。

というわけで順を追って理解できるようにする。

理解

では実際の例をつかって理解を深める。

まず、画像に何も処理をしないままベースカラーへ

プレビューでは画像がそのまま貼り付けられる。

※このテクスチャノードはTキーを押しながら左クリックで出せる。または画像をドラッグ＆ドロップ

黒を掛ける

次に黒い画像を掛け算してみよう。

左下の(※1)ノード何？

ショートカットは3キーを押しながらクリックでこのノードが出る。

左下のノードは真っ黒の画像と同義(厳密にはConstant3Vectorというノード)

※真っ黒の画像 = (0, 0, 0)というRGB値を持ったドットの集合だと思えばOK

「すべてのドットが同じ色で構成されている画像データ」はこのノード1個で作れるのでPNG画像等を用意する必要はない

色を変える

黒い部分をダブルクリックで自由に色を変えることも出来る。

黒い画像を掛けた結果

さて、上のノードで作成したマテリアルは実際にプレビューではどうなるだろうか。

真っ黒になってしまった。

何が起こっている？

これは0の掛け算をイメージしたら簡単だ。

元の画像データの各ドットにいろいろな数値が入っているが、その全てに黒(すなわち0)を掛けたらどうなるか。

数学の基本でいかなる数字にも0を掛けたら0になる。

つまりすべてのRGB値に0を掛ける = 黒(0, 0, 0)のドットだけで構成された画像になるわけだ。

白を掛ける

では、次は逆で白を掛けてみよう。

結果は

元画像のままなにもかわらなかった。

これも上で解説したのと全く同じで、どんな数字だろうとも1を掛けた場合その元の数字と同じ値が答えとなるため元の画像と同じものが出力された。

ここでクイズ！

さて、次の結果はどうなるだろうか。

下の星画像は、星本体が白で背景が黒の2値画像だ。

まぁクイズといっても回答を折りたたむみたいなトリッキーなBLOG機能はないので答えを出すと...

元画像が星型に切り抜かれ、それ以外は黒になった。

このように画像の掛け算は白黒画像を掛けることによって一部を切り出すという事ができる。

切り抜いて重ねる

さて、上の画像だと黒い部分が味気ないので他の画像を重ねたい。

こういう場合は先程の星の画像に1-xというノードを付けてみよう。

※ノードは1-で検索するとOneMinusというノード名でヒットする

このノードは白黒を反転することができるので、次の結果となる。

ではこれに背景となる画像をMultiplyするとどうなるかはわかると思う。

答えは次

さて、これで真ん中の星がくりぬかれた。

では2つの画像をADDしてみよう。

次のように背景と星型にくり抜いた画像を重ねたような結果となる。

※実はこの作例の場合はLerpノードを使ったほうが少ないノードで済む。次の記事で解説

【UEマテリアル】やたら簡単！Lerpノードの使い方 | 謎の技術研究部

補足：画像同士のADD

カラーが入った画像同士をADDすると想定外の結果となることが多いので基本はあまり使わない。

※演算後の数値が１を超えてしまい白飛びが発生する可能性が高い。

ただ、例外として今回のように明確に白と黒の部分がパズルのように一致する画像のみADDが可能。

画像同士を自然にMIXする場合はLerpノードを使うが、ここでは扱わない。

ADDに関してもっと知りたい場合は次の記事を参照

【マテリアル基礎】Addノードとは【Unreal Engine】 | 謎の技術研究部

灰色を掛けるとどうなる？

白と黒の中間である灰色にも重要な効果がある。

次の例。

グレーになっている部分がMultiplyされるとその部分の色が黒に近づく(暗くなる)

上のように画像がフチに向かって黒くフェードアウトしていくのがわかる。

こちらも今後重要となってくるイメージなので理解しておきたい。

色を掛けたらどうなる？

白黒だけじゃなく色をかけた例。

シンプルに画像の色相をコントロールすることができる。

この方法は白黒のアルファ画像に色味をもたせるケースで良く見かける。

これは上で解説したも例の単なる応用。

黒い部分はどんな色をかけようとも黒のままであるということは確実に覚えておく。

透過用に使う例

※マテリアルの透過のやり方を全く知らない場合は次の記事を参照

【マテリアル基礎】透過マテリアルの作り方【Unreal Engine】 | 謎の技術研究部

かなり後半になってしまったがもっとも重要と言って良いMultiplyの使い方を紹介する。

マスクを使って紙をビリビリに破いたようなマテリアルを作りたい。

そこで次のようなノードを組んだ。

このようなノードだと次のようになる

紙を破ったようなイメージにはなったのだが、四角形の外枠が存在しておりなんか不自然。

もうすこし外枠も破った感じがほしい。

こんなときはマスクに設定してあるテクスチャの枠をこれまでの応用で切り取ってやれば良い。

どうするかというと

円形のテクスチャをMultiplyしてやるとマスクは次の画像になる。

というわけで最終的には次のマテリアルが完成する。

外側も破られているようになった。

グレースケール画像同士のMultiply

上のようにグレースケール画像同士でMultiplyを行う場合はとても多い。

またグレースケール画像に定数を掛けてやることで白黒の濃淡を変化させられることも覚えておきたい。

以上

個人的には最後のマスク画像同士をMultiplyして調整するケースが最も重要な箇所かと思う。

Multiplyノードの使い道はまだほかにも色々あるとは思うが、ここまで書いた例は特に頻繁に使うケースなので確実に覚えておきたい。