mcpField
T
threejs-node-tsl

threejs-node-tsl

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

threejs-node-tsl について

threejs-node-tslは、three.jsのノード、TSL、ノードベースのレンダリングを扱うエージェント向けスキルです。従来のマテリアルやポストプロセスとの違いを整理し、変化の速いAPIの最新ドキュメントへ案内します。

主な機能

  1. 01TSLとNodeMaterialの案内
  2. 02WebGPUレンダラーとの組み合わせ
  3. 03従来のマテリアルやエフェクトとの区別
  4. 04最新ドキュメントと参考資料の案内
  5. 05API変更とバージョンに関する注意

活用シーン

  1. 01ノードベースのマテリアルやポストエフェクト構築
  2. 02TSLと従来のレンダリング方式の選択
  3. 03コアのPostProcessingとEffectComposerの区別

インストール

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

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

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/
openai.yaml
examples/
workflow-tsl-entry.md
references/
official-links.md
tsl-vs-classic.md

詳細

このスキルを使うタイミング

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

  • NodeMaterial、TSL、three/nodes からのインポート、またはドキュメント内の WebGPU エントリーポイント
  • 文字列の GLSL ではなく、ノードからマテリアルやポストエフェクトを構築すること
  • ノード中心のパイプラインでの WebGPURenderer、PostProcessing（コアクラス）

重要：node-tsl、materials、postprocessing の使い分け

状況スキル
ノードを使わない標準的な PBR 調整threejs-materials
TSL グラフ、NodeMaterial、WGSL パスthreejs-node-tsl
従来の EffectComposer と Pass クラスthreejs-postprocessing
ドキュメントの Addons TSL に記載されたノードポストパスthreejs-node-tsl + threejs-postprocessing の知識

トリガーとなるフレーズ：

  • 「TSL」、「NodeMaterial」、「three/nodes」、「WebGPU」、「node builder」
  • 「节点材质」、「着色语言 TSL」

このスキルの使い方

  1. パスを判断する：WebGPU + ノードか、WebGL + 従来のマテリアルかを選びます。安易に混在させないでください。
  2. ドキュメントを参照する：Nodes のインデックスとTSL.htmlから始め、マテリアルの入口にはNodeMaterialを使います。
  3. 段階的に情報を提示する：SKILL.md はナビゲーション用に保ち、長いシンボル一覧はreferences/official-links.mdとreferences/tsl-vs-classic.mdに置きます。ナビゲーションの習慣についてはexamples/workflow-tsl-entry.mdを参照してください。
  4. レンダラー：ドキュメントに従って WebGPURenderer を有効にします。フォールバックに関する注意事項は threejs-renderers に記載します。
  5. デバッグ：three.js リポジトリのバージョンを明記した例を使い、非推奨のインポートパスをコピーしないでください。
  6. ポストプロセススタック：ユーザーがコアクラスの PostProcessing とアドオンのコンポーザーのどちらを指しているかを確認し、threejs-renderers ／ threejs-postprocessing の表で明確にします。

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

ドキュメントのセクション代表的なリンク
Nodeshttps://threejs.org/docs/#Nodes
TSLhttps://threejs.org/docs/TSL.html
NodeMaterialhttps://threejs.org/docs/NodeMaterial.html
WebGPU rendererhttps://threejs.org/docs/WebGPURenderer.html

対象範囲

  • 対象： Nodes／TSL の調査、アーキテクチャ、レンダラーとの組み合わせ、次に参照する場所、ShaderMaterial からの移行に関するヒント。
  • 対象外： TSL のシンボル一覧を丸ごと SKILL.md に貼り付けること。頻繁なリリースを通じて API の安定性を保証すること。必ず「現行ドキュメント」を参照してください。

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

  • Three.js のノード API は急速に変化するため、回答にはバージョンまたは「現行ドキュメント」を明記してください。
  • コアの PostProcessing クラスと アドオンの EffectComposer を混同しないでください。会話では名前が紛らわしい場合があります。
  • WGSL と GLSL では想定が異なります。TSL は抽象化しますが、制約は残ります。
  • グラフはモジュール化してください。エージェントのコンテキストを膨らませるのではなく、参照資料を使って情報を探します。

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

Nodes のインデックスと TSL のページは大規模で、頻繁に更新されています。ユーザーがインストールしている three.js の正しい情報源として https://threejs.org/docs/ を扱い、長いシンボル一覧を言い換えるより、NodeMaterial と WebGPURenderer へのリンクを優先してください。

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

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

  1. API 名を創作せず、TSL.html および／または #Nodes を参照します。
  2. threejs-materials（従来型）とノード／TSL パスの違いを明示します。
  3. WebGPU + ノードの例には新しいマイナーバージョンが必要な場合があることを警告し、分かる場合はバージョンを明記します。
  4. 長い情報の検索にはreferences/tsl-vs-classic.mdとreferences/official-links.mdを案内します。
  5. コアの PostProcessing とアドオンの EffectComposer（threejs-postprocessing）を区別します。

参考資料

キーワード

英語： tsl、ノードマテリアル、ノード、webgpu、wgsl、three.js シェーディング言語、ノードビルダー、nodematerial

中国語： TSL、ノードマテリアル、WebGPU、シェーディング言語、NodeMaterial、three.js

コメント

Markdown 対応