インタラクティブな水滴表現が面白い！ Converse の特設ムービーサイト
ムービーを GLSL エフェクトで変化させる
今回ご紹介するのは、Converse の特設サイトで、動画を上手に利用しつつ、GLSL でリアルタイムにエフェクトを掛けたデモ作品です。
基本的にはムービーとしてそのまま楽しむことができる品質のもので、そこに、シェーダによるエフェクトを追加している感じです。
アンダーグラウンドな雰囲気が好きな方や、コンバース自体のファンの方であれば、単純にムービーなどを見るだけでも楽しめると思います。今回は、GLSL の処理部分にフォーカスして見ていきましょう。
歪ませるだけでもこれほどインパクトがある
今回のサイトは、恐らくコンバースのなにか特別なエディションの告知サイトだと思うのですが、記事の執筆時には SHOP と書かれたリンクが機能していなかったので、商品に関する詳細はちょっとわかりませんでした。
でも、ムービーを見ればそのコンセプトや雰囲気は結構伝わってくる感じがしましたね。
ムービーそのものの完成度も高く、こういう世界観が好きな人にはたまらないのではないでしょうか。
シェーダによるエフェクトはサイト全体に利用されていて、サイトを開いただけでも、流れ落ちるような水のエフェクトがすぐに目に飛び込んできます。
上の画像では、水の流れた後のような、二本のスジが見えています。
こんな感じで放っておいても水滴系のエフェクトが掛かるようになっていますが、マウスを動かしてみたり、あるいは画面内をクリックしてみたりすると、より激しくエフェクトが掛かり、これだけでもとても楽しいですね。
特にクリックした時の雫が弾けたような感じのエフェクトが、実にかっこいいです。
静止画だとちょっとわかりにくいかもしれませんが、実物は、これがスムーズにアニメーションして動いているので、ぜひ現物を見てもらいたいところです。
タイトル画面から既にエフェクトてんこ盛りという感じではありますが、画面の下のほうに赤い文字で書かれている「START FILM」の文字のあたりをクリックすると、画面が切り替わってコンセプトムービーの再生が始まります。
このムービー、先にも書いたように、そのまま見ていても十分に味のあるものに仕上がっています。
そこに、さらに GLSL によってエフェクトを加えることで、より今回の製品のコンセプトを色濃く表現しているのだと思います。
ムービーシーンでは、マウスクリックによる水滴エフェクトはより派手に。そして、キーボードからのキー入力によっても、エフェクトを発生させることができるようになっています。
ムービー全体の進捗状況は、実はさりげなく画面に表示されています。
画面の一番したのところに、まるで床の上を静かに流れていくインクのように、ピンク色の流体っぽいものが映っているのですが、わかるでしょうか。
ここの部分も、実際にムービーが再生されている状態ではアニメーションしていて、結構芸が細かいなと感心させられます。
床の上を滑るようにして流れていくインク。
今回のコンバースの製品が、もしかしたら防水とか、そういう部分に特化した製品だったりするんでしょうか。水、あるいは水滴・雨といったような表現がたくさん出てくるので、そんな気がしました。
コンセプトはどうあれ、サイトの仕上がり自体は万全の完成度に見えます。使われているシェーダのエフェクトも、シンプルですがかっこいいですね。
隅々まで、それこそ動画の再生進捗まで、流体っぽい表現で統一されているのは一種狂気じみたこだわりのようにさえ感じます。
シェーダによるエフェクト効果を間引いても、それでも十分に素晴らしいサイトだと感じます。
ぜひチェックしてみてください。
