ミステリアスでエキゾチック！ 怪しいサーカス団のテントに迷い込んだような SRETKS さんのポートフォリオサイト
今回は Babylon.js と Pixi.js の合せ技
今回ご紹介するのは、当サイトでも過去に何度も取り上げたことのある SRETKS さんのポートフォリオサイトです。
つい先日リニューアルされた形なのかなと思うのですが、今回もまたかなり個性的な感じの仕上がりになっていますね。
これまでのウェブサイトと同様に WebGL の処理は Babylon.js を利用されているようで、今回はそれに加えて Pixi.js でのエフェクト処理なんかも同時に使われているようです。
リンク：
世界観を追い求めた表現の数々
今回のサイトでは、まずローディング表示の時点からかなり個性的といいますか……
もちろんいい意味でめちゃくちゃ主張が激しいです（笑）
グリッチエフェクトっぽい表現もさることながら、まず登場するキャラクターたちの造形やデザインからして、かなり徹底してしっかり世界観を作っているのが伝わってきます。
ロードが終わって表示されるシーンは 3D の空間になっていて、ここから先はスクロールに連動してカメラやキャラクターが動きながら、いくつかのセクションをたどっていきます。
文章量はそれほど多くなく、ざっと経歴やスキルセットを示すだけの内容ですが、とにかくビジュアルの主張が強すぎて文章を落ち着いて読む気分になりません（褒めてる）。
ただ、文字の大きさや読みやすさはしっかりと考慮して作られていますし、各セクションのタイトル部分に対してエフェクトが掛かっていたりするなど、ただの派手さ一辺倒なサイトというわけでもないんですよね。
そのあたりのバランス感は見事だなと思いました。
今回のサイトでは半分想像で書いちゃいますが背景の 3D シーンの部分を Babylon.js で、タイトルや画像が歪むような演出が Pixi.js で実装されているのかなと思います。
こういうライブラリを同時に使って演出しているケースって実は結構珍しいと思うので、そういう意味でも特徴のある実装で技術的にも面白いなと感じます。
歪むような演出もどこか異世界というか、非日常の世界にいるような雰囲気をいい感じに底上げしてくれていて、本当に世界観に対する作り込みがすごいなってただただ感心してしまいますね……
SRETKS さんは過去に WebGL スクールの講師で登壇してくださったことがあり直接の面識もあるのですが……
ポートフォリオサイトは毎回どこか普通ではない、個性的な部分が必ず盛り込まれていて、優しい感じの人当たりとサイトのぶっ飛び感のギャップが個人的にはめちゃくちゃおもしろいです。
日本ではまだまだ Babylon.js って知名度がそこまで高くないような感じがありますが、TypeScript で記述することが前提になっていたり、セットで公開されているツールなどの機能が充実していたり、three.js とはまた違ったすごい部分がたくさんあるライブラリだと思います。
単純に楽しいサイトとして眺めてみるもよし、Babylon.js や Pixi.js の事例としてじっくり観察してみるもよし、いろんな見方のできる面白い事例だと思います。
ぜひチェックしてみてください。
