今回もすごいぞ Adult Swim！ 動物をモチーフにした大迫力の 3D サウンドビジュアライザ！
毎度毎度驚かされるアダルトスイム
今回ご紹介するのは、当サイトではもうおなじみと言ってもいい、Adult Swim のウェブサイトです。
今回は楽曲を紹介する特集ページが WebGL のデモで実装されているものですが、それぞれの楽曲ごとに、ちょっと変わった 3D シーンのサウンドビジュアライザが実装されています。
動物をモチーフにしつつ、トーラスを内側から眺めているかのような、トンネルの内側っぽい空間を見事に演出しています。
本当にかっこいい！
楽曲に合わせてアニメーションする映像作品のよう
Adult Swim はアニメや音楽などを扱うエンターテイメント系のコンテンツを扱うアメリカのメディアサイトなのですが、ちょっとアンダーグラウンドというか、独特な世界観を持つ WebGL の作品を毎回出してきます。
しかもそれらが毎回毎回、異常にハイレベルなんですよね……
今回も、アート作品としてもとてもおもしろい、見た目にも楽しいインタラクティブな WebGL コンテンツになっています。
サイトのロードが終わると、壁に動物をモチーフにしたマスクが掛かっているかのような……独特な雰囲気の一覧ページが出てきます。
もうこのシーンから既に、只者ではない雰囲気がビンビン伝わってきますよね……
そして、この仮面のようなオブジェクトそれぞれに、楽曲がひとつずつ割り当てられています。
正面にマスクがある状態になると自動的に楽曲の再生が始まるのですが、このとき、楽曲の盛り上がりに合わせてマスクの目の部分にある模様がくるくると動きます。
そして仮面の部分をクリックすると、今度はその目の部分にあった模様が投影されたトンネルの内部のような世界にワープします。
半透明のマテリアルで描かれるマスクと同じ形状の 3D オブジェクトもめっちゃかっこいいですね。
また、キャプチャして静止画で見せるというのが難しいのですが、このマスクを選択したときのワープのようなアニメーションがすごくダイナミックで迫力があります。
単に拡大縮小するような単調な動きではなく、微妙に有機的な印象の、本当になにか動物が咆哮を上げるかのような、独特なアニメーションになっています。
それぞれにトンネル内部に投影される模様もまったく風合いが違いますし、カラーリングのセンスも含めて、3D 的にもデザイン的にも本当にアートの世界に入ってしまったかのような美しさを堪能することができます。
トンネル内部に貼られる不思議な模様は、たぶん、シェーダでリアルタイムに生成しているというよりは画像由来の柄になってるのかなと思います。
とは言え、このレベルになると、そこはあまり重要じゃないかもしれませんね。
仮面のような動物のオブジェクトが並んでいるシーンも、その仮面の目の部分からなにか怪しげな光が漏れ出してくるような……
すごく魅惑的な雰囲気がなんともいい感じです。
また、これはもしかしたら言われなかったら気が付かないかもしれないですが、今回のサイトは DOM で作られているものが極端に少なく、再生ボタンとかラベルとか、そういったものは全部 WebGL 側でレンダリングされていますね。
左上にあるメニューアイコンをクリックすると楽曲の一覧ページが出てくるのですが、ここも妙に凝っていて、本当に隅々までしっかりと作り込まれています。
とてもレベルが高い作品になっていますので、ぜひチェックしてみてください。
