シェーダを利用したエフェクトの数々がシーンを演出！永久×バレットのウェブサイトが面白い

doxas : 2020-09-15 13:59:32

やっぱり今度もエフェクトモリモリ！

今回ご紹介するのは「永久×バレット」の公式ウェブサイトです。

最初はアニメ作品なのかなと思ったのですが、漫画作品のティザーサイトなのかな？かなり力の入ったプロモーションになっていて、今回紹介するサイトでも迫力満点の演出が多数用いられています。

想像で書きますが、使われているライブラリを見ると恐らく株式会社ジュニさんで実装を担当されたサイトなのかなと思います。

ジュニさんが担当されるサイトは毎回そうなんですけど、今回もエフェクトモリモリでめちゃくちゃかっこよく仕上がっています。

今回のサイトは、開発者ではない一般ユーザーが見ても、あるいは WebGL の実装経験がある開発者が見ても、どちらの目線でもいろんな驚きや発見があるサイトなんじゃないかなと思います。

基本的なレイアウトは手前と奥、そしてそれらの中間という三層構造になっており、手前のレイヤーには瓦礫と女の子の姿が描かれています。

マウスカーソルが白く光る発光体になるのですが、その発光体がそのまま光源の役割を果たすようになっていて、シーンの明るさが変化するようになっていますね。

女の子の上半身のあたりが明るく照らされているのがわかるでしょうか？

スクロール操作を行ってみるとわかるかと思うのですが、手前のレイヤーは基本的にシーン内の縦方向の位置は固定された状態になっており、その後ろのレイヤーでは絶えず動画が再生されます。

その間にもう一枚レイヤーが挟まっていて、スクロールすると埋め込み動画や原作の情報などがスクロールとともに登場します。

この埋め込み動画の部分をよーく観察してみると、実際にはこれが「YouTube などの埋め込み」ではなく、レンダリングされているものだということがわかるのではないでしょうか。

ブラーが掛かっていたりするので、CG 経験のある人ならすぐに分かると思います。

クリックしてやるとエフェクトが発生すると同時に、本当の埋め込み動画が表示されて映像を閲覧できるようになっています。

今回のサイトにはシェーダ芸がたくさん使われていて、すでに登場しているブラー処理の他にも……

ノイズを利用したインクのような表現、グリッチノイズによる遷移エフェクトなど、こういった世界観の漫画作品にもぴったりの様々な演出を見ることができます。

実際にはそれらと組み合わせた RGB ディストーションや、カーソルの役割を持つ発光体が離散するエフェクトなど、本当に細かい演出がめちゃくちゃいっぱい仕込まれているので、それらを探しながら見てみるというのも楽しいかもしれません。

今回のサイトは SF 的な漫画作品のサイトということもあり、こういった WebGL を使った派手目の演出とは親和性が高く、かなり見ごたえのある仕上がりになっていますね。

個人的に面白いなと思ったのは、クリッカブルなアイテムにカーソルを乗せたときの細かい演出でしたね…… こんなところにまでインタラクティブ性を考慮した実装ができるというのは、本当に素晴らしいと感じました。