デザイン画を思わせるライン描画される 3D モデルが美しい Jean Dousset のカスタマイザ実装がすごい！
ハリウッドに居を構えるジュエリーデザイナー
今回ご紹介するのは、Jean Dousset さんというジュエリーデザイナーさんのウェブサイトです。
海外ではデザイナーさんご自身のお名前がそのままお店やブランドの名前になっているということが結構あるかなと思うんですけども、今回のケースもたぶん宝石店というかそのブランド名が、デザイナーさんのお名前そのままになってるケースだと思います。
今回のサイトではリングのオンライン・カスタマイザを見ることができるのですが、ものすごく…… ものすごく風合いが素晴らしいです。久々に感動して鳥肌が立ちました。
リンク：
Your Dream Ring™ | Design Your Own Engagement Ring | Jean Dousset
まるで線画のようなのに宝石は煌めく
今回のサイトのカスタマイザ実装は、リングの形や宝石の形、あるいは色などを自由に選択していくことで、自分だけのオリジナルのリングを作ることができるという、サービスとしては過去にも同様のものを見かけたことがあるタイプの、まあ割とよく見かけるやつですね。
なので、そのサービスそのものが斬新とか目新しいとかではないのですが、とにかくその「見せ方」と言ったらいいんでしょうか…… CG 的にはマテリアルと言ったほうがイメージが伝わりやすいかもしれませんが、レンダリング結果の質感が本当に素晴らしいです。
さて、この画面を見ると、左側にリングのデザインの選択肢が出ていることがわかるかと思うのですが……
画面の右側には、グレーっぽい色のクラフト紙にペンで描かれたかのようなリングのイラストが見えるかと思います。
私、最初冗談抜きで右側の部分はイラストが出てるだけだと本気で思い込んでたのですが、この右側部分は静止画ではなくて、リングの部分だけが WebGL でレンダリングされている CG になっています。
その証拠に、右側のエリアではドラッグ操作でリングの向きを自由に変えたりすることができます。
このペンで描かれたデザイン画のような質感が本当にすごくて、たぶん、ワイヤーフレームと面を貼ったメッシュ（のトゥーンレンダリング）との組み合わせだと思うのですが、めちゃくちゃラインがキレイなんですよね……
本当に、感動した。久々に WebGL 実装で鳥肌が立つくらい感動しました。こんなふうに見せることを思いついた人、本当に天才……
しかも、後半のほうになると色まで付くようになります。
このように色が乗ったシーンでは、リングをマウス操作で動かしてみると、キラキラと反射する光がこちらもかなり美しく再現されていて、本当にめちゃくちゃよくできています。
写真を背景に置いて、その上に CG を重ねて描画するという発想が面白いですし、背景に置かれた紙の上にあらかじめペンかなにかで書き込まれているのかと錯覚するほどの、自然な線画のラインを再現しているのもすごいですね。
描画領域は右側のエリアのごく一部なので、範囲自体は非常に狭い領域です。そこに小さく描画される CG なので、拡大して細部まで観察するということはできません。これは私の勝手な邪推ですが、もしかしたらあえて大きく拡大できないようにし、全体としては小さめに描画してやるほうが、今回のシェーダというかマテリアルと相性がいいのかもしれないですね。
カスタムできる項目もそれなりに多くありますし、さすがハリウッドに店を構えるジュエリーブランドのサイトはすごいな……
個人的には、今回の実装の線画のような質感が本当に驚きでした。
ぜひチェックしてみてください。
リンク：
Your Dream Ring™ | Design Your Own Engagement Ring | Jean Dousset
