mcpField
T
threejs-renderers

threejs-renderers

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

threejs-renderers について

threejs-renderersは、three.jsのレンダラー設定、サイズ、色管理、レンダーターゲット、性能確認を扱うエージェント向けスキルです。公式ドキュメントに沿った指針を示し、ポストプロセス、読み込み、WebXRを扱う関連スキルとの範囲も区別します。

主な機能

  1. 01WebGLRendererとWebGPURendererの設定
  2. 02キャンバスサイズとピクセル比の調整
  3. 03色空間とトーンマッピングの指針
  4. 04レンダーターゲットの選択と解放
  5. 05renderer.infoによる性能確認

活用シーン

  1. 01three.jsシーンのレンダラー設定
  2. 02色空間やトーンマッピングの問題調査
  3. 03オフスクリーン描画とレンダーターゲットの設定
  4. 04開発中のレンダリング統計の確認

インストール

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

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

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

同梱ファイル

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

agents/
openai.yaml
examples/
workflow-renderer-resize.md
references/
official-sections.md

詳細

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

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

  • WebGLRenderer または WebGPURenderer の作成、setSize、setPixelRatio、setAnimationLoop
  • カラーマネジメント：outputColorSpace、toneMapping、レンダラーのプロパティを使った露出に相当する動作
  • レンダラー側での WebGLRenderTarget、WebGLCubeRenderTarget、MRT、読み戻し、レンダー・トゥ・テクスチャの設定
  • プロファイリング用の Info（render、triangles、calls）；ドキュメントインデックスを参照する場合の CanvasTarget／ストレージテクスチャ

重要：このスキルと関連スキルの使い分け

トピック使用するスキル
全画面パス、ブルーム、SSAO、コンポーザーチェーンthreejs-postprocessing
VR／AR セッション、XRButton、ハンドモデルthreejs-webxr
ノードベースのフレームグラフ／TSL ポストスタックthreejs-node-tsl ＋ レンダラーの有効化
アセットの読み込みthreejs-loaders

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

  • 「WebGLRenderer」、「WebGPURenderer」、「setPixelRatio」、「toneMapping」、「WebGLRenderTarget」
  • 「レンダラー」、「ピクセル比」、「トーンマッピング」、「オフスクリーンレンダリング」

このスキルの使用方法

  1. API の選択：幅広い互換性が必要な場合は WebGLRenderer を、プロジェクトのルールに従って WebGPU とノード／TSL スタックを対象とする場合は WebGPURenderer を使用します。
  2. サイズ：パフォーマンスを考慮して適切な上限を設定し、描画バッファーのサイズをキャンバスの CSS サイズ × devicePixelRatio に合わせます。
  3. カラー：テクスチャやマテリアルと一貫性を持たせて outputColorSpace／toneMapping を設定します（threejs-textures、threejs-materials と相互参照してください）。
  4. ループ：WebXR に対応したループには setAnimationLoop を優先し、それ以外の場合は requestAnimationFrame を使用します。
  5. レンダーターゲット：環境や反射の要件に応じて WebGLRenderTarget とキューブ／3D／配列の各バリアントを選択します。再作成時に dispose することを明記してください。
  6. オーバーレイ UI：アドオンから CSS2DRenderer／CSS3DRenderer をインポートし、メインレンダラーとサイズを同期します。
  7. プロファイリング：開発ビルドでのみ renderer.info を読み取り、高いピクセル比とオーバードローによる負荷について説明します。
  8. WebXR フック：レンダラーで XR を有効にしますが、セッション管理は threejs-webxr に委ねます。

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

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

ドキュメントのセクション代表的なリンク
コアレンダラーhttps://threejs.org/docs/WebGLRenderer.html
WebGPUhttps://threejs.org/docs/WebGPURenderer.html
レンダーターゲットhttps://threejs.org/docs/WebGLRenderTarget.html
コアポストプロセッシング（クラス）https://threejs.org/docs/PostProcessing.html
アドオンのレンダラーhttps://threejs.org/docs/CSS2DRenderer.html

クラスへのその他のリンク：references/official-sections.md。

対象範囲

  • **対象：**レンダラーの作成、サイズ設定、カラー／トーン、ターゲット、Info、アドオンの CSS／SVG レンダラー、XR の高レベルな有効化のみ。
  • **対象外：**個別のコンポーザーパス（threejs-postprocessing）；XR 入力（threejs-webxr）；ファイル I/O（threejs-loaders）。

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

  • 上限のない DPR はフィルレートを消費します。高密度なシーンでは setPixelRatio(Math.min(devicePixelRatio, 2)) で上限を設定してください。
  • sRGB テクスチャと誤った outputColorSpace を組み合わせると、色あせや黒つぶれが発生します。
  • レンダーターゲットや全画面クワッドの dispose() を忘れると、ホットリロード時に GPU メモリがリークします。
  • WebGPURenderer の機能セットは急速に変化します。回答には、必ず最新のドキュメントに記載されたバージョン上の注意を引用してください。

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

WebGLRenderer、WebGPURenderer、およびカラーマネジメントのデフォルト設定は、リリースごとに変化します。ユーザーが使用する three.js の系統に合わせて、three.js docs の Renderers セクションを参照してください。WebGPU とノードのスタックには、より新しいマイナーバージョンが必要な場合があります。コンストラクターのデフォルト設定を記憶するのではなく、クラスのページにリンクしてください。

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

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

  1. 公式のレンダラーまたはレンダーターゲットのページ（WebGLRenderer、WebGLRenderTarget など）へのリンクを示します。
  2. 色がおかしく見える場合は、outputColorSpace／toneMapping を threejs-textures および threejs-materials に関連付けて説明します。
  3. renderer.xr.enabled に言及した後、XR セッションの詳細について threejs-webxr を案内します。
  4. ティアダウンまたはホットリロード時に、レンダーターゲットとレンダーリストの dispose() に言及します。
  5. オーバーレイが対象となる場合は、Addons → Renderers（CSS2DRenderer、…）を引用します。

参考資料

キーワード

英語： webglrenderer, webgpurenderer, rendertarget, pixelratio, tonemapping, outputcolorspace, css2d, css3d, three.js

日本語： WebGLRenderer、WebGPU、レンダーターゲット、ピクセル比、トーンマッピング、出力色空間、レンダラー、three.js

コメント

Markdown 対応