UE4マテリアル数式入門

#概要
UE4のマテリアルはノードベースで数式が用意されているが、数式の意味がわかる人ほど他の人の組んだマテリアルを見たときに、
このMultiplyはなんだ？とかDotしているのはわかるが何が起こっているのか？というのが掴みにくいので画像と数式でまとめてみた。


数式の例は基本的に赤いピクセル(1,0,0)に緑のピクセル(0,1,0)で演算した想定である。
(0,0,0)のピクセルが黒で(1,1,1)が白でそれぞれに成分が近づくと暗くなったり明るくなったりするというイメージしていると理解がしやすいかもしれない。

※一部計算式が間違ってたので修正しました(2020/11/13)

#書く動機になった記事
https://kanianthi.hateblo.jp/entry/2019/12/08/003731

この記事で数式操作をお絵かきソフトのレイヤー効果としてみるという発想の転換ができた。

#四則演算
##乗算
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222038/d88aaa40-1969-a3f8-dcd1-f3b5f49ee0c9.png)

お絵かきソフトのレイヤー効果としてもよく見られる。
全体的に色みが乗算に入れた色に寄り、全体的に暗くなる。
お絵かきソフトのレイヤーでは色味を合わせたり色を重ねるために使われることがあるが、

計算は以下。(0,0,0)になる(黒に近づいている)ことがわかる。
各成分ごとに掛け算している。

```math
\begin{pmatrix}
1,&0,&0
\end{pmatrix}

\times 
\begin{pmatrix}
0,&0.5,&0
\end{pmatrix}
= 
\begin{pmatrix}
1 \times 0 ,& 0 \times 0.5,& 0 \times  0 
\end{pmatrix}
=
\begin{pmatrix}
0,&0,&0
\end{pmatrix}

```

##加算

乗算のように乗算に入れた全体的に色味が入れた色に寄るがこちらは全体的に明るくなる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222038/08f04da6-f80e-2528-32b4-029eadd22431.png)

計算は以下。緑成分が増えるので赤が黄色に近づく。

```math
\begin{pmatrix}
1, & 0, & 0 \\
\end{pmatrix}
+
\begin{pmatrix}
0,  & 0.5, & 0
\end{pmatrix}
=
\begin{pmatrix}
1 + 0,& 0 + 0.5,& 0 +0  
\end{pmatrix}
=
\begin{pmatrix}
1, & 0.5,& 0 
\end{pmatrix}
```

##減算
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222038/b257e27a-ead4-4d27-5b5d-c7a77c46e53d.png)
緑色成分が抜かれるので赤と青だけが残る。

計算は下記だが、色は0-1の範囲で表されるので基本的に範囲外は無視される(Emissiveは範囲外の分も明るくなるらしい)。

```math
\begin{pmatrix}
1 & 0 & 0 \\
\end{pmatrix}
-
\begin{pmatrix}
0  & 0.5 & 0
\end{pmatrix}
=
\begin{pmatrix}
1 + 0& 0 - 0.5& 0 +0  
\end{pmatrix}
=
\begin{pmatrix}
1 & ,-0.5& ,0 
\end{pmatrix}
```

##除算
たぶん画像同士で除算することはなさそうだが一応載せておく。

各成分どうしで割っているが、ゼロ除算があるので正確には0以下になるまで引いた回数が各成分になる。
そのためゼロ除算した成分は巨大な数(つまり白)になる模様。
画像の例ではG成分以外が巨大な数になっているので全体的にマゼンタになっている。

1以下の数で割ることになるので基本的に明るくなるはず。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222038/0acceebe-6e5e-0fe8-3564-c08e96bc8113.png)

#その他の式
##1-x
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222038/74d2f8b7-d9df-28a7-4c7f-24e7c354fb7d.png)

画像の色反転をする。ネガポジ反転ともいう。
式としては白(1,1,1)から元のピクセル画像を引いている。

##Power
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222038/4ee6c4e2-5942-2a99-9e11-833058b6f62c.png)

画像のピクセルをn乗する。色の中間階調が大きく変化する。2乗の場合彩度が高く黒が締まって見える。
画像処理で言うところのガンマ補正だろうか。

##Lerp
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222038/f24b9b03-3dc1-efe6-3391-2f5bb17a9088.png)

線形補間。二つのピクセルをAlpha(0-1)の範囲で補間する。
Alphaが0で出力結果がAに、1でBになる。
二つの入力値を混ぜる、Alphaはどちらが強く反映されるかのイメージ。

計算式は(x1,y1,z1)と(x2,y2,z2),Alphaをaとすると下記になる。

```math
\begin{pmatrix}
(1-a)x_1 + ax_2 & ,(1-a)y_1+ay_2 & ,(1-a)z_1 + az_2 \\
\end{pmatrix}

```

例えば入力A(1,1,1)と入力B(0.25,0.25,0.25)の補間値alphaが0.2の場合の出力結果は

(0.8,0.8,0.8) + (0.05,0.05,0.05)　= (0.85, 0.85, 0.85)

となる。

##Dot
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222038/ac7ad09d-02a1-da11-4112-4411aaa14f5b.png)


成分同士の内積(ドット積)をとる。赤い画像になるのはすべてR成分に入っているため。
入れた色成分が含まれているピクセルが抽出される。

画像の例でいうと緑色成分が存在するピクセルだけが赤いピクセルとして残っている。


```math
\begin{pmatrix}
1 & ,0 & ,0 \\
\end{pmatrix}

\cdot

\begin{pmatrix}
0  & ,0.5 & ,0
\end{pmatrix}
=1 \times 0 + 0 \times 0.5 + 0 \times 0

=0
```

###ドット積応用例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222038/2a1292d8-2e24-6821-e7b3-ebb6811ed4c0.png)

ドット積の結果をRGBにすべてに入れてから元画像から減算すると元画像から任意の色だけを消去できる。
(画像の例では緑とのドット積なので元画像から緑色を引いたものと同じになる)