Blog

カラフルなパーティクルが飛ぶシェーダースクリプト

スクロールに合わせてパーティクルが飛んで、文字(or 絵)になるというシェーダースクリプトです。

ちょっとずつWebGLを勉強していますが、やっとコツを掴めるようになってきたような気がします。

参考にした教材が素晴らしかったです。(そして自分の応用力の限界を感じる)

テクスチャは下記を用意しました。大理石の画像に文字でマスクをかけただけです。

これと、uvから生成したHLSカラーをブレンドしています。
X,Y,Zすべての軸で色を変えたため、こんなもやもやしたドットのような感じになりました。

背景にcanvasがあって、セクションが変わるごとにパーティクルがかわる実装ってどうやるんだろうと2年くらい前から思ってて、とりあえずblenderで球作って「で、どうするん・・・?」ってなってましたが(いろいろ迷走)、

ちゃんと一からWebGLとThree.jsを勉強し、ようやく近づけた感じです。

めちゃくちゃ自分の美的センスに疑問感じてますが、Astroでglslを書ける環境を作れたのだけは満足しています。

参考

  • Udemy CodeMafia WebGL & JavaScript
    ※Private Clubの有料講座。お値段以上。

おすすめの記事 recommend blog

新着 new blog

github