まるでペーパークラフトのような質感がリアルに描かれるギャップが楽しい La Rosée のウェブサイト
ミニチュアの世界を見ているみたい
今回ご紹介するのは La Rosée というフランスでスキンケア製品などを展開しているブランドのウェブサイトです。
フランスだから……というわけじゃないでしょうが、すごくオシャレで可愛らしい雰囲気に仕上がっていて、まるでミニチュアの世界を覗き込んでいるような気持ちになります。
すごく質感もよくて、見ていて楽しいウェブサイトです。
リンク：
質感は全部ベイク
今回のサイトの WebGL 実装は、基本的にすべての質感をテクスチャにベイクしていると思います。
CG の文脈で言うベイクとは、あらかじめ陰影や表面の質感をテクスチャに対して焼き込んでしまい、リアルタイムに描画するタイミングでは陰影の計算などは行わずに単純にテクスチャを貼るだけで処理するようなケースでよく使われる言葉です。
リアルタイムに計算で陰影をつけたり影を落としたりするのは負荷も高くなるので、より質感高く負荷も抑えようということになると、自然と質感をベイクしたテクスチャで対応することが多くなりがちです。
WebGL の場合は特に、どのようなプラットフォーム上で動作するかが確定できないので、より汎用性の高いベイクしたテクスチャで質感を担保してしまう方法がマッチしやすいです。
やっていることはただテクスチャを貼っているだけなので、リアルタイム CG でも負荷を抑えられるということですね。
今回のサイトのオブジェクトはどれも陰影や質感をベイクしたテクスチャが貼られただけだと思いますが、すごく質感よい外観をしています。つまり、テクスチャの作り方が上手いということです。
ウェブサイトらしく、インタラクティブな要素もあります。
部屋のなかに置かれたオブジェクトには、一部丸いアイコンが割り当てられており、それをクリックすることで詳細情報や動画を見ることができます。
カメラがグッと動いたときや、カーソルの動きに連動してわずかに視線が動いたときに、これが WebGL によるリアルタイム CG なのだとわかりますが、完全に止まっていたらまるでプリレンダリングされた CG みたいです。
大きく３つの場面が用意されていて、ボリュームもあってたいへん見ていて面白いサイトだと思います。
ペーパークラフトのような、なんかこう…… 指で触れてその質感・手触りを確かめたくなるような、そんな 3D シーンが素敵です。
今回のケースのような実装では、描画するための 3D モデルのデータを作る部分のウェイトが大きいように一見すると感じられるかもしれませんが、アイコンの位置を 3D シーンに連動させたり、インタラクティブにカメラを動かしたり、実装のほうにも多くの工夫が見られます。
全体的にゆったりふんわりしたインタラクションですが、変に流れが遮られるような感じでもなくて、操作感は悪くありません。全体として、すごくレベルの高い実装だと思いました。
ぜひチェックしてみてください。
