二次元ベースながら Pixi.js をリッチに使った音楽配信サービスの年末特設サイト
小さなエフェクトの組み合わせで魅せるサイト
今回ご紹介するのは、WebGL の事例としてはちょっと異例なものなのかもしれません。
Pixi.js を使い、二次元のエフェクト処理に主眼を置いた、音楽配信サービスの年末総決算サイトです。WebGL というと 3D コンテンツがリアルタイムでぐりぐり動くみたいなイメージがどうしても先行しますが、こういった二次元ベースの表現もまた、WebGL を活用したひとつの形だと思います。
言われなかったら、WebGL を使っているかどうかわからないかもしれません。それくらいさり気なく、しかし裏では相当リッチに、WebGL が使われています。
ページのロードと同時に 30 個近いシェーダが!
このサイトを設計したエンジニアの方がもし目の前にいたら、どうして Pixi.js を採用するに至ったのか、ちょっと質問してみたい気もします。
というのは、けして上から目線で偉そうなことを言うつもりはないのですが、今回のサイトに使われているエフェクトは、その気になれば Canvas2D や CSS でも十分に表現できるもののように見えるからです。
しかし、恐らく半透明のエフェクト処理や、それを滑らかに動かしたりするために、WebGL が力を発揮しているのだろうなとは思います。力技で Canvas2D を使って処理するよりは、かなり軽快に動いていると予想します。
全体的に、大胆に配置された大きめの画像と、グラデーションを上手に利用したデザインがとても印象的なサイトですね。
画面遷移の瞬間や、画面が表示されるまでのちょっとした待ち時間に、こまかないくつものエフェクトが使われています。デザインは非常に凝っていて、同時にサウンドデータ(アーティストの曲)をダウンロードしながらサイト全体が動いています。
とても美しく滑らかなアニメーションは、やはり Pixi.js を使っているからなんでしょうか。私自身、あまり Pixi.js のパフォーマンスについて詳しくないのでなんとも言えないところがありますね。
サイトを表示してリソースが読み込まれていく様子をインスペクタで見ていると、サイトの表示が完了すると同時にシェーダを一気に 30 個近く生成していますね。
これは正直、最適化できていないせいなのか、それともこだわった結果多くなってしまったのか、どちらなのか判断が難しいですね。
シェーダを 30 組使うなんて、WebGL の通常のコンテンツでは考えられません(いやもちろんありえる話ではありますけど 笑)
しかし、私としては後者の方、つまりこだわった結果そうなってしまったのだと思いたい気持ちもあります。
ヒットチャートを振り返る CHARTS や、季節に応じた SEASONS など、いくつかのカテゴリ別にたくさんのアーティストが紹介されています。
とにかく派手な色合いとグラデーションがとても美しい、見事なサイトだと思いますね。
今回のサイトを見ると、WebGL のある可能性を感じる気がします。なにも 3D でゴリゴリ処理することだけが、WebGL の使い道ではありません。今回のサイトのように、さり気なく、しかし重要な縁の下の力持ちとして、WebGL が使われることもまた正しいひとつの結果だと思います。
3D はちょっと苦手だけど、しっかり演出にはこだわりたい、そんなふうに思っている方は日本にも多くいると思います。ひとつの貴重なユースケースとして、参考にしてみてはいかがでしょうか。