今回もすごいぞ Toonami on Adult Swim! 近未来的な電脳空間のお手本のような一作!

doxas : 2019-12-23 14:03:02

近未来風の実装は数あれど……

今回ご紹介するのは、毎回とんでもない完成度の WebGL 実装に驚かされる Adult Swim のウェブサイトです。

Adult Swim はアメリカの動画コンテンツ配信サービスですが、Toonami は特にアニメに特化したイベントというか企画ですね。

毎回 Toonami のサイトはものすごい作り込みがなされているのですが、今回もご多分に漏れず、見事な実装になっていますのでご紹介します。

リンク:

Toonami - Saturday Nights on Adult Swim

サイバーな雰囲気は参考になるポイントがたくさん

今回のサイトは、とにかくもう映像作品のワンシーンのような完成度になっています。

ユーザーの操作に対するインタラクティブな反応はもちろん、シーン遷移のアニメーションや、まるでホログラムのようにコンテンツが投影されるビジュアルなど、まあカッコよく仕上げられています。

はい、ご覧のとおり、シーン全体が WebGL で描画されている上に、電脳空間のようなネオンカラーがなんとも痺れます。

このシーンに限りませんが、今回のサイトのような実装の場合、シーン全体が WebGL で描画されているため、画面全体にポストエフェクトを掛けることができる構造になっており、今回のサイトではマウスカーソルを動かしてやると、カーソルが動いた軌跡の部分にだけ独特なエフェクトが掛かるようになっていますね。

これは言葉で説明するのが難しいのですが、UV をズラしたディストーションと、RGB のディストーションとを複合的に組み合わせたような感じです。

下の画像が、比較的わかりやすいかなと思うのですが、まるでインクが滲んだような効果と、電子ノイズのような効果が同時に発生する……という感じでしょうか。

その他にも、動画を再生する時には背景の部分に「まるで基盤のような模様が浮かび上がる」ような演出があったり……

あるいは、作品リストがホログラムの要領で空間に投影されているように描き出されたり……

上げたらキリが無いのですが、とにかく細かいところまですごくこだわって作られているので、こういった表現を行ってみたいと思っている方はぜひ参考にしてみましょう。

黒い背景に加算合成でネオンカラーを重ねて描画する、この手の表現は WebGL と相性がよいというか、手っ取り早くかっこいい描画結果を得られるため、比較的よく見かけますよね。

ただ、今回のサイトのように、インタラクティブ性やストーリー性、シーン遷移や細かなパーツごとのトランジションまで、細かく細かく丁寧に実装されている例は珍しいと思います。

Adult Swim のサイトは、基本的に WebGL を使っているケースだと何かしら驚くような仕掛けが施されていたり、あるいはクオリティが異次元に高いレベルで作り込まれていたりするのですが、今回の場合は後者ですね。作り込みの度合いが半端ではないので、ぜひ動く様子を観察しながら、自身の作品づくりにも取り入れてみてもらえたらと思います。

ぜひチェックしてみてください。

リンク:

Toonami - Saturday Nights on Adult Swim

share

follow us in feedly

search

search

monthly

sponsor

social