パーティクルの表現が見事！ヒスパニック文化遺産月間に際して作られた Xfinity のスペシャルサイト

doxas : 2020-10-26 13:56:07

幻想的とも言えるビジュアルを実現

今回ご紹介するのは、ヒスパニック文化遺産月間という、ちょっと日本人には馴染みの薄いキーワードに関連したウェブサイトです。

今回のサイトを提供している Xfinity はアメリカの企業で、ネットワーク事業などを手掛けている会社ですね。

そして今回のサイトはヒスパニック文化遺産月間にちなんだもので、これは Wikipedia によれば「ヒスパニック系アメリカ人およびラテン系アメリカ人が国の歴史、遺産、文化に貢献していることを称える記念日」なんだそうです。

そういった背景を踏まえて見てみると、サイトの趣旨もわかりやすいんじゃないかなと思います。

今回のサイトでは多くの表現がパーティクルによって実現されています。

イントロの演出の時点から、背景の部分は WebGL によって描画されるようになっており、空間を漂う微粒子のような感じでパーティクルが使われています。

どこか幻想的で、美しいビジュアルがパーティクルによって演出されています。

アメリカの国旗から、パーティクルがまるで立ち上る煙のような感じで流れ出しているのが、上の画像を見るとなんとなくわかるかなと思います。

旗は細かなパーティクルで構成されていて、その表面にはいくつかの光るアイコンのようなものが散りばめられています。

このアイコンの１つ１つがウェブで収集されたメッセージになっていて、実際にその音声を視聴することもできたりします。

アイコンにカーソルを重ねてやると、声の主（が登録したハンドルネームなど）の概要が表示されます。

そして、この登録されている声を試聴するモードでも、WebGL を活用した美しいビジュアルを堪能できます。

旗の上のアイコンのいずれかをクリックしてやるだけなので、操作自体は難しくないと思います。

アイコンがクリックされると自動的にカメラアングルが変更され、旗を真横から見ているようなビューになります。さらに、画面の中央には白いラインのようなものが描画されるのですが、この白いラインは音声の再生が始まるとそれに合わせてダイナミックに変形します。

この変形は厳密な音声解析の結果とかを意味しているわけではなく、単に音声の大小で適当に揺らいでいるだけなのかもしれませんけれども、声が可視化されたように感じられて臨場感が劇的に向上しますね。

ヒスパニック文化遺産月間は 9/15 ～ 10/15 の一ヶ月間が対象となっていて、私がたまたまこのサイトを見つけたのが遅かったので期間外での紹介になってしまいました。

もしかしたら期間限定の公開になるサイトかもしれませんので、見られるのは今のうちだけかもしれませんね。

WebGL の技術としてはパーティクルを中心にした表現で、美しさにとてもこだわりの感じられる仕上がりになっています。

特に、星条旗からパーティクルの煙が立ち上るような表現は本当に美しくて、マウスカーソルに対するインタラクティブ性もあり、完成度がすごく高くなっています。