大量のオブジェクトを並べることで生まれる不思議な演出がシンプルだけど面白い Curated. のウェブサイト

doxas : 2023-02-09 12:54:57

原点回帰の 3D 表現

今回ご紹介するのは、Curated. のウェブサイトです。

ちょっと詳しいことはわからないのですが、いわゆるオンライン・ライブ企画の一種なんですかね…… 場所的にはどうやらベルギーが開催地になるようですが、アンダーグラウンドミュージックをライブストリーミングで配信するよ、といった内容のことがサイト内には書かれていますね。

定期的に開催されているイベントなのか、今回が初めてのスポット企画なのかわかりませんが、古典的なのに個性的な、不思議な WebGL 実装が置かれています。

今回のサイトの 3D 表現はすごくシンプルで直球勝負な内容です。

画面の手前から奥に向かって大量の残像のようなものが重なり、それがマウスカーソルの位置に応じてインタラクティブに反応しながらゆらゆらと動きます。

イントロの演出では、画面の奥から各構成要素が勢いよく飛び出してくるような感じに演出されています。

なんというか、めちゃくちゃシンプルにわかりやすい 3D 表現ですよね。

一周回って新しいというか……

シンプルなのに、すごく個性的に目に映ります。

今回のサイト、半分は想像ですがたぶん大量のオブジェクトを順番に１つ１つレンダリングすることで、今回のビジュアルを作っていると思います。（インスタンシングなどの軽量化施策が恐らく行われていない）

愚直に大量のオブジェクトを描画している形なのかなと思うので、もしかしたら環境によっては若干重く感じる場面があるかもしれません。

カーソルの場所に向かって、少しだけディレイがあって要素が追いかけてくるような感じなのでなんとも言えないヌルっとした手触りがあります。

今回のサイトはいわゆる LP という感じで下層ページなどもなくシンプルなレイアウトですが、全体的に雰囲気がかなりしっかり作り込まれていてなかなかかっこいいです。

どこかジェネラティブアートを思い起こさせるような、シンプルなのにすごくインパクトのある 3D 表現で、WebGL 実装としてすごく完成された演出だなと個人的には感じました。

こういうシンプル系の 3D 表現って下手するとすごくかっこ悪い感じになってしまうと思うので、こんなふうに演出できているのは単純にすごいなと思います。

パッと見た印象で感じるかっこよさが、このサイトの実装のどういう部分から醸し出されてくるのか、論理的に分析してみるのも面白いかもしれません。