medaminShaderはじめましたXNAをやってた頃、一回だけシェーダーに挑戦した事があるのですが、当時はなんかもう手探りな上によくわからないままやってたのですが、最近は色々情報も入手しやすくなってシェーダーの技術資料を入手できたりと色々勉強する機会も増えてきました。ゲームの表現の幅も色々広がるのでこれはもうバンバン使い倒すのが吉でしょう。いうわけで色々試行錯誤しながらシェーダーの記事書いてみたいと思います。こんな感じで昔8ビットパソコン時代の人たちなら一度は作ってみるこんな画面。グラフィック画面に背景を描画してパレットアニメーションでスクロールしてるように見せるテクニックですが、こいつは一切プログラム書いてません。シェーダーのみで自動的にアニメーションしています。こいつのシェーダーをご覧ください。いうアセットを使用しています。ノードベースでシェーダーを感覚的に作成する事ができるのでかなり重宝します。ノードだけで書くと面倒くさい部分は直接シェーダーコードを記述します。左下のブロックを説明します。マテリアルで設定できる値になります。ノードで変数に突っ込んでいます。ノードで取得できます。ノードを使う必要はなかったのですが、ノードを接続するラインが見づらくなるので見やすさの為に設定しています。Sliderマテリアルのインスペクタに表示される項目になります。最大値を設定する事で指定範囲の数値を任意に設定できるようになります。Colorマテリアルのインスペクタに表示される項目になります。任意のカラーを指定できます。それぞれ個別に取り出す事ができます。Set各種ノードの出力結果を変数に格納します。ノードから取り出す事ができます。ノード構成が複雑になって見づらくなる時に活用すると便利です。次は左上のブロックの説明をします。Multiply2つ以上の入力値の掛け算の結果を返します。画面写真では入力は2つですが、別のノードの出力をドラッグする事で3つ目以降の入力が行えます。入力値はカラーだったりベクトルだったり単体の数値だったりなんでも入力できます。出力結果のフォーマットは入力値によって変化します。ベクトルや単体の数値との掛け算も可能です。Add足し算を行います。登録した変数を取得します。Timeタイマーの秒数が入ります。シェーダーの中でアニメーションさせるのにとても便利です。Coord.UV座標を生成します。変化を与えてますが、その事によってポリゴンに張り付けるテクスチャをスクロールさせたり拡大縮小させたりする事ができるようになります。なってる場合、縮小をかける事で同じテクスチャパタンを繰り返し表示させる事もできるようになります。座標をスクロールさせるための処理が書かれています。対して掛け算する事でそれぞれのスクロールスピードを調整します。値を描けているのはテクスチャパタンの繰り返し数を増やしたり減らしたりする処理になります。Codeシェーダー内に関数を定義します。ノードにつながっている必要があり、何度も使いまわす便利関数を作るには工夫がいりそうな残念なノードでもあります。中に記述されているコードの説明は後述します。最終的なカラーや質感を決定するためのノードです。ここの様々な入力に各種計算結果を接続する事でピクセルカラーや外観が決定されます。Emissionピクセルカラーを決定します。Widthここに値を入力すると、モデルの輪郭線を表示するようになります。値を変更する事で調整する事ができます。オリジナルの形状を拡大し、ポリゴン面を反転させる事で輪郭を表示します。法線ベクトルから輪郭線の表示を判断するっぽいです。デフォルト設定はこれです。頂点カラーから輪郭線の表示を判断するっぽいです。等に組み込む場合色々と問題が出てきます。PC上ではちゃんと動くのに他のプラットフォームでは真っ黒だったりと結構面倒でした。それ以上に今回の記事書くのが久しぶりすぎてめちゃ時間かかりました。次回以降はもっとサクサク書けるようになりたいなっと。