水面や水滴の表現など水に関連したエフェクトがおもしろい SEARCH のウェブサイト
水や光に関する表現が凝っている
今回ご紹介するのは、SEARCH という企業のウェブサイトです。
この SEARCH という企業、サイト内の About ページなどを見ても今ひとつ何を事業の柱としているのか読み取れないところがあるのですが……
たぶん、文化遺産の調査や保全などを行っているグローバル企業なのではないかなと思います。
サイト内では水や光の表現にこだわりの感じられる WebGL 実装を見ることができます。
リンク：
スクロールに連動して場面が転換
今回のサイトでは、WebGL を利用して描かれる世界をスクロール操作で次々と巡っていくような構成が取られています。
とは言え、各場面で表れる詳細ページへの遷移ボタンを押してしまうと、別タブが開くのではなくそのままページが遷移してしまいます。もし WebGL コンテンツはそのまま開いた状態で残しておきたい場合は、別のタブで開く操作（たとえば右クリックして別タブで開く）を行ってやるのがよいでしょう。
WebGL のシーン構成はそこまでフォトリアルな感じではありませんが、結構丁寧に作ってあります。
この上のスクリーンショットを見ると、水面に白い文字が映り込んでいるのがわかります。
このように水に関連する表現に対しては結構しっかりとこだわって実装されている感じがあり、なかなか質感は美しく仕上がっています。
スクロール操作を行ってシーンを進めていくとカメラは一度水面の下に潜ります。
ここでも、水中に伸びる光の柱のようなものが表現されていたり、結構本格的です。
スクロール操作を続けて行っていくと、どんどんコンテンツが進んでいき……
やがて、今度は水中から陸上にカメラが戻っていくタイミングがやってきます。
水中からカメラが出るその瞬間、まるで実際にカメラが水面から出たかのような感じで、水滴がポツポツとレンズにくっついているようなエフェクトを見ることができます。
こういうのは WebGL ならではという感じがしますし、思わず目を引く素晴らしい演出だなと思いました。
フォトリアル系の CG は実装難易度が高いだけでなく、それを描画する際の負荷もどうしても高くなってしまいます。
WebGL に限りませんが、いかに軽量に、かつ本物っぽく見せるかについてはさまざまなテクニックが古来よりいくつも編み出されてきており、今回のサイトでもそういった技術をうまく利用して質感を向上していますね。
水面からカメラが出た瞬間の演出は、もし知らずに突然そのエフェクトが目の前に現れたら思わず驚くような新鮮さがあり、個人的にはすごくおもしろいなと感じました。
ぜひチェックしてみてください。
