カラフルなパーティクルが飛ぶシェーダースクリプト
スクロールに合わせてパーティクルが飛んで、文字(or 絵)になるというシェーダースクリプトです。
ちょっとずつWebGLを勉強していますが、やっとコツを掴めるようになってきたような気がします。
参考にした教材が素晴らしかったです。(そして自分の応用力の限界を感じる)
テクスチャは下記を用意しました。大理石の画像に文字でマスクをかけただけです。
これと、uvから生成したHLSカラーをブレンドしています。
X,Y,Zすべての軸で色を変えたため、こんなもやもやしたドットのような感じになりました。
背景にcanvasがあって、セクションが変わるごとにパーティクルがかわる実装ってどうやるんだろうと2年くらい前から思ってて、とりあえずblenderで球作って「で、どうするん・・・?」ってなってましたが(いろいろ迷走)、
ちゃんと一からWebGLとThree.jsを勉強し、ようやく近づけた感じです。
めちゃくちゃ自分の美的センスに疑問感じてますが、Astroでglslを書ける環境を作れたのだけは満足しています。
参考
- Udemy CodeMafia WebGL & JavaScript
※Private Clubの有料講座。お値段以上。