まわるまぐろ
===

# 初めに
この記事は[ICT Advent Calender 2019 ](https://docs.google.com/spreadsheets/d/1Hj9G7Jp5FHG9sTMcn2qqUWBNSvbz-KXxo6LewuuIC5E/edit#gid=0)の4日目の記事となります。

---
３日目の記事は絶賛集中講義中のrio_k827が書いてくれています。
[インターン参加記](http://rio-k827.hatenablog.com/entry/2019/12/03/215805?_ga=2.142177009.2119744677.1575293415-1801477657.1575293415)

rio_k827が参加したインターンシップを通して感じた、「企業で働く」とはどういうことかを知ることができるいい記事なので、来年インターンシップを受ける生徒などは是非rio_k827の記事を読んでみてください。
(推しが多いのは人生が豊かになって良いことですが、増やしすぎると破産待ったなしなので、気おつけてほしいですね)

---

明日はみんな大好き微積君です。
[5日目](https://b-iseki.hatenablog.com/entry/2019/12/05/170630?_ga=2.238029376.1784463106.1575525366-1980650008.1571216750)
最近自作エフェクター作ってるらしく、ガワも自作のようなので
完成品の写真見るの密かに楽しみにしています。

## 自己紹介
こんばんは
(はてなの使い方完全忘却したのでHackMD使って記事書きます。)

最近可愛いアバターから、無骨なおじさんの声がすることのギャップに違和感がなくなり、
むしろ安心感を頂きはじめました。
情報システムシステム工学科所属 ４年の[Potate](https://twitter.com/NonameReUnder)(ぽてと)です。
普段は、イラストレーター兼3Dキャラクターモデラーとして活動したりしている
ゲームプログラマーです。

基本使いはUnityでC#を触っています。

今年はコンテストは参加せず就活してたり、クリフェスやったり、モデリングして商売してました。
（最近はあまりICTに顔をだせずすいません、今度時間あるときにまたUnity講座します）

今回はUnityを用いたシェーダー作成の入門的なことをUVスクロールシェーダーを作成しながら解説します。

今回のＵＶスクロールシェーダー完成品は下記のGIF画像です
[すしの画像](https://illustrain.com/?p=29156)はこちらからお借りしました
~~全人類は取り敢えず寿司をまわせ~~

# 1.導入 「 シェーダーとは 」
シェーダーはグラフィクスの描画に関するプログラムで、
シェーダーの処理はGPUが担当しています。

Unityで作った映像は元はオブジェクトがTransformの3次元的な情報から作られている訳ですが、
最終的に色が映し出されるディスプレイは縦と横の2次元的な色(ピクセル)の並びです。

この色が映し出されるまでの過程でGPUが担っている部分の内
プログラムを書くことである程度処理を自由に変えられる工程を
「プログラマブルシェーダー」と言って
一般的にはこの部分を **「シェーダー」** と呼んでいます。

一言で表すのであれば、**オブジェクトの形や色を変更できます。**

# 2.ShaderGraphを用いたシェーダー作成

Unityのバージョンは、ShaderGraphを用いるため2018以上のバージョンを使ってください。
[ShaderGraph 導入方法](https://styly.cc/ja/tips/shadergraph_to_shaderlab/#ShaderGraph-4)
＊新規プロジェクト作成時に初期テンプレート選択でLWRPを選択するとスムーズです

今回はShaderGraphを用いてUVスクロールをつくることをゴールにします。
ShaderGraphとは、ノードベースでルック開発をすることができるツールです。

下記が今回のゴールの完成品のノード図です。この通りに繋げるとＵＶスクロールが行われます。

## 2-1.シェーダーの作成方法
下記の通り選択し新しいシェーダーを作成してください。

## 2-2.インスペクター上で変更できる変数を作成
まず下記のイメージのようにシェーダーで任意の値をいれられる変数を作成します。

今回使用する変数は
- Texture2D
- Vector1 2つ

こんな感じです

作成方法はシェーダーエディター上のShader名が書かれているタブのプラスボタンから作成できます。

作成すると作成した変数に値を入れられるようになります。

## 2.3 ノードの作成
---
### 2.3-1ノードの作成・検索
シェーダーエディター上で右クリックをしてください
必要なノードを検索しましょう。

今回使用するノードは
- SampleTexture2D
- TilingAndOffset
- Combine
- Multiply 2つ
- Time

です。

---
### 2.3-2 変数ノードの追加
変数はエディター上にドラッグアンドドロップでノードとして使用することができます。

---
用意したノードを下記完成イメージの通りにつないでいってください。

### 2.3-3 Unlit Master
赤枠でかこっている部分が今回のシェーダーの最終的な見た目を出力するノードです。
このノードのチャンネルに様々なノードを通して計算した値を入れて見た目などを変更していきます。

### 2.3-4 Sample Texture 2D
変数として用意したTexture情報を受け、RGBAの値に変換した後
その情報をUnlitMasterのColorチャンネルに渡しています。

### 2.3-5 TilingandOffset
Offsetの情報を元にUVの参照場所をずらしたUV情報を出力します。

スマホの画面で例えれば、見ている画面は変わらないのに画面内の表示は変わるようなものだとおもっってください。

### 2.3-6 計算処理
２つのVector1変数にそれぞれTimeノードの経過時間をMuliplyノードで乗算し
それをCombineノードで結合します。
これで２つのVector1変数でｘｙ座標上にスクロール方向を決め、時間経過でその値が増える処理を記述できました。

---
## 2.4 作成したシェーダーをオブジェクトにつける
project上にある作成したシェーダーで右クリックを選択しマテリアルを作成しましょう。
そのマテリアルを任意のオブジェクトにドラッグアンドドロップすればマテリアルが適用されます。
*以前Unity講座で教えたやり方です！

---

以上で解説を終わります。
駆け足でわかりずらいところが多いと思いますがご勘弁ください。

# 3.最後に
ShaderGraphで作成されたシェーダーはコードとしては無駄が多いので
業界としては設計の完成イメージを作る手段としてよく使われています。
実際にはShaderGraphで出力したコードを最適化するプログラマーがいたりするところもあります。

つたない文章ですが、最後までお付き合いいただきありがとうございました。