Wireframe MAT 完全ガイド | 使い方・パラメータ解説【TouchDesigner】

※当サイトにはプロモーションリンクが含まれます。

Wireframe MAT のエッジ描画機能を示す図

記事更新の通知はXでアナウンス٩(๑❛ᴗ❛๑)
→ @maru6o6をフォロー

概要 📖 – ジオメトリのエッジ描画専用シェーディング

Wireframe MATは、ジオメトリのエッジ (ライン) のみを指定色と線幅で描画する、ワイヤーフレーム表示専用 MATです。Common Page の Wire Frame パラメータでも同様の描画が可能ですが、Wireframe MAT は専用 MAT として独立した制御性 (色 / アルファ / モード / 線幅) を提供します。

主な用途 🎯

  • ジオメトリのエッジ (ライン) のみを描画するシェーディング
  • 3D デザインの構造確認 / モデルのワイヤーフレーム表示
  • テクノロジー / SF 系の演出 (ホログラム表現等)
  • デバッグ用 のジオメトリ構造可視化
  • Topology / Tesselated 切替で元ポリゴンと描画三角形の確認

データフロー 🔄

入力: Color + Line Width + Wireframe Mode
 ↓
ジオメトリのエッジのみをライティング非依存で描画
 ↓
出力: Geometry COMP の Material 入力へ

Tips

初心者の方は、以下日本語書籍も手元にあると安心です。

まる。
まる。

実際の案件事例まで踏み込んで紹介されていて、効率よくスキルアップするなら必携の二冊です！

パラメータ解説 ⚙️

Wireframe Page 🕸️

Color & Line .colorline 🎨

ワイヤーフレームの色・透明度・線幅・モード

項目 内部名 説明
Polygon Edges .polygonedges 元のポリゴントポロジ (四角形等) のエッジを描画
Tessellated Triangle Edges .triangleedges OpenGL が三角形分割した後のエッジを描画 (Metaball / NURBs 等で実態確認用)
Color .color ワイヤーフレームの線の色 (RGB)。ライト非依存
Alpha .alpha 線の不透明度。ポイントアルファと乗算される
Line Width .linewidth ワイヤーフレーム線の太さ (ピクセル単位)

Deform Page 🦴

Deform .dodeform 🦴

ボーン変形 (スキニング) の設定群:

  • Deform トグル: ボーン変形を有効化
  • SOP with Capture Data: pCaptPath / pCaptData 属性を持つ SOP
  • Skeleton Root Path: スケルトンのルート COMP のパス

Common Page 🔧

Blending .blending 🎨

色のブレンディング (透過合成) に関する設定群

項目 内部名 説明
Add .add ソースとデスティネーションを加算
Subtract .subtract ソースからデスティネーションを減算
Reverse Subtract .revsubtract デスティネーションからソースを減算
Minimum .minimum 両者の最小値を採用
Maximum .maximum 両者の最大値を採用
Blending (Transparency) .blending 透過効果のためのカラーブレンディングを有効化するトグル
Separate Alpha Function .separatealphafunc アルファチャンネルのブレンド設定を RGB と独立させる
Blend Constant Color .blendconstant constantcol 系オプション選択時に使用する RGB 定数カラー
Blend Constant Alpha .blendconstanta constanta 系オプション選択時に使用する定数アルファ値
Legacy Alpha Behavior .legacyalphabehavior 旧バージョンのアルファ処理との後方互換を有効化
Post-Mult Color by Alpha .postmultalpha ブレンド演算完了後に RGB を計算後アルファで乗算

Depth Test .depthtest 📏

デプステスト (Z 比較) によるオクルージョン制御

項目 内部名 説明
Less Than .less 新ピクセルのデプスが既存より小さい (手前) なら描画
Less Than or Equal .lessorequal 新ピクセルが既存以下なら描画
Equal .equal デプスが完全一致時のみ描画
Greater Than .greater 新ピクセルが既存より大きい (奥) なら描画
Greater Than or Equal .greaterorequal 新ピクセルが既存以上なら描画
Not Equal .notequal デプスが一致しない場合のみ描画
Always .always デプス比較を行わず常に描画
Depth Test .depthtest デプスバッファとの比較によるオクルージョンを有効化
Write Depth Values .depthwriting デプステストを通過したピクセルのデプス値をデプスバッファに書き込む

Alpha Test .alphatest 🔍

アルファ値に基づくピクセル単位の破棄判定

項目 内部名 説明
Less Than .less アルファが閾値より小さいピクセルを残す
Less Than or Equal .lessorequal アルファが閾値以下のピクセルを残す
Greater Than .greater アルファが閾値より大きいピクセルを残す
Greater Than or Equal .greaterorequal アルファが閾値以上のピクセルを残す
Discard Pixels Based on Alpha .alphatest ピクセル単位でアルファによる破棄判定を有効化
Alpha Threshold .alphathreshold アルファ比較の閾値。条件外のピクセルは破棄される

Wire Frame .wireframe 🕸️

ジオメトリをワイヤーフレーム表示する設定

項目 内部名 説明
Off .off 通常のソリッド描画 (ワイヤーフレーム無効)
OpenGL Tesselated Wire Frame .tesselated OpenGL が三角形分割した状態でワイヤーを描画
Topology Wire Frame .topology 元のポリゴントポロジ (四角形等) のままワイヤーを描画
Line Width .wirewidth ワイヤーフレームの線の太さ (ピクセル単位)

Cull Face .cullface 🔺

ポリゴンの表裏どちらを描画するか (カリング) の選択

項目 内部名 説明
Use Render Setting .userender Render TOP 側の設定に従う
Neither .neither 両面とも描画 (カリングなし)
Back Faces .backfaces 裏面をカリング、表面のみ描画
Front Faces .frontfaces 表面をカリング、裏面のみ描画
Both Faces .bothfaces 両面をカリング (= 何も描画されない)

Polygon Depth Offset .polygonoffset ↔️

Z-fighting 対策としてポリゴンのデプス値をオフセット

項目 内部名 説明
Polygon Depth Offset .polygonoffset ポリゴンのデプス値オフセット機能を有効化
Offset Factor .polygonoffsetfactor デプス勾配に対するオフセットの乗数
Offset Units .polygonoffsetunits デプス単位の固定オフセット量

Color Space .parmcolorspace 🌈

カラーパラメータの色空間 / 基準白色の解釈

項目 内部名 説明
sRGB .srgb SDR sRGB トランスファ関数 (一般的なディスプレイ標準)
sRGB – Linear .srglinear SDR リニアトランスファ
Rec.601 (NTSC) .rec601ntsc SDR NTSC 規格 (旧テレビ放送)
Rec.709 .rec709 SDR ビデオ規格 (HD テレビ)
Rec.2020 .rec2020 HDR 放送規格 (4K/8K UHD)
DCI-P3 .dcip3 HDR シネマ規格 (D65 ホワイトポイント)
DCI-P3 (D60) .dcip3d60 HDR シネマ規格 (D60 ホワイトポイント)
Display-P3 (D65) .displayp3d65 HDR sRGB ガンマ (Apple ディスプレイ等)
ACES2065-1 .aces2065-1 HDR リニアシネマ規格 (アーカイブ用)
ACEScg .acescg HDR リニアシネマ作業用色空間
Passthrough .passthrough 色空間変換を行わずそのまま渡す

実践アイデア 💡

Example 1: 3D モデルのワイヤーフレーム表示 🕸️

File In SOP (.obj モデル) → Geometry COMP (Wireframe MAT) → Camera COMP → Render TOP

外部から読み込んだ 3D モデルの構造を確認したいとき、Wireframe MAT を当てれば全エッジが描画されます。モデルのポリゴン数や形状を視覚的に把握できます。

  1. File In SOP で .obj ファイルを読み込み
  2. Geometry COMP に File In SOP を入れ、Material に Wireframe MAT を割当
  3. Wireframe MAT の Color を白、Line Width を 1.5 に設定
  4. Render TOP で確認、モデル全体がワイヤー描画される

Example 2: SF 演出のホログラム的表現 ✨

SOP → Geometry COMP (Wireframe MAT シアン × Constant MAT 暗 × Layered) → Render TOP

Wireframe MAT を主体に、補助的に Constant MAT でうっすら面を見せると、SF 系のホログラム / 透視ビューのような演出が作れます。Sci-Fi 系映像でよく使われる手法。

  1. Geometry COMP を 2 つ用意 (ワイヤー用 + 半透明面用)
  2. ワイヤー用 COMP に Wireframe MAT (Color = シアン、Line Width = 2.0)
  3. 面用 COMP に Constant MAT (Color = シアン × 0.1、Alpha = 0.2)
  4. Render TOP で両方をレンダリング、ホログラム風の重ね描画になる

Example 3: Tessellated モードで実描画三角形を確認 🔍

Metaball SOP → Geometry COMP (Wireframe MAT, Wireframe Mode=Tessellated) → Render TOP

Metaballs や NURBs は元のポリゴンを持たず、OpenGL が三角形分割した結果がレンダリングされます。Tessellated モードに切り替えると、実際に描画されている三角形の状態を確認できます。

  1. Metaball SOP を作成し Geometry COMP に入れる
  2. Wireframe MAT の Wireframe Mode を Tessellated Triangle Edges に
  3. Render TOP で確認、Metaball が三角形分割された状態のワイヤー描画になる
  4. 通常の Polygon Edges モードに戻すと、Metaball ではエッジが描画されない (元ポリゴン無しのため)

関連オペレータ 🔗

類似機能OP 🔍

  • Constant MAT — 面を描画するライティング非依存 MAT (Wireframe は線を描画)
  • Phong MAT — Common Page の Wire Frame パラメータでも同様のワイヤー描画は可能
  • PBR MAT — Common Page 経由でワイヤー描画オプションあり

組み合わせ推奨OP 🔄

  • Geometry COMP — Wireframe MAT を割り当てる対象 COMP
  • Render TOP — ワイヤーフレームジオメトリを最終 2D 画像にレンダリング
  • Camera COMP — ワイヤーフレームの見え方を制御するビュー視点
  • File In SOP — 外部 .obj / .fbx モデルを読み込んで構造確認
  • Constant MAT — ワイヤー + 半透明面を重ねるホログラム表現の組み合わせ

前処理・後処理MAT 🎯

Info情報 📊

MAT は Info CHOP / Info DAT に接続することで、シェーダコンパイル状況やクック情報を取得できます。

汎用オペレータ情報 🔄

  • total_cooks: プロセス開始からの累計クック回数
  • cook_time: 直近クックに要した時間 (ミリ秒)
  • cook_frame: 最後にクックされたフレーム番号
  • warnings: 現在の警告数 (シェーダコンパイル警告含む)
  • errors: 現在のエラー数 (シェーダコンパイルエラー含む)

トラブルシューティング ⚠️

よくある問題と解決策 🔧

❌ Problem: Wireframe MAT を当てても何も描画されない
✅ Solution:

  • Geometry COMP の Material が Wireframe MAT を正しく指しているか確認
  • Wireframe Mode が Polygon Edges のとき、元ポリゴンが無いプリミティブ (Metaball / NURBs 等) ではエッジが描画されない → Tessellated Triangle Edges に切替
  • Alpha が 0 になっていないか、Line Width が 0 / 極端に小さくないか確認

❌ Problem: Line Width を上げても線が太くならない
✅ Solution:

  • GPU ドライバ / OpenGL 実装によっては Line Width の上限が制限されている (Windows 環境で 1.0 固定のケースあり)
  • 代替として GLSL MAT でカスタム描画する、または Geometry Shader でラインを四角形に展開
  • Common Page の Polygon Depth Offset でラインを手前にオフセットすると視認性が改善

❌ Problem: Metaball や NURBs にワイヤーが見えない
✅ Solution:

  • Wireframe Mode を Tessellated Triangle Edges に切替 (元ポリゴンが存在しないプリミティブの実描画三角形を描画)
  • SOP 側で Convert SOP 等を使って明示的にポリゴン化してから Wireframe を当てる
  • Metaball の解像度 (Display Detail) を上げると、Tessellated モードでより細かいワイヤーが見える

❌ Problem: 他の MAT と重ねて描画すると Z-Fighting が起きる
✅ Solution:

  • Common Page の Polygon Depth Offset を有効化し、Offset Factor / Offset Units をマイナスに設定してワイヤーを手前に
  • 別 Geometry COMP に分けて Render TOP の Layer 順を制御
  • Render TOP の Render Order でワイヤーレイヤーを最後に描画

参考資料 📚

公式リソース 📖

コミュニティ 💬

この記事はLLMと共に内容を執筆、更新しています。
最新バージョンとの項目差異など、情報の不一致を見つけた心優しい方はXもしくはInsta、メールなどよりサイト管理者までご連絡ください😎


まる。

お仕事のご依頼はDM又はメールにて。
━━━━━━━━━━━━━━━━━
Python/Touchdesigner/M5Stackをこよなく愛すフルスタックエンジニア。
専門は生理心理学、趣味はヨガやサウナ、EMS電気風呂などヘルスケア全般。
脳波や筋電、心拍を中心とした生体情報のセンシング＆インタラクティブアートづくりがライフワーク。

普段はワントゥーテンという会社で空間演出エンジニアをしています。
リファラル採用お繋ぎできますので、我こそはという尖った方は経歴と希望職種添えてDMください(エンジニア以外、営業職等もOK)。
ご飯行きましょう。

↓日常垢
Instagram：＠malmal0v0

まる。をフォローする
その他の記事はこちら
Math Combine POP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
ZED Select TOP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
ZED POP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
Window COMP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
Widget COMP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】

タイトルとURLをコピーしました