[Unreal Engine4] Material Nodeに対応するHLSL, GLSL

## はじめに
[北千住さんの記事](https://qiita.com/kitasenjudesign/items/89297f239059662cd38e)がとても見やすかったのでその形式を踏襲させていただきました．また，そちらの記事に関数の説明は載っているので参考にしてもらえればと思います．
また，Unity, openFrameworks, TouchDesignerなどでShader言語を書いていて，UnrealEngineも触り始めたという方の作業効率の向上に繋がれば幸いです．

## Type 
| UnrealEngine  |  HLSL | GLSL | 
| -------------- | --------- |--------- |
| Constant | float | float |
| Constant2Vector | float2 | vec2 |
| Constant3Vector | float3 | vec3 |
| Constant4Vector | float4 | vec4 |
|Texture Sample| sampler2D| sampler2D|


## Function

| UnrealEngine  |  HLSL | GLSL | 
| -------------- | --------- |--------- |
| Floor | floor| floor |
| Frac | frac | fract |
| Fmod | fmod | mod |
| atan2 | atan2 | atan |
| lerp | lerp | mix |
| Power | lerp | mix |
| Abs | abs | abs |
| ValueStep | step | step |
| SmoothStep | smoothstep | smoothstep |
| Clamp| clamp| clamp|
| VectorLength | length | length |
| Distance | distance | distance |
| Normalize | normalize | normalize |


### HLSLのみ
| UnrealEngine  |  HLSL |
| -------------- | --------- |
| Saturate| saturate |


## Sample NodeRecipe
これらの関数の特徴を捉えることが出来るノードレシピの1例です．（参考までに）

### 注意
1. OutはすべてMaterialのベースカラーへ繋がっています．
2. ViewerのQuadのUVは左上が原点です
![bandicam 2020-11-04 01-18-06-106.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184790/e072f8ab-cefd-6240-52d1-17e2b4f73829.jpeg)

### Floor
![bandicam 2020-11-04 00-25-27-676.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184790/5b6a199d-b0d8-fe45-a5d6-b01d7a78da90.jpeg)

![bandicam 2020-11-04 00-40-33-530.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184790/23ca059f-5c7d-7515-dc0c-5f9a631ab12a.jpeg)

### Frac
![bandicam 2020-11-04 00-25-51-635.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184790/8a1576a1-b71e-c330-039d-2ff35fbe61cc.jpeg)

![bandicam 2020-11-04 00-40-45-211.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184790/10557d41-67e2-5a3a-7194-77edf048c694.jpeg)

### Fmod
![bandicam 2020-11-04 00-29-21-113.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184790/1d75762f-dea8-2e95-1f90-4ebdb2e944b7.jpeg)
![bandicam 2020-11-04 00-40-54-668.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184790/7dd9db3d-e886-7d83-3c48-c3af2267fce3.jpeg)


### Lerp
![bandicam 2020-11-04 00-43-04-667.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184790/888cb42c-0d9f-3082-2e76-a9134df22f0b.jpeg)


![bandicam 2020-11-04 00-42-50-617.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184790/4e970aa6-f7a0-48a4-a134-4169efae8ca9.jpeg)

### Power
![bandicam 2020-11-04 00-31-28-370.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184790/e54259c3-2929-96af-2ab5-79efb9fb1165.jpeg)

![bandicam 2020-11-04 00-43-59-835.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184790/466e2f60-c217-17e9-5dd4-178ee09193a8.jpeg)

### Abs
![bandicam 2020-11-04 00-33-49-378.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184790/49628454-e521-87a0-930e-ebadd1155df0.jpeg)

![bandicam 2020-11-04 00-44-18-369.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184790/a07750dc-2d96-9bae-2c77-40370c53feac.jpeg)

## ValueStep
1th inputによって1.0からoffsetを作って黒の開始させる．つまり，offset = 0.2だと0.8まで黒．

```glsl
//glslとかに書き換えるとこんな感じ
//1th inputの値をoffsetとすると
v = step(1.0 - offset, x);
```

![bandicam 2020-11-04 01-06-19-711.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184790/c853389c-6347-1347-4593-b117ee0a72eb.jpeg)

![bandicam 2020-11-04 01-06-13-851.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184790/3f2353f6-20c1-35dc-6b7b-e2d0d7a9c8e0.jpeg)

### SmoothStep
![bandicam 2020-11-04 00-34-15-635.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184790/21fa3599-e87a-59a8-bff0-d68904071056.jpeg)

![bandicam 2020-11-04 00-45-08-255.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184790/456097c0-e403-5fea-e082-eba80fbf56ed.jpeg)

### Sign
![bandicam 2020-11-04 00-35-24-627.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184790/7097def9-0139-a6d5-8639-efc3245e0640.jpeg)

![bandicam 2020-11-04 00-45-35-853.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184790/035057cc-5633-3da5-0b4d-d71a8a36e37d.jpeg)

### Saturate
![bandicam 2020-11-04 00-36-09-389.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184790/66f4d352-9576-d9ff-e23a-123b2b3d65dc.jpeg)

![bandicam 2020-11-04 00-46-34-656.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184790/a60900c0-2df0-1335-d8bf-66c3ec95770c.jpeg)