Three.js（WebGL）に公開されているWebGPUのデモを触ってみよう！
みなさんこんにちは、Utsubo株式会社です！
弊社では現在、クライアントワークに取り組みながらWebGLからWebGPUへの移行作業を急いでいます。先日、Android版のChromeでWebGPUが標準化されたことでさらに注目が集まっているので早急な対応とWebGPUの発展への貢献を目指します。
今回は、three.jsに公開されているWebGPUのデモを紹介します。ユニークなビジュアルやコンセプトを考える上で何かヒントになるかもしれません！
デモの体験はこちらから↓（Chrome for Desktopの使用を推奨）
一つ目はこちら。様々なエフェクトがなされた球体の中心にキャラクターがいて、元気に踊っています。球体は円を描くようにキャラクターの周りを回っていますね。それぞれの球体のエフェクトは異なり、点滅するものや他のオブジェクトと重なった際にモザイクのようなエフェクトがかかるものなどがあります。
キャラクターをズームしてみてみますが、アンチエイリアスの線はほとんど見受けられませんね。
2.
二つ目は、水に浮かんでいるオブジェクト上にキャラクターがいます。周りの球体はゆっくり沈んだり浮かんだりしていて、水の表面には波の模様が施されており、流れているような感覚になります。オブジェクトと液体の境目ではオブジェクトの形が崩れることでよりリアルな液体が表現されています。
3.
3つ目は、パーティクル（粒子）に関するデモです。画面上に「1M Particles」と書いてあることからおそらく100万個のパーティクルが使われているものでしょう。ものすごい数のパーティクルがカーソルの動きに反応して動き出します。これだけのパーティクルを使用しながら、スムーズに動くなんてWebGPUのパフォーマンスの向上がよくわかります。右上のControlsから大きさや弾性など変えてみることもできるのでぜひお試しください。
4.
4つ目は雨を表現したデモです。空から降ってくる無数の雨と地面からの跳ね返りと波の広がり方が特徴です。雨避けとなるようなオブジェクトがある場合はそのオブジェクトを認識して、雨が通り抜けないような計算がされています。こちらも右上のボタンから雨の量を調節しながら試してみてください。
5.
最後は、様々なマテリアル（質感）を紹介するデモです。ドラッグすることで360°カメラの画角を変えることができますが、その画角に合わせて光の当たり方が調整されているのがわかるでしょうか。さらに金属製のマテリアルが採用されているオブジェクトは周りの環境をしっかり反射し、リアルな質感を再現しています。
今回は5つのデモを紹介しましたが、three.jsには他のデモページも紹介されています。しかも、まだまだデモ段階でこのクオリティなので今後のWebGPUとWebGLの発展に期待できますね！
もしWebGPUの活用方法について知りたい方はぜひ、こちらのページをチェックしてみてください↓
今後もアップデートしていきますのでよろしくお願いします✨🙋♂️