驚きの質感・クオリティを誇るドイツのメーカーの結婚指輪カスタマイザがすごい
フォトリアルな質感を追求した WebGL
今回ご紹介するのは、ドイツで結婚指輪などの貴金属を扱っているメーカーのウェブサイトです。
こちらでは、いわゆる結婚指輪の WebGL 製のビューア、兼カスタマイザが公開されているのですが、その質感や金属の雰囲気が非常に素晴らしい逸品となっています。
対応しているモデルの数も結構あり、かなり本物の雰囲気に近い印象をブラウザ上でチェックできるようになっています。
本物の金属のように見せる工夫
今回のサイトは、そのまま注文までを行うことができるメーカーのショッピングサイトなんですが、そのなかの一部に、WebGL のビューアが使われています。
この指輪のビューア、かなり本物志向というか、貴金属の美しさをリアルに再現することを目指して作られているようで、WebGL を使った商品のビューアとしてはかなり本気度が高いですね。
ウェブサイトを開くと、次のような感じで、いくつかの画像と一緒に商品の写真が掲載されています。この部分は、まだ WebGL のリアルタイムレンダリングというわけではありません。
多分、これは想像ですが、ここで掲載されている画像も、リアルタイム版の WebGL の描画結果をキャプチャしたものか、それに相当するなんらかのレンダリングソフトウェアで出力した CG のプリレンダ画像だと思いますが、この画像でも十分にキレイに見えますね。
リアルタイム版は、上の画像にあったような、本物の貴金属らしい質感をそのまま再現した WebGL のレンダリング結果が描画されます。
リアルタイムに WebGL で描画しているので、当然ですが、マウスなどでインタラクティブに操作することができます。
金属の光を反射する感じや、微妙に凹凸の付いた表面の模様、そして埋め込まれている宝石類の光り方など、ほんとにびっくりするクオリティです。
まるでプリレンダリングの CG ではと思ってしまうようなキレイな描画結果ですが、リアルタイムで動いてます。
マウスで角度を変えたり、右側にあるプリセットの画像をクリックして材質や表面の色を変えたりといったことが、まさにリアルタイムに、その場で変更しながら閲覧できます。
CG に詳しい人なら、こんなのどうせ環境マップだろ！ と思うかもしれませんが、いやしかし、環境マッピングだとわかっていても、本当に思わず見入ってしまう美しさです。
少しだけロード時間が長いかなと感じるところもありますが、これは日本からアクセスしているから、なのかな？ いずれにしても、その表示されたレンダリング結果を見ると、結構リッチにキューブマッピング用のリソースとか使ってそうだなという感じはします。もしかしたら、そういった画像リソースの読み込みに、ちょっと時間が掛かってるのかもしれないですね。
高級路線の商品や、特別な記念品となるような商品の場合、その質感や本物感、カッコよさや洗練された雰囲気というのはとても重要なものだと思います。それはウェブサイトひとつとってもやっぱり同じで、恐らくこの宝飾品を販売するメーカーは、かなりウェブサイトにもチカラを入れたのだろうなということが想像できます。
どうやら、WebGL のビューア部分を作ったのは同じドイツの 3D 系の技術に長けた企業のようですが、それにしても、これだけリッチな「金属感」が、ブラウザ上で再現されてぐりぐり動かしたりカスタムできたりするというのは、本当にすごいですね。
ちょっとだけ専門的な話をすると、キューブ環境マッピングを利用すると、WebGL で映り込みを比較的簡単に表現することができます。今回のデモの場合は、そういったキューブ環境マッピング用のテクスチャや、描画されるモデルの頂点数などを、ギリギリまで高めのクオリティに設定しているのだと思います。それにバンプマッピングを加えることで、細かな凹凸の変化も含めて高い質感を得てるのでしょうね。
技法としてはそれほど難しいことはやっていないように見えますが、しかし、かなり丁寧で、いい仕事だと感じました。すごいです。
ドイツ語のサイトで、どうしてもちょっとロードの時間が掛かりがちではありますが、非常に見栄えのするレンダリング結果は必見です。
ぜひチェックしてみてください。
