mcpField
T
threejs-materials

threejs-materials

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

threejs-materials について

threejs-materials は、PBR、透明表現、カスタムシェーダーなど、three.js のコアマテリアルに関する回答を支援するエージェントスキルです。従来型マテリアルとノードベースのシェーディングを区別し、設定上の注意点も示します。

主な機能

  1. 01ライティング方式に応じたマテリアル選択
  2. 02マップと色空間の設定
  3. 03環境マップと透明表現の扱い
  4. 04ShaderMaterial と RawShaderMaterial の利用
  5. 05性能とレンダリング上の問題の回避

活用シーン

  1. 01ライティング方式に合う three.js マテリアルの選択
  2. 02マップの色空間や法線の問題の調査
  3. 03透明ソートと alpha の挙動への対処
  4. 04従来型マテリアルとノードシェーディングの選択

インストール

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

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

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

同梱ファイルagents/openai.yamlexamples/workflow-pbr-transparent.md

詳細

このスキルを使う場面

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

  • 組み込みのメッシュマテリアルやマップスロット（albedo、normal、roughness、metalness、ao、emissive）、envMapから選ぶ場合
  • 透明度のソートに関する問題、alphaTest、depthWrite、ブレンドモード、片面／両面レンダリング
  • ShaderMaterial／RawShaderMaterialのuniform、include、ライトパイプラインとの互換性
  • ベクターオーバーレイやパーティクル用のライン、ポイント、スプライトマテリアル

重要：従来のマテリアルとnode-tsl

必要なものスキル
マップを使った標準PBR、物理ベースのclearcoat／sheenthreejs-materials
TSLノード、NodeMaterial、WebGPU優先のシェーディング、コンピュート形式のグラフthreejs-node-tsl
ShaderMaterialからTSLへの移行threejs-node-tsl（概念面）。切り替えまでは、こちらでShaderMaterialを使い続けます

トリガーとなる語句の例：

  • 「MeshStandardMaterial」、「MeshPhysicalMaterial」、「ShaderMaterial」、「transparent」、「alphaTest」
  • 「PBR」、「物理マテリアル」、「透明」、「カスタムシェーダー」

このスキルの使い方

  1. ライティングモデルに基づいてクラスを選択します。MeshBasic（ライティングなし）、Lambert／Phong（従来のライティングあり）、Standard／Physical（PBR）。
  2. マップを割り当て、アルベドマップとデータマップで色空間が正しく設定されていることを確認します（threejs-texturesへのリンク）。
  3. 環境：キューブまたはequirectからenvMapを設定し、metalness／roughnessを調整します。必要に応じて、透過やIORにはMeshPhysicalMaterialを検討します。
  4. 透明度：オブジェクトの順序を調整するか、alphaTest／depthWriteのトレードオフを利用し、ソートの制約について説明します。
  5. ShaderMaterial：意図的でない限り、再ライティングの作業を最小限に抑えます。必要なライトと、バージョンごとのドキュメントに記載されたlights: trueフラグの動作を説明します。
  6. パフォーマンス：複数のメッシュ間でマテリアルを共有し、フレームごとのクローン作成を避けます。
  7. スキニング／モーフ：該当する場合はskinning／morphTargetsを設定します。メッシュ側の設定についてはthreejs-objectsを参照してください。

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

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

ドキュメントのセクション代表的なリンク
マテリアル（コア）https://threejs.org/docs/Material.html
PBRhttps://threejs.org/docs/MeshStandardMaterial.html
Physicalhttps://threejs.org/docs/MeshPhysicalMaterial.html
カスタムGLSLhttps://threejs.org/docs/ShaderMaterial.html

対象範囲

  • 対象： ドキュメントのCore Materialsに記載されているNode以外のマテリアル（*NodeMaterialを除く）。
  • 対象外： Nodesの全カタログ（threejs-node-tsl）、composer内のポストパス用マテリアル（threejs-postprocessing）。

よくある問題とベストプラクティス

  • normalMapTypeの誤りやタンジェント空間の問題は、ライティングを崩す原因になります。ジオメトリにタンジェントがあることを確認するか、適切なモードを使用してください。
  • 乗算済みアルファとストレートアルファの不一致は、葉の周囲にフリンジ状のハローを生じさせます。
  • MeshPhysicalMaterialのtransmissionには、厚みと良好な環境マップが必要です。threejs-textures／PMREMと組み合わせてください。
  • 固有のマテリアルが多すぎると、ソートやバッチ処理に悪影響を与えます。可能であれば統合してください。

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

PBRとShaderMaterialの動作は、three.js docsのMaterialsセクションに準拠します。最新リリースでは、色管理とデフォルトのenvMap処理が変更されています。色がおかしい場合は、マテリアルに関する回答とthreejs-renderersのレンダラー／出力設定を必ず併せて確認してください。

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

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

  1. 必要に応じて、MeshStandardMaterial、MeshPhysicalMaterial、またはShaderMaterialのページにリンクします。
  2. ユーザーが「シェーダー」または「ノード」について尋ねた場合は、threejs-node-tslとの選択肢を明確に示します。
  3. マップの役割（アルベド、roughness、normalなど）と、threejs-texturesに関するcolorSpaceの要件を分けて説明します。
  4. ソートを伴うレンダリングでは、透明度とdepthWriteのトレードオフを指摘します。
  5. *NodeMaterial型はこのスキルではなく、ノードスキルの対象であることを明記します。

参考資料

キーワード

英語： meshstandardmaterial、meshphysicalmaterial、shadermaterial、pbr、透明度、envmap、マテリアル、three.js

中国語： 材質、PBR、MeshStandardMaterial、物理マテリアル、透明度、環境マップ、ShaderMaterial、three.js

コメント

Markdown 対応