さわぐちFMオキーステーション

幸せの鐘が鳴り響き僕はただ嬉しいふりをする

Shader Graphの超入門レシピ その2~エディタ画面と基本操作~

前回の内容

前回はこちら

Shader Graphの超入門レシピ その1~準備編~ - さわぐちFMオキーステーション

前回はプロジェクトを作成しアセットを整理しました。今回はシンプルなシェーダーを作りつつノードエディタの画面と基本操作を確認してみましょう。最後に作ったシェーダーをオブジェクトに適用しておしまいです。

シェーダーファイルを作成する

今後のことを考えて整理がしやすいように、Assets直下にシェーダーを格納するフォルダを用意しましょう。Projectビュー→Assets→右クリック→Create→Folderを選択し「Shader」という名前のフォルダを作ります。

f:id:amidaMangrove:20200227235949p:plain

Shaderフォルダ内に移動し、右クリック→Create→Shader→Unlit Graphを選択し名前を「MyFirstShader」とします。

f:id:amidaMangrove:20200228000153p:plain

Unlit Graph:「Unlit」は点火されていない、明かりがついていないという意味で、すなわちライトの影響を受けないシェーダーです。

作成したMyFirstShaderをダブルクリックするとノードエディタが開かれるはずです。

エディタ画面の見方

エディタ画面では最低限以下の5か所が操作できれば大丈夫です。 f:id:amidaMangrove:20200228002121p:plain


1. Save Assetボタン

作成したシェーダーを保存します。「作成したシェーダーは保存されないと反映されません」。何を当たり前の...と思うかも知れませんが結構保存忘れがちなので適宜クリックしておきましょう。

2. ブラックボード

シェーダー内で使用するプロパティを作成、管理する場所です。例えば「シェーダーの外からテクスチャを設定したい!」や「この値は外から適宜変更できようにしたい!」といった場合に活躍します。

3. マスターノード

ここにノードを繋いで最終的な出力結果を決定します。とりあえずここに繋いでおけば何かしら画面に反映されると多少乱暴に覚えてもらっても大丈夫です。

4. メインプレビュー

マスターノードに繋いだ出力結果をここでプレビューできます。デフォルトでは球体ですが、メインプレビュー内で右クリックすることでプレビューの形状を変えることができます。

5. ブラックボードの表示切替ボタン

押下することでブラックボードの表示非表示を切り替えます。もしブラックボードが画面に表示されていなければここを押してみてください。

6. メインプレビューの表示切替ボタン

押下することでメインプレビューの表示非表示を切り替えます。


ブラックボードとメインプレビューはドラッグで位置を変えることができます。また、右下の「-」をドラッグすることでサイズの調整もできるので好みで調整してみてください。

エディタの基本操作

よく使うであろう基本操作を以下にまとめました。実際に操作しながら確かめてみてください。

動作 操作方法
画面の拡大縮小 マウスホイール
画面の平行移動 マウスホイールドラッグ、Altキー + 左クリックドラッグ
範囲選択 左クリックドラッグ
ノードの作成 スペースキー、右クリック→Create Node
ノードにフォーカス ノードを選択してFキー、複数選択でも可
ノードの削除 Deleteキー
ノードの複製 Ctrl + D
ノードのコピー Ctrl + C
ノードの切り取り Ctrl + X
ノードの貼り付け Ctrl + V
ノードのドキュメント確認 ノードを選択した状態でF1キー

ノードを選択した状態でF1キーを押すとブラウザが立ち上がり現在選択しているノードのプロパティなんかを確認可能です。例えば「Unlit Maser」を選択すると以下のようページが開きます。

f:id:amidaMangrove:20200228010751p:plain

作成したシェーダーをオブジェクトに適用する

それでは実際に今作成したMyFirstShaderをオブジェクトに適用してみましょう。変化を確認するためUnlit Masterの以下赤枠で囲まれている箇所をクリックし色を変更します。変更したら忘れずに「Save Asset」を押しましょう

f:id:amidaMangrove:20200228011358p:plain

今作成したシェーダーを使用してマテリアルを作成します。Projectビューの「MyFirstShader」を右クリックしCreate→Materialを選択します。これでシェーダーが適用されたマテリアルが作られました。

f:id:amidaMangrove:20200228011659p:plain

マテリアルを適用するSphereをシーンに追加しましょう。Hierarchyビューから右クリック→3D Object→Sphereを選択します。 f:id:amidaMangrove:20200228012035p:plain

最後に先ほど作成したマテリアルをSceneビュー or HierarchyビューのSphereに直接ドラッグしてみましょう。

f:id:amidaMangrove:20200228012300p:plain

無事シェーダーがオブジェクトに適用できました。基本的なワークフローは「シェーダーを作る」→「マテリアルを作る」→「オブジェクトに適用」という感じです。

それではまた次回。