おやま氏の覚え書き

XR関連のメモ&つくった物置き場です

【Unity】ShaderGraph導入

Unity2018からノードベースでShaderが作れる機能が標準搭載されるようになってます!

とりあえず導入から、スクリプトで動かすまで

(使用したバージョン:Unity2018.1.5)

 

既に導入の解説は下記のすばらしくわかりやすい方がいるのですが、

自分の整理のためにも超簡易的に書き出したいと思います。

nn-hokuson.hatenablog.com

 

目次

 

プロジェクトを作る

TemplateをLight Weight RP(Preview)に変える必要があります。

最初からいい感じのサンプルが出現します。すごーい!

f:id:oyamaXR:20180720150711p:plain

 

デフォルト(Template : 3D)のまま作っても後で変更できます(4.初期設定参照)

 

Packageインストール

Window -> Package Manager を選択

f:id:oyamaXR:20180720102719p:プレーン

 

Shader Graphをインストール

 

f:id:oyamaXR:20180720122058p:プレーン

 

終わり!

 

開いてみる

Projectタブの中で右クリック→Create→Shader→PBR Graph を選択

f:id:oyamaXR:20180720122651p:プレーン

 

虹色のSって書かれたアイコンが出てきます

f:id:oyamaXR:20180720123001p:プレーン

 

ダブルクリックすると編集画面になります

f:id:oyamaXR:20180720151616p:plain

 これで思う存分遊べますね('ω')ノ

 

初期設定(ピンクになったら)

私のように雑にShader Graph導入しようとすると発狂案件になります

ピンク~~!!!f:id:oyamaXR:20180720123627p:プレーン

 

最初のTemplateで設定してなかったらこうなるっぽいっす

こちらの方が解消法をわかりやすく紹介しています。(とても助かりました)

 

kiliware.hateblo.jp

 

遊んでみる

最初に紹介した記事の力でテクスチャブレンドまでできるようになります。

取り敢えず私はを作ってみます

 

 下記の記事を参考に、見様見真似でアンチエイリアスな円を作る

nn-hokuson.hatenablog.com

 

合ってるかわからないけれど、Shaderわかってない勢にしては頑張ったと思いたい

f:id:oyamaXR:20180720180456p:plain

 


番外編:ScriptからPropertyにアクセスする

 

 最初の記事を参考にPropertyを設定

今回は円の大きさ(radius),中心座標(position),色(Color)を設定してみました

Propertyの真名を知る

Shaderの詳細でも、Materialの右上歯車からも知ることが出来ます

Properties の左側が本当のお名前です

f:id:oyamaXR:20180721114101g:plain

コードを書く

 

Shaderの円を拡縮する

 

動く 

ちゃんとみょんみょん動きました!

f:id:oyamaXR:20180721125518g:plain

 

 

以上です