うにty生活

UnityChanを生活させたい

Shader Graphに入門しました 基本操作 1日目

 

f:id:tubakihimeLoveHate:20200816222538j:plain

 

Shader Graphで〇〇作ってみた!って記事を出そうと思ったら

案外Shader Graphに苦戦しまして、記事にまとめながら学習していくことにしました

ラブヘイトです。

 

全く初めてShader Graphを触るんだ!って人向けです。私もそうなので共に頑張っていきましょう!

Unity自体初めという方にはお勧めしません。各ビューの名前とか、マテリアル、シェーダーの概要を理解できてなければ、まずそちらから調べてみてください。

 

自分の環境

Unity 2019.4.0f1

HDRP 7.4.1

Shader Graph 7.4.1

 

※HDRPかどうかによって作成できるShaderやShader内容が変わるので注意が必要です

当記事では一貫してHDRPで操作を行います 

 

第1回目なので軽めに基本的に操作を押さえていきたいと思います

今回の内容はこちら

 

Shader Graphとは

Shader Graphは今までプログラムで書いていたShaderを、ノードベース(プログラムなし)で作成できる機能です。

 

従来のShader

f:id:tubakihimeLoveHate:20200815220247p:plain

ノードベースのShader(Shader Graph)

f:id:tubakihimeLoveHate:20200815220429p:plain

 

プログラムで記述するメリットもありますが、ノードベースは見て分かりやすいというメリットがありますね。 

 

Shader GraphをInstall

もう既にInstallしている方やHDRPではデフォルトでInstallされているので飛ばしてもらって結構です。

 

Package ManagerからShader Graphを探してInstallします。もし古いバージョンのShader Graphを使っているならチェックしてみてUpdateしましょう。

f:id:tubakihimeLoveHate:20200815220737p:plain

UpdateというボタンがあればInstallできています

 

Shader Graphを作成

Create > Shaderまで遷移したら、「〜〜 Graph」とついているものは全てShader Graphで作成できるShaderです。

 

なんでもいいのですが、今回はUnlit Graphを選択しましょう。

作成完了です。

f:id:tubakihimeLoveHate:20200815220903p:plain

 

MaterialにShaderをアタッチする

作成したShader Graphを選択した状態で、Create > Materialを選択すると、

作成したShaderが選択された状態のMaterialが作成されます。

f:id:tubakihimeLoveHate:20200815221154p:plain

f:id:tubakihimeLoveHate:20200815221157p:plain

 

一応あとから、MaterialにShaderをアタッチすることもできて

MaterialのShaderから選択するか、MaterialにShaderをドロップすればOK

 

簡単なShaderの作成方法

先ほど作成したShaderをダブルクリックするかOpen Shader Editorを選択すれば、編集ウィンドウが出てきます。最初の画面がこちら↓

f:id:tubakihimeLoveHate:20200816153344p:plain
右上に表示されるのが、プレビュー画面Window。

左上に表示されているのがBlack board。

それ以外の空いているスペースにノードを配置していきます。

 

Node作成方法

ノードを作成する方法は4つもあります!(もっとあるかも?)

・右クリック > Create node

Create nodeは全てのノード一覧が表示されます

 

f:id:tubakihimeLoveHate:20200816160645p:plain

 

・Textureなら空白のスペースにD&Dで作成可能

f:id:tubakihimeLoveHate:20200816160833p:plain



・nodeの出力または入力先を空白のスペースにDragすると検索候補が出てくる

こちらはCreate nodeの時と同じ検索画面が出てきますが、右クリックから表示させた時とは違い、ドラッグ元の入出力の型に合う候補のみ出てきます。

f:id:tubakihimeLoveHate:20200816161949p:plain

 

・Spaceで即検索&配置、ノードはカーソル位置に出現します

Create node一覧がすぐに表示されます

 

よく使うのは後ろ2つでしょうか、ノードを素早く組み立ててるとかっこいいですよね

 

 

色をつける

今回の目標

マテリアルに色を付けてInspector上で簡単に透明度を変えられるShader

 

これを作成したいので、まずはUnlit Masterの横にある歯車マークを押してSurfaceをTransparentに変更します。

 

他の基本的なShader設定はここから変更可能です。(今回はSurfaceだけ)

f:id:tubakihimeLoveHate:20200816162940p:plain

 

その次にCreate nodeからColor Nodeを選択して、MasterのColorに繋げましょう

f:id:tubakihimeLoveHate:20200816163729p:plain

 

左上のSave Assetを押して保存します。このShaderを選択したMaterialをSphereオブジェクトに適用すると、以下のようになります。

f:id:tubakihimeLoveHate:20200816163929p:plain

 

Propertyを追加する

最後に、MaterialのInspector上からColorを変更できるように、Propertyを追加しましょう。

Shader EditorのBlack boardにNodeを追加することで、MaterialのInspector上から値を変更することが可能になります。


Color Nodeを右クリック>Convert To PropertyでBlack boardに追加します。

Black boardの「+」ボタンを押しても作成することができますが、Convert To Propertyから行った方が簡単です。名前は「_color」にします。

f:id:tubakihimeLoveHate:20200816165020p:plain

 

Save Assetを押して保存するとMaterialのInspectorにColorが表示されます。

これでInstectorから色を変更できるマテリアルが完成しました。

f:id:tubakihimeLoveHate:20200816165512p:plain

f:id:tubakihimeLoveHate:20200816180602g:plain

次にAlpha値もInspectorから変更したいので、Colorと同様にSlider nodeを作成してBlack boardに追加します。

f:id:tubakihimeLoveHate:20200816211036p:plain

 

完成

f:id:tubakihimeLoveHate:20200816211612g:plain

1日目なので基礎となる内容をしっかり押さえておきました。今回の操作はこれからの基礎になっていくのでしっかり覚えていきたいところです。

 

2日目はもういきなり、とある動画を見ながら作成していこうと思ってます。

ではまた次回お会いしましょう