パーティクルとワイヤーフレーム、さらにはポストエフェクトまで！ LAMDASH 製品サイトがすごい！
見どころ満載のハイクオリティな WebGL 実装
今回ご紹介するのは、日本国内の WebGL を利用した本格的な実装例です。
当サイトでは海外の事例をご紹介することが多いのですが、それはひとえに、国内での利用例がどうしても数としては少ないことも要因のひとつです。しかし、今回ご紹介する WebGL 実装の例では、個人的なデモなどではなく、オフィシャルな日本企業の商品ページに本格的な WebGL 実装のデモが使われています。
実装を担当されたのは SHIFTBRAIN Inc. 所属の @oneslocus さんです。
国内事例でもこのレベルのものが出てくるとなると、本当に今後が楽しみになる、そんなハイレベルな出来栄えとなっています。
アニメーションや画面遷移にもこだわった力作
今回の WebGL 実装は、メンズシェーバーとしておなじみの Panasonic 社の LAMDASH の製品サイトです。
ページに訪れると、まずは LAMDASH のロゴの形を利用した特徴的なローディング画面が出てきます。そのまま待っていると、読み込みの進み具合に合わせて徐々にロゴができあがっていきます。
ロードが完了すると、製品の 3D モデルが登場しますが、その製品のディティールだけでなく、背景なども含めてとてもかっこいい仕上がりになっており、最初から思わず感嘆の声を漏らしそうになりました。
ぼんやりと中央だけが青白く光ったような、グラデーションの利いた背景が、製品のシルエットをより引き立てているような感じですね。
使われている 3D モデルもかなり精巧なもののようで、WebGL にありがちな、ちょっとカクカクとしたポリゴンのエッジはほとんど見えないくらい、キレイな曲線でレンダリングされています。
画面内をマウスでドラッグするようにすると、背景や製品モデルがぐりぐりと動きます。けして写真などではなく、立体的なモデルが見事に描画されていることがわかると思います。
また今回の作品の特徴のひとつに、とても気持ちよくかっこいいアニメーションがあると思います。
たとえば、一番上のページトップの画像のような最初の状態から、スクリーン内をクリックしてやるとシェーバーが分解するような演出が入ります。
この分解演出では、ワイヤーフレームやパーティクルをうまく利用してシーンを盛り上げつつ、イージングアニメーションを利用したとてもかっこいい「動きの演出」を体験できます。
またその他にも、状態が遷移する際にモデルがパーティクルになって霧が吹き飛ぶように消えていったり、ワイヤーフレームで漂うように動く演出があったりと、かなり演出面はてんこ盛りですね。
本当に細かいところまで抜かり無く作ってあるなと、この時点でかなりハッキリと感じられると思います。
分解演出やパーティクルを使った演出がかっこいいですね。
もちろん、このサイトは製品に関する情報をユーザーにわかりやすく配信するという意味も持っていますので、描画としてかっこいいだけでなく、文字の表現や製品を構成するパーツの見せ方などにも工夫が感じられますね。
ただカッコよく見せて終わり、ということではなく、製品についてより細かいところまでユーザーに知ってもらう、そんな意図が感じられます。
たとえば、シェーバーの刃の部分にフォーカスしたフェーズがあるのですが、そのシーンでは構造を立体的に見せられる WebGL を使っているからこその、画像ではけして伝わらない立体的な情報をユーザーに配信することに成功しています。
また、少し技術的な話をすると、今回のデモではかなり GLSL をうまく利用した演出が使われていますね。
たとえば、シーンの背景に浮かんでいるアルファベットの文字。こちらは、常時ほんの少しだけブラーが掛かったような、あるいは走査線のようなものが浮き出して見えるような、デジタルな雰囲気の演出が掛かっています。
また、シェーバー本体の部分も、まるでホログラムで投影されているかのような、波打つようなエフェクトが掛かっているところがありますね。画像だとちょっとわかりにくいかもしれませんが、下の画像の、ちょうど電源ボタンのあたり（画像の下の方）が、少し歪んでいるのがわかるでしょうか。
キッチリとディティールを細かく表現するフェーズと、少し違ったエフェクトの掛かった表現を行うフェーズ、それらが状況に応じて使い分けられていて、ほんとびっくりです。
ちょうどボタンのあたりが歪んでるのがわかるかな？
今回のサイトは日本の企業のサイトに実装された WebGL の例としては、かなりレベルが高い作品だと言えると思います。モバイル対応などもしつつこれだけの WebGL 実装が動いているというのは本当にすごいですね。
国内でも、これだけの事例が実際に出てき始めたということ対して、本当に今後の WebGL の日本国内での活用が、個人的にはとても明るいものになってきたなと感じました。
ちなみに、今回の WebGL 実装を担当された @oneslocus さんは、実は私の WebGL スクールの記念すべき第一期の生徒さんだったりします。スクールを開催したことが、ほんの少しでも今回のサイトの誕生に寄与したかもしれないと考えるだけで、涙が出るほど、嬉しかったです。
贔屓目なしに、純粋にとてもかっこいいサイトに仕上がっています。
みなさんもぜひ、チェックしてみてください。
リンク：
LAMDASH DNA | メンズシェーバー | Panasonic
