クリーンな雰囲気がぴったり！ 大気の状態を調べる気象系センシングをグローバルに展開する Clarity Movement のウェブサイト
カラーリングがとってもシンプルですてき
今回ご紹介するのは、地球環境と関わりの深いビジネスを展開する企業のウェブサイトです。
様々なセンサーを用いて、大気の状態を詳しく調べる機器を世界中に設置、そこから得られた情報を環境の改善などに役立てるのが彼らのビジネスのようなのですが、それらのデータを可視化したようなグローブ系のデモが WebGL で動いています。
環境に関する企業というだけあって、カラーリングがとてもクリーンなイメージになっており、非常にセンスのある配色となっています。
WebGL 実装としては無難だがアニメーションが心地よい
今回のサイトは、WebGL の実装としてはどちらかというと基本的な技術に終始する感じで、特に難しい技術などを使っているというわけではなさそうです。
しかしその分、派手さというよりは、わかりやすく印象を伝えることに特化しているように感じられる内容で、卒なく丁寧に実装されている、そんな印象を受けます。
水色のような明るいブルーと、白を基調にした配色がなんともいい感じです。
最初のイントロ部分から WebGL を用いて、地球をテーマに 3DCG が描かれます。
地球のデモって結構実装例が多いので、このビジュアルだけを見てしまうとそれほど珍しい感じはしないと思います。実際、そんなに特殊な技術は使われておらず、よくある地球儀という感じ。
しかし、ここでスクロール操作を行うと、動的に CG が変化するのですが、その様子がアニメーションの滑らかさも含めて非常に見事ですね。
シンプルな WebGL 実装だからこそ、途切れること無くスムーズなアニメーションが確実に実行できるわけで、このあたりは何を強調したいのかによって適切にビジュアルと負荷のバランスが取られている感じがしますね。
キャプチャ画像をよく見てみればわかるかと思いますが、アニメーションするのは WebGL のレンダリング結果だけではなく、DOM も同様のタイミングで完璧に同期しながら動いていますね。
このページ上に置かれているあらゆるオブジェクトのアニメーションのシンクロ具合がとても見事な仕上がりで、本当にスムーズ。
また、これだけ極端に色数の少ない構成でありながら、けして寂しい感じになっていないのは本当にすごいと思いました。
その他、各種ソリューションを説明するページではパーティクルによって地球のシルエットだけを描画するなど、随所に WebGL が使われています。
最近の WebGL デモは、本当に「派手さよりも実利を優先」した作りになっているものが増えてきており、今回のサイトも、3D でかっこよく見せたいというよりは、しっかりと彼らの事業をわかりやすく伝えるための一手として WebGL を効果的に使っている感じですね。
WebGL の負荷をある程度低く抑えることができれば、その分、DOM をスムーズに動作させたりすることも容易になります。
ビジュアルと負荷のバランスは常に悩ましい問題ですが、今回のサイトではそのあたりのバランス感が非常に上手に取られているように感じました。
とてもクリーンなイメージが心地よい、そんなサイトになっています。
ぜひチェックしてみてください。
