WebGPU を活用したまるでゲームのイントロのような完成度が凄まじい株式会社イヴレスのブランドサイト
three.js の機能をフル活用
今回ご紹介するのは、株式会社イヴレスのブランドサイトです。
いわゆるコーポレートサイトとは異なり、自分たちのブランディングの一環として作られたスペシャルサイトという位置づけなのかなと思います。
three.js の TSL という機能を活用しながら WebGPU で本格的な 3DCG を動かしていて、まるで商業ゲーム作品のイントロみたいです。
リンク：
SPIN A TALE ー 紡ぐ物語 ー｜株式会社イヴレス ブランドサイト
初期化はやや重いので注意
今回のサイトは WebGPU はもちろん、three.js の比較的新しい機能をフル活用しています。
おそらく初期化時にロードやパース処理が大量に発生するからだと思いますが、最初にページが動き出すまではちょっと負荷が高い瞬間があり、ローディングはやや時間が掛かります。
実際に描画が始まると、非常に幻想的な世界観が滑らかに描き出されます。
英語版のサイトもあるようですが、日本の企業のウェブサイトなので縦書きのキャプションが表示される日本語版がデフォルトでは表示されるようになっていますね。
きちんとストーリーがあり、それに連動する形で 3D シーンが進行します。
大量のパーティクルが登場するような物量感をマシマシにしたようなシーンもあり、全部で９つのシーンが自動再生で次々と、しかし時間をじっくりと使って語られていきます。
急いで一気に見るのはもったいないので、ちゃんと時間の取れるときに閲覧したいコンテンツですね。
カーソルを動かすこと無くただただストーリーと映像を眺めているのもよいですが、カーソルを動かした際にはインタラクティブに流体エフェクトも発生するようになっています。
今回のサイトの場合は流体エフェクトなくてもよかったのでは…… というふうにも個人的には感じましたが、圧倒的なビジュアルを実現している、ということも含めてサイトの個性なのでしょう。
サウンドもぜひオンの状態で体験してほしい、全方位に隙なく実装されたウェブサイトだと思います。
WebGPU はまだまだ過渡期の技術で、モバイル端末などでは動かないケースがあるかもしれません。
PC 上で動かす場合も、マシンスペックによっては負荷が高く感じられる場合があるかもしれません。
個人的にはこうやって新しい技術を臆することなく使ってくれるひとたちがいることで、だからこそ新しい地平がどんどん広がっていくと思っており、こういう事例を見つけると本当に嬉しいですし興奮します。
three.js には TSL という仕組みがありますが、これもまだまだ開発が続けられている部分なので、こういう事例が公開されるとその可能性を肌で感じることができそういう意味でもありがたいですよね。
技術面だけでなく、その内容も非常に完成度の高いコンテンツとなっています。
ぜひチェックしてみてください。
