今年もバッチリ WebGL で攻めてきた！ Adult Swim のミュージックカテゴリのウェブサイト

doxas : 2017-07-05 16:05:58

まるで水に浮かぶように漂うオブジェクトたち

今回ご紹介するのは、これまでにも様々な形で WebGL コンテンツを提供してきたアダルトスイムのウェブサイトです。

毎回驚きのコンテンツを配信しているアダルトスイムですが、今回のサイトはポストエフェクトを用いてどこか抽象的な世界観を描き出しています。

水に漂うような不思議な世界観を堪能してみてください。

今回のサイトは WebGL によるビジュアル表現と楽曲を楽しむことができるウェブコンテンツで、非常に丁寧に作られています。

楽曲も、一部だけを抜き出したサンプルというわけではなく、曲全体が収録されているようで、普通に最初から最後まで聴くことができます。また、曲を最後まで聴いたあとは、勝手にシーンが遷移してビジュアルとともに次々と別の曲へ移っていきます。

それぞれの曲ごとに、ひとつひとつシーンが用意されており、抽象的なオブジェクトと波打つ水面のような幻想的な世界観が描き出されます。

曲と曲の間を移動するための操作は、スクロールに割当てられています。

グイッと勢いよくスクロール操作してやると、シーンがヌルっという感じで動いて、別の曲に再生が移ります。

また、マウスボタンをホールドすることでもシーンが変化するのですが、ここでは、その楽曲に割当てられているトラック番号が浮き出してくるような演出を見ることができます。

3D 的には、要はテクスチャを参照する座標をずらしているのですが、いい感じに数値の部分が浮き出してきているように見えて、かっこいいですね。

浮き上がった 1 の数字が見えますでしょうか？

この記事の執筆時には、楽曲は全部で 6 つ公開されています。

ただこれについては、今後時間を置いて少しずつ追加されていくのだと思います。昨年もそんな感じでしたね。

WebGL の技術的な側面に注目してみると、今回のサイトではポストエフェクトが印象的に場面を演出しています。

ヴィネットのような画面の隅が暗くなるような演出、RGB ずらしのような演出、そして光の漏れ出すようなブルームの演出等が使われているのですが……

今回のサイトではそれら一連のポストエフェクトに対して、共通してノイズのエフェクトを合成したような効果を加えています。

これにより、ちょっと独特な雰囲気を演出することができています。

アダルトスイムは、日本ではあまり知られていませんが、アメリカではよく知られたメディアというか、エンターテイメントコンテンツの配信企業です。

音楽だけでなく、ビジュアルに関するものやアートに関するものなど、どこかアンダーグラウンドな世界観が特徴の媒体ですね。

今回のサイトも、そんなアダルトスイムの世界観をしっかり表現できているように思いますし、なにより、しっかりと手の込んだ演出がなされているあたり、ウェブにおける表現を重視していることがうかがえる作りです。