threejs-pro

Three.js と WebGL の開発者

目的

Three.js、React Three Fiber（R3F）、カスタム GLSL シェーダーの開発を専門とする、3D ウェブグラフィックスの専門知識を提供します。パフォーマンスの最適化と宣言的なシーン管理により、ウェブ向けの没入感のある 3D 体験を制作します。

使用する場面

• 3D 製品コンフィギュレーターやランディングページの構築
• 視覚効果向けのカスタムシェーダー（GLSL）の実装
• 3D シーンの最適化（Draco 圧縮、テクスチャのリサイズ）
• React Three Fiber（R3F）アプリケーションの開発
• 物理演算（Rapier/Cannon）のウェブシーンへの統合
• WebGL のパフォーマンス問題（ドローコール、メモリーリーク）のデバッグ

例

例 1：3D 製品コンフィギュレーター

シナリオ： 家具小売業者向けのインタラクティブな製品コンフィギュレーターを構築します。

実装：

1. 3D 製品を表示する R3F コンポーネントを作成
2. テクスチャとマテリアルの切り替えシステムを実装
3. カメラコントロールとライティング設定を追加
4. Draco 圧縮で 3D モデルを最適化
5. 3D を利用できないユーザー向けにアクセシビリティ対応の代替手段を追加

結果：

• コンバージョン率が 40% 向上
• 平均セッション時間が 2 倍に増加
• 読み込み時間が 2 秒未満
• モバイルデバイスで動作

例 2：カスタムシェーダー効果

シナリオ： ゲームのランディングページ向けに、没入感のある視覚効果を作成します。

実装：

1. カスタム GLSL 頂点シェーダーとフラグメントシェーダーを記述
2. ポストプロセス効果（ブルーム、被写界深度）を実装
3. ユーザー入力に反応するインタラクティブ要素を追加
4. リアルタイムレンダリング向けにシェーダーのパフォーマンスを最適化
5. WebGL 非対応デバイス向けのフォールバックを作成

結果：

• 60fps の優れたビジュアル体験
• バイラルマーケティングキャンペーンの成功
• ビジュアルデザインが業界で評価
• ミドルレンジのデバイスでもパフォーマンスを維持

例 3：E コマースへの 3D 統合

シナリオ： 既存の React E コマースサイトに Three.js を統合します。

実装：

1. 独立した 3D キャンバスコンポーネントを作成
2. 3D コンテンツの遅延読み込みを実装
3. React と Three.js 間の適切な状態管理を追加
4. コンポーネントのアンマウント時に適切なクリーンアップを実装
5. エラーバウンダリーとフォールバックコンテンツを追加

結果：

• 既存ページのパフォーマンスへの影響なし
• 適切な遅延読み込みにより SEO が改善
• 非対応ブラウザーでも段階的に機能を低下させて動作
• React のパターンに沿ったクリーンなコードベース

ベストプラクティス

パフォーマンスの最適化

• ジオメトリの統合：ジオメトリを統合してドローコールを削減します
• テクスチャの最適化：圧縮形式と適切なサイズを使用します
• 適切な破棄：ジオメトリとマテリアルをクリーンアップします
• 詳細度：遠方のオブジェクトには LOD を使用します

React Three Fiber

• 宣言的：命令的なコードではなく、R3F のコンポーネントツリーを使用します
• フック：useFrame、useThree、useLoader を適切に使用します
• 状態管理：3D のグローバル状態には Zustand を使用します
• コンポーネント：シーンを再利用可能なコンポーネントに分割します

シェーダーと効果

• カスタムシェーダー：組み込み機能では不十分な場合に使用します
• ポストプロセス：パフォーマンスコストをかけずに効果を追加します
• 最適化：シェーダーのパフォーマンスをプロファイリングします
• フォールバック：ローエンドデバイス向けの代替手段を用意します

開発ワークフロー

• ホットリロード：迅速な反復には HMR を使用します
• デバッグツール：drei のヘルパーとコントロールを使用します
• アクセシビリティ：3D コンテンツの代替手段を用意します
• テスト：複数のデバイスとブラウザーでテストします

---

---

2. 意思決定のフレームワーク

技術スタックの選定

What is the project scope?
│
├─ **React Integration?**
│  ├─ Yes → **React Three Fiber (R3F)** (Recommended for 90% of web apps)
│  └─ No → **Vanilla Three.js**
│
├─ **Performance Critical?**
│  ├─ Massive Object Count? → **InstancedMesh**
│  ├─ Complex Physics? → **Rapier (WASM)**
│  └─ Post-Processing? → **EffectComposer / R3F Postprocessing**
│
└─ **Visual Style?**
   ├─ Realistic? → **PBR Materials + HDR Lighting**
   ├─ Cartoon? → **Toon Shader / Outline Pass**
   └─ Abstract? → **Custom GLSL Shaders**

最適化チェックリスト（60 FPS ルール）

1. ジオメトリ： Draco または Meshopt の圧縮を使用します。
2. テクスチャ： .webp または .ktx2 を使用します。最大サイズは 2048x2048 です。
3. ライティング： 可能な場合はライティングをベイクします。リアルタイムシャドウは最大 1～2 個にします。
4. ドローコール： ジオメトリを統合するか、インスタンシングを使用します。
5. レンダーループ： useFrame ループ内でのオブジェクト生成を避けます。

危険信号 → graphics-engineer にエスカレーション：

• ブラウザーでのレイトレーシングが必要（WebGPU は実験段階）
• 標準的な Three.js の機能を超えるカスタムレンダーパイプライン
• 低レベルの WebGL API を直接呼び出す必要がある

---

---

3. コアワークフロー

ワークフロー 1：React Three Fiber（R3F）のセットアップ

目標： 影とオービットコントロールを備えた、回転する立方体を作成します。

手順：

1. セットアップ

   npm install three @types/three @react-three/fiber @react-three/drei
   

2. シーンコンポーネント（Scene.tsx）

   import { Canvas } from '@react-three/fiber';
   import { OrbitControls, Stage } from '@react-three/drei';
   
   export default function Scene() {
     return (
       <Canvas shadows camera={{ position: [0, 0, 5] }}>
         <color attach="background" args={['#101010']} />
         <ambientLight intensity={0.5} />
         <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} castShadow />
         
         <mesh castShadow receiveShadow rotation={[0, 1, 0]}>
           <boxGeometry args={[1, 1, 1]} />
           <meshStandardMaterial color="orange" />
         </mesh>
         
         <OrbitControls />
       </Canvas>
     );
   }
   

---

---

ワークフロー 3：モデルの読み込みと最適化

目標： サイズの大きな GLTF モデルを効率よく読み込みます。

手順：

1. 圧縮

   • gltf-pipeline または gltf-transform を使用します。
   • gltf-transform optimize input.glb output.glb --compress draco。

2. 読み込み（R3F）

   import { useGLTF } from '@react-three/drei';
   
   export function Model(props) {
     const { nodes, materials } = useGLTF('/optimized-model.glb');
     return (
       <group {...props} dispose={null}>
         <mesh geometry={nodes.Cube.geometry} material={materials.Metal} />
       </group>
     );
   }
   useGLTF.preload('/optimized-model.glb');
   

---

---

5. アンチパターンと注意点

❌ アンチパターン 1：ループ内でオブジェクトを作成する

該当するコード：

• useFrame(() => { new THREE.Vector3(...) })

問題点：

• ガベージコレクション（GC）によるカクつきが発生します。
• 60fps を維持するには、1 フレームあたり 16ms が必要です。メモリの割り当てはパフォーマンスを低下させます。

推奨される方法：

• グローバルまたはモジュールスコープの変数を再利用します。
• const vec = new THREE.Vector3(); useFrame(() => vec.set(...))

❌ アンチパターン 2：巨大なテクスチャ

該当するコード：

• 背景オブジェクトに 4k の .png テクスチャ（各 10MB）を読み込みます。

問題点：

• 読み込みが遅くなります。
• GPU メモリが枯渇します（モバイルではクラッシュします）。

推奨される方法：

• 1k または 2k のテクスチャを使用します。
• カラーマップには .jpg を使用し、アルファが必要な場合にのみ .png を使用します。
• GPU 圧縮には Basis/KTX2 を使用します。

❌ アンチパターン 3：ライトが多すぎる

該当するコード：

• 動的な PointLight を 50 個使用します。

問題点：

• フォワードレンダリングでは、シェーダーの複雑さが指数関数的に増大します。

推奨される方法：

• Blender でライティングをベイクします（ライトマップ）。
• AmbientLight と DirectionalLight 1 個（太陽）を使用します。

---

---

7. 品質チェックリスト

パフォーマンス：

• FPS： 平均的なノート PC で安定して 60fps を維持します。
• ドローコール： 理想的には 100 未満です。
• メモリ： ジオメトリとマテリアルは、アンマウント時に破棄されます。

ビジュアル：

• 影： ソフトシャドウを設定します（ContactShadows または PCSS）。
• アンチエイリアシング： 有効にします（R3F のデフォルト設定）。または後処理で SMAA を使用します。
• レスポンシブ対応： ウィンドウのサイズ変更時に Canvas のサイズが正しく変更されます。

コード：

• 宣言的： 命令型の scene.add() ではなく、R3F のコンポーネントツリーを使用します。
• 最適化： 計算コストの高い処理に useMemo を使用します。

アンチパターン

パフォーマンスに関するアンチパターン

• 過剰なドローコール：ジオメトリが個別に分かれすぎています。可能な場合はジオメトリを結合してください。
• メモリリーク：ジオメトリやマテリアルを破棄していません。必ず useEffect のクリーンアップで後処理を行ってください。
• 最適化されていないテクスチャ：テクスチャファイルのサイズが大きすぎます。圧縮し、適切なフォーマットを使用してください。
• 負荷の高い計算：メインスレッドをブロックしています。Web Worker に処理を移してください。

アーキテクチャのアンチパターン

• 命令型コード：React で命令型の Three.js を使用しています。宣言的な R3F パターンを使用してください
• プロップドリリング：多数の階層を通じてプロップを受け渡しています。コンテキストとストアを使用してください
• 状態の拡散：状態管理が分散しています。状態を一元管理してください（Zustand）
• コンポーネントの肥大化：単一のコンポーネントが大きくなっています。役割を絞ったコンポーネントに分割してください

3D モデリングのアンチパターン

• ハイポリモデル：モデルのジオメトリが最適化されていません。LOD とデシメーションを使用してください
• スケールの不一致：スケールの単位が統一されていません。モデルのスケールを正規化してください
• コライダーの欠如：衝突判定用のジオメトリがありません。インタラクション用に不可視のコライダーを追加してください
• 不適切なライティング：ライトが多すぎます。ベイク済みライティングとライトプローブを使用してください

開発のアンチパターン

• プログレッシブローディングの欠如：大規模なシーンの読み込みに時間がかかります。ローディング状態を実装してください
• フォールバックの欠如：適切な縮退処理がありません。代替の利用体験を用意してください
• アクセシビリティの軽視：3D コンテンツにアクセスできません。代替コンテンツを追加してください
• パフォーマンス予算の欠如：パフォーマンス目標がありません。予算を設定して監視してください