webgpu-threejs-tsl

TSL を使った WebGPU Three.js

TSL（Three.js Shading Language）は、GLSL/WGSL の文字列ではなく、JavaScript で GPU シェーダーを記述できるノードベースのシェーダー抽象化です。

クイックスタート

import * as THREE from 'three/webgpu';
import { color, time, oscSine } from 'three/tsl';

const renderer = new THREE.WebGPURenderer();
await renderer.init();

const material = new THREE.MeshStandardNodeMaterial();
material.colorNode = color(0xff0000).mul(oscSine(time));

スキルの内容

ドキュメント

• docs/core-concepts.md - 型、演算子、ユニフォーム、制御フロー
• docs/materials.md - ノードマテリアルとすべてのプロパティ
• docs/compute-shaders.md - インスタンス化配列を使った GPU コンピュート
• docs/post-processing.md - 組み込みエフェクトとカスタムエフェクト
• docs/wgsl-integration.md - カスタム WGSL 関数
• docs/device-loss.md - GPU デバイスの消失と復旧への対応
• docs/limits-and-features.md - WebGPU デバイスの制限とオプション機能

例

• examples/basic-setup.js - 最小構成の WebGPU プロジェクト
• examples/custom-material.js - カスタムシェーダーマテリアル
• examples/particle-system.js - GPU コンピュートによるパーティクル
• examples/post-processing.js - エフェクトパイプライン
• examples/earth-shader.js - 大気を含む地球全体

テンプレート

• templates/webgpu-project.js - プロジェクトのスターターテンプレート
• templates/compute-shader.js - コンピュートシェーダーのテンプレート

リファレンス

• REFERENCE.md - クイックリファレンスチートシート

主な概念

インポートパターン

// Always use the WebGPU entry point
import * as THREE from 'three/webgpu';
import { /* TSL functions */ } from 'three/tsl';

ノードマテリアル

標準マテリアルのプロパティを TSL ノードに置き換えます。

material.colorNode = texture(map);        // instead of material.map
material.roughnessNode = float(0.5);      // instead of material.roughness
material.positionNode = displaced;         // vertex displacement

メソッドチェーン

TSL では、操作にメソッドチェーンを使用します。

// Instead of: sin(time * 2.0 + offset) * 0.5 + 0.5
time.mul(2.0).add(offset).sin().mul(0.5).add(0.5)

カスタム関数

再利用可能なシェーダーロジックには Fn() を使用します。

const fresnel = Fn(([power = 2.0]) => {
  const nDotV = normalWorld.dot(viewDir).saturate();
  return float(1.0).sub(nDotV).pow(power);
});

このスキルを使用する場面

• WebGPU レンダラーを使って Three.js をセットアップする
• TSL でカスタムシェーダーマテリアルを作成する
• GPU コンピュートシェーダーを記述する
• ポストプロセスのパイプラインを構築する
• GLSL から TSL に移行する
• パーティクル、水、地形などの視覚効果を実装する

リソース

• Three.js TSL Wiki
• WebGPU の例（webgpu_ が先頭に付くファイル）