さて、前回に引き続き今回はGLSLをゴリゴリ書いていきます。
・・・とは言いつつも正直GLSLでどこまでできるのかもわかりません、とりあえず自身のやりたいことに近いと思う「頂点の法線方向から色を決めるシェーダー」でも書いてみましょう。
メッシュの法線情報をシェーダに与える
これの方法は上記サイトから参考にさせていただきました。
どうやらthree.jsでGLSLを扱ってくれる時にあらかじめ定義してくれる変数にnormalがあるみたいです。
早速このnormal値をそのまま色情報として代入するよう扱ってみましょう。
gist4eb67b6e619f9f679497922f75471583
そして実行結果は・・・
ん・・・？おかしくね・・・？
だってポリゴンはうねっているはず・・・
もし青一色となるなら法線方向は(0.0,0.0,1.0)ですべての頂点がz軸を正に向いていることになる・・・またはGLSLでの法線データの格納がvec3だと勘違いしておかしな格納をしたか。
おそらく前者の可能性が高い
実際アニメーションを止めてみると・・・
はい、こっちを向いた一枚の板がありますね。
この板のメッシュをplane.rotation.x = -0.5 * Math.PI;を入れて先ほどのアニメーションをかけると・・・
やっぱりな♂つまりは元の板ポリの状態から法線情報が更新されてないらしいです。
法線情報の更新方法
早速ですがこれの解決方法
.computeVertexNormals ()
.computeFlatVertexNormals ()
のいずれかをジオメトリの頂点の変形処理後にかける。おわり。
これだけでした・・・他にも似たような頂点計算処理あるので公式リファレンス参照です。
法線情報もうまく更新できた pic.twitter.com/8hQOd1yHA6
— izumi / ikezaki🐠 (@izumi_ikezaki) 2019年3月6日
こんな感じになりました。
ちょっと練習で遊んでみる
マテリアル情報にside: THREE.DoubleSideを加えて両面描画に設定。法線のベクトルが負の数になる部分にabs()をした（色の情報は負の数にすると0になりなってしまうため。）
そしてif文で「裏面であるときに(1-r,1-b,1-g)」でネガポジ反転した色を指定。すると・・・
gistdc12d8c7f7a18a4dae6ab2c33f50e56d
おお、ちゃんと意図した表示なってる！
だんだんと自信になってきたぞ・・・！
完成！
そして自身のテーマカラーに色を設定して完成。
合成方法はテーマカラー(#00325E)に法線のz軸方向の絶対値を反転した値のみを足しています。こうすることにより、法線がカメラの正面を向く部分の色はより元の色に近く、外側は白っぽくなります。
要するにMMDのスフィアマップとかに近いです。(シェーダー確認用に球体設置しました。)
gistfe120d56f72b007e31754389a83158a6
まだまだ想定の表現には至らないがとりあえずこれで完成！NEORTにもアップします！
アップした
https://neort.io/art/bhtejnk3p9fdnjll5ru0
アップしました
NEORTで作った作品はこれで三つ目、まだまだこれからですね！
おわりに
そういえば前編での発言
今回は初めから作りたいものをすでに考えています。
目標はカクカクのポリゴンで前回作ったような波の作成です。
Hai...カクカクのポリゴン感ないですよねｽﾐﾏｾﾝ
（途中で方向転換したりで行き当たりばったりなのがばれる・
・・）
ま、まあこれは次の制作テーマってことで！それじゃあ
追記：最後のシェーダーに大きな間違いがあったため修正しました。
