かつてこれほどまでに Curl noise を使った作品があっただろうか…… WSJ 提供の The Field がすごい!
Active theory のガチのやつだなこれ……
今回ご紹介するのは、WSJ こと、THE WALL STREET JOURNAL のスペシャルサイトです。
たぶん、Custom event という記載があるので、なにかしらの特別な企画として制作・公開されているものなんだろうなと思うのですが、全編 WebGL のヤバいやつですねこれは……
DOM を使った表現はほとんどなく、ほぼすべてのグラフィックスが CG で描かれます。
映像作品顔負けの凝りに凝ったコンテンツとなっており、WebGL の実装は Active theory ということなので、この時点でまあわかるひとにはわかっていただけると思います……
リンク:
The Field: A VR Experience by WSJ Custom Events
ノイズ、加算合成、パーティクル!
今回のサイトは WSJ が提供するサイトということで、世界情勢などを踏まえたドキュメンタリー的な要素を含みつつも、リラクゼーション的な若干スピリチュアルな内容もあったりして、とにかくいろんな意味で凝ったコンテンツです。
CG 部分は Active theory の本気という感じでスキが無く、まあすごくよくできています。
よく見る Simplex noise の他 Curl noise も多様されていて、マウスカーソルの動きに対するインタラクションなども素晴らしいです。
もう最初のトップページのタイトル部分からして、他のサイトではなかなかお目にかかれない完成度となっています。
カーソルを動かすとぐにゃっと曲がるようにパーティクルが動きます。
今回のサイトでは、途中でマイクへのアクセス許可を求められるのですが……
どうやらこれ、リアルタイムに音声を参加者(つまりサイトをその瞬間に見ているすべての人?)で共有するようになっているみたいですね。この記事を書いている途中で突然「Can you here me?」って聞こえてきてマジびっくりしました(笑)
また、それと同様に、カーソルを動かしているとそれに追従してくる火の玉みたいなエフェクトがあるのですが、それも全部リアルタイムに世界中でリンクされているようです。
明らかに自動制御ではない、人間がカーソルをガチャガチャ動かしているような軌道を描いているのでまさかと思いましたが、音声と、カーソル位置は、グローバルに共有される作りになっているっぽいです。
画面上に2つの明るい火の玉のようなパーティクルが写り込んでいると思うのですが、1つは私じゃなくて世界のどこかにいる誰かのカーソル軌道です。
今回のサイトのメインコンテンツは、ナレーション付きの WebGL 製インタラクティブコンテンツです。
基本的には一方的にナレーションが読み上げられていき、それにシーンが追従してつぎつぎと変化していきます。
読み上げ速度の変更やスキップ等はできず、基本的にはずっと見てるだけ、という感じになりますね。ただ、カーソルだけは絶えずシーンに干渉することができ、視点が動いたり、あるいはパーティクルを薙ぎ払ったりといったことができます。
インタラクティブコンテンツは大きく2つのパートに別れていて、最初のパートがドキュメンタリー風、後半のパートがスピリチュアル風な感じです。
パーティクルを活用したシーンはどれも美しく、見ごたえのあるシーンばかりです。
WebGL 実装の経験がある人なら、あらゆるシーンの完成度の高さに驚くことでしょう。逆に WebGL 経験の無い人であれば、WebGL もしっかり丁寧に作り込んだらこういう美しい表現を行うこともできる、ということを知ることができるでしょう。
基本的にはノイズの使い方がべらぼうにうまいため、とても有機的で、どこか幻想的な雰囲気を放っている、荘厳な画作りがされています。
この記事のタイトルにも書いたのですが、ここまで大量にノイズ・Curl noise を使いまくっているコンテンツも珍しいと思います。
普通は、ジオメトリを持った 3D モデルとかで盛り上げていくところを、今回のコンテンツはパーティクルや幾何学的な形状をベースに表現していて、かなりアブストラクトな感じの内容になっています。
その分、カーソルの動きに対するインタラクションなどに十分工夫を凝らしていますが、コンテンツの尺がめちゃくちゃ長く、全部を見終わる頃にはかなりお腹いっぱいになりますね……もう少し、インタラクションの種類にバリエーションがあり、ユーザー参加型なギミックを増やしたらまた印象が違ったかもしれないなと個人的には思いました。
しかし、とは言えこの完成度の高さはさすがとしか言いようがなく、私なんかが偉そうに評論できるような、生半可なコンテンツではありません。
世界でも指折りの、最高峰のチームが生み出すハイエンドな WebGL コンテンツをぜひ楽しんでみてください。