ShaderForgeで(なんちゃって)時計を作ってみる

#はじめに
この記事は[OUCCアドベントカレンダー](https://adventar.org/calendars/5546)5日目の記事です。

シェーダってこんなこともできるんだよっていう紹介です。初心者向け。
最近某VRゲームのおかげでUnityやシェーダに触るようになったので、自身への備忘録も兼ねてこの記事を書きます。

製作する時計は実際に外部サーバーから時刻を取り出して~といったもの**ではなく**、
単に**「00:00」から「23:59」をループで表示させるだけのナンチャッテ時計**となります。
#環境
* Unity 2018.4.20f1
* Shaderforge v1.38

#シェーダとは
一言で表すと、「画面に物体を描画する方法を記述したプログラム」です。
Unityでは陰影の処理やパーティクル処理などに使われているアレです。

例えばUnityでCubeを出すとこんな感じのマテリアルが作られるのですが、このCubeの描画にはStandardシェーダを用いられていることがInspectorからわかります。

![Counter0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161729/5f583dc1-efe6-c15b-744e-aa46572e608f.png)


実際にはGLSLやHLSLといったシェーディング言語を用いて記述するのですが、説明のしやすさと画面の見やすさを考えて今回はShaderforgeを使っていきます。

>Shaderforge
>元々Unity有料Assetでしたが、サポート終了に伴いgithubにて公開されています。
>https://github.com/FreyaHolmer/ShaderForge


#完成品
とりあえず完成から見てもらった方が早いのでgifを置いておきます。
![Counter2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161729/6af60510-2cf3-57d8-4cfa-ae9dbc24b644.gif)
Unityを触っている方はわかると思いますが、右側のInspectorでわかるようにAnimationやC#などは一切使ってません。
[ソースはgistにて公開しています。](https://gist.github.com/superokp/2f89a4eeffde398c6fd1b6a9e913e5ba)

#実際に作ってみる
##１桁だけ表示してみる。
###画像の準備
とりあえず、数字を表示させるところから始めていきたいと思います。
今回は以下の画像を用意しました。
![Numbers.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161729/40846c53-2031-827c-67da-3e2d3aa9b023.png)
この画像を4*4に分割して、それを時間と共に左下から右上までアニメーションさせれば数字は出すことができそうです。
ただこのままだと最後6コマ分が余分となってしまうので、実際のカウントの際は10コマ目(「9」)で止まるようにする必要があります。
（今後何かしら拡張することも考えて、最後6コマには使いそうな記号を入れておきました。今回は「：」のみ使います。）
###内容
今回はこのように作ってみました。
各ノードのおおざっぱな説明も載せてあります。

![CoutnerDisc1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161729/cc553175-251e-b2da-5669-4c460b77ca6e.png)
具体的には0.00~9.99秒を計測する時計を作り、その値の整数部分のみを取り出すことで１秒ごとに切り替わる0~9の値を取り出しています。
その値を16分割された画像の何番目を表示するかを決定するノードに接続することで、0~9の画像を切り替えることができました。
![Counter1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161729/b8811f2c-81b5-919f-3563-15d42f639c2a.gif)
##桁数を増やす
１桁を表示する仕組みが出来上がったので、あとはこれを４つコピーして、各々に適切な値を設定してあげることで時計ができそうです。
###全体図
出来上がった全体図は以下のようになりました。超でかいです。
とりあえず３つの部分に小分けして、左上の個所から順に説明してきます。
![CounterDisc2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161729/66175195-0474-02b8-3483-70d1ffbcf407.png)
###左上部分の説明
先ほど説明した1桁だけを表示するノードを４つ分、それぞれ時間、分の1,2桁目に対応するように値を調整して配置しています。
また、表示する画像がかぶらないようにそれぞれ位置をずらしています。（画像黄色部分）
![CounterDisc3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161729/4a6191eb-31fb-982c-fb57-06a434eb1614.png)
###右上部分の説明
先ほど生成した数字を適切な位置に表示させるためのマスクです。
それぞれ白い部分のみが最終的に表示されるようになります。
![CounterDisc4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161729/015325aa-386a-48d0-2c4d-5c4ecb72f79c.png)
###下部の説明
上部２つで作ったものを、それぞれつなぎ合わせています。
これにより必要な数字が必要な箇所に、一度に同時に表示させることができます。
![CounterDisc5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161729/89bc987f-ec6d-3bc5-81d3-0a9ec770c05a.png)

こうして出来上がったものがコチラになります。60倍速です。
![Counter2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161729/29fc313e-dd53-4aee-f967-b3132cc40ff4.gif)
#あとがき
多分shaderの使い方を9割方間違えている気がしますが、楽しかったのでOKです。

shaderforgeは各々でプレビューがあるので、ある種直感的に書きやすい反、こういった繰り替えす処理などを作る際にはちょっと大変です。
それでも、シェーダで何ができるかを理解するためにはshaderforgeはある程度適当にノードをつないであげても何かしらの見える形になりやすいため、最もとっかかりやすい選択肢の一つのように感じました。~~まぁでも今から始めるならShaderGraphとかのほうｇ~~