mcpField
W
web-3d-asset-pipeline

web-3d-asset-pipeline

github.com/openaiクリエイティブ・メディア7.6k61 回インストール3 週間前に更新
リポジトリ

web-3d-asset-pipeline について

ブラウザー向け3Dアセットを、実行時に使えるGLBまたはglTF 2.0として整えるためのスキルです。エンジン選定後の開発者を対象に、シーンコードではなくアセットの整理、検証、最適化、パッケージ化を扱います。

主な機能

  1. 01GLBとglTF 2.0の出力指針
  2. 02アセット整理と変換の確認
  3. 03ジオメトリとテクスチャの最適化
  4. 04コリジョンプロキシとLODの計画
  5. 05エンジンに依存しない実行時アセット指針

活用シーン

  1. 01ブラウザー配信用モデルの準備
  2. 02glTF Transformによるアセット容量の削減
  3. 03出荷前のピボット、スケール、命名確認
  4. 04シーン用コリジョンプロキシとLODの計画

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/openai/plugins --skill web-3d-asset-pipeline

インストール後、Claude Code で/web-3d-asset-pipelineを入力して読み込まれたか確認します。

同梱ファイルagents/openai.yaml

詳細

Web 3D アセットパイプライン

概要

このスキルは、出荷する 3D アセット向けであり、ランタイムのシーンコード向けではありません。このプラグインでブラウザー向け 3D 制作を行う際のデフォルトの出力形式は、GLB または glTF 2.0 です。目標は、DCC ツールが最初にエクスポートした形式をそのまま使うことではなく、予測可能なランタイムアセットを用意することです。

このガイダンスはエンジンに依存せず、Three.js、React Three Fiber、Babylon.js、PlayCanvas で利用できます。

このスキルを使う場面

  • タスクが GLB または glTF の出荷形式に関する場合
  • タスクがモデルのクリーンアップ、テクスチャのパッケージ化、圧縮、LOD、またはコリジョンプロキシに関する場合
  • ランタイムスタックはすでに決まっており、残る課題がアセットの品質やサイズである場合

このスキルを使わない場面

  • タスクがシーン、カメラ、レンダラー、またはゲームループの構成に関する場合
  • タスクが React とバニラ Three.js のどちらを使うかという選択だけに関する場合
  • ユーザーがまだランタイムエンジンを選定中の場合

デフォルトのパイプライン

  1. Blender などの DCC ツールで、ソースアセットを作成してクリーンアップします。
  2. GLB または glTF 2.0 にエクスポートします。
  3. glTF Transform で最適化します。
  4. 名前、ピボット、トランスフォーム、マテリアルの再利用、テクスチャの予算を検証します。
  5. 必要に応じて、コリジョンプロキシ、LOD 戦略、ベイク済みライティングの前提を追加します。
  6. 最適化したアセットを出荷し、エンジンネイティブの GLTF サポートで読み込みます。

形式のルール

  • 出荷形式のデフォルト：GLB または glTF 2.0。
  • FBX、OBJ、DCC ネイティブ形式を、長期的なランタイム契約として扱わないでください。
  • 出荷前にトランスフォームを適用するか、正規化してください。
  • アセットセット全体で、単位、ピボット、向きの規約を統一してください。

最適化のルール

  • プルーニング、重複排除、簡略化、パッケージ化には glTF Transform を使用します。
  • ジオメトリ圧縮は意図的に使用してください。
    • デコードコストと互換性がランタイムに適している場合、Draco は有効な選択肢です。
    • Meshopt は、Web 配信で有力なデフォルトとなることがよくあります。
  • テクスチャは目的に応じて圧縮してください。
    • ランタイムスタックが対応している場合は、KTX2 または BasisU を使用します。
    • より広範なアセットパイプラインに適している場合は、WebP または AVIF を使用します。
  • 可能な限りマテリアルとテクスチャを再利用し、メモリとドローコールのコストを削減します。

ランタイム対応アセットのルール

  • モデル階層の名前は、安定性があり、意味の分かるものにしてください。
  • DCC での作業の都合だけでなく、ゲームプレイでの操作に合わせてピボットと原点を設定してください。
  • 物理演算を多用するシーンでは、明示的なコリジョンプロキシを作成してください。
  • 最終エクスポートの前に、ライティングを動的、ベイク済み、ハイブリッドのいずれにするか決定してください。
  • 大規模な環境や繰り返し配置するプロップでは、LOD を計画してください。
  • テクスチャの解像度は、ソースアートでの理想ではなく、画面上での使用状況に応じたものにしてください。

よくある失敗例

  • クリーンアップせずに、DCC からの生のエクスポートを出荷する
  • 固有のマテリアルが多すぎる
  • テクスチャのサイズが、表示に必要なサイズを大幅に上回る
  • コリジョンプロキシがない
  • アセット間でスケールやピボットが一致していない
  • 上流で修正すべきアセットの問題を、ランタイムコードで補っている

参考資料

  • Three.js スタック：../../references/threejs-stack.md
  • React Three Fiber スタック：../../references/react-three-fiber-stack.md
  • GLB ローダーのスターター：../../references/gltf-loading-starter.md
  • Rapier スターター：../../references/rapier-integration-starter.md
  • 3D アセットパイプラインのリファレンス：../../references/web-3d-asset-pipeline.md
  • 代替エンジン：../../references/alternative-3d-engines.md

コメント

Markdown 対応