無数の花が咲き誇る無限に続く草原を WebGL で表現した IMAGA のスペシャルサイト
物量感で圧倒する
今回ご紹介するのは、IMAGA というクリエイティブチームのウェブサイトです。
おそらく、クリエイティブチームのさまざまな役割のうちの、ブランディングという文脈に特に重点を置いたスペシャルサイト的な位置づけのものなのかなと思いますが、すごく雰囲気がよい WebGL 実装となっています。
大量の花々にどこか圧倒されるような気持ちになります。
リンク：
Consistent branding to grow your business | Creating a brand ecosystem | IMAGA
インタラクティブ性が重要なのかも
今回のサイトは背景部分が WebGL になっており、閲覧者に世界観を伝える大きな役割を果たしています。
ビジュアルの方向性としては１つの WebGL 実装が背景に置かれているだけで、なにか劇的に雰囲気が変化する瞬間があるというわけではありません。
ゆったりと夢の世界を漂っているような、幻想的な雰囲気です。
大量の草花は、確信はないですがたぶんビルボードを GPU インスタンシングなどで描画している感じだと思うのですが、風に揺れる様子などもリアルですね。
ユーザーがカーソルを動かすと、その動いた部分の花だけが少し大きく描画されるなど、インタラクティブに変化する部分もあります。
また、スクロール操作を行うことでカメラが進むスピードが変化したりもするので、そういう意味でも WebGL でインタラクティブ性を持たせていることにしっかりと意味があります。
これが仮に動画素材だったりすると、カーソルの位置に応じた変化や、あるいは再生速度の変化などでも表現できることに限界があると思うんですよね。
ですから WebGL を用いて質感をしっかり追求しつつ、インタラクティブ性のあるものとして見せているのだと思います。
サイト内で語られることや図解されるものも、この世界観にピッタリとマッチしている感じがあってとても完成度が高いです。
フォグの使い方やポストエフェクトの使い方にも工夫が感じられ、ビジュアルとしての納得感がとても強いですね。
カメラが進んでいくスピード（または地面がスクロールして進んでいくスピード）も絶妙な感じで、速すぎずかといって遅すぎず、あらゆる面で綿密に計算された意図を感じる気がします。
大量のオブジェクトがごく自然に動いている、それだけでも圧倒される気持ちになるから不思議です。
ぜひチェックしてみてください。
リンク：
Consistent branding to grow your business | Creating a brand ecosystem | IMAGA
