奇抜でサイケデリックなビジュアルがコンテンツとの相乗効果を生み出す GYRE のウェブサイト

doxas : 2025-02-21 13:19:00

シェーダを活用した表現

今回ご紹介するのは GYRE という表参道にある複合施設のウェブサイトです。

GYRE 内にはショップやレストラン、ギャラリーなどが入っており、そのうちのギャラリーでまさに開催中の「来たる世界2075 テクノロジーと崇高」のスペシャルサイト、という位置づけになるみたいです。

シェーダを駆使してビジュアルを作っており、コンテンツとも連動したおもしろいウェブサイトとなっています。

今回のサイトでは、背景部分が WebGL で実装されており、その手前に HTML 要素で作られたコンテンツが配置される構造です。

コンテンツの内容は文章から写真までさまざまですが、これらのメインコンテンツの内容にある程度連動しながら、背景の部分にもさまざまな変化が起こるようになっています。

トップページの冒頭では、水面に波紋が広がるようなエフェクトが掛かったかと思うと色彩が明から暗へと転じるようなエフェクトを見ることができたり、ビジュアルを上手に活用しながらウェブサイトを構成しています。

ソースコードまでは見ていないのでなんとも言えませんが、なんとなく、いわゆるフラグメントシェーダを使ってビジュアルを組み立てているタイプの実装のように見えますね。

ノイズを使ってゆらぎを生み出したり、レイマーチングの要領でオブジェクト同士をくっつけたりと、いろいろな工夫が凝らされているように（少なくとも絵を見ていると）感じます。

どことなく、紹介しているコンテンツの写真から連想できる世界観が、シェーダのなかの世界観にも反映されているような感じがして芸が細かいなと思いました。

なんとなくですが、人体の内側というか……

内臓や血管、あるいは人間の身体を構成している細胞みたいなものを思わせるビジュアルをしていて、その雰囲気がなんともいいんですよね。

暗いだけのシーンばかりでなく、時と場合によっては普通に明るいシーンも出てきますし、カーソルを動かすことでインタラクティブに反応する場面があったりとよく考えられています。

４～５年前くらいだと、レイマーチングを使って複雑な模様を出すというのはハードウェア性能的に難しいなと感じる場面があったりもしましたが、最近だとこれくらいのシェーダであれば難なく動いてしまう感じで時の流れを感じますね……

WebGL の経験が無い場合はちょっと伝わりにくいかもしれませんが、いわゆるフラグメントシェーダのみを用いてレイマーチングなどの技法で描くやり方は、普通の 3D ジオメトリを描画する CG の手法と比較するとメリットもデメリットも両方持ち合わせています。

今回のサイトのビジュアルなんかはまさに、シェーダだけで表現する方法のメリットが活かされた、あるいは上手に活かした事例だと言えますし、コンテンツの内容に上手にビジュアルをリンクさせていて見事だと思います。