まるで布がたなびいているようなテクスチャのサンプリングが面白い衣服メーカーのウェブサイト
動画や画像をうまく利用した高級感のある仕上がり
今回ご紹介するのは、フランスにある仕立て屋さんのウェブサイトです。
一種のファッションブランドとはちょっと違うみたいですが、かなり歴史のある、衣服の製造メーカーのサイトみたいです。
サイト内には、オーダーメイドのスーツが仕立てられていく様子などを撮影した動画の他、美しい画像がいくつも使われています。
トップページにある WebGL の実装はシェーダを駆使して半立体という感じの表現になっています。
テクスチャのサンプリングで見せるたなびく動き
今回のサイトは、WebGL を使ったイントロデモが、トップページに大々的に置かれた形になっています。
全体的に黒っぽい印象のシーンですが、高級感を感じるシンプルなビジュアルになっています。
よーく観察するとわかるかと思うのですが、今回のサイトでは、背景の部分は布地を接写したようなテクスチャになっています。
そこをマスクしてくり抜いたような感じでロゴが描かれます。
ロゴマークの後ろの部分は、上のキャプチャ画像を見ても、なんだか布に少しだけシワというか、起伏ができたような感じの印象に仕上がっているのがわかると思います。
このシワのような表現が、シェーダによって実現されていますね。
実際のサイトに言ってしっかり目を凝らして見てみるとわかるかと思いますが、背景に使われている布地のテクスチャそのものにはシワは寄っていません。
シワが寄っているかのように見えるのはテクスチャのサンプリングをシェーダによってずらしたり、陰影を施したりしているからです。そのあたり、結構面白い表現になっているなと思います。
ロゴの部分にも工夫が凝らされていて、このロゴの部分は実は後ろが透けて見えるような演出も組み込まれています。
スクリーンショットではやや見えにくいと思うのですが、画面のちょうど中央のあたりにリンク文字が置かれていて、その上にカーソルを載せたときだけ、背景に動画が透けて見えるようになっています。
オーダーメイドで洋服を採寸したりミシンを使ったりするシーンがロゴマーク越しに見えるのがなんとも印象的な演出になっていると思います。
他のコンテンツのページには、多くの画像や動画が使われていて、歴史のある衣服メーカーの丁寧な仕事を垣間見ることができます。
今回のサイトではトップページ部分にのみ WebGL が使われている形ですが、WebGL で利用するリソースは極力少なくしつつも、シェーダを使って陰影やライトの当たり加減、あるいはシワのような模様などを表現していて、非常に面白いです。
見た目は非常にシンプルにまとめられたサイトですが、意外にも、細かく見ていくと様々なテクニックが使われていると思います。
ぜひチェックしてみてください。
