Addノード

この記事はUnreal Engine5にてマテリアルノード「Add(Subtract)ノード」を解説する。

ショートカット

Aキーを押しながら画面を左クリックでも出すことが出来る。

足し算と引き算

Addは英語で「足し算」Subtractは「引き算」を意味する。

いや、そんなの当たり前だしAddもSubtractも解説しなくてもみんな知っていると思われていそうだ。

マテリアルノードでも基本は全く同じで足し算と引き算をしている。

誰も解説してない？

Google検索をかけてみると意外にこのノードに限って解説しているページが見当たらない。

恐らく個別の例で解説されているとは思うがここに絞った記事は少なそうな印象。

というわけであえて記事にする。かなり重要なノードだ。

AddはSubtractと同じ

Addが足し算でSubtractは引き算を意味する。

とは言え1を引くのと-1を足すのでは同じ効果だ。

したがってAddでできることはSubtractでも出来る。

できるだけシンプルにしたいので、この記事はAddノードだけ使用して解説する。

※実際に使う時は視認性が悪くなるので分けて使ったほうが良い

実験して理解を深める

さすがに足し算と引き算の概念から解説する必要はないと思う。

というわけでこの記事では実際に実験しながらAddノードはいつ使うのかという感覚を掴んでもらえたらと思う。

テクスチャのミックスには使えない

テクスチャとテクスチャを合成しようとして足し算を使うという例はあまり見ない。

なぜならば画像が異様に白くなってしまうからだ。

次が結果。

画像の超基本の合成はLerpというノードを使うがここでは解説しない。

とにかくテクスチャ同士の足し算は良くないとおぼえておこう。

※Lerpノードは次の記事で解説

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

重要：RGBの各値は1が最大

ここで覚えておきたい重要な項目を解説する。

基本的にUnreal Engine内部での色の情報はRGBそれぞれ0~1で表現されている。

白は(1,1,1)黒は(0,0,0)というデータを各ドットに持っている。

※256で扱う画像ソフトとちょっと違う点に注意

画像の「足し算」がドットの色合いによって簡単にRGB値が1を超えてしまうのは想像できるだろうか？

これが画像の加算が白飛びになる原因だ。

余談：RGB値が1を超える時

上で1が最大と書いたが、実はRGB値は1以上の数字を保持できる。

これが何を示しているのかと言うと「エミッシブカラー」というマテリアルの出力にて1を超えた量はマテリアルが「発光」するという認識になるが、今は余談。

※1を超えたり0を下回ったりする数字を保持したくない場合はsaturateやclampノードで制限することも出来る。

グレースケール画像のAdd

上で画像と画像をAddでミックスするのはNGと書いた。

しかし、実はグレースケールの画像をAddするということは多い。

※グレースケールは白と黒とその中間のグレーのみで構成されるモノクロ画像。

なぜグレースケールなら良いのだろうか。

例を見ていく。

LinearGradient

ここからはLinearGradientというノードを使うが、頭の片隅においておく程度でもよい。

これは何を作っているかと言うとグレースケールのグラデーション画像を出力しているだけだ。

便利でよく使うのでGradient系のノードが色々あると知っておくと良いと思う。

この画像から0.5をマイナスしたらどうなる？

上の画像にaddノードをつかって-0.5したらどうなるか想像できるだろうか？

Addノードでマイナスを入力する場合は次のように「詳細」パネルに直接数字を入れる。

デフォルトでは画面左下にある。

ノード組むと次のようになる(Addノードの上に足されている数値が出ている)

※Addノードを右クリックしてリアルタイムプレビューをオンにするとマテリアルの出力に繋がなくてもプレビューが表示される。

そしてこの演算の結果は次。

黒い部分が下へ攻めたのがわかる。

なんで？

引き算の処理をしているので黒=(0,0,0)だった値は(-0.5,-0.5,-0.5)になっているはずだ。

まず理解するのはマイナスになっても黒は黒のままになる

※逆に白=(1,1,1)を超えても白は白のまま

ということは黒だった部分はそのまま黒で、黒寄りのグレーだった部分も黒になり、白の部分はグレーに変化する。

上の画像の例だと「マイナス値が増えるほど黒が上から下へ侵食するような動き」になる。

ここが少し理解しにくいだろうか？

白と黒の境界線をコントロール

なんでこうなるかが理解できない場合は後々慣れていくとして・・・(わかりやすい解説ができなくて申し訳ない)

上の処理で白と黒の境界線をコントロールできていることに気づくと思う。(下に押し下げている)

というわけでAddのマイナス値を調整すればシャッターのような効果が作れるのではないだろうか。

シャッターを作る

TimeノードとSineノードが出てきてしまったので混乱するかもしれないがコレは理解しなくても良い。

この2つをつなげると「-1から1」の値が行ったり来たりするという処理になることだけ考える。

とにかくコレによりさっきは固定で-0.5していたAdd値が+1から-1の間で揺れることになる。

結果は次のように時間で変化する画像が出力される。

まさにシャッターのようになった。

で、これをどうするかという話が次。

グレースケール画像の使い方

※ここからは透過マテリアルのお話が出てくるのでTranslucentやMaskの意味がわからない場合は次も参照

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

この映像を使う例の前に準備

茶色のマテリアルの結果ノードをクリックして(ノード名はマテリアルにつけた名前で変わる)

Blend ModeをTranslucentにしておく。

そうするとオパシティという項目がでるので上のノードを繋いでおこう。

※Addノードのプレビューはオフにするように

合わせてなにかテクスチャをエミッシブカラーに繋いでおく

※ベースカラーではなくエミッシブカラーに繋いでいるのはライティングがなくても綺麗に色が出るため

結果

結果は次のようなプレビューとなる。

ゲームに放り込むと次のようにちゃんと透過されている。

何が起こった？

オパシティと書いてある場所にグレースケールの画像が入ってくると次のような処理をしてくれる。

• 黒い部分は透過
• グレーの部分は半透明
• 白い部分はそのまま

この処理がエミッシブカラーに入力されているテクスチャへ適用される。

結果として透明と半透明が組み合わさリシャッターのような効果になっている。

ディゾルブ効果

ここまででAddだけで白黒の境界をコントロールすることに成功した。

このように物体を徐々に透明にするような処理を良く「ディゾルブ」と呼ぶ。

このワードはゲーム開発では頻繁に耳にするので、ひとまず上のような簡単な作り方は覚えておきたい。

次からはもう一つよく使う例を出す。

ノイズをAdd

ノイズ画像をAddすることもそこそこあると思うので例を出す。

先程の例にノイズテクスチャを更にAddする。

ノイズテクスチャはデフォルトでいくつか入っているのでnoiseで検索して適当にチョイス。

境界線がノイズっぽくなる

このようにノイズを加えると侵食している感じが表現できる。

この場合ノイズの範囲が広すぎるので実際上級者が使う場合はもっと境界線だけに細くノイズが適用されるように組むと思うがこの記事ではここまで。

また、この例は中間までしかディゾルブしないが、もっと下まで侵食させたい場合はsineとAddの間にMultiplyで2倍してやるだけでも表現できる。

おまけ：Multiply

今回はAddなのでここまでで全てではあるが、グレースケールの画像をAddではなくMultiply(掛け算)する例もよくあるので頭の片隅に置いておいて欲しい。

ただ、今回の例で最後のノイズテクスチャの次のAddをMultiplyに変えてしまうと次のようにイマイチな結果となる。

ただ単に元画像を汚して、それをシャッターしているだけのような雰囲気となってしまった。

Multiplyに関しては別記事でやりたいが、上級者でもAddとMultiplyどちらが適切なケースなのかは迷うことがあるようなので、ここだけ意識しておくと良いと思う。

Multiplyノード単体の解説記事を別途用意したのでこちらも是非。

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

作例？

では、今回出てきたノードだけで作例を。

こうして、反転したものを貼り付けて

これは...ちょっとコワイ。

が、上から徐々に画像が変化するのでたった２枚の画像を合成しただけでわずかながらマブタが降りてきている風の表現になっているかと思う。

さいごに

Addは基本中の基本だが、これ１個でも思ったより複雑な動きをするため初めに理解しておくのが良いと考えている。

またMultiplyも単なる掛け算ではなく面白い動きをするのでそれはまた別記事にて。

ちなみに、UEにてマテリアルの作り方を覚えていくとQuixel Mixerのようなテクスチャを作る専門ソフトでも知識が活かせるのでかなり有用だ。

※ノードは組まないが考え方が似ている

覚えておいて損はないと思う。