ディストーションを用いたちょっと不思議な波の表現を WebGL で実現した WHOISJOA のウェブサイト
静止画を使った変わった表現
今回ご紹介するのは WHOISJOA というスタジオのウェブサイトです。
主にウェブ制作などを行うスタジオなのかなという感じですが、一風変わったキービジュアルの実装など、WebGL 使いの目線で見るとちょっとおもしろい事例ですね。
キービジュアル部分は静止画を素材として使っているのですが、まるで本当にそこに動く映像があるかのように見せています。
リンク：
WHOISJOA® — Studio specializing in high-end websites
実は結構複雑なことをしているのかも
上でも書いたように、今回のサイトのキービジュアルとなる WebGL 実装ではおそらく素材としては静止画が使われています。
素材自体は静止画なんですが、それを画面に描画する際にディストーションを掛けたり、ポストエフェクトを掛けたり、あるいは位置調整を上手に行ったり……
さまざまな工夫を加えることで、まるでそれがインタラクティブに生成された波の映像であるかのように感じさせてくれます。
ソースコードまで詳しく分析したわけじゃないのでもしかしたら間違っている部分もあるかもしれませんが、パッと見た印象としては静止画を引き伸ばしたり縮めたり、あるいは波が揺れているような感じで歪ませたりしているかんじですね。
これがなんかすごくよくできていて、ブルームの効果とかも相まって本当に水面が動いているみたいに感じる瞬間もあります。
加算合成で陽の光を見事に表現していておもしろいです。
サイト内にはその他にも、波っぽいモチーフが出てくる場面があったりしますが、サイト全体のテイストから言ってそんなに演出を盛り盛りにしているタイプのウェブサイトではありません。
比較的落ち着いたデザインに、あまり派手すぎないトランジションが組み合わされた感じのサイトですね。
トップに配置されたキービジュアルが、ある意味一番派手な部分かもしれません。
今回のサイトの WebGL 実装は、いわゆるシェーダなどを駆使してノイズで水面を表現するタイプとはだいぶ方向性が異なります。
たった一枚の静止画をベースに、もしかしたらブルーム成分を生成するための画像なんかも使っているかもしれませんが、リアルっぽさを創意工夫によって演出してるというのはなんとも興味深い事例だなと個人的には感じました。
サイトのロードが終わった直後、イントロ演出の一連の流れはちょっと目を奪われるような不思議な魅力があります。
ぜひチェックしてみてください。
