Pixi.js を用いてスプライトを大量かつ滑らかに動かすインタラクティブコンテンツ Bored Ape Yacht Club

doxas : 2024-07-17 12:01:35

なかなか手が込んでいる

今回ご紹介するのは、Bored Ape Yacht Club というウェブサイトです。

このウェブサイト、いわゆる NFT の文脈で世界中にファンがいるコレクションのウェブサイトだと思うのですが…… わたし自身があまりに NFT に無知すぎて、正直詳細はよくわかってません。

ただ、この Ape のイラストは、あまり NFT に詳しくなくても見たことがある人は多いかもしれないですね。X のアカウントを見たらフォロワーが 100 万以上あったので、本当に世界中で人気があるんだと思います。

今回のサイトでは、Pixi.js がどうやら使われているみたいです。

立体的な、いわゆるジオメトリを三次元的に展開したような意味での CG は使われておらず、あくまでも二次元的に WebGL を使っています。

スプライトを大量に描画することで、シーンを構築しているのでしょうね。

隙間から光が漏れ出してくるような演出があったり、紙が風になびいてめくれるような表現があったり……

実は細かく観察してみるといろんな部分が動いています。

NFT というキーワードには拒否反応があるという方もいるかもしれないですが、純粋にウェブの実装の一つとして、その細かな作り込みは参考にできるところも多いのではないでしょうか。

ヨットクラブのバー、のような場所がメインコンテンツになっているのですが、この場面も細かく作り込まれていてすごいですね。

ウォーリーを探せ的な面白さがあり、いろいろな部分にタッチしたくなります。

カーソルをホバーさせることで反応するオブジェクトが大量に散りばめられている他、なかにはクリックすることで下層ページへ遷移する、いわゆるリンクとしての機能を持っている部分もあります。

WebGL を用いた NFT 関連ウェブサイトの数、という視点で見てみると、一時の異常な盛り上がりが今はなくなり、いまはより純度の高いコンテンツだけが生き残っているという状況なのかなと感じます。

本当に不勉強すぎて細かいところはわからないのですが、X のフォロワー数が 100 万以上に達していると考えると、コミュニティの大きさやその熱量がなんとなくうかがい知れますよね。

今回のサイトでは 3D 的な表現こそないものの、スプライトをたくさん組み合わせてインタラクティブコンテンツを作っているという意味では、丁寧に作り込まれたなかなか興味深い事例だと思います。