森で毎日開発日記～webGLのシェーダー開発を学ぶ羽目。140日目～

PlayCanvasでもマテリアルを触りたくなってしまったのだ。

もともとUE4やBlenderなど、ノード系のエディタでしかマテリアルを触ったことが無くて、コード編集が必要なPlayCanvasではマテリアルの表現をこだわり過ぎないように、ということを心掛けていた。変に食指を伸ばしすぎると、インプットに時間を割き過ぎてアウトプットが薄まる危険があると思ったのだ。

しかし、「UE4なら簡単にできることなんだし、こっちでも1〜2時間勉強するだけですぐにできるようになるでしょ」という、ある種の勉強の誘惑みたいなものに堪え切れなくなってしまった。

果たして、webGL入門サイトを開く羽目になり、その実態はとてもじゃないけれど今日中に全てを理解することが難しい情報量だった。

ノードベースのマテリアル開発とは別物。

いや、ライトがあって、法線方向に内積をかけてマスクを取って〜、という発色の組み方は一緒だけれど、これを実装するために覚える所作の部分が複雑で、ドキュメント見ながら二回寝落ちした。

今まで理解していなくてもなんとなく上手くいっていた部分について理解しなければならなかった。良い機会といえば良い機会なのだけれど、どうしてもやらなきゃいけないことかと問われると釈然としない疑問が残る。

しかし知識欲がこれを習得したがっているのを感じたため、結局今日は一日中ずっとwebGLの勉強に費やしていた。

一先ずかなり簡易なものながら、目的の「リムライト」な表現を作ることができた。日記の画像の黄色いやつがそれである。

「モデルの法線とカメラの向きを内積してマスクを作る」

という、至極シンプルな仕組みだけれど、UE4だと秒で作れるこれを、勉強して実装するのに5時間近く掛かった。

ノードエディタでは端折られていることが多いのだけれど、頂点シェーダーとフラグメント（ピクセル）シェーダーがあって、頂点シェーダーでは頂点の位置などモデルの形状を決定し、フラグメントシェーダーでそこに色を塗る、という仕組みを念頭に入れておかなければならず、これにそもそも不慣れでかなり時間を食った。

PlayCanvasの場合はスクリプトを用いて、それらのシェーダーに指示を出す（指定のモデルにアサインする、など）。

・頂点シェーダー

・フラグメントシェーダー

・上記二つとシーンを繋ぐスクリプト

この三つのアセットを使ってようやくwebGLのシェーダーは動き出すらしい。間違っているかもしれないけれど、自分はそういうイメージで理解した。

あとはマウスに反応させる仕組みと連動させて、今日の制作は終わり。

まだまだ物足りないけれど、一先ず最低限の導入は済ませたということで満足感のある1日だった。

寝ます。