酒造メーカーの製品を WebGL で見せる幻想的でファンタジーな一作！テクスチャの品質がすごい

doxas : 2017-02-10 13:33:04

メルヘンな雰囲気の世界観

今回ご紹介するのは、酒造メーカーのウェブサイトなのですが、WebGL を使ったメルヘンで、幻想的で、どこかさみしげな、そんな世界観が素晴らしい作品です。

現実世界から切り離された、おとぎ話の国のような雰囲気は本当に素晴らしいですね。

BGM も雰囲気たっぷりな感じで、音や視覚で強烈にその世界観を訴えかけてきます。

今回の作品は、WebGL で非常に丁寧に作ってある作品という意味では、派手さこそ控えめですが、かなりレベルの高い作品だと言えると思います。

注目すべきはそのレンダリングされるシーンの美しさと、統一された世界観にあると思います。

酒造メーカーが製品を紹介するために用意したページだとは思うのですが、作品の雰囲気がこのメーカーの持つ空気感まで表現してしまっているかのようです。

ページが読み込まれた直後は、星空のような景色が見えるビューからスタートします。この時見えている空は、球体を内側から見ている感じだと思いますが、パーティクルが舞っていたりして既に結構いい雰囲気があります。

「floating and timeless」と書かれていますが、メッセージにもなんとも味わい深いものがありますよね。

シーンがレンダリングされると、ドラッグ操作を行うことでカメラを動かし、様々な角度から見ることができるようになります。基本的には中心にある浮遊する島のようなオブジェクトを中心に、円を描くようなカメラワークが行われています。

ある程度は上下に動かすこともできるので、素晴らしい質感や雰囲気を、じっくりと観察することができますね。

本当に、なにか絵本の中の世界に迷い込んでしまったかのような、とても美しい世界が広がっています。

今回のコンテンツのすごいところは、なんといってもこのオブジェクトの質感にあると言えます。

通常、WebGL でリアルタイムに SSAO をシェーダで掛けていくというのはなかなか負荷的な面で難しいです。同時に影を描いたりしようものなら、どんどん負荷が上がっていってしまいます。

ですから普通は、そういった演出を切り捨て妥協することで、どうにか美しいシーンを作っていく努力をするわけですが、今回の場合はアプローチが全く違います。

今回のコンテンツはモデルの表面にびっちりと漏れ無くテクスチャが貼られており、これらのテクスチャに陰影があらかじめ焼きこまれた状態になっているんですね。

実に自然に陰影が付いているように見えますが、これらは全てテクスチャの模様というわけです。しかしそれはけして安っぽく見えることはなく、むしろ完璧に統一感のある世界を演出していて驚きますね。

世界のなかに浮かんでいるいくつかのオブジェクトは、緑色に光る発光体が近くに漂っている状態になっています。

この光の部分をクリックすると、商品の詳細ページを見ることができます。

実際に詳細ページを見てみるとわかるのですが、対象になっていたモデルと同じようなラベルのデザインになっているんですね。

こんな可愛らしい雰囲気のキャラクターをあしらった製品なら、まさに今回のコンテンツもピッタリという感じです。

非常に丁寧に作られたテクスチャによって、リアルタイムなシェーディングで見せるのとはまた違った形で、驚くようなハイクオリティなレンダリング結果を生み出している今回の WebGL コンテンツ。

酒造メーカーは、偶然かもしれませんが結構 WebGL を使ったプロモーションを行っているところが多いですね。

今回のサイトも、その雰囲気からビジュアルから、全てが見事にうまくまとめられていて、商品をまったく知らない人であってもサイトを見ているだけでこのメーカーのことが気になってしまうような、そんなコンテンツに仕上がっています。

私はどうしてもシェーダ芸にばかり注目してしまいがちなのですが、今回のサイトのような雰囲気を演出するためには、テクスチャを活用した今回のような方法はとても理にかなっていると思いました。

デザインを行なった人、そしてテクスチャ用の画像素材を作った人、そして実際に WebGL でそれらを一体にした人、という具合に、たくさんの人のセンスと努力が集結した一作かなと思います。