GLSLに手を出し始めた２【前編】

もしよければ前回記事も見てもらえると嬉しいです↓

前回：GLSLに手を出し始めた１

前回では単純なGLSLのフラグメントシェーダーのみでグラフィック作品を制作しましたが今回はjsで3DCGが扱えるThree.jsと組み合わせたコーディングをやってみます。

やっとシェーディングっぽいこと始められますね。わくわくです。

まずはシェーディングするためのCGを作成

今回は初めから作りたいものをすでに考えています。

目標はカクカクのポリゴンで前回作ったような波の作成です。

波のもとになるポリゴン自体はThree.jsの板のプリミティブを利用して簡単に作れそうですね。

ランダムな波はすぐには難しいと思うので各頂点に少しづつずらしたsin波をかけていきましょう。

できた

おぉ～ pic.twitter.com/DmyNiZpCAD

— izumi / ikezaki🐠 (@izumi_ikezaki) 2019年3月3日

昨夜ツイッターでアップしたものですね。この時のソースコードをブログ用に保存し忘れたのが惜しいです。

なんかこれだけでも絵になってる気がしますがここから動きについて考察していきましょう。

ポリゴンを大きくし、波の動き方も細かく調整

gistc43098733dc5a7e33a18dad5687b1ec1

二つの波が存在しているのでifでどの波の処理か分岐させました。

波の動きをベジェ曲線で管理

gist2d68272161c2b95a317a1dc6c1ef632c

前回作成したベジェ曲線の波のように制御点を4つ設置しそれぞれを別の三角関数で移動、それから３次ベジェ曲線でつなぐ形式です。

ただ、なんか１本目の波をこの方法で作ってるときに思ったより処理が面倒そうなことに気づきました。（遅い）

全ての制御点別の波で動かさないといけいないので同じような文が増えすぎますね。ほかに方法はないのか・・・？

実はこの制御方法を今回のゴールにする予定だったのでちょっと詰みました。

そもそも今までこういった作品を作ったことがなかったのでどういう方法を使えばいいのか知らな過ぎた。

こういう時こそ先人の作品から学習するぞ、てことでNEORT.io等で似たような波を作ってる作品のソースコードを確認しました。

初めて知ったパーリンノイズの存在

どうやらそういったランダムな波などはパーリンノイズで作っているらしいです。通常のrandam()などの関数で返されるランダムな値よりも自然な（適度な？）値を返すみたいです。

processingではnoise()という関数で実装されてるとのことでした。

ics.media

上記のサイトを参考に各頂点にノイズをかけてみます。

NEORTの導入できるライブラリにパーリンノイズはない？

一応今回の作品はNEORTで公開する予定なのでNEORTの設定で追加できるライブラリを用いようと考えています。

百歩譲って↑の記事で用いられている「simplenoise.js」がなかったとしても、何かしらこのノイズのライブラリ自体は何かあるでしょうと思ったら全然引っかからない・・・

これは・・・ないということなのか・・・（間違っていたらすみません💦）

とりあえず↑の画像にも出ているsimplex-noiseを使ってみることに。

調べてみたらどうやらシンプレックスノイズ も似たようなものらしいし大丈夫でしょ（適当）

シンプレックスノイズを用いた波

giste7861b5f77d976872b9366e05dd54625

できました。

なかなかいいランダム具合ですね。

微調整していたらきりがないので今からシェーダーに入ります。

HTMLに書いたGLSLをjsに読み込む

取り合えずGLSLの文が読み込めるようにHTMLのページに書いたシェーダーを読み込める処理を書いておきましょう。

・・・といいつつもこちらの記事からコピペさせていただきました、ありがとうございます。

qiita.com

よし、読み込みはうまくいってるな！これからゴリゴリGLSL書くぞ～～～

次回に続く