
地球環境や人類の未来を見据えたクリーンなエネルギーを WebGL で表現した Italgas のウェブサイト
静止画とパーティクルの組み合わせ
今回ご紹介するのは Italgas という企業のウェブサイトです。
社名にも Ital という文字が含まれていますがどうやらイタリアでエネルギー関連事業を展開する企業みたいですね。
世界的にクリーンで持続可能な世界を目指そうみたいな機運が高まって久しいですが、今回のサイトでもそのあたりの文脈が強く強調されている感じがします。
リンク:
ストーリー性のある特設サイト
今回のサイトはいわゆる特設サイトというか、あるプロジェクトについてフォーカスしたスペシャルサイト的なものだと思われます。
WebGL の表現としてはパーティクルを用いるもので、そこにスプライトと言いますか、静止画を上手に組み合わせてストーリー性のあるウェブサイトに仕上げていますね。
こういった静止画+パーティクルみたいなものって、一見作るのは簡単そうに感じられるかもしれないですが、きちんと意味のあるストーリーとそのつながりを見せるのはなかなか大変な作業だったのではないかなと想像します。

パーティクルの集合は時と場合によってその姿が変わります。
姿を変えていく遷移アニメーションも自然に仕上がっていて見せ方もうまいですね。
またパーティクル部分はさり気なくですがマウスカーソルの位置に応じたインタラクティブ性があり、色が変わるなどの変化も見られます。
点の大きさや透明感の調整などにも気を配っている感じがします。

シーン内に配置されているオブジェクトや背景などの要素は、見た目の印象は「ローポリゴンな白い 3D オブジェクト」のように目に映るかもしれませんが……
わたしの勘違いでなければ、リアルタイムに陰影をつけている立体構造ではなく画像的に、スプライトとして配置されているものですね。
インタラクティブ性の必要な要素とそうでないものとが明確に切り分けて考えられており、ただ派手に見せるタイプの WebGL 実装とは全然違ったおもしろさがあります。

こちらのサイトでは、太陽光を使ってクリーンなエネルギーを作るということが謳われているのですが、実際のところそれが実用的なレベルのものなのかどうかは正直わかりません。
日本でも、太陽光パネルはいろいろ物議を醸しているところがありますが、そのあたりも伝聞で知った気になっただけのひとたちの議論や声を見聞きすることが多く、実際のところクリーンエネルギーというのが世界の経済や社会を動かしていくのにどれくらい役立つものなのか、それが現実的な解なのかどうかについてはどこか曖昧です。
でも今回のサイトのように、自分たちのビジョンや目指していることをアピールしてくれる、あるいは説明してくれる組織があるということは(その真偽はともかく)いいことのように感じます。
今回のサイトではスプライトとパーティクルの組み合わせ方が絶妙で、技術的にも興味深いなと感じました。
ぜひチェックしてみてください。