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

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

概要 📖 – 画像を回転・反転・反復

Mirror TOPは、基準点まわりに画像を回転コピーし、上下左右の反転や端の折り返し反復を組み合わせて対称模様を作る TOPです。基準点 (Pivot) を中心に回転させたコピーを重ね、Flip X / Flip Y で上下左右の反転を加えます。端の処理方式 (Extend) を折り返しに設定すると、継ぎ目のない万華鏡のような反復パターンが得られます。

主な用途 🎯

基準点まわりに画像を回転コピーして対称模様を作る演出
上下左右の反転 (鏡像) による万華鏡・シンメトリー表現
端を折り返して反復するシームレスなパターン生成
テクスチャの端処理 (保持・透明・繰り返し・折り返し) の切替
ライブ映像のリアルタイム鏡面演出・VJ パターン素材作り

データフロー 🔄

入力: TOP テクスチャ
 ↓
基準点を設定して回転コピー
 ↓
上下左右の反転を切替
 ↓
端の処理方式 (保持・透明・繰り返し・折り返し) を選択
 ↓
出力: 回転・反転・反復されたテクスチャ

Tips

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

リンク

まる。

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

パラメータ解説 ⚙️

Mirror Page 📋

基準点と回転 🎯

回転の中心となる基準点と回転量の指定

Pivot .pivot 🎯
Pivot (基準点) — 後述の Rotate がどの位置を中心に回転するかを決める基準点。
– X (pivotx): 基準点の横位置
– Y (pivoty): 基準点の縦位置

Pivot Unit .pivotunit 📐
Pivot Unit (基準点の単位) — 基準点をどの単位で指定するかを切替えます。

Rotate .rotate 🔄
Rotate (回転) — 上で指定した基準点まわりに画像のコピーを回転させます。対称模様や放射状パターンを作る中心パラメータ。

端の処理 `.extend` 🧩

画像の端に達したときの処理方式

項目	内部名	説明
Hold	`.hold`	端のピクセル色をそのまま外側へ引き延ばして保持
Zero	`.zero`	端の外側を 0 (透明・黒) で埋める
Repeat	`.repeat`	画像をそのまま繰り返してタイル状に並べる
Mirror	`.mirror`	端を折り返して反復し、継ぎ目のない鏡像パターンを作る

上下左右の反転 🔁

各軸方向の反転を切替えるトグル群

Flip X .flipx ↔️
Flip X (水平反転) — 画像を X 軸方向 (左右) に反転します。鏡像・シンメトリー演出の基本トグル。

Flip Y .flipy ↕️
Flip Y (垂直反転) — 画像を Y 軸方向 (上下) に反転します。回転と組み合わせて 4 方向の対称模様を作れます。

Common Page 🔧

Output Resolution `.outputresolution` 🖼️

出力解像度の決定方式

項目	内部名	説明
Use Input	`.useinput`	入力 TOP の解像度をそのまま継承
Eighth	`.eighth`	入力解像度の 1/8
Quarter	`.quarter`	入力解像度の 1/4
Half	`.half`	入力解像度の 1/2
2X	`.2x`	入力解像度の 2 倍
4X	`.4x`	入力解像度の 4 倍
8X	`.8x`	入力解像度の 8 倍
Fit Resolution	`.fit`	指定解像度に縦横比を保持して収める
Limit Resolution	`.limit`	指定解像度を上限としてクランプ
Custom Resolution	`.custom`	`Resolution` パラメータで任意指定

Resolution `.resolution` 📐

カスタム解像度の幅・高さ指定 (Output Resolution = Custom 等の時のみ有効):

Resolution W: 出力幅 (ピクセル単位)。Output Resolution が Custom Resolution / Fit Resolution / Limit Resolution の時に有効
Resolution H: 出力高 (ピクセル単位)。同上

Resolution Menu `.resmenu` 📋

よく使う解像度プリセットのドロップダウン:

Resolution Menu: NTSC / PAL / HDTV 720 / HDTV 1080 / 4K UHD 等のプリセットから選択すると Resolution W / Resolution H が自動セットされる

Use Global Res Multiplier `.resmult` 🔢

プロジェクト全体の解像度倍率の適用:

Use Global Res Multiplier: Project Settings の Global Resolution Multiplier をこの TOP に適用するかどうか。プロトタイプを低解像度で動かしつつ最終出力で一括フル解像度化する運用に便利

Output Aspect `.outputaspect` 📏

出力アスペクト比の決定方式

項目	内部名	説明
Use Input	`.useinput`	入力 TOP のアスペクトを継承
Custom Aspect	`.custom`	`Aspect1` / `Aspect2` で手動指定

Aspect `.aspect` 📐

カスタムアスペクト比の指定 (Output Aspect = Custom Aspect の時のみ有効):

Aspect1: 横方向アスペクト値 (Output Aspect = Custom Aspect の時のみ有効)
Aspect2: 縦方向アスペクト値 (同上)

Input Smoothness `.inputfiltertype` 🎚️

入力テクスチャのサンプリング方式

項目	内部名	説明
Nearest Pixel	`.nearest`	最近傍ピクセルサンプリング (ピクセルアート向け、ジャギーが残る)
Interpolate Pixels	`.linear`	バイリニア補間 (滑らか、デフォルト)
Mipmap Pixels	`.mipmap`	ミップマップ補間 (縮小時のモアレ抑制、わずかにコスト高)

Fill Viewer `.fillmode` 🖥️

ビューア内でのテクスチャの収め方

項目	内部名	説明
Use Input	`.useinput`	入力 TOP の Fill Viewer 設定を継承
Fill	`.fill`	ビューアいっぱいに引き伸ばす (アスペクト無視)
Fit Horizontal	`.width`	横幅に合わせて収める (上下に余白)
Fit Vertical	`.height`	縦幅に合わせて収める (左右に余白)
Fit Best	`.best`	アスペクト保持で内側に収まる最大サイズ
Fit Outside	`.outside`	アスペクト保持で外側まで覆う最小サイズ (はみ出しあり)

Viewer Smoothness `.filtertype` 🎛️

ビューア表示時のサンプリング方式

項目	内部名	説明
Nearest Pixel	`.nearest`	最近傍ピクセルサンプリング (ピクセル単位での確認向け)
Interpolate Pixels	`.linear`	バイリニア補間 (滑らか、デフォルト)
Mipmap Pixels	`.mipmap`	ミップマップ補間 (縮小ビュー時のモアレ抑制)

Passes `.npasses` 🔁

オペレータの反復実行回数:

Passes: TOP の処理を何パス繰り返すかの整数値。前回パスの結果が次回パスの入力になる。反復で対称模様を多重化したい時に利用

Channel Mask `.chanmask` 🎨

処理対象のチャンネルマスク (R/G/B/A 個別トグル):

Channel Mask: R / G / B / A 各チャンネルのオン/オフトグル。オフのチャンネルは TOP の処理を受けず入力値がそのまま通過

Pixel Format `.format` 🎨

出力テクスチャのピクセルフォーマット (ビット深度・チャンネル構成)

項目	内部名	説明
Use Input	`.useinput`	入力 TOP のフォーマットを継承
8-bit fixed (RGBA)	`.rgba8fixed`	標準 8 ビット固定小数 RGBA (デフォルト、軽量)
sRGB 8-bit fixed (RGBA)	`.srgba8fixed`	sRGB ガンマ補正済 8 ビット RGBA
16-bit float (RGBA)	`.rgba16float`	16 ビット浮動小数 RGBA (HDR・中間処理向け)
32-bit float (RGBA)	`.rgba32float`	32 ビット浮動小数 RGBA (最高精度、メモリ大)
10-bit RGB with 2-bit Alpha	`.rgb10a2fixed`	10-10-10-2 ビット固定小数 (バンディング抑制)
16-bit fixed (RGBA)	`.rgba16fixed`	16 ビット固定小数 RGBA
11-bit float (RGB)	`.rgba11float`	11-11-10 ビット浮動小数 RGB (アルファは常に 1、HDR 軽量)
16-bit float (RGB)	`.rgb16float`	16 ビット浮動小数 RGB (アルファなし)
32-bit float (RGB)	`.rgb32float`	32 ビット浮動小数 RGB (アルファなし)
8-bit fixed (Mono)	`.mono8fixed`	8 ビット固定小数モノクロ
16-bit fixed (Mono)	`.mono16fixed`	16 ビット固定小数モノクロ
16-bit float (Mono)	`.mono16float`	16 ビット浮動小数モノクロ
32-bit float (Mono)	`.mono32float`	32 ビット浮動小数モノクロ
8-bit fixed (RG)	`.rg8fixed`	8 ビット固定小数 R+G 2 チャンネル
16-bit fixed (RG)	`.rg16fixed`	16 ビット固定小数 R+G
16-bit float (RG)	`.rg16float`	16 ビット浮動小数 R+G
32-bit float (RG)	`.rg32float`	32 ビット浮動小数 R+G
8-bit fixed (A)	`.a8fixed`	8 ビット固定小数アルファ単体
16-bit fixed (A)	`.a16fixed`	16 ビット固定小数アルファ単体
16-bit float (A)	`.a16float`	16 ビット浮動小数アルファ単体
32-bit float (A)	`.a32float`	32 ビット浮動小数アルファ単体
8-bit fixed (Mono+Alpha)	`.monoalpha8fixed`	8 ビット固定小数モノクロ+アルファ
16-bit fixed (Mono+Alpha)	`.monoalpha16fixed`	16 ビット固定小数モノクロ+アルファ
16-bit float (Mono+Alpha)	`.monoalpha16float`	16 ビット浮動小数モノクロ+アルファ
32-bit float (Mono+Alpha)	`.monoalpha32float`	32 ビット浮動小数モノクロ+アルファ

実践アイデア 💡

Example 1: 放射状の対称模様 🌀

Noise TOP → Mirror TOP (Rotate = 45 / Extend = Mirror) → 出力

ノイズ素材を Mirror TOP で基準点まわりに回転コピーし、端を折り返して継ぎ目のない放射状の対称模様を作る基本フロー。回転角と基準点を時間で動かすと、有機的に変化する万華鏡パターンが手軽に得られます。

Noise TOP でベースとなる模様素材を生成
Mirror TOP を後段に接続し Pivot を画像中央に設定
Rotate に角度を入れて回転コピーを重ねる
Extend を Mirror にして端を折り返し、継ぎ目を消す

Example 2: ライブ映像の鏡面演出 🪞

Movie File In TOP → Mirror TOP (Flip X = オン) → Composite TOP → 出力

映像素材を Mirror TOP で左右反転し、元映像と並べてシンメトリックな構図を作る用途。リアルタイムのライブ映像にそのまま適用できるので、VJ のオープニング画面やバンパー映像で多用される鏡面演出です。

Movie File In TOP に映像素材を読み込む
Mirror TOP を後段に接続し Flip X をオン
元映像と反転映像を Composite TOP に並べて配置
必要に応じて Flip Y も併用して上下対称も追加

Example 3: シームレスなタイル背景 🧩

テクスチャ素材 → Mirror TOP (Extend = Repeat / Mirror) → 後段背景

単体のテクスチャ素材を Mirror TOP の端処理で繰り返し・折り返しし、継ぎ目の目立たないタイル背景を生成する例。Repeat は同じ向きで反復、Mirror は折り返して反復するため、境界の不連続が気になる素材でも自然に並べられます。

繰り返したいテクスチャ素材を入力 TOP として接続
Mirror TOP の Extend を Repeat または Mirror に設定
Output Resolution を広げてタイルが何枚並ぶか調整
後段に Fit TOP を入れて最終出力アスペクトに合わせる

Info CHOP情報 📊

Mirror TOPは Info CHOP による詳細情報取得に対応しています。

TOP固有情報 🖼️

resx: TOP の出力解像度 X (ピクセル単位)
resy: TOP の出力解像度 Y (ピクセル単位)
aspectx: アスペクト比 X
aspecty: アスペクト比 Y
depth: 3D テクスチャ / テクスチャ配列の深度 (2D テクスチャでは 1)
gpu_memory_used: TOP が消費している GPU メモリ量 (MB 単位)

汎用オペレータ情報 🔄

total_cooks: プロセス開始からのクック回数
cook_time: 最後のクック時間 (ミリ秒)
cook_frame: 最後にクックされたフレーム番号
warnings: 警告数
errors: エラー数

TOP Info 情報 📊

resolution_w: 出力テクスチャの横ピクセル数 (反転・反復処理後の幅)
resolution_h: 出力テクスチャの縦ピクセル数 (反転・反復処理後の高さ)
aspect_x: 出力テクスチャの横アスペクト値
aspect_y: 出力テクスチャの縦アスペクト値
depth: テクスチャの色深度 (ピクセルフォーマットに依存)

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

よくある問題と解決策 🔧

❌ Problem: 回転コピーが出力に現れない
✅ Solution:

Rotate に 0 以外の角度が入っているか確認
Pivot (基準点) が画像範囲内に収まっているか確認 (画像外に基準点があると回転コピーが見えなくなる)
Pivot Unit の単位 (ピクセル/割合) が意図通りか確認

❌ Problem: 端に黒い余白や継ぎ目が出る
✅ Solution:

Extend が Zero の場合は端の外側が透明・黒になるため、Hold / Repeat / Mirror に切替える
継ぎ目のない反復が欲しい場合は Mirror (折り返し) を選ぶと境界が連続する
後段で Level TOP を使って端の色味を整える

❌ Problem: Flip X / Flip Y と Rotate の効果が分かりにくい
✅ Solution:

Flip X / Flip Y は基準点に依存しない単純な軸反転 (鏡像)
Rotate は Pivot を中心とした回転で、基準点の位置で結果が大きく変わる
Constant TOP に文字テクスチャを表示させて各トグルを切替えると、挙動の違いが一目で分かる

参考資料 📚

その他 🔗

公式リソース 📖

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

まる。

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

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

↓日常垢
Instagram：＠malmal0v0

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

概要 📖 – 画像を回転・反転・反復

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

Mirror Page 📋

基準点と回転 🎯

端の処理 `.extend` 🧩

上下左右の反転 🔁

Common Page 🔧

Output Resolution `.outputresolution` 🖼️

Resolution `.resolution` 📐

Resolution Menu `.resmenu` 📋

Use Global Res Multiplier `.resmult` 🔢

Output Aspect `.outputaspect` 📏

Aspect `.aspect` 📐

Input Smoothness `.inputfiltertype` 🎚️

Fill Viewer `.fillmode` 🖥️

Viewer Smoothness `.filtertype` 🎛️

Passes `.npasses` 🔁

Channel Mask `.chanmask` 🎨

Pixel Format `.format` 🎨

実践アイデア 💡

Example 1: 放射状の対称模様 🌀

Example 2: ライブ映像の鏡面演出 🪞

Example 3: シームレスなタイル背景 🧩

関連オペレータ 🔗

類似機能OP 🔍

組み合わせ推奨OP 🔄

前処理・後処理TOP 🎯

Info CHOP情報 📊

TOP固有情報 🖼️

汎用オペレータ情報 🔄

TOP Info 情報 📊

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

よくある問題と解決策 🔧

参考資料 📚

その他 🔗

公式リソース 📖

その他の記事はこちら

概要 📖 – 画像を回転・反転・反復

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

Mirror Page 📋

基準点と回転 🎯

端の処理 .extend 🧩

上下左右の反転 🔁

Common Page 🔧

Output Resolution .outputresolution 🖼️

Resolution .resolution 📐

Resolution Menu .resmenu 📋

Use Global Res Multiplier .resmult 🔢

Output Aspect .outputaspect 📏

Aspect .aspect 📐

Input Smoothness .inputfiltertype 🎚️

Fill Viewer .fillmode 🖥️

Viewer Smoothness .filtertype 🎛️

Passes .npasses 🔁

Channel Mask .chanmask 🎨

Pixel Format .format 🎨

実践アイデア 💡

Example 1: 放射状の対称模様 🌀

Example 2: ライブ映像の鏡面演出 🪞

Example 3: シームレスなタイル背景 🧩

関連オペレータ 🔗

類似機能OP 🔍

組み合わせ推奨OP 🔄

前処理・後処理TOP 🎯

Info CHOP情報 📊

TOP固有情報 🖼️

汎用オペレータ情報 🔄

TOP Info 情報 📊

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

よくある問題と解決策 🔧

参考資料 📚

その他 🔗

公式リソース 📖

その他の記事はこちら

端の処理 `.extend` 🧩

Output Resolution `.outputresolution` 🖼️

Resolution `.resolution` 📐

Resolution Menu `.resmenu` 📋

Use Global Res Multiplier `.resmult` 🔢

Output Aspect `.outputaspect` 📏

Aspect `.aspect` 📐

Input Smoothness `.inputfiltertype` 🎚️

Fill Viewer `.fillmode` 🖥️

Viewer Smoothness `.filtertype` 🎛️

Passes `.npasses` 🔁

Channel Mask `.chanmask` 🎨

Pixel Format `.format` 🎨