シェーダーを触ってみませんか？

Aiming第１事業部、デザイナーの吉川です。
シェーダーGUIが導入されてデザイナーもシェーダーを作成する機会が増えてきましたが、それでもまだ実際に触れたことがない方は多いように感じます。

今回はまだシェーダーに触ったことがない方へ、実際に簡単なシェーダーを作りながら理解を深められる記事を書きました。この記事が少しでもシェーダーに興味がある方が触れるきっかけになれれば幸いです。
今回はUnityのシェーダーグラフを使って説明をしていきます。

シェーダーって何？

デザイナーが作成する「ポリゴンモデル」「テクスチャー」は素材で、「シェーダー」はそれら素材を使って画面に描写しています。つまり最終的なルックを決めているのは「シェーダー」です。

自身でシェーダーを作成しなくてもその工程を理解することで、もっとこうしたい、こういった表現はどうだろうといった最終的なルックに関わることができるかもしれません。

まずはシェーダーグラフの下準備

シェーダーグラフのようなビジュアルエディタの良いところは、すぐにつくり始められるところです。
Unityを立ち上げ、Projectでシェーダーグラフのファイルを作成するフォルダを右クリックします。下の画像を参考に「Lit Shader Graph」を作りましょう。
これでシェーダーグラフのファイルが作られましたので、分かりやすい名前に変更しておきます。

1. 
2. 次にマテリアルを作成します。これも分かりやすい名前に変更しておきます。
3. 
4. 先ほど作ったシェーダーグラフのファイルから、シェーダーエディターを開きます。基本ダブルクリックで開きますが、開かない場合はシェーダーグラフの「Inspector」の「Open Shader Editor」で開けます。
   
5. シェーダーエディターのシェーダー名の下に階層を指定する場所があります、分かりやすいものに変更しましょう。
6. タグの下に小さいディスクアイコンがあります、これが保存ボタンです。シェーダーに何か変更を加えた後は保存しておきましょう。
   
7. マテリアルのシェーダーを先ほど作ったシェーダーグラフに変更します。
   
8. BOXを作り、先ほどのマテリアルに変更しましょう。これで準備OKです。
   

最初は少しづつ

まずは色

ただの箱では味気ないですよね、まずは自由に色を変更できるようにしましょう。

1. シェーダー名の右下に「＋」ボタンがあります、ここをクリックするとマテリアル側にどういったプロパティを追加するかの一覧が表示されます。「Color」を押してカラープロパティを追加します。

1. １.Colorをドラグッグして、エディター内に入れるとカラーノードが作られます。
2. ２.カラーノードからドラッグして、右にある「Fragment」の「Base Color(3)」に繋げます。
3. ３.最後に保存を忘れないようにしましょう。

1. これでマテリアルの「カラープロパティ」を変更することでBOXの色を自由に変えられるシェーダーの完成です。

次はテクスチャー＋頂点カラー

色だけではサンプルとしてはよいのですが、実用性がなさすぎます。そこでUnityのディフォルトにはない頂点カラーとテクスチャーを使ったシェーダーを作成してみましょう。

頂点カラー

1. モデリングツールで頂点カラーを塗り、Unityで先ほどのマテリアルを適応します。
2. シェーダーグラフエディターの何もない空間を右クリックするとウィンドウが開きます。一番上の「Create Node」を選択してください。
3. ノードの選択肢がたくさん出て探しずらいので、サーチに「V」を入れましょう。
4. 候補が絞られたので「Vertex Color」を選択してください。
   
5. 「Vertex Color」ノードからドラッグして、右にある「Fragment」の「Base Color(3)」につなげます。
6. これで頂点カラーが無事表示されました。
   

テクスチャー

1. マテリアルにカラーを追加した要領で今度は「Texture 2D」を追加してください。
2. マテリアル側に「Texture 2D」が増えているので、何かテクスチャーを入れましょう。
   
3. 「Texture 2D」をドラッグしてエディター内に入れます。
4. 「Sample Texture 2D」ノードを先ほどの「Vertex Color」を追加したときと同じ要領で追加します。
5. 「Texture 2D」と「Sample Texture 2D」の左側にある「Teture(T2)」を接続します。
6. 「Sample Texture 2D」の右側の「RGBA(4)」と右にある「Fragment」の「Base Color(3)」につなげます。
   テクスチャーがモデルに適応されていれば成功です。
   

二つを合成しよう

さて作成したテクスチャーと頂点カラーのシェーダーですがこれらをフォトショップのレイヤーをイメージして合成してみましょう。

スクリーン合成

• フォトショップのスクリーン合成を再現するために「Add」ノードを追加して、その結果を「Fragment」の「Base Color(3)」につなげています。
  「Add」ノードは左に接続されたAとBの値を加算して、右のOutから出力します。
  

• ほぼイメージどうりの仕上がりです。
  

乗算合成

• フォトショップ乗算合成を再現するために先ほどの「Add」ノードの代わりに「Multiply」ノードに入れ替えます。
  「Multiply」ノードは左に接続されたAとBの値を乗算して、右のOutから出力します。
  

• こちらもほぼイメージどうりの仕上がりです。
  
  このように最初はフォトショップなどを使い最終的なイメージを作り、それを再現するにはどうしたらよいかを考て少しづつ出来る範囲を広げていくことをお勧めします。

シェーダーグラフの構造と流れ

• さていくつかサンプルシェーダーを作ったことで、何となくシェーダーグラフの作成の流れが見えてきましたでしょうか？シェーダーグラフの全体の構造と流れ、シェーダーグラフを構成するノードの概要を説明します。

全体的な流れ、VertexとFragment

1. 線などで区切られているわけではないのですが、基本的には上部が「Vertexシェーダー」、下部が「Fragmentシェーダー」になります。
   「Vertexシェーダー」はポリゴンの頂点単位の計算で、その計算が終わった後に、「Fragmentシェーダー」が画面にピクセル単位で描写をすることになります。
   
2. 「Vertexシェーダー」の左から始まり、「Vertexノード」にデータを出力。
   次に「Fragmentシェーダー」の左から始まり、「Fragmentノード」にデータを出力。
   なぜこういった流れになるかといえば「Vertexノード」に出力したデータを「Fragmentシェーダー」側で取り出して使うことがあるためです。
   

ノード

• シェーダーグラフは基本的にノードを繋げて構成されたものです。
  そしてノードは多種多様にありますが、大きく３種類に分類することが出来ます。まずはそれを把握しましょう。

1. 「データノード」、右からデータを出力します。先ほどの「Texture 2D」や「Vertex Color」なども同じです。
   
2. 「計算ノード」左からデータを受け取り、計算をして右から出力します。先ほどの「Add」や「Multiply」なども同じです。非常に多種多様なため、どんな動作をするか少しづつ試していくことをお勧めします。
   
   最終結果を受け取る「Vertex」と「Fragment」。この二つはグループで内部にデータを受け取るノードを保持しています。
   「Vertex」は「Position(3)」「Normal(3)」「Trangent(3)」とユーザーが拡張したカスタムノードを内部に保持します。
   「Fragment」は「Base Color(3)」を基本として描写に必要なノードを保持します。
   

構造を説明すると少し複雑ですが、何となく全体と最小単位のノードを把握できましたでしょうか。最初から色々やることは難しいと思います、まずは「Fragmentシェーダー」に色々なノードを足して実際に絵がどう変化するかを見ながら手を広げていくのがお勧めです。

〆に

構造から理解しようとすると難しいシェーダーですが、実際に幾つかのサンプルを作りながら、シェーダーグラフの全体的な流れを説明してきました。
どうでしょう、基本の部分はそれほど難しくはないはずです。
複雑なシェーダー、他のソフトでのシェーダーも基本は変わりません。

「どういったデータを入れれるのか？」「どいうった計算ができるのか？」を徐々に増やしていくことで様々なシェーダーを作ることができるようになると思います。
シェーダーに触れる人が一人でも増えれば幸いです。

デザイナーを募集中です

Aimingでは、より良いものを追い求める技術向上や表現の追求に興味があるデザイナーを募集中です。今回はデザイナーの話をしましたが、企画やエンジニアも同じような方々が集まっている会社です。このような環境でゲームを作りたいと思った方は、ぜひ下記の応募欄から応募をお願いいたします。