あくまでもアクセントとして WebGL を使った演出でシーンを盛り上げる Rossinavi のスペシャルサイト
動画を活用した絵作り
今回ご紹介するのは、Rossinavi というボートを製造しているメーカーのウェブサイトです。
ボートやクルーザーって私のような庶民にはまったく縁のないタイプの乗り物ですが、欧米なんかではお金持ちはみんな所有しているような変な先入観がありますね……
今回のサイトも非常にラグジュアリーな感じと言いますか、演出や外観の美しさ、雰囲気などを重視したビジュアルになっています。
リンク：
どこが WebGL で描かれているのか
今回のサイトは、Rossinavi の Seacat というスーパーヨットのスペシャルサイトだと思うのですが、適当に検索してみると 43m ドル、つまり日本円に換算すると 60 億円くらいするヨットみたいです……
スケール大きすぎて若干想像するのも難しいのですが、その先進的な機能やエコシステムについてかなりしっかりと説明がされています。
WebGL を使っているウェブサイトということで「ヨットの部分が 3D で描画されるのかな？」と嫌でも考えてしまいますが、実は WebGL が使われているのはヨットの部分ではありません。
背景にうっすらと Seacat の姿が浮かび上がっていますが……
WebGL で描画されているのは「SEACAT」という文字のほうですね。
こちらは揺らめく水面の反射のように、白い部分の濃淡が変化するのですが、このアニメーションするロゴの部分は WebGL でリアルタイムに処理されています。
ヨットの船体を描いている部分は一貫して動画になっていて、恐らくその上質な雰囲気を表現するのには動画のほうが適していた、ということなのでしょう。
この上のスクリーンショットも船体は動画素材。
ページ冒頭のロゴの部分の他に、下層ページを開いたときなどに現れるネオンのようなラインの部分は WebGL っぽいですね。
この下の画像でいうと、画面の右寄りの部分に波打つ何本かのラインが見えていると思うのですが、その部分ですね。静止画では伝えられませんが、絶えずうねるようにアニメーションしています。
WebGL を使って UI の一部を装飾しつつ、ビジュアルについては動画をベースに表現することで高品質な質感をユーザーに見せている、という感じでしょうか。
WebGL 案件に携わっていれば、多かれ少なかれ、ここは動画でやるべきなのでは……？ という悩みと向き合う場面に出くわします。
実装する人間の心理としてはもちろん自分の技術で顧客の求める品質の美しいインタラクティブコンテンツを制作したいと考えるわけですが、そこはモバイル端末などでも動作しなければならないなど諸条件を踏まえ、妥協しなければならない場合もあったりするんですよね。
今回のサイトは商材というか扱っている製品が数十億円もするような高級ヨットなわけで、リアルタイム CG にこだわって外見的な品質を下げる選択肢は実際取りにくいですし、取るべきでもない気がします。
ロゴやネオンのようなラインが WebGL で描画されていることで、全体で見たときに、インターフェースにもラグジュアリー感が備わってバランスが取れているように個人的には感じました。
ぜひチェックしてみてください。
