シーンの状況に合わせてパーティクルが次々と姿を変えていく様子が面白い agileDss のウェブサイト
WebGL 的表現としては正統派
今回ご紹介するのは、データ分析を中心としたコンサルティング業務などを行っている企業、agileDSS のウェブサイトです。
データ分析やビッグデータなどを扱う企業らしい、オーソドックスな WebGL 実装がなされています。すごく派手ということでもないのですが、かといって地味でもなく……
WebGL を使ったサイトならではの近未来的な雰囲気も同時に備えています。
個人的には、WebGL 初心者が最初にお手本にするのに手頃な実装かなという感じがします。
リンク：
パーティクルを利用した形状変化の表現
今回のサイトでは、ポリゴンを使って描かれる 3D モデルは一切出てきません。
かろうじて、ラインを使って表現している部分がトップページなどで出てくるのですが、それ以外はすべて頂点の粒子（パーティクル）によってグラフィックスが描かれます。
パーティクルを用いた表現は手軽な割に見た目にインパクトが出やすく、WebGL を利用した表現の題材としては取り組みやすいものの１つかなと思います。
この上の画像にあるように、今回のサイトではパーティクルを利用して様々な形状が描き出されます。
あるときはグラフのような波打つラインのような形状が出ることもありますし、より有機的で複雑な形状に変化する場面もあります。
パーティクルにはそれぞれカラーが割り当てられているのですが、そのカラーごとに集合したり離散したりする様子はなかなか見事です。
あまりアニメーションにイージングなどが掛かってないので、表現としてはちょっと堅い印象を受けますね……
個人的に面白いなと思ったのは、形状ごとに使われている頂点の数を調整している方法です。
たとえば、この下にあるような雲のシルエットをパーティクルで描いているシーンでは、使われているパーティクルの絶対数（個数）が少ないんですよね。
では、シルエットを表現するのに余分になった、余ってしまった頂点はどこに行ってしまったのかというと…… 遷移アニメーションをよく見ていればわかるんですが、シーン遷移の際に徐々に透明になってフェードアウトして消えていくようになっています。
こういうのは、似たような実装を自分で一度でも作ったことがあると、いかにもあるあるネタという感じでいろんな発見があって面白いですね……
今回のサイトの WebGL 実装は、パーティクルの座標を制御することで、様々な模様や形状を描いています。
WebGL 実装の経験が無いと、一見するとこういうのをどうやって実装するのかわからないという方も多いかもしれませんが、WebGL の実装としてはかなりシンプルな内容なので意外と手軽に挑戦できる表現かなとは感じます。
やっぱりパーティクルは見た目がきれいですし、あまり CG 的に余計なことを考えなくても実装できるテーマでもあると思いますので、今回のサイトのビジュアルを参考にしつつ、似たような表現に挑戦してみるというのも面白いかなと思います。
ぜひチェックしてみてください。
