WebGPU や OffscreenCanvas など尖った技術を活用した高品質 CG が見事な Utsubo のウェブサイト
three.js の最先端事例を感じてみよう
今回ご紹介するのは、当サイトでも何度もご紹介している Utsubo のウェブサイトです。
もともとかなり品質の高い WebGL の実装を多く手掛けていた同社ですが、最近では WebGPU と、それを活用した three.js への貢献などで、ウェブの発展にも大きく寄与しています。
今回のサイトは同社のコーポレートサイトにあたるのだと思いますが、大迫力の CG が迫る WebGPU 事例となっています。
リンク：
Utsubo - Embark on New Frontiers of Digital Experiences
多彩なプラットフォームを考慮
今回のサイトは WebGPU を使っていますが、おそらくそれがハードウェアやブラウザの要件的に難しい場合は、WebGL にフォールバックして動作するようになっていると思います。
three.js の TSL という仕組みを使っているのかなと想像しますが、幅広い動作環境を考慮しつつ、エッジのきいた技術をどんどん使っていく感じがかっこいいですよね。
トップページから縦にスクロールしてコンテンツを閲覧していく構造になっていますが、原則ほぼすべてのビジュアルが CG となっています。
この上のスクリーンショットを見るとわかるとおり、サイト内にはカーソルを動かすことで発生する流体エフェクトのような、インタラクティブ性の高い演出が盛り込まれています。
なかには、マウスのボタンを押したままホールドすることで発生する効果などもあり、そういった効果が発動しているときの視覚効果もかなり大きいですね。
まるで映像作品を見ているかのような、ストーリー性のある CG になっています。
たぶんチーターですかね？ 動物のキャラクターが登場する他、地面が大きく割れて煙が上がるような場面もあり、迫力満点です。
WebGPU は WebGL と比較するとまだまだ安定していない API といえると思いますが、最新の Google Chrome などを利用していれば問題なく見ることができると思います。
WebGL と比較して…… 見た目だけで両者の違いを見分けることは難しいと思いますが、最新の技術を駆使した CG を体感するにはとてもよい事例だと思います。
three.js に多くの貢献をしている開発者さんが所属するチームだけあり、オフィシャルなウェブサイトもすごく気合いが入っています。
個人的な体感では、WebGPU は若干バギーな感じがある印象を持っているのですが、今回のサイトの閲覧中にブラウザが落ちたりすることはありませんでした。
今後は、こういった WebGPU 事例がどんどん増えていくのかもしれません。
ぜひチェックしてみてください。
