Help us understand the problem. What is going on with this article?

【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を作ってみた
・レイアウトも見やすくする

Sase
元ゲームプログラマー 現在はインタラクティブ系の会社で Unityをメインでエンジニアをやっています!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした