Three.jsのWebGPURendererとTSLとは？3Dブラウザゲームを移行する順序

1. WebGPURendererはWebGL 2への代替も持つ

Three.jsの公式マニュアルでは、WebGPURendererはWebGPUを使う現代的なレンダラーとして説明され、利用できない環境ではWebGL 2のバックエンドへ代替できると案内されています。公式API資料にも同じ方針が記載されています。ただし、代替があることは、独自の効果が無条件で両方に対応する保証ではありません。

新しい3D作品では、必要な材質を少数に絞って開始すると選択を試しやすくなります。既存作品では、地形、キャラクター、UIの3D表現、特殊効果を別々に一覧にします。描画の変更が影響する場所と、ルールや通信など影響しない場所を分けることが、比較用の作業を小さくする第一歩です。

2. TSLはシェーダーの処理をJavaScriptで組み立てる仕組み

公式マニュアルは、TSLで書いたシェーダーの記述がバックエンドに応じてWGSLやGLSLへ変換されることを説明しています。一方、ShaderMaterialやRawShaderMaterial、従来のEffectComposerを使った後処理は、移行時に見直す対象として挙げられています。従来の文字列シェーダーを読み込み先だけ変えて運用する想定は避けます。

この記事の提案は、材質を「既定の材質で足りる」「色や座標の計算だけ追加」「画面全体の効果」の三つに分ける方法です。最初は色や質感の小さな処理からTSLで試し、動きを確認してから後処理へ広げます。ライティング、透明表示、影を同時に変えると比較の原因が増えるため、独自の効果は一つずつ追加します。

AIにシェーダーの移植を手伝わせる場合も、見た目の要件を文章にします。「縁が明るくなる」だけでなく、カメラ角度、距離、透明な背景で何が見えるべきかを書きます。生成されたコードがその版のAPIを使うかを資料と照合し、コンパイルできることと意図した画面になることを別々に確認しましょう。

3. importの経路と、アドオンの版をそろえる

公式マニュアルはWebGPURendererの利用でthree/webgpuを使うimportの変更を案内しています。TSLはthree/tslの経路で提供されます。従来のthreeと混ぜている箇所がある場合は、同じアプリの中でどのクラスをどのビルドから利用しているかを整理し、資料が示す構成に合わせます。

コードの移行前に、Three.js本体とアドオンの版、バンドラーの設定、独自材質の読み込み先を一枚のメモにします。複数の配信元から異なる版を取り込む状態は、問題の切り分けを難しくします。次の記録用テンプレートは公式の雛形ではありません。実際に使った版を残し、更新後に同じ比較をできるようにするためのものです。

Three.js移行記録
本体とアドオンの版：
レンダラーのimport先：
TSLを使う材質：
従来の独自シェーダー：
後処理の置換対象：
WebGL 2で確認する場面：

4. 従来のレンダラーを維持する判断も含めて比較する

確認時の公式マニュアルはWebGPURendererについて実験的な状態を説明し、シーンによって不足する機能やWebGLRendererの方がよい性能になる場合もあるとしています。純粋なWebGL 2アプリではWebGLRendererを引き続き選べるという案内もあります。新しい方だけを唯一の正解にせず、作品の要件から判断します。

比較には、明るい場面、暗い場面、半透明の物体、視点を大きく動かす場面を用意します。影が勝敗の手掛かりなら、代替描画でもそれが読めるかを重点的に見ます。描画の初期化時間と最初の素材準備も含め、対象端末で確認した条件を残します。実測していない数値を採用理由にせず、「必要な見た目を維持できた」「保守する独自処理を減らせた」のような確認可能な理由にまとめましょう。

最小の比較用シーンは、作品の背景色、主人公の材質、実際の光を使う構成にします。球体だけの汎用デモで表示できたとしても、作品固有の透明な装飾や色の設定を確認したことにはなりません。スクリーンショットで差を残す場合もカメラ位置をそろえ、意図的に変えた演出を記録します。見た目の更新を採用した後は、旧版の比較用シーンも残すと次の更新で判断の根拠を再利用できます。

• 材質と後処理を一つずつ移す
• 透明表示、影、色の差を比較する
• WebGPUとWebGL 2の経路を確認する
• 従来方式を維持する場合の理由も記録する