Edited at

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

More than 1 year has passed since last update.


はじめに

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

タイムライン付き


ShaderGraphとは

Unity 2018から使える新しいシェーダーの仕組み

いわゆるノードベースのシェーダーエディター

ノードとはグラフ上でボックスを配置し線で繋げて マテリアのデザインをする

スクリーンショット 2018-06-16 14.11.57.png

リムライトの例 ライティングのエフェクトを強化する為にも使えます

スクリーンショット 2018-06-16 14.18.45.png


簡単な例 マルチテクスチャ

マルチテクスチャとは 3Dモデルに2枚のテクスチャを重ねるように貼り付ける

ちなみにデモでは樽のオブジェクトを使ってます

スクリーンショット 2018-06-16 14.37.34.png

初期状態はマスターノード(出力先)しか配置されていません

スクリーンショット_2018-06-16_14_24_13.png

次にテクスチャを貼りたいので適当な空いてる場所で右クリック→CreateNode→検索でSampleTexture2Dを配置しTextureプロパティにテクスチャを配置する

スクリーンショット_2018-06-16_14_37_34.png

RGBA(色情報)からドラッグ&ドロップすると線が出るのでマスターノードのAlbedoに繋げます

Jun-16-2018 14-45-44.gif

結果

スクリーンショット 2018-06-16 14.52.50.png

補足として 

処理の流れとして左から右に流れます

ノードの見方は基本 左が入力で右が出力です

スクリーンショット_2018-06-16_14_55_32.png

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

SampleTexture2Dを出して、Textureプロパティにテクスチャを追加、TypeをNormalに変更

スクリーンショット_2018-06-16_15_00_44.png

そしてRGBA(色情報)をマスターノードのNormalに繋げる

スクリーンショット 2018-06-16 15.04.46.png

結果 ちょっと見辛いですね すいません

スクリーンショット 2018-06-16 15.07.45.png

マルチテクスチャなのでもう一枚テクスチャ作ってあげてブレンドして出力してあげる

SampleTexture2Dノードを出して、TextureプロパティにUnityロゴのテクスチャを指定して

Blendノードを出して、2つのSampleTexture2DノードとBlendノード繋げる

スクリーンショット 2018-06-16 16.01.01.png

BlendノードにはいろんなBlendモードが用意されている

例えば「Lighten」を選ぶと明度が高い方を前に出すとゆう事ができる

スクリーンショット_2018-06-16_16_03_18.png

BlendノードのOutからマスターノードのAlbedoを繋げると合成された状態で出力されます

スクリーンショット 2018-06-16 16.07.40.png

このままだとUnityロゴがでかすぎるのでUVをリピートさせます

UVノード(UVをいじる時必要)を出して、Multiplyノード(掛け算)してあげればいいです その情報をSampleTexture2DノードのUVプロパティに流すと完成です

スクリーンショット_2018-06-16_16_11_16.png


ShaderGraphを開発した理由

スクリーンショット 2018-06-16 16.37.28.png

スクリーンショット 2018-06-16 16.38.33.png

今までのUnityはレンダリング方式(「Forward」とか「Deferred」)切り替えるたびにシェーダーを変えないといけなかった

スクリーンショット 2018-06-16 16.41.39.png

でもこれからはSRP(スクリタブルレンダーパイプライン)が登場します

SRPとはC#を使って描画設計を行う事ができるもの

スクリーンショット 2018-06-16 16.48.09.png

Unityからは主に「Lightweught」と「HighDefinition」を提供します

スクリーンショット 2018-06-16 16.50.00.png

スクリーンショット 2018-06-16 16.53.10.png

今後レンダーパイプラインがいろいろ出てくると、それぞれのレンダーパイプラインに対してシェーダーを書き直すのは運用としては厳しいので、シェーダーグラフがあれば使いまわせところを目指しています。

スクリーンショット 2018-06-16 17.01.27.png


セットアップ手順

一番楽な方法はLightweight RPをインストールする

現在Shader Graphの開発はLightweight RP上で開発されている

Lightweight RPすれば勝手にShader Graphがインストールされる

スクリーンショット 2018-06-16 17.04.02.png

Lightweight RPのインストール方法は大体2通り

Bの方がおすすめ

スクリーンショット 2018-06-16 17.08.07.png

Bのやり方

プロジェクトを作成する画面でTemplate->Lightweight RP(Preview)を選択してあげてCreateProjectします

スクリーンショット_2018-06-16_17_10_18.png

基本この状態でShader Graphは使えるようになっています

スクリーンショット 2018-06-16 17.14.54.png

プロジェクトビューで右クリック→Create→Shader→PBR Graph、Sub Graph、Unlit Graphがシェーダーグラフのアセットです

スクリーンショット_2018-06-16_17_17_28.png

例えばPBR Graphを選ぶとプロジェクトビューにシェーダーアセットが追加されます

スクリーンショット_2018-06-16_17_20_34.png

で追加されたシェーダーアセットをダブルクリックするとShader Graphエディタ画面が立ち上がります

スクリーンショット 2018-06-16 17.22.51.png


シェーダーグラフの基礎

PBR GraphとUnlit Graphの違い

Sub Graphはマニアックな機能なので今回は説明しません

スクリーンショット 2018-06-16 17.27.02.png

PBRの見え方

スクリーンショット 2018-06-16 17.29.04.png

Unlitの見え方

スクリーンショット 2018-06-16 17.30.04.png

PBR Graphでちょっといじってみよう

ノードの新規作成は 右クリック→CreateNodeでできます

今回カラーを作ってAlbedoに突っ込むとゆうことやってみたいと思います

Input→Basic→ColorをクリックするとColorノードができます

スクリーンショット_2018-06-16_17_43_07.png

Colorノードを赤に変えて、マスターノードのAlbedoに繋げる

Jun-16-2018 17-46-19.gif

新規でノード作る際 検索ボックスで直接名前を指定する方法があります

ほとんどのこの方法で作っていくと思います

スクリーンショット_2018-06-16_17_50_25.png

次にまたColorノードを作って、青に変えて、マスターノードのEmissionに繋げると

発光している色が青色になりました

スクリーンショット 2018-06-16 17.55.28.png

もう1パターン新規でノード作る事ができ、プロパティからクリックしながら線をひき何もないところで離すとCreateNodeのダイアログがでます

Jun-16-2018 18-02-11.gif

例えば、Emissionに繋がっていたColorノードと Multiplyノード(掛け算)してEmissionに繋げるとちょっと明るい状態で出ます

スクリーンショット 2018-06-16 18.06.52.png

ノードがでかすぎて小さくしたい時は隠すボタンがある

1つ目 見た目の状態を隠す

スクリーンショット_2018-06-16_18_07_56.png

↓変化後

スクリーンショット 2018-06-16 18.08.14.png

2つ目 ノードが繋がっていないプロパティは隠す

スクリーンショット_2018-06-16_18_11_57.png

↓変化後

スクリーンショット 2018-06-16 18.12.10.png

作ったシェーダーを使う時はセーブする必要がある

セーブするとコンパイラが走りプロジェクト内で使えるようになる

スクリーンショット_2018-06-16_18_14_57.png

マテリアルに設定する際は新規でマテリアルを作成して、graphs→NewShaderGraph(今作ってたシェーダの名前)を選択する

スクリーンショット 2018-06-16 18.19.06.png

でゲーム中のオブジェクトにマテリアルを適応すれば完了です

スクリーンショット 2018-06-16 18.22.45.png

もう一つ説明したいポイント

シェーダーグラフの値を引っ張り出してくる方法

グラフ内にプロパティブラックボードとゆうのがあるので

スクリーンショット_2018-06-16_18_28_49.png

+ボタンを押すとプロパティの種類がでる 今回はColorを選択すると

スクリーンショット 2018-06-16 18.34.13.png

プロパティができます 名前はMainColorにします

スクリーンショット 2018-06-16 18.35.21.png

そのプロパティをドラックアンドドロップでグラフ内にドロップすると実体化します

スクリーンショット_2018-06-16_18_39_06.png

実体化したものは普通にノードとして使えるのでAlbedoに繋げて、セーブして、マテリアルのプロパティに「MainColor」とゆうプロパティが出るので、値をいじってオブジェクトの色が変われば完成です

Jun-16-2018 18-48-51.gif


例1 ディゾルブエフェクト

ディゾルブエフェクトとは物体がシュワって消えていくのをAlphaCutoutを使って表現するエフェクトの事

Jun-30-2018 15-00-25.gif

AlphaCutoutとは

下記のアルファ値のグラデーションを与えられた時にCutoff値を設定すると、Cutoff値より低いアルファ値のピクセルの描画がキャンセルされるもの キャンセルした所はすり抜けて見える

スクリーンショット 2018-06-30 15.06.22.png

スクリーンショット 2018-06-30 15.06.45.png



Jun-30-2018 15-16-58.gif

Jun-30-2018 15-17-28.gif

↑みたいのを3Dでやってしまおうとゆうのがディゾルブエフェクト

アルファを抜くだけじゃなく Cutoff値よりちょっと高い領域を切り出して青く光らせる事によってキワの所を青く光らせる事が可能

スクリーンショット 2018-06-30 15.20.56.png

さてShaderを組んでいきます

先にベースとなるテクスチャを設定していきます

・マスターノードのnormal,Oculusionを設定

・Albeboを白にします

スクリーンショット 2018-06-30 16.10.09.png

ちなみにプレビューのメッシュの変更も可能です

スクリーンショット_2018-06-30_16_11_59.png

ノイズのパターンを入れる

CreateNode->「noise」と検索->SimpleNoiseを選択

スクリーンショット_2018-06-30_16_15_41.png

デフォルトだと細かいのでScale(30ぐらい)でモヤモヤっとした感じにしとく

スクリーンショット_2018-06-30_16_17_36.png

スクリーンショット_2018-06-30_16_17_57.png

SimpleNoiseをMasterノードのAlphaに繋げが見た目は特に変わらない(アルファ値が変わっただけなので)

スクリーンショット_2018-06-30_16_23_52.png

AlphaCutoffの値を設定する

・CreateNode->「vector」と検索->vector 1を選択

・vector 1ノードをMasterノードのAlphaClipTresholdに繋げる

スクリーンショット_2018-06-30_16_31_18.png

でvector 1ノードの値(AlphaCutoffの値)を適当に上げてあげると、はぬけの感じにエフェクトが出来ました

Jun-30-2018 16-35-31.gif

次にきわの部分を光らせようと思います

具体的はCutoffの値よりプラス0.05より低い全部のピクセル値を光らせるようにします

スクリーンショット 2018-06-30 16.45.04.png

しきい値より上か下かを抜き出したいノード

Stepノードを使うといいです

スクリーンショット 2018-06-30 16.52.25.png

スクリーンショット_2018-06-30_16_55_26.png

実際にやってみる

・CreateNode->「step」と検索->stepを選択

・stepノードのEdgeにvector 1ノードの値(AlphaCutoffの値)を与える

・stepノードのinにSimpleNoiseを繋げる

でEdge値で高い領域、低い領域が二分化されます

スクリーンショット 2018-06-30 17.14.20.png

でstepノードとMasterノードのEmissionに繋げると光るようになる

スクリーンショット 2018-06-30 17.17.56.png

先ほどCutoff値+0.05とゆう話をしたので

・CreateNode->「add」と検索->addを選択

・addの値をBの値を0.05にする

スクリーンショット 2018-06-30 17.21.49.png

・vector 1ノードの値(AlphaCutoffの値)をaddと繋げる

・addとStepのEdge値を繋げる

と きわの部分を除外する事ができた

スクリーンショット 2018-06-30 17.21.28.png

現状 Cutoff値+0.05より高い状態が光っている状態

スクリーンショット 2018-06-30 17.27.11.png

ので反転してあげる必要がある

・色を反転してあげるノード「Invert Colors」をCreateNodeで追加

・Stepノード(出力)とInvert Colors(入力)を繋げる

・Invert Colorsの反転フラグを立てる

・Invert Colors(出力)とmasterノードのEmissionに繋げる

スクリーンショット_2018-06-30_17_33_41.png

できわの部分が光るようになっています

徐々に完成に近づいてきました

次に自動(時間で)でアニメーションされるようにします

・ゲームが始まってからの時間を秒で返すノード「Time」をCreateNodeで追加

・小数点以下の値を取り出すノード「Fraction」をCreateNodeで追加

例えば

  スクリーンショット 2018-06-30 17.40.56.png

 スクリーンショット_2018-06-30_17_42_01.png

スクリーンショット_2018-06-30_17_47_47.png

実際に使ってみるとこんな感じになる

Jun-30-2018 17-54-43.gif

・vector 1ノードの値(AlphaCutoffの値)とaddと繋がっている線をきりFraction(出力)とadd(入力)を繋げる

・Fraction(出力)とMasterノードのAlphaClipTresholdと繋げる

と1秒ごとに切り替わるものが出来ました

Jun-30-2018 18-02-05.gif

あとは色を指定してあげるようにする

消えて聞く時に青白くするようにします

・プロパティブラックボードで「Color」プロパティを選択

・発光する感じを出したいのでModeをHDRにする

 スクリーンショット 2018-06-30 18.13.32.png

・輝度をちょっと明るめにしてちょっと青っぽくする

スクリーンショット 2018-06-30 18.15.16.png

・「Color」プロパティをドラッグアンドドロップで実体化

・マスクのパターンに掛け合わせたので「Multiply」ノード(入力)に「Color」プロパティを繋げて、「Invert Colors」ノード(出力)を繋げてる

・「Multiply」ノード(出力)からMasterノードのEmissionを繋げる

スクリーンショット_2018-06-30_18_22_06.png

で完了です 実際にゲームビューで確認します

Jun-30-2018 18-31-24.gif

おさらいとして 全体の構成図

スクリーンショット 2018-06-30 18.33.53.png

スクリーンショット 2018-06-30 18.35.36.png

スクリーンショット 2018-06-30 18.35.57.png

スクリーンショット 2018-06-30 18.36.04.png

ポイントとなるノード

スクリーンショット 2018-06-30 18.37.09.png


例2 エネルギーゲージ

直線的なものに関してスケールや移動などで簡単に実装したりするが

湾曲みたいな形状を実装すると結構難しい

Jul-07-2018 14-43-02.gif

変形しているゲージの実装する為の1つの手段として

スクリーンショット 2018-07-07 14.48.31.png

ゲージにそったグラデーションのパターンを用意し、スレッショルドを変更するとゲージっぽい埋まっている状態や空の状態を作り出せる事ができる

これをシェーダーグラフのstepノードを使えば実装が出来ます

手軽なテクニックなのでオススメです

Jul-07-2018 14-56-02.gif

そのうえでゲージの枠を作ってあげて アルファブレンディングで合成して上げて

スクリーンショット 2018-07-07 15.01.47.png

色をつける為のグラデーションの素材も用意してあげる

スクリーンショット 2018-07-07 15.03.06.png

さて早速シェーダーグラフを使って作っていきましょう

今回はPBRグラフを使わないのでUnlitグラフを使います →ライティングを使わない為

プレビューはデフォルトのスフィアだと見にくいので「Quad」に変更 スプライト的な奴

MasterノードのSurfaceを透明化できる「Transparent」に変更 デフォルトだと不透明の「Opaque」になっています

スクリーンショット_2018-07-07_15_10_07.png

SampleTexture2Dノードを作り、グラデーションのバーを読み込みます

スクリーンショット_2018-07-07_15_18_09.png

SampleTexture2Dノード(グラデーションのバー)のRGBA値をマスターノードのColorに突っ込んで

SampleTexture2Dノード(グラデーションのバー)のA値をマスターノードのAlphaに突っ込むと

ゲージのグラデーション素材が読み込まれました

スクリーンショット 2018-07-07 15.21.50.png

次にスレッショルドを使ってバーを動かす状態にしたいので

Stepノードを作って、SampleTexture2Dノード(グラデーションのバー)のRGBA値をStepノードのInに繋げる

Edgeの値を与えるためにVector1ノードを作ってStepノードのEdge値に繋げる

Vector1ノードの値を変更してあげると変更ができる ちょっと画像が化けているがちゃんとゲージが動いているはず

Jul-07-2018 15-59-56.gif

でこれで作った動きと元で作ったアルファ値を掛け合わせてColorの状態でマスターノードに出力してあげる

具体的なやり方 StepノードとSampleTexture2Dノード(グラデーションのバー)のA値をMultiplyノードで掛け合わせてMultiplyノードをマスターノードのRGB値に与えてあげると以下のようになる

Jul-07-2018 16-10-19.gif

ここで問題がVector1ノードが0の時に満タンになって1の時に空になってしまうので、本当は逆にしたいので、値を逆に変換します。

こうゆう時に使うノードがRemapノード

スクリーンショット 2018-07-07 16.12.58.png

これがRemapノード

スクリーンショット 2018-07-07 16.13.38.png

スクリーンショット 2018-07-07 16.15.19.png

具体的な例

sin波の場合 −1から1の間を反復する感じになるので

スクリーンショット 2018-07-07 16.17.14.png

−1から1の間を反復する感じじゃなくて0.3から0.7の間を反復させたい時にRemapノードを使ってください

スクリーンショット 2018-07-07 16.18.35.png

実際に上の例にそったRemapノードが下記のようになります

スクリーンショット_2018-07-07_16_19_51.png

で今回0から1の値を

スクリーンショット 2018-07-07 16.24.08.png

1から0の値にしたいので

スクリーンショット 2018-07-07 16.25.45.png

Remapノード的にはこんな感じになります

スクリーンショット 2018-07-07 16.26.38.png

実際に組み込むとこんな感じ

スクリーンショット_2018-07-07_16_28_23.png

組み込んでみたが不安が、よく見るとエッジの部分がジャギっている

_8__【Unite_Tokyo_2018】新機能Shader_Graphを使えばプログラミング無しにシェーダーが作れるようになります!_-_YouTube.png

その理由はStepノードは0と1の間はスパッと切れるので境目がギザギザしやすくなる

_8__【Unite_Tokyo_2018】新機能Shader_Graphを使えばプログラミング無しにシェーダーが作れるようになります!_-_YouTube.png

解決方法は簡単でSmoothStepノードを使う

文字通りStepノードがなめらになったノード

_8__【Unite_Tokyo_2018】新機能Shader_Graphを使えばプログラミング無しにシェーダーが作れるようになります!_-_YouTube.png

SmoothStepノードとはedge1とedge2の選択ができる

edge1より低い値は0を返して、edge2より高い値は1を返す

edge1とedge2の間は滑らかに繋いでくれる

スクリーンショット 2018-07-07 16.40.36.png

で今回は入力値と入力値+0.05の間を滑らかにつなぐようにしてギザギザを目立たなくします

スクリーンショット 2018-07-07 16.43.45.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

でほとんどゲージはできました。次は色をつけてみましょう

色のグラデーション素材を用意し、これを適応してみましょう

スクリーンショット 2018-07-07 15.03.06.png

SampleTexture2Dノードを作って、色のグラデーション素材を参照して SampleTexture2DノードのUV値にVector1の値を入れてあげて 値を変更してあげると、1に近づくほど緑になって0に近ずくほど赤になるようになる

Jul-07-2018 17-04-59.gif

このSampleTexture2Dノードの値を掛け合わせたいので、Multiplyノード作ってSampleTexture2DノードとかけてSmoothStepノードに繋がっているMultiplyノードと掛け合わせると色の適用ができました。

Jul-07-2018 17-12-43.gif

次に枠を組み込みますのでアルファブレンディングをしたいと思います

スクリーンショット 2018-07-07 15.01.47.png

シェーダーグラフでアルファブレンディングをしたいのであればLerpノードが一番簡単

スクリーンショット 2018-07-07 17.14.57.png

実際に組み込むと

動画 文だとわかりずらいのでここの部分は動画を参照してください

プロパティブラックボードを使って、値をインスペクター上で操作できるようにしたいので、TypeをVector1にしてModeをスライダーにして0から1の間に設定する 設定したものをVector1と差し替える

_8__【Unite_Tokyo_2018】新機能Shader_Graphを使えばプログラミング無しにシェーダーが作れるようになります!_-_YouTube.png

で保存してゲーム画面でプレビューしてみます

Jul-07-2018 17-30-14.gif

とできましたが、1点バグがあります

値を1にして満タン状態にするとゲージが上がりきっていない

_8__【Unite_Tokyo_2018】新機能Shader_Graphを使えばプログラミング無しにシェーダーが作れるようになります!_-_YouTube.png

どうゆう状態かとゆうと、SmoothStepノードで上がりきらない領域ができちゃっている

_8__【Unite_Tokyo_2018】新機能Shader_Graphを使えばプログラミング無しにシェーダーが作れるようになります!_-_YouTube.png

なのでこうゆう状態にずらしてあげる

スクリーンショット 2018-07-07 17.40.33.png

Remapノードの値を変更してあげる

スクリーンショット_2018-07-07_17_41_37.png

でバグは解消されました

スクリーンショット 2018-07-07 17.45.00.png

おさらい

スクリーンショット 2018-07-07 17.46.13.png

スクリーンショット 2018-07-07 17.46.33.png

スクリーンショット 2018-07-07 17.46.54.png

スクリーンショット 2018-07-07 17.46.42.png


例3 古風なTVエフェクト

ノイズっぽいエフェクト よく画像の連番アニメーションや動画などで表現することがあるが、あまりパフォーマンスがよくないのであまりよろしくない

Jul-07-2018 18-23-23.gif

では実際にやってみましょう

・PBRグラフを作って、SampleTexture2Dノードを作りモナリザの画像を読み込んでくる

・SampleTexture2Dノード(モナリザ)をブラウン管テレビのように自己発光的な感じにしたいのでマスターノードのEmiisionに繋げる

・ちょっとテカってて見にくいのでalbedoの色を黒にします あと、マスターノードのSmoothnessを0にします テカリの要素を排除します

スクリーンショット 2018-07-07 18.35.53.png

まずはシマシマの線を表現して見ましょう

スクリーンショット 2018-07-07 18.36.55.png

こういった簡単な形状のシマシマはテクスチャで作るのもいいがシェーダーでやった方が早い

シマシマを作るにはsineノードがいいのではないかと思います

sineと聞くと子難しい感じはしますが、要するには値が滑らかに上がったり下がったりするするだけです

スクリーンショット 2018-07-07 18.41.05.png

こんな感じに

スクリーンショット 2018-07-07 18.43.48.png

周期を細かくすると ブラウン管のシマシマ模様になる

スクリーンショット 2018-07-07 18.44.29.png

実際にsineノード作って見ます

UV座標の高さを基準とするので UVノードを作り 縦軸のY軸を取り出してあげる必要がある

スクリーンショット 2018-07-07 18.49.59.png

各成分の値を取り出すにはSplitノードを使います

スクリーンショット 2018-07-07 18.50.29.png

スクリーンショット_2018-07-07_18_52_02.png

実際に使ってみると

・Splitノードを作り、UVノードの値をSplitノードに突っ込んであげる

・SplitノードのGの値をSineノードに突っ込む ちなみに表示ではGになっているが中身的にはY軸の意味です

スクリーンショット 2018-07-07 19.01.13.png

・これを細かくしたいので、SplitノードのGの値のかけてあげます 

・MultiplyノードをSplitノードのGの値とつなぎ Multiplyノードのoutからsineノードと繋げる

・Multiplyノードの掛けている値をあげてあげる

Jul-07-2018 19-05-56.gif

一応できましたですが、Sineには一点弱点がある

sine波は−1から1の範囲なので、 マイナスの値は色に悪影響与えるので

【Unite_Tokyo_2018】新機能Shader_Graphを使えばプログラミング無しにシェーダーが作れるようになります!_-_YouTube.png

切り出しておく必要がある

スクリーンショット 2018-07-07 19.13.25.png

0から1以外を切り捨てるSaturateノードが必要

スクリーンショット 2018-07-07 19.15.18.png

【Unite_Tokyo_2018】新機能Shader_Graphを使えばプログラミング無しにシェーダーが作れるようになります!_-_YouTube.png

・これをSineノードの値からSaturateノードに突っ込む 見た目上は変わらないですが、将来のバグは防げました。

・SaturateノードとSample2DTextureノードと掛け合わせる(Multiplyノード)てマスターノードに繋げてあげるとモナリザの画像にシマシマが重なりました

スクリーンショット 2018-07-07 19.26.28.png

・シマシマのせいで画像が暗くなったので無理やり明るくしましょう Multiplyノードで掛けてあげましょう

スクリーンショット 2018-07-07 19.27.12.png

シマシマのUVアニメーションさせましょう

・Tmeノード作ってAddノードを作り、シマシマのUV値に足してあげます

・デフォルトだと鈍いので、Timeノードが出ている値をMultiplyで掛けてあげます

Jul-07-2018 19-36-48.gif

次は横にぶれるようなノイズを作って見ましょう 単純にU値にノイズをやってあげればいい

スクリーンショット 2018-07-07 19.37.28.png

ではやって見ましょう

ちょっとここから 複雑で文章より動画を見た方が伝わると思いますので、

こちらの動画を参照してください

おさらいまで

おさらい

スクリーンショット 2018-07-07 19.56.21.png

スクリーンショット 2018-07-07 19.56.53.png

スクリーンショット 2018-07-07 19.57.09.png

スクリーンショット 2018-07-07 19.57.27.png


補足情報

今回使ったプロジェクト

https://github.com/keijiro/ShaderGraphExamples

スクリーンショット 2018-07-07 19.59.00.png

シェーダーグラフはオープンソース開発されています

何か問題があったら連絡してもらえればと思います

スクリーンショット 2018-07-07 20.08.45.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/

スクリーンショット 2018-07-07 20.09.34.png

スクリーンショット 2018-07-07 20.13.20.png

スクリーンショット 2018-07-07 20.14.08.png

実際作って見たのがこれ

_9__【Unite_Tokyo_2018】新機能Shader_Graphを使えばプログラミング無しにシェーダーが作れるようになります!_-_YouTube.png


今後の予定

HDRPの対応が早急の課題

頂点シェーダーも対応予定 近日中に実装される

スクリーンショット 2018-07-07 20.19.28.png

スクリーンショット 2018-07-07 20.21.51.png

バージョン管理

シェーダーグラフはjsonファイルなのでgitやsvnで管理でいけますが

スクリーンショット 2018-07-07 20.22.46.png

差分をうまく拾える感じになっていないので、衝突の自動マージができないので、そこらへんは防止は運用でカバーお願いします。

スクリーンショット 2018-07-07 20.27.14.png

以上終わりです


今後の記事の更新

・もうちょい初心者でもわかりやすく補足とか入れたい

AmplifyShaderEditorで例1〜3を作ってみた

・レイアウトも見やすくする