mcpField
T
threejs-textures

threejs-textures

github.com/full-stack-skills開発10383 回インストール4 週間前に更新
リポジトリ

threejs-textures について

three.js のテクスチャと環境マップを設定するためのリファレンススキルです。色空間やサンプリングを選ぶ方法と、テクスチャ設定とファイル読み込みの違いを扱います。

主な機能

  1. 01テクスチャの色空間設定
  2. 02フィルターと mipmap の選択
  3. 03サンプリングの異方性設定
  4. 04PMREMGenerator による環境マップ処理
  5. 05動画・キャンバステクスチャの更新と破棄

活用シーン

  1. 01アルベドマップの sRGB 処理
  2. 02縮小テクスチャのサンプリング調整
  3. 03環境マップからの環境光生成
  4. 04アセット交換時のテクスチャ解放

インストール

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

$npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-textures

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

同梱ファイルagents/openai.yamlexamples/workflow-pmrem-env.md

詳細

このスキルを使用するタイミング

ユーザーが次の項目に言及した場合は、必ずこのスキルを使用してください。

  • texture.wrapS / wrapT、minFilter、magFilter、generateMipmaps、anisotropy
  • colorSpace / sRGB データマップとリニアデータマップの適切な処理
  • DataTexture、CubeTexture、圧縮 GPU フォーマット、動画やキャンバスを利用したテクスチャの作成
  • IBL 用環境マップからの PMREMGenerator

重要：テクスチャとローダーの違い

手順スキル
ファイル / HTTP のデコードthreejs-loaders
GPU Texture の設定threejs-textures

次のような表現がトリガーになります。

  • 「テクスチャ」、「CubeTexture」、「PMREM」、「colorSpace」、「mipmap」、「異方性」
  • 「環境マップ」、「データテクスチャ」、「圧縮テクスチャ」

このスキルの使い方

  1. 分類：テクスチャの次元と形式（2D、キューブ、深度、圧縮、データ）を分類します。
  2. カラーパイプライン：colorSpace を適切に設定します。法線マップや粗さマップは非カラーのデータです。
  3. サンプリング：フィルターを選択します。縮小が発生する場合はミップマップを有効にし、最大異方性を検討します。
  4. PMREM：ドキュメントに従って、環境マップを PMREMGenerator に渡します。必要に応じて、結果をシーン / 環境 / 強度の各パスに割り当てます。
  5. 動画 / キャンバス：VideoTexture / CanvasTexture では、フレームごとの更新が必要かどうかを確認します。
  6. 破棄：テクスチャを置き換える際は、GPU メモリを解放するために dispose() を呼び出します。
  7. KTX2/Basis：トランスコーダーの接続設定は、この手順の前に threejs-loaders で行います。

examples/workflow-pmrem-env.md を参照してください。

ドキュメントマップ（公式）

ドキュメントのセクション代表的なリンク
テクスチャhttps://threejs.org/docs/Texture.html
キューブhttps://threejs.org/docs/CubeTexture.html
データhttps://threejs.org/docs/DataTexture.html
PMREMhttps://threejs.org/docs/PMREMGenerator.html

対象範囲

  • 対象範囲内： コアのテクスチャ + PMREMGenerator、テクスチャレベルでのサンプリングとカラーパイプライン。
  • 対象範囲外： ローダーの設定、バッファーをサンプリングするポストプロセッシングパス（threejs-postprocessing）。

よくある落とし穴とベストプラクティス

  • リニアワークフローで sRGB アルベドに適切な colorSpace を設定しないと、レンダラーの出力と並べたときに不自然に見えます。
  • 2 のべき乗ではないテクスチャには、パディングしない限りミップマップやラップに制限があります。
  • ホットリロード時にテクスチャの破棄を忘れると、VRAM がリークします。

ドキュメントとバージョン

テクスチャクラスと PMREMGenerator は、three.js docs の Textures および PMREMGenerator に記載されています。圧縮テクスチャや KTX2 の処理では、このスキルを使用する前に、トランスコーダーの設定で threejs-loaders が必要になることがよくあります。

エージェントの回答チェックリスト

このスキルに基づいて回答する際は、次の点を優先してください。

  1. 必要に応じて Texture、DataTexture、CubeTexture、または PMREMGenerator へのリンクを示します。
  2. colorSpace / フィルタリングと、threejs-renderers の出力および threejs-materials のマップとの関係を説明します。
  3. Draco/KTX2 の デコーダー接続設定に関する質問は、まず threejs-loaders に案内します。
  4. 環境マップや大きなアトラスを置き換える際は、dispose() を呼び出すよう強調します。
  5. ラップ / フィルターの列挙値が関係する場合に限り、Global 定数に言及します。

参考資料

キーワード

英語： テクスチャ、キューブマップ、pmrem、ミップマップ、色空間、圧縮テクスチャ、データテクスチャ、three.js

キーワード： テクスチャ、キューブマップ、PMREM、ミップマップ、色空間、圧縮テクスチャ、three.js

コメント

Markdown 対応