【Unite Tokyo 2018】新機能Shader Graphを使えばプログラミング無しにシェーダーが作れるようになります！の複写【随時更新】 

#はじめに
2017年5月7日（月）・7日（火）・9日（水）に行われた　Unite 2018 新機能Shader Graphを使えばプログラミング無しにシェーダーが作れるようになります！　講演の資料が動画しかなかったので複写する感じの記事になっています　
タイムライン付き

#[ShaderGraphとは](https://youtu.be/9OP6s5RFNkQ?t=32s&end=75)
Unity 2018から使える新しいシェーダーの仕組み
いわゆるノードベースのシェーダーエディター
ノードとはグラフ上でボックスを配置し線で繋げて マテリアのデザインをする
<img width="877" alt="スクリーンショット 2018-06-16 14.11.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/4506a7bd-f2be-4923-c910-55e0934f9c17.png">

リムライトの例 ライティングのエフェクトを強化する為にも使えます
<img width="886" alt="スクリーンショット 2018-06-16 14.18.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/bbb67cb7-0135-bfea-0beb-2df756746707.png">

#[簡単な例 マルチテクスチャ](https://youtu.be/9OP6s5RFNkQ?t=1m17s)
マルチテクスチャとは　３Dモデルに2枚のテクスチャを重ねるように貼り付ける
ちなみにデモでは樽のオブジェクトを使ってます
<img width="801" alt="スクリーンショット 2018-06-16 14.37.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/e38dd67f-5cd3-468d-3013-55ed032c543b.png">

初期状態はマスターノード（出力先）しか配置されていません
<img width="886" alt="スクリーンショット_2018-06-16_14_24_13.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/61ed1ad9-7f93-5290-531c-d1442174d85f.png">

次にテクスチャを貼りたいので適当な空いてる場所で右クリック→CreateNode→検索でSampleTexture2Dを配置しTextureプロパティにテクスチャを配置する
<img width="801" alt="スクリーンショット_2018-06-16_14_37_34.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/ba3f79c8-3833-699f-fdeb-a3aabe9f8d06.png">
RGBA（色情報）からドラッグ&ドロップすると線が出るのでマスターノードのAlbedoに繋げます
![Jun-16-2018 14-45-44.gif](https://qiita-image-store.s3.amazonaws.com/0/158441/3e448320-8b52-0222-a001-e446eec03f18.gif)
結果
<img width="177" alt="スクリーンショット 2018-06-16 14.52.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/614502ce-92b3-025e-2216-096c3b42266d.png">

補足として　
処理の流れとして左から右に流れます
ノードの見方は基本　左が入力で右が出力です
<img width="576" alt="スクリーンショット_2018-06-16_14_55_32.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/345f0438-2c8f-557a-28bf-24249fb818a3.png">

ノーマルマップも貼れます

SampleTexture2Dを出して、Textureプロパティにテクスチャを追加、TypeをNormalに変更
<img width="299" alt="スクリーンショット_2018-06-16_15_00_44.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/fc2b5e9e-fb80-38d9-d95c-92064b56f426.png">

そしてRGBA（色情報）をマスターノードのNormalに繋げる
<img width="573" alt="スクリーンショット 2018-06-16 15.04.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/b1287159-ee93-8ead-d6e4-f32f3cf7df74.png">

結果　ちょっと見辛いですね　すいません
<img width="173" alt="スクリーンショット 2018-06-16 15.07.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/8f1bd79e-cb8c-6d1f-9ef5-6ae79653f185.png">

マルチテクスチャなのでもう一枚テクスチャ作ってあげてブレンドして出力してあげる
SampleTexture2Dノードを出して、TextureプロパティにUnityロゴのテクスチャを指定して
Blendノードを出して、２つのSampleTexture2DノードとBlendノード繋げる
<img width="521" alt="スクリーンショット 2018-06-16 16.01.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/351024da-3086-9054-596e-c5b3ee5eb216.png">

BlendノードにはいろんなBlendモードが用意されている
例えば「Lighten」を選ぶと明度が高い方を前に出すとゆう事ができる
<img width="186" alt="スクリーンショット_2018-06-16_16_03_18.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/db50eeba-91b2-bad5-f8e6-8829f22aee55.png">

BlendノードのOutからマスターノードのAlbedoを繋げると合成された状態で出力されます
<img width="453" alt="スクリーンショット 2018-06-16 16.07.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/eb9cfdda-53fa-4d22-a191-0d76cd6fdcc3.png">

このままだとUnityロゴがでかすぎるのでUVをリピートさせます
UVノード（UVをいじる時必要）を出して、Multiplyノード（掛け算）してあげればいいです　その情報をSampleTexture2DノードのUVプロパティに流すと完成です

<img width="878" alt="スクリーンショット_2018-06-16_16_11_16.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/e215e4bb-b079-7f41-495e-27c3b7fa31f3.png">

#[ShaderGraphを開発した理由](https://youtu.be/9OP6s5RFNkQ?t=4m29s)
<img width="856" alt="スクリーンショット 2018-06-16 16.37.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/c02437b3-4930-6886-0912-db59d0a8b962.png">

<img width="848" alt="スクリーンショット 2018-06-16 16.38.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/29175caf-2886-e756-1897-cd4dc7e242df.png">

今までのUnityはレンダリング方式（「Forward」とか「Deferred」）切り替えるたびにシェーダーを変えないといけなかった
<img width="724" alt="スクリーンショット 2018-06-16 16.41.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/3ebd7b23-8e41-6668-f4f0-d852d279fc2c.png">

でもこれからはSRP（スクリタブルレンダーパイプライン）が登場します
SRPとはC＃を使って描画設計を行う事ができるもの
<img width="848" alt="スクリーンショット 2018-06-16 16.48.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/a72373b1-6362-56b3-6bd7-14c9b4c7475c.png">

Unityからは主に「Lightweught」と「HighDefinition」を提供します
<img width="850" alt="スクリーンショット 2018-06-16 16.50.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/e6bfd2e5-5341-a9c2-505b-dd376de0f914.png">
<img width="832" alt="スクリーンショット 2018-06-16 16.53.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/cfcb7c9d-2d31-9137-b26d-f5eec4b36d44.png">

今後レンダーパイプラインがいろいろ出てくると、それぞれのレンダーパイプラインに対してシェーダーを書き直すのは運用としては厳しいので、シェーダーグラフがあれば使いまわせところを目指しています。
<img width="894" alt="スクリーンショット 2018-06-16 17.01.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/fecfbf12-bc19-904b-d665-d40caefbc15a.png">
#[セットアップ手順](https://youtu.be/9OP6s5RFNkQ?t=7m12s)

一番楽な方法はLightweight RPをインストールする
現在Shader Graphの開発はLightweight RP上で開発されている
Lightweight RPすれば勝手にShader Graphがインストールされる
<img width="840" alt="スクリーンショット 2018-06-16 17.04.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/1d7f92a1-1603-ec92-c5d2-2e58aa351d9c.png">

Lightweight RPのインストール方法は大体２通り
Bの方がおすすめ
<img width="847" alt="スクリーンショット 2018-06-16 17.08.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/609ec7c3-4918-bd8c-2321-ff604b38a854.png">

Bのやり方
プロジェクトを作成する画面でTemplate->Lightweight RP(Preview)を選択してあげてCreateProjectします
<img width="694" alt="スクリーンショット_2018-06-16_17_10_18.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/d54ce7ab-b40c-7360-4fe0-4772cc5a7917.png">

基本この状態でShader Graphは使えるようになっています
<img width="872" alt="スクリーンショット 2018-06-16 17.14.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/4a9018e4-72ce-d67d-5e4d-b0583f0af267.png">

プロジェクトビューで右クリック→Create→Shader→PBR Graph、Sub Graph、Unlit Graphがシェーダーグラフのアセットです
<img width="859" alt="スクリーンショット_2018-06-16_17_17_28.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/db4332b1-713f-9042-48e0-23d60dc5134a.png">

例えばPBR Graphを選ぶとプロジェクトビューにシェーダーアセットが追加されます
<img width="864" alt="スクリーンショット_2018-06-16_17_20_34.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/8069e23f-162e-9ec2-9489-7a6ec2974c62.png">

で追加されたシェーダーアセットをダブルクリックするとShader Graphエディタ画面が立ち上がります
<img width="490" alt="スクリーンショット 2018-06-16 17.22.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/cbddcfc9-372a-9377-c7d4-79249951daba.png">

#[シェーダーグラフの基礎](https://youtu.be/9OP6s5RFNkQ?t=9m33s)
PBR GraphとUnlit Graphの違い
Sub Graphはマニアックな機能なので今回は説明しません
<img width="841" alt="スクリーンショット 2018-06-16 17.27.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/c931fdc8-5a5a-35d0-cb22-e0615ee5baaf.png">

PBRの見え方
<img width="643" alt="スクリーンショット 2018-06-16 17.29.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/a9d6def4-141e-78e9-2e23-43b1ba876628.png">

Unlitの見え方
<img width="860" alt="スクリーンショット 2018-06-16 17.30.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/74f2aac6-a9dd-628c-9756-ab719d3cd1b2.png">

PBR Graphでちょっといじってみよう
ノードの新規作成は　右クリック→CreateNodeでできます
今回カラーを作ってAlbedoに突っ込むとゆうことやってみたいと思います
Input→Basic→ColorをクリックするとColorノードができます
<img width="512" alt="スクリーンショット_2018-06-16_17_43_07.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/dbdd7c0e-cd85-7bda-8d6c-038377c2fd62.png">
Colorノードを赤に変えて、マスターノードのAlbedoに繋げる
![Jun-16-2018 17-46-19.gif](https://qiita-image-store.s3.amazonaws.com/0/158441/23a76b25-91c0-5bcb-f247-86b6e2cb2838.gif)

新規でノード作る際　検索ボックスで直接名前を指定する方法があります
ほとんどのこの方法で作っていくと思います
<img width="203" alt="スクリーンショット_2018-06-16_17_50_25.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/2252b10b-e3f0-0454-b1ac-fb730ac8ea38.png">

次にまたColorノードを作って、青に変えて、マスターノードのEmissionに繋げると
発光している色が青色になりました
<img width="506" alt="スクリーンショット 2018-06-16 17.55.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/2492b15c-fa28-5b7e-9720-0cc0520fc510.png">

もう１パターン新規でノード作る事ができ、プロパティからクリックしながら線をひき何もないところで離すとCreateNodeのダイアログがでます
![Jun-16-2018 18-02-11.gif](https://qiita-image-store.s3.amazonaws.com/0/158441/7ad1a2bc-85dc-45f7-451d-5b0e9f46596f.gif)

例えば、Emissionに繋がっていたColorノードと Multiplyノード（掛け算）してEmissionに繋げるとちょっと明るい状態で出ます
<img width="562" alt="スクリーンショット 2018-06-16 18.06.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/d055dba6-581f-7ba8-850b-7fe70fb0cb5a.png">
ノードがでかすぎて小さくしたい時は隠すボタンがある
１つ目　見た目の状態を隠す
<img width="182" alt="スクリーンショット_2018-06-16_18_07_56.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/b7ad4fef-b430-d125-f8d2-b23a665fe155.png">
↓変化後
<img width="138" alt="スクリーンショット 2018-06-16 18.08.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/ba7394e9-751a-6968-f086-a4614fd651a1.png">

２つ目　ノードが繋がっていないプロパティは隠す
<img width="238" alt="スクリーンショット_2018-06-16_18_11_57.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/29f5cf2b-6894-a7c2-6424-59e4ca05f6a1.png">
↓変化後
<img width="224" alt="スクリーンショット 2018-06-16 18.12.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/3b86d044-07f6-d9f3-d070-eba80b56dfdb.png">

作ったシェーダーを使う時はセーブする必要がある
セーブするとコンパイラが走りプロジェクト内で使えるようになる
<img width="851" alt="スクリーンショット_2018-06-16_18_14_57.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/e4cd1981-3983-c6d2-da00-7767163fde90.png">

マテリアルに設定する際は新規でマテリアルを作成して、graphs→NewShaderGraph（今作ってたシェーダの名前）を選択する
<img width="424" alt="スクリーンショット 2018-06-16 18.19.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/593578f7-210a-b072-2d1a-ab183956f4b2.png">
でゲーム中のオブジェクトにマテリアルを適応すれば完了です
<img width="846" alt="スクリーンショット 2018-06-16 18.22.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/23ff2455-3c91-e5e5-e895-56f19e9d3e4a.png">

もう一つ説明したいポイント
シェーダーグラフの値を引っ張り出してくる方法
グラフ内にプロパティブラックボードとゆうのがあるので
<img width="804" alt="スクリーンショット_2018-06-16_18_28_49.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/b7b02ef1-be7e-b704-a1cf-e8b7b502f3e0.png">

＋ボタンを押すとプロパティの種類がでる 今回はColorを選択すると
<img width="207" alt="スクリーンショット 2018-06-16 18.34.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/cb0374dd-df0a-8a43-ead4-8bfaf385553b.png">

プロパティができます　名前はMainColorにします
<img width="235" alt="スクリーンショット 2018-06-16 18.35.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/271a4360-9a8c-a968-7169-7f2f6a0c27cf.png">

そのプロパティをドラックアンドドロップでグラフ内にドロップすると実体化します
<img width="485" alt="スクリーンショット_2018-06-16_18_39_06.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/11574178-a567-9eaa-32af-bf5d57bef81c.png">

実体化したものは普通にノードとして使えるのでAlbedoに繋げて、セーブして、マテリアルのプロパティに「MainColor」とゆうプロパティが出るので、値をいじってオブジェクトの色が変われば完成です
![Jun-16-2018 18-48-51.gif](https://qiita-image-store.s3.amazonaws.com/0/158441/3b5b17fa-5027-9f3a-819e-8f2e8a2883e8.gif)

#[例１　ディゾルブエフェクト](https://youtu.be/9OP6s5RFNkQ?t=15m34s)
ディゾルブエフェクトとは物体がシュワって消えていくのをAlphaCutoutを使って表現するエフェクトの事
![Jun-30-2018 15-00-25.gif](https://qiita-image-store.s3.amazonaws.com/0/158441/d9f95f3a-9646-4426-a4f9-bca1b67afc23.gif)

AlphaCutoutとは
下記のアルファ値のグラデーションを与えられた時にCutoff値を設定すると、Cutoff値より低いアルファ値のピクセルの描画がキャンセルされるもの　キャンセルした所はすり抜けて見える
<img width="767" alt="スクリーンショット 2018-06-30 15.06.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/538045d7-012b-efc1-e447-255ed8c3caf0.png">
<img width="734" alt="スクリーンショット 2018-06-30 15.06.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/4e5049aa-e1f2-22af-fb0b-5ee8f7c7f156.png">

例
![Jun-30-2018 15-16-58.gif](https://qiita-image-store.s3.amazonaws.com/0/158441/b6dff984-0384-6954-581c-402f52765ef5.gif)
![Jun-30-2018 15-17-28.gif](https://qiita-image-store.s3.amazonaws.com/0/158441/f45f1243-33ca-474d-3aec-460a8025fd63.gif)
↑みたいのを３Dでやってしまおうとゆうのがディゾルブエフェクト

アルファを抜くだけじゃなく　Cutoff値よりちょっと高い領域を切り出して青く光らせる事によってキワの所を青く光らせる事が可能
<img width="755" alt="スクリーンショット 2018-06-30 15.20.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/97cc2a8f-5164-f48a-3a79-dcf37a64502a.png">

さてShaderを組んでいきます
先にベースとなるテクスチャを設定していきます
・マスターノードのnormal,Oculusionを設定
・Albeboを白にします
<img width="523" alt="スクリーンショット 2018-06-30 16.10.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/578ea727-44b1-4983-07d7-557dea219700.png">

ちなみにプレビューのメッシュの変更も可能です
<img width="844" alt="スクリーンショット_2018-06-30_16_11_59.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/38373791-9f5c-135b-713a-2d918d244cee.png">

ノイズのパターンを入れる
CreateNode->「noise」と検索->SimpleNoiseを選択
<img width="239" alt="スクリーンショット_2018-06-30_16_15_41.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/77cd3a24-b201-b1bf-4421-5bc18ede7448.png">

デフォルトだと細かいのでScale（３０ぐらい）でモヤモヤっとした感じにしとく
<img width="268" alt="スクリーンショット_2018-06-30_16_17_36.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/1b30d46a-82b7-d499-fc98-cbb3fa654708.png">
<img width="250" alt="スクリーンショット_2018-06-30_16_17_57.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/f9e2b932-3dac-6613-188c-c04241bf2b0c.png">

SimpleNoiseをMasterノードのAlphaに繋げが見た目は特に変わらない（アルファ値が変わっただけなので）
<img width="829" alt="スクリーンショット_2018-06-30_16_23_52.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/62432e96-3dbe-4424-8375-0cb2d2722bd7.png">
AlphaCutoffの値を設定する
・CreateNode->「vector」と検索->vector 1を選択
・vector 1ノードをMasterノードのAlphaClipTresholdに繋げる
<img width="405" alt="スクリーンショット_2018-06-30_16_31_18.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/b6e37fd3-0b44-6fbd-bbf2-d08c151bc197.png">
でvector 1ノードの値（AlphaCutoffの値）を適当に上げてあげると、はぬけの感じにエフェクトが出来ました
![Jun-30-2018 16-35-31.gif](https://qiita-image-store.s3.amazonaws.com/0/158441/93560f8b-ff8f-de16-c356-4270bc68225c.gif)

次にきわの部分を光らせようと思います
具体的はCutoffの値よりプラス0.05より低い全部のピクセル値を光らせるようにします
<img width="722" alt="スクリーンショット 2018-06-30 16.45.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/f8fa09f7-a2b0-e11f-3508-2075a981ae11.png">
しきい値より上か下かを抜き出したいノード
Stepノードを使うといいです
<img width="627" alt="スクリーンショット 2018-06-30 16.52.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/7de243bd-bfe1-d5d7-87ae-715da156954b.png">

<img width="471" alt="スクリーンショット_2018-06-30_16_55_26.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/00aa9e8f-0076-3bbd-f100-cd7099338b27.png">

実際にやってみる
・CreateNode->「step」と検索->stepを選択
・stepノードのEdgeにvector 1ノードの値（AlphaCutoffの値）を与える
・stepノードのinにSimpleNoiseを繋げる
でEdge値で高い領域、低い領域が二分化されます
<img width="484" alt="スクリーンショット 2018-06-30 17.14.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/9b8566d1-f5a3-4e4d-2e31-64ac30febb08.png">

でstepノードとMasterノードのEmissionに繋げると光るようになる
<img width="567" alt="スクリーンショット 2018-06-30 17.17.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/e9e362d8-5502-ee18-99bc-05f66dea0e51.png">

先ほどCutoff値＋0.05とゆう話をしたので
・CreateNode->「add」と検索->addを選択
・addの値をBの値を0.05にする
<img width="222" alt="スクリーンショット 2018-06-30 17.21.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/dbe82046-4c6e-47b6-b2f3-491339f33a45.png">
・vector 1ノードの値（AlphaCutoffの値）をaddと繋げる
・addとStepのEdge値を繋げる
と　きわの部分を除外する事ができた
<img width="856" alt="スクリーンショット 2018-06-30 17.21.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/8d111170-fb14-f58e-5a4f-17b72a649c90.png">

現状　Cutoff値＋0.05より高い状態が光っている状態
<img width="707" alt="スクリーンショット 2018-06-30 17.27.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/021c1958-d783-ad36-7f6b-7b2f302209b3.png">

ので反転してあげる必要がある
・色を反転してあげるノード「Invert Colors」をCreateNodeで追加
・Stepノード（出力）とInvert Colors（入力）を繋げる
・Invert Colorsの反転フラグを立てる
・Invert Colors（出力）とmasterノードのEmissionに繋げる
<img width="744" alt="スクリーンショット_2018-06-30_17_33_41.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/8e9c84a4-a7cc-cbd7-3a23-2c2e9d26ecda.png">
できわの部分が光るようになっています
徐々に完成に近づいてきました

次に自動（時間で）でアニメーションされるようにします
・ゲームが始まってからの時間を秒で返すノード「Time」をCreateNodeで追加
・小数点以下の値を取り出すノード「Fraction」をCreateNodeで追加
 例えば
　　<img width="441" alt="スクリーンショット 2018-06-30 17.40.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/d3d48a4a-9d52-2792-3c8d-89c2ec3265b2.png">

　<img width="474" alt="スクリーンショット_2018-06-30_17_42_01.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/59192819-fd2b-e81c-2883-d9fb24b34929.png">

<img width="302" alt="スクリーンショット_2018-06-30_17_47_47.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/61117dce-ac64-9b2b-09aa-3e19b91e302e.png">

実際に使ってみるとこんな感じになる
![Jun-30-2018 17-54-43.gif](https://qiita-image-store.s3.amazonaws.com/0/158441/8f49ad32-d61d-7b86-d33a-08971a90a878.gif)

・vector 1ノードの値（AlphaCutoffの値）とaddと繋がっている線をきりFraction（出力）とadd（入力）を繋げる
・Fraction（出力）とMasterノードのAlphaClipTresholdと繋げる
と１秒ごとに切り替わるものが出来ました
![Jun-30-2018 18-02-05.gif](https://qiita-image-store.s3.amazonaws.com/0/158441/592c9798-8b1d-7ccc-eeba-8e1dc71b04d0.gif)

あとは色を指定してあげるようにする
消えて聞く時に青白くするようにします
・プロパティブラックボードで「Color」プロパティを選択
・発光する感じを出したいのでModeをHDRにする
　<img width="170" alt="スクリーンショット 2018-06-30 18.13.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/2aab9a92-d325-33b7-c542-fc87da704ca5.png">
・輝度をちょっと明るめにしてちょっと青っぽくする
<img width="192" alt="スクリーンショット 2018-06-30 18.15.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/730fd8cd-740f-6a14-1b4c-74c628c2f036.png">
・「Color」プロパティをドラッグアンドドロップで実体化
・マスクのパターンに掛け合わせたので「Multiply」ノード（入力）に「Color」プロパティを繋げて、「Invert Colors」ノード（出力）を繋げてる
・「Multiply」ノード（出力）からMasterノードのEmissionを繋げる
<img width="386" alt="スクリーンショット_2018-06-30_18_22_06.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/aab9392c-c450-1181-1c99-c89172b276ec.png">

で完了です　実際にゲームビューで確認します
![Jun-30-2018 18-31-24.gif](https://qiita-image-store.s3.amazonaws.com/0/158441/8c9f3409-118c-dc54-bc89-6e6af460419a.gif)

おさらいとして　全体の構成図
<img width="778" alt="スクリーンショット 2018-06-30 18.33.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/2863e1fc-b7cd-61a2-affc-71256d9b3369.png">

<img width="813" alt="スクリーンショット 2018-06-30 18.35.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/cabd444c-bae7-d116-98b7-8d07e0e95482.png">
<img width="815" alt="スクリーンショット 2018-06-30 18.35.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/89e5b000-2956-d610-978c-2abe94ddbaad.png">
<img width="783" alt="スクリーンショット 2018-06-30 18.36.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/80ee79d3-a680-1ec4-4bcd-6705c69dba41.png">

ポイントとなるノード
<img width="644" alt="スクリーンショット 2018-06-30 18.37.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/e16d9faa-aa5b-40b1-facc-000b8ac4b9a2.png">

#[例２　エネルギーゲージ](https://youtu.be/9OP6s5RFNkQ?t=27m24s)
直線的なものに関してスケールや移動などで簡単に実装したりするが
湾曲みたいな形状を実装すると結構難しい
![Jul-07-2018 14-43-02.gif](https://qiita-image-store.s3.amazonaws.com/0/158441/344090a2-047f-72d7-f9d3-7a09e4c51413.gif)

変形しているゲージの実装する為の１つの手段として
<img width="491" alt="スクリーンショット 2018-07-07 14.48.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/ab150edf-4557-403d-261a-ba44ee416141.png">

ゲージにそったグラデーションのパターンを用意し、スレッショルドを変更するとゲージっぽい埋まっている状態や空の状態を作り出せる事ができる
これをシェーダーグラフのstepノードを使えば実装が出来ます
手軽なテクニックなのでオススメです
![Jul-07-2018 14-56-02.gif](https://qiita-image-store.s3.amazonaws.com/0/158441/aaa84906-ff1e-7f1f-5713-13513f6b615e.gif)

そのうえでゲージの枠を作ってあげて　アルファブレンディングで合成して上げて
<img width="450" alt="スクリーンショット 2018-07-07 15.01.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/12a1ef74-04f5-74c4-3c25-82c5b3310fd9.png">

色をつける為のグラデーションの素材も用意してあげる
<img width="715" alt="スクリーンショット 2018-07-07 15.03.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/1a32a2cb-f2db-70ab-7eae-6a6d708b6470.png">

さて早速シェーダーグラフを使って作っていきましょう
今回はPBRグラフを使わないのでUnlitグラフを使います　→ライティングを使わない為
プレビューはデフォルトのスフィアだと見にくいので「Quad」に変更　スプライト的な奴
MasterノードのSurfaceを透明化できる「Transparent」に変更　デフォルトだと不透明の「Opaque」になっています
<img width="296" alt="スクリーンショット_2018-07-07_15_10_07.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/cba05fc1-f344-f927-eaee-3629c8a7e4b1.png">

SampleTexture2Dノードを作り、グラデーションのバーを読み込みます
<img width="202" alt="スクリーンショット_2018-07-07_15_18_09.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/9ca48a0c-e5e6-4c65-9fd2-a0a47502e80c.png">

SampleTexture2Dノード（グラデーションのバー）のRGBA値をマスターノードのColorに突っ込んで
SampleTexture2Dノード（グラデーションのバー）のA値をマスターノードのAlphaに突っ込むと
ゲージのグラデーション素材が読み込まれました
<img width="856" alt="スクリーンショット 2018-07-07 15.21.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/1178d19b-f09b-b1ef-5b47-5741c49a85cd.png">

次にスレッショルドを使ってバーを動かす状態にしたいので
Stepノードを作って、SampleTexture2Dノード（グラデーションのバー）のRGBA値をStepノードのInに繋げる
Edgeの値を与えるためにVector1ノードを作ってStepノードのEdge値に繋げる
Vector1ノードの値を変更してあげると変更ができる　ちょっと画像が化けているがちゃんとゲージが動いているはず
![Jul-07-2018 15-59-56.gif](https://qiita-image-store.s3.amazonaws.com/0/158441/6614b31c-43f8-2b68-3dab-fe7b75beb2e2.gif)

でこれで作った動きと元で作ったアルファ値を掛け合わせてColorの状態でマスターノードに出力してあげる
具体的なやり方　StepノードとSampleTexture2Dノード（グラデーションのバー）のA値をMultiplyノードで掛け合わせてMultiplyノードをマスターノードのRGB値に与えてあげると以下のようになる
![Jul-07-2018 16-10-19.gif](https://qiita-image-store.s3.amazonaws.com/0/158441/ddc11b32-551b-d11f-7ed7-afe662bcdc26.gif)

ここで問題がVector1ノードが０の時に満タンになって１の時に空になってしまうので、本当は逆にしたいので、値を逆に変換します。
こうゆう時に使うノードがRemapノード
<img width="430" alt="スクリーンショット 2018-07-07 16.12.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/7ad6d364-a4c2-a1a4-1e31-bbe481997114.png">

これがRemapノード
<img width="430" alt="スクリーンショット 2018-07-07 16.13.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/38f90c6d-2735-001a-0b23-3e38d6463be0.png">

<img width="798" alt="スクリーンショット 2018-07-07 16.15.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/964eff95-79e4-2ed7-f9fe-04ac043eb2d1.png">

具体的な例
sin波の場合　−１から１の間を反復する感じになるので
<img width="569" alt="スクリーンショット 2018-07-07 16.17.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/10e8ff66-d50c-ce65-878f-6163f81b99b4.png">

−１から１の間を反復する感じじゃなくて０.３から０.７の間を反復させたい時にRemapノードを使ってください
<img width="680" alt="スクリーンショット 2018-07-07 16.18.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/4b4f3703-84ad-04bb-c477-f444c90493f8.png">

実際に上の例にそったRemapノードが下記のようになります
<img width="456" alt="スクリーンショット_2018-07-07_16_19_51.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/3ecae480-704e-9621-896f-b2811d05193b.png">

で今回０から１の値を
<img width="526" alt="スクリーンショット 2018-07-07 16.24.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/e650c3fb-bc11-7ed2-7aa7-ea6ae1f978a2.png">

１から０の値にしたいので
<img width="579" alt="スクリーンショット 2018-07-07 16.25.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/9997a8c7-cee1-6afb-be4d-9242895c878a.png">

Remapノード的にはこんな感じになります
<img width="461" alt="スクリーンショット 2018-07-07 16.26.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/8d5ebb58-a7d7-b82c-9bbd-7c8e8fb34c4e.png">

実際に組み込むとこんな感じ
<img width="889" alt="スクリーンショット_2018-07-07_16_28_23.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/4f6256c6-183b-5a7b-d0aa-7348b0384ddd.png">

組み込んでみたが不安が、よく見るとエッジの部分がジャギっている
<img width="390" alt="_8__【Unite_Tokyo_2018】新機能Shader_Graphを使えばプログラミング無しにシェーダーが作れるようになります！_-_YouTube.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/a0ff87e7-207b-6593-7faf-5e50e0cf3155.png">

その理由はStepノードは０と１の間はスパッと切れるので境目がギザギザしやすくなる
<img width="582" alt="_8__【Unite_Tokyo_2018】新機能Shader_Graphを使えばプログラミング無しにシェーダーが作れるようになります！_-_YouTube.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/e6f5db63-5b5a-0970-0119-65c2677ec08d.png">

解決方法は簡単でSmoothStepノードを使う
文字通りStepノードがなめらになったノード
<img width="600" alt="_8__【Unite_Tokyo_2018】新機能Shader_Graphを使えばプログラミング無しにシェーダーが作れるようになります！_-_YouTube.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/d96437f7-3d7b-3aad-55ef-08522143fda0.png">

SmoothStepノードとはedge1とedge2の選択ができる
edge1より低い値は０を返して、edge２より高い値は１を返す
edge1とedge2の間は滑らかに繋いでくれる
<img width="340" alt="スクリーンショット 2018-07-07 16.40.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/7e9161cb-916e-581b-a646-fd223effcb10.png">

で今回は入力値と入力値＋0.05の間を滑らかにつなぐようにしてギザギザを目立たなくします
<img width="204" alt="スクリーンショット 2018-07-07 16.43.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/25e2c4fc-63ba-80b0-3664-b7e36617d486.png">

実際やってみましょう
Stepノードの代わりにSmoothStepノードを作ってRemapした値をSmoothStepノードのedge1に繋げる
SampleTexture2Dノード（グラデーションのバー）のRGBA値をSmoothStepノードのinに繋げる
SmoothStepノードのoutと、Stepノードと繋がっていたMultiplyノードを繋げる
Stepノードは消す
0.05プラスしたかったので
Addノードを作ってRemapノードのoutとAddノードのAに繋げて、Bの値を0.05にして、SmoothStepノードのedge2に繋げる
これでSmoothStepが適応された状態になりました
![Jul-07-2018 16-56-50.gif](https://qiita-image-store.s3.amazonaws.com/0/158441/47f8f8a9-82db-a5fb-7281-4ebbb07f0f7e.gif)

でほとんどゲージはできました。次は色をつけてみましょう
色のグラデーション素材を用意し、これを適応してみましょう
<img width="715" alt="スクリーンショット 2018-07-07 15.03.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/9af61ff2-44e1-1f5c-65c6-f914ca097a0a.png">

SampleTexture2Dノードを作って、色のグラデーション素材を参照して　SampleTexture2DノードのUV値にVector1の値を入れてあげて　値を変更してあげると、１に近づくほど緑になって０に近ずくほど赤になるようになる
![Jul-07-2018 17-04-59.gif](https://qiita-image-store.s3.amazonaws.com/0/158441/4e916f6e-88b7-baa3-67f7-6059207e0a55.gif)

このSampleTexture2Dノードの値を掛け合わせたいので、Multiplyノード作ってSampleTexture2DノードとかけてSmoothStepノードに繋がっているMultiplyノードと掛け合わせると色の適用ができました。
![Jul-07-2018 17-12-43.gif](https://qiita-image-store.s3.amazonaws.com/0/158441/97fe362e-c591-4ed8-5976-dc98313aebc7.gif)

次に枠を組み込みますのでアルファブレンディングをしたいと思います
<img width="450" alt="スクリーンショット 2018-07-07 15.01.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/632f46f6-6e78-e37f-486f-ba3076302c89.png">

シェーダーグラフでアルファブレンディングをしたいのであればLerpノードが一番簡単
<img width="675" alt="スクリーンショット 2018-07-07 17.14.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/5c156cd5-0b11-ecac-5529-666781638f7c.png">

実際に組み込むと
[動画](https://youtu.be/9OP6s5RFNkQ?t=36m35s)　文だとわかりずらいのでここの部分は動画を参照してください

プロパティブラックボードを使って、値をインスペクター上で操作できるようにしたいので、TypeをVector1にしてModeをスライダーにして０から１の間に設定する　設定したものをVector1と差し替える
<img width="521" alt="_8__【Unite_Tokyo_2018】新機能Shader_Graphを使えばプログラミング無しにシェーダーが作れるようになります！_-_YouTube.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/2b0300a4-828b-d862-1d2d-dd144e24b661.png">

で保存してゲーム画面でプレビューしてみます
![Jul-07-2018 17-30-14.gif](https://qiita-image-store.s3.amazonaws.com/0/158441/eb5d6248-54d0-35c0-938a-3b851f11ff53.gif)

とできましたが、１点バグがあります
値を１にして満タン状態にするとゲージが上がりきっていない
<img width="860" alt="_8__【Unite_Tokyo_2018】新機能Shader_Graphを使えばプログラミング無しにシェーダーが作れるようになります！_-_YouTube.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/efe322a2-8a7e-4e4a-d2e6-e46bfee72b13.png">

どうゆう状態かとゆうと、SmoothStepノードで上がりきらない領域ができちゃっている
<img width="405" alt="_8__【Unite_Tokyo_2018】新機能Shader_Graphを使えばプログラミング無しにシェーダーが作れるようになります！_-_YouTube.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/79f67b23-611e-8f03-ab9f-c5806c94c22c.png">

なのでこうゆう状態にずらしてあげる
<img width="415" alt="スクリーンショット 2018-07-07 17.40.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/1dd07c89-a7a5-fcbc-8d74-4cc5ff09cc59.png">

Remapノードの値を変更してあげる
<img width="351" alt="スクリーンショット_2018-07-07_17_41_37.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/2bf3eb06-0437-64c3-147c-abb6223780b5.png">

でバグは解消されました
<img width="887" alt="スクリーンショット 2018-07-07 17.45.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/a434a445-a06d-6670-bf3d-018d249b4fee.png">

おさらい
<img width="1275" alt="スクリーンショット 2018-07-07 17.46.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/0bedb31f-e31e-8907-8ab2-ced655b32edb.png">
<img width="1270" alt="スクリーンショット 2018-07-07 17.46.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/5f61fd39-aafb-7a03-6851-cbe8139833a9.png">
<img width="1270" alt="スクリーンショット 2018-07-07 17.46.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/bc2d3b40-3f4d-6e92-a353-d570d22dbee2.png">
<img width="1276" alt="スクリーンショット 2018-07-07 17.46.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/9036ebec-3f69-a260-b389-e30f7e4a4afc.png">

#[例３　古風なTVエフェクト](https://youtu.be/9OP6s5RFNkQ?t=41m13s)
ノイズっぽいエフェクト　よく画像の連番アニメーションや動画などで表現することがあるが、あまりパフォーマンスがよくないのであまりよろしくない
![Jul-07-2018 18-23-23.gif](https://qiita-image-store.s3.amazonaws.com/0/158441/7328163f-2b0f-2b97-29ed-89fd16ff05b0.gif)

では実際にやってみましょう
・PBRグラフを作って、SampleTexture2Dノードを作りモナリザの画像を読み込んでくる
・SampleTexture2Dノード（モナリザ）をブラウン管テレビのように自己発光的な感じにしたいのでマスターノードのEmiisionに繋げる
・ちょっとテカってて見にくいのでalbedoの色を黒にします　あと、マスターノードのSmoothnessを０にします　テカリの要素を排除します
<img width="837" alt="スクリーンショット 2018-07-07 18.35.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/8115b74d-3623-f254-95c2-64e72ad7851f.png">

まずはシマシマの線を表現して見ましょう
<img width="839" alt="スクリーンショット 2018-07-07 18.36.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/36661fee-968f-3789-e5d7-db806ddd8ba3.png">

こういった簡単な形状のシマシマはテクスチャで作るのもいいがシェーダーでやった方が早い
シマシマを作るにはsineノードがいいのではないかと思います
sineと聞くと子難しい感じはしますが、要するには値が滑らかに上がったり下がったりするするだけです
<img width="700" alt="スクリーンショット 2018-07-07 18.41.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/93441c66-f29b-3af3-5c8d-bd8750417f0e.png">

こんな感じに
<img width="914" alt="スクリーンショット 2018-07-07 18.43.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/ecd8f316-efeb-deb1-67b3-9ff4b155fc92.png">

周期を細かくすると　ブラウン管のシマシマ模様になる
<img width="876" alt="スクリーンショット 2018-07-07 18.44.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/0676c3f9-2108-bfca-ab05-0de7470822ea.png">

実際にsineノード作って見ます
UV座標の高さを基準とするので　UVノードを作り　縦軸のY軸を取り出してあげる必要がある
<img width="368" alt="スクリーンショット 2018-07-07 18.49.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/821ac12a-0caa-ec5a-684c-26e9233480d3.png">

各成分の値を取り出すにはSplitノードを使います
<img width="535" alt="スクリーンショット 2018-07-07 18.50.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/5c7bea9a-0452-8229-64a9-818080a1c884.png">

<img width="718" alt="スクリーンショット_2018-07-07_18_52_02.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/4232d8e3-241f-8c93-72c9-1002988a0b68.png">

実際に使ってみると
・Splitノードを作り、UVノードの値をSplitノードに突っ込んであげる
・SplitノードのGの値をSineノードに突っ込む　ちなみに表示ではGになっているが中身的にはY軸の意味です
<img width="671" alt="スクリーンショット 2018-07-07 19.01.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/a68fbada-4563-c73f-d02a-27e955b7efbb.png">

・これを細かくしたいので、SplitノードのGの値のかけてあげます　
・MultiplyノードをSplitノードのGの値とつなぎ　Multiplyノードのoutからsineノードと繋げる
・Multiplyノードの掛けている値をあげてあげる
![Jul-07-2018 19-05-56.gif](https://qiita-image-store.s3.amazonaws.com/0/158441/2b11efde-3662-13ef-7239-30ee7322d5c6.gif)

一応できましたですが、Sineには一点弱点がある
sine波は−１から１の範囲なので、　マイナスの値は色に悪影響与えるので
<img width="850" alt="【Unite_Tokyo_2018】新機能Shader_Graphを使えばプログラミング無しにシェーダーが作れるようになります！_-_YouTube.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/5933edec-d3da-375c-f3b5-c5dfbcf769cb.png">

切り出しておく必要がある
<img width="914" alt="スクリーンショット 2018-07-07 19.13.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/53058c05-0c73-9500-da69-0a237b11d30c.png">

０から１以外を切り捨てるSaturateノードが必要
<img width="638" alt="スクリーンショット 2018-07-07 19.15.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/e044b13d-5a1c-737d-053d-7e07d6ddd3dc.png">

<img width="443" alt="【Unite_Tokyo_2018】新機能Shader_Graphを使えばプログラミング無しにシェーダーが作れるようになります！_-_YouTube.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/97956ee8-50ac-8366-7b8e-248141297ee7.png">

・これをSineノードの値からSaturateノードに突っ込む　見た目上は変わらないですが、将来のバグは防げました。
・SaturateノードとSample2DTextureノードと掛け合わせる（Multiplyノード）てマスターノードに繋げてあげるとモナリザの画像にシマシマが重なりました
<img width="881" alt="スクリーンショット 2018-07-07 19.26.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/5ae26378-e8f1-f66e-125f-265489a7c279.png">

・シマシマのせいで画像が暗くなったので無理やり明るくしましょう　Multiplyノードで掛けてあげましょう
<img width="702" alt="スクリーンショット 2018-07-07 19.27.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/38bf5315-a447-8d89-444c-e52a368d7477.png">

シマシマのUVアニメーションさせましょう
・Tmeノード作ってAddノードを作り、シマシマのUV値に足してあげます
・デフォルトだと鈍いので、Timeノードが出ている値をMultiplyで掛けてあげます
![Jul-07-2018 19-36-48.gif](https://qiita-image-store.s3.amazonaws.com/0/158441/26b64898-e0fe-1522-050b-a7f9344a7ed1.gif)

次は横にぶれるようなノイズを作って見ましょう　単純にU値にノイズをやってあげればいい
<img width="687" alt="スクリーンショット 2018-07-07 19.37.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/a15d48cc-3cdd-6b44-4262-ae457487c017.png">

ではやって見ましょう
ちょっとここから　複雑で文章より動画を見た方が伝わると思いますので、
こちらの動画を参照してください
[おさらいまで](https://youtu.be/9OP6s5RFNkQ?t=47m4s)

おさらい
<img width="857" alt="スクリーンショット 2018-07-07 19.56.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/8dee1b97-3751-22b2-8e01-7b62d436da59.png">
<img width="863" alt="スクリーンショット 2018-07-07 19.56.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/b152a9fb-57fd-383a-d9fc-d1e22b05ce5d.png">
<img width="890" alt="スクリーンショット 2018-07-07 19.57.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/bb36b6bb-fccd-fc43-37c9-3eed65e808da.png">
<img width="748" alt="スクリーンショット 2018-07-07 19.57.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/16d6909e-9476-ff46-401d-f3de4eda9343.png">

#[補足情報](https://youtu.be/9OP6s5RFNkQ?t=50m54s)
今回使ったプロジェクト
https://github.com/keijiro/ShaderGraphExamples
<img width="704" alt="スクリーンショット 2018-07-07 19.59.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/945d0185-a1a1-69f3-7525-334a2e851fdd.png">

シェーダーグラフはオープンソース開発されています
何か問題があったら連絡してもらえればと思います
<img width="427" alt="スクリーンショット 2018-07-07 20.08.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/61869e03-b0b5-4b8e-83f2-f9f35f8c72d8.png">
https://github.com/Unity-Technologies/ShaderGraph

カスタムノードが作れることができる　
参考ページ
https://blogs.unity3d.com/jp/2018/03/27/shader-graph-custom-node-api-using-the-code-function-node/
<img width="425" alt="スクリーンショット 2018-07-07 20.09.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/a7aca796-0122-1211-efac-79450c36f967.png">
<img width="864" alt="スクリーンショット 2018-07-07 20.13.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/c0d322b4-d778-c987-a822-16b80d301085.png">
<img width="858" alt="スクリーンショット 2018-07-07 20.14.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/1027c8ae-09ee-3f04-d6ed-b579af456d24.png">
実際作って見たのがこれ
<img width="707" alt="_9__【Unite_Tokyo_2018】新機能Shader_Graphを使えばプログラミング無しにシェーダーが作れるようになります！_-_YouTube.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/11436269-348e-a507-7921-12e9bde2d179.png">

#[今後の予定](https://youtu.be/9OP6s5RFNkQ?t=52m43s)
HDRPの対応が早急の課題
頂点シェーダーも対応予定　近日中に実装される
<img width="496" alt="スクリーンショット 2018-07-07 20.19.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/87e8b102-27dd-b372-7611-8d0bc7e6697b.png">

<img width="592" alt="スクリーンショット 2018-07-07 20.21.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/c8ca2f10-7894-056e-80ca-86d2d839a7c1.png">

バージョン管理
シェーダーグラフはjsonファイルなのでgitやsvnで管理でいけますが
<img width="445" alt="スクリーンショット 2018-07-07 20.22.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/5be81287-16cb-717a-ab27-c5fabb2d902b.png">
差分をうまく拾える感じになっていないので、衝突の自動マージができないので、そこらへんは防止は運用でカバーお願いします。
<img width="483" alt="スクリーンショット 2018-07-07 20.27.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/158441/e74525c8-6a02-73e0-9cdc-613cc0092578.png">

以上終わりです

##今後の記事の更新
・もうちょい初心者でもわかりやすく補足とか入れたい
・[AmplifyShaderEditorで例１〜３を作ってみた](https://qiita.com/Sase/items/0febaf1f6204be65e90e)
・レイアウトも見やすくする