WebGPU対応のThree.jsのはじめ方

WebGPUは、ウェブ上で動作する新世代のグラフィックスAPIです。従来のWebGLに代わるものとして設計されており、より低レベルで効率的にGPUへアクセスできるようになっています。たとえば記事『WebGPUがついに利用可能に』で紹介したように、WebGLより高いパフォーマンスが期待できます。

Three.jsはウェブで3D表現を作るためのJavaScriptライブラリです。2010年代のWebGL黎明期からThree.jsが多くのウェブサイトで使われており、3Dの代表的なライブラリとも言えます。

Three.jsでは、WebGPU対応が進んでいます。WebGPU対応のレンダラー「WebGPURenderer」が存在し、従来のWebGLRendererとほぼ同じ使い勝手で利用できます。Three.js利用者は低レベルコードを書くことなく、WebGPUの利点を活かせるようになっています。WebGPURendererは現在はwip（Work in Progress）扱いです。

Three.jsでWebGPUを使うメリットはその将来性です。この記事では、Three.jsのWebGPURendererの最新動向や導入ポイントについて解説します。

Three.jsでWebGPU向けに移植してみた

WebGPU版のThree.jsは簡単に利用できます。後述しますが、WebGL向けに作っているコンテンツは、レンダラーを切り替えただけで動作するようになります。ICS MEDIAではいままで数々のオリジナルの作例を掲載してきましたが、WebGPU版に切り替えたので紹介します。

他にも次の作例もWebGPUへ移植しています。

たくさんのコンテンツを従来のWebGLRendererからWebGPURendererへ移植しましたが、あまりにも簡単に動作し驚きました。開発時の気付きをお伝えします。

Three.jsのビルトインの機能だけで作成している場合は、レンダラーの切替だけで移植可能（本当に簡単！）
互換性のないコードが存在した場合は、個別に修正が必要（粒子表現、線など）。
シェーダーは互換性がないため、後述のGLSLからTSLへ移植。

Three.jsはWebGL専用ライブラリではなく、かつてはSVGやCanvas 2Dを使って3D表現するレンダラーも用意されていました。WebGLからWebGPUへの変遷のように基盤技術が変化しても、利用者は気にすることは少ないです。Three.jsが3D技術を高度に抽象化できているからこそ、でしょう。

導入方法

Three.jsでWebGPUを利用する手順を紹介します。かつてThree.jsを利用したことがある方（WebGLRendererの利用者）を前提とした説明となっています。

Three.jsのインポート:
1. WebGPU対応ビルドを読み込みます。
  1. CDNの場合は、three.module.jsではなくthree.webgpu.jsを読み込みます。
  2. Viteなどの場合は、とくに設定は不要です。
2. コードではES Moduleの読み込みとして import { WebGPURenderer } from "three/webgpu"と記載します。
レンダラーの作成:
1. new WebGPURenderer()でレンダラーを生成します。
2. 引数のオプションはWebGLRendererと同じ形式で指定できます。
初期化:
1. await renderer.init();メソッドを呼び、初期化します。
2. 同期ではなく、awaitで非同期になっていることがポイントです。
シーン描画:
1. 通常のThree.jsと同様に、SceneやCameraを作成してrenderer.render(scene, camera)を呼びます。

通常のWebGLRendererとWebGPURendererで実装した場合の差分は次の通りです。ほとんど違いがないことがわかります。

詳細な導入手順はICS MEDIA内の『Three.js入門サイト』をご覧ください。

Three.jsのWebGPURendererの使い方 - ICS MEDIA

WebGPU非対応ブラウザのフォールバック

WebGLとWebGPUは異なる技術です。WebGLはすべてのブラウザがサポートしているため、WebGLのほうが広範囲な動作環境をサポートできます。それに対して、WebGPUは現時点（2025年5月現在）ではChrome・Edgeのみがサポートしており、SafariやFirefoxの正式版では利用できません（試験的機能では提供されています）。

▼WebGLの技術レイヤー

▼WebGPUの技術レイヤー

では、Three.jsのWebGPURendererを使うと、SafariやFirefoxでは表示できないのでしょうか？

Three.jsのWebGPURendererの特徴として、WebGPU非対応環境ではWebGL 2.0へのフォールバックがおこなわれます。開発者が特別な対応をしなくても、ユーザー環境に応じて最適な技術が選択されるため、幅広い環境をカバーできます。

つまり、新しいWebGPURendererを使っておけば、新しい環境ではWebGPUの恩恵が得られ、古い環境では従来どおりWebGL 2.0で表示できます。

いまはWebGLRendererのほうが高速

Three.jsのr176時点（2025年5月）では、WebGPURendererに比べてWebGLRendererのほうが高速に動作することがあるようです。ベンチマークとして、大量のMeshを配置し検証しました。

60FPSをキープできる直方体の数をスコアとしました。個別のメッシュでは、4倍ほどのWebGLのほうが性能が高い結果になっています。

メッシュ種別	レンダラー	直方体の数
個別 Mesh	`WebGLRenderer`	2,562
個別 Mesh	`WebGPURenderer`	682
インスタンス化 Mesh	`WebGLRenderer`	62,751
インスタンス化 Mesh	`WebGPURenderer`	31,248

※検証マシン：Windows 10 / Core i5-1135G7 @ 2.40GHz / Intel IRIS Xe Graphics /メモリー16GB

本来的にはWebGPUのほうが新しいモダンなAPIを利用でき、高速な結果が得られるはずです。記事『WebGPUがついに利用可能に』の検証では、ネイティブ実装であれば、WebGPUのほうが高い性能を記録できています。

1万回のドローコールを行うと、WebGLのデモでは30FPSにまで落ちているのに対し、WebGPUのデモでは50FPS近い値がでています

筆者の願望もありますが、やがてThree.jsもWebGPU版のほうが高速になっていくことでしょう。

2025年5月現在、性能向上にむけた取り組みには以下のようなプルリクエストがあります。

React Three FiberでWebGPURendererは利用可能

記事『React Three Fiber入門』で紹介した、JSX構文でThree.jsが扱えるReact Three Fiberも、WebGPURendererが利用できます。詳しくは次のドキュメントをご覧ください。

v9 Migration Guide - React Three Fiber

TSLと GLSL / WGSL

TSL（Three.js Shading Language）は、Three.jsにおける新しいシェーダー記述方法です。

従来、Three.jsでリッチな視覚表現を行うにはGLSLジーエルエスエル（OpenGL Shading Language）を記述する必要がありました。WebGPUのネイティブではWGSL（WebGPU Shading Language）を利用しますが、Three.jsのWebGPURendererではTSLを使います。

TSLではJavaScriptでシェーダー定義を作成します。最終的にWebGPU用のWGSLコードと、WebGL用のGLSLコードに自動で変換されます。単一の記述で両環境をカバーでき、シェーダー言語の差異を意識せずに開発が可能です。

公式サイトのwebgpu_tsl_editorで確認できるので、試してみるといいでしょう。

TSLの詳細は次のリンクで学べます。TSLはノードベースでシェーダー処理を定義することが特徴です。

Three.js Shading Language · mrdoob/three.js Wiki

TSLの簡単な例

TSLの簡単なコードを紹介します。

次のコードは、時間経過に合わせて頂点を波打たせるシンプルな例です。TSLノードで頂点を動的にオフセットし、法線も再計算することで滑らかな陰影が表現されています。

import { WebGPURenderer, MeshStandardNodeMaterial } from "three/webgpu";
import { positionLocal, normalLocal, sin, time, float } from "three/tsl";

const material = new MeshStandardNodeMaterial();
const wave = sin(positionLocal.x.add(time));
material.positionNode = positionLocal.add(normalLocal.mul(wave).mul(float(5)));