Babylon.js を駆使して創造された幻想的でスケールの大きな自主制作のウェブサイト And we were...
たっぷり用意された水中シーン
今回ご紹介するのは And we were... というタイトルの、Simon Trushkin さんが自主制作されたウェブサイトです。
なにかのプロモーションというわけじゃなく、本当にご自身の表現のひとつとして制作されたウェブサイトのようで、すごくいろんな意味で贅沢な仕上がりのウェブサイトになっています。
ほぼすべてが水中のシーンで構成されており、細かいところまでかなりこだわりが感じられるウェブサイトとなっています。
リンク：
Underwater interactive museum "And we were..."
非常に完成度の高い一品
今回のサイトは About ページを見るに、人類の文明が海の底に沈んでしまった世界、というのを一つの切り口としてさまざまなメッセージを込めた作品になっているようです。
サイト内の 3D シーンはいずれも水中のシーンからなっているのですが、そういった背景があるからだったんですね。
とてもメッセージ性の高いビジュアルだなと見ていて感じましたが、制作の裏側にある背景がわかるとより楽しめる作品と言えるかもしれません。
この上のスクリーンショットを見ると、画面の左側のテキストの一部が暗く、あるいは透明になってしまっているのが伝わりますかね……
これ実際に動いているものを見るとわかりやすいのですが、カーソルの重なった位置にある文字が、まるで水に溶けたかのようにゆらゆらと動きながら透明になる仕掛けが施されています。
こういった水中を想起させるような演出が随所に取り入れられており、とても質感高く仕上がっています。
個人的にすごくおもしろいなと感じたのが、この上の場面。
ここでは、自由に歩き回れるモードと、スクロールするだけで閲覧ができるモードと、どちらの操作系を用いるかユーザーが選択できるようになっています。
こういうのはあまり他では見たことがなくて、なかなかおもしろいインターフェースだなと感じました。
3D シーンはなかなか質感高く仕上がっており、スクロールだけで操作するモードでもきちんと見どころにフォーカスしてくれるので、ストレスを感じることなく閲覧ができると思います。
わたしは自分自身が案件で海中系をやったことがあるのでよくわかるのですが、水中シーンって結構いろんな自然現象があって、それをどこまで丁寧に再現するかって悩ましい問題だったりします。
コースティクスが海底に落ちるか、水面から差し込むゴッドレイのような光を再現するか、魚が大量に泳いでいる状態を作るにはどんな仕組みを実装したらいいか……
いろんな観点を思い浮かべながら見ていても、かなりしっかりと丁寧に作り込まれているように感じる、そんなウェブサイトです。
ぜひチェックしてみてください。
