webGL（Shader）を勉強した話
ゆるWeb勉強会@札幌 Advent Calendar 2019 9日目の記事です。
ずっと勉強しようと思っては躓き、諦め、立ち上がってまた躓きを繰り返して、ちょっとだけ思ったことが出来るようになったので、その成果などをまとめました。
まずはwebGLの勉強のために作成したものを紹介します。
✨パーティクル①
Three.js と THREE.BAS というライブラリを利用して作成したものです。
ページ下部にあるテキスト入力フォームに文字を入力 or 右のマイクボタンをクリックして何かしゃべると、入力された文字 or しゃべった言葉の文字をパーティクルが形作ります。
マウススクロール or ピンチイン・ピンチアウトで拡大縮小、ドラッグ or スワイプで見る位置が変わります。
（"Merry Christmas" って出てくると思います）
ソースコード↓
✨パーティクル②
ページ下の猫ボタンをクリックすると猫画像になります。
こちらも Three.js と THREE.BAS というライブラリを利用して作成したものです。
ソースコード↓
🐱画像エフェクト
画像の切り替えエフェクトです。
若干アニメーションなど違いますが、私のポートフォリオサイトの背景で使用しているものとほぼ同等のものとなります。
こちらはThree.jsなどのライブラリは使用せずに書いたものになります。
ソースコード↓
😺画像切り替え
THREE.BAS の作者の作品を写経して自分なりに少しアレンジを加えたものになります。画面をクリックで画像が切り替わります。
ソースコード↓
🍭色んな色のやつ
画面が色んな色になります。マウスの位置が白になります。
ソースコード↓
🤔なぜ勉強したのか？
Flash で作っていたアニメーションと 似たようことが webGL でも出来そうだなーと思ったからです。
web業界に入ったばかりの頃、Flash の仕事を任されたこともあり、Flash のタイムラインアニメーションや ActionScript3 でパーティクルを作ったりするのが とても楽しくなりました。
Flash が衰退していくと今度はJSでアニメーションを作成することになり、canvas で2Dアニメーションを作成していたものの webGL にはあまり触れてこなかったので、勉強してみました。
でも shader とかが全然わからなくて、途中で諦めたり、また始めたりを繰り返して ある程度形になったのでまとめてみました。
☕️勉強してみた感想
JSでアニメーションを作成するよりも、ずっと軽快に動作します。スマートフォンで見ても軽快にアニメーションするので、良いです。
今回は shader を中心に勉強しましたが、JSとは違ったりして結構とっつきにくかったです。ってか全然良くわからなかったので、ググりまくって何とかしてました。
また、shaderで扱う数字は 0~1 とか -1~1 とかの範囲の数字を扱うことが多かったです。
昔、PIXI.js などを使用してパーティクルなどを作って遊んでいましたが、（こちらやこちらを御覧ください）パーティクルの数を比較しても 文字通り桁違いの数のパーティクルをアニメーションさせることが出来るのは、とても魅力に思いました。
🐷まとめ
webGLでやりたいことを突き詰めていくとThree.js の機能だけでは実現できないことが出てきます。そうなると、shader を書かざるを得ないのですが、これが慣れないと非常に難しいと感じました。何が決まりごとで、何が自由に設定できるのか など色々ググりながら進めていきました。
ただ、shader を書くと大量の計算をすばやく処理してくれるので、習得するためにもさらなる勉強が必要だと感じました。
また、Three.js そのもののファイルサイズが大きいので、shader だけ書く場合などは Three.js を使用しなくても良いと感じました。
CSSやJSのDOMアニメーション、canvasの2Dアニメーションだけでは表現が難しい・出来たとしてもパフォーマンスが出ないようなアニメーションでもwebGLだと実現可能だったりします。
まだまだ 使用していない機能なども多いので、今後も引き続き勉強していきたいと思います。
今回の勉強で参考にさせていただいたサイトなどを以下にリンクしておきます。
この記事が気に入ったらサポートをしてみませんか？