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

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

概要 📖 – ピクセル毎に時間を歪める

Time Machine TOPは、Input 2 の輝度マップに応じて Input 1 の各ピクセルを別の時間フレームから取得し、ピクセル単位で時間方向に歪ませた映像を出力する TOPです。暗い領域ほど Black Offset で指定した時間にずらされ、明るい領域ほど White Offset の時間にずらされるため、グラデーション状の輝度マップを与えると流体的なタイムワープ表現が得られます。

主な用途 🎯

映像の時間方向ピクセル単位ずらし (流体・煙風の歪み表現)
ゴーストトレイル・ラインスキャン風スローモーションの生成
輝度マップによる絵画的タイムワープエフェクト
マスク領域だけ時間を遅らせる部分スローモーション演出
Audio Spectrum を時間マップ化したリアクティブな映像歪み

データフロー 🔄

入力 1: 時間方向に歪めたいソース映像
入力 2: 各ピクセルの時間オフセットを示す輝度マップ
 ↓
内部フレームバッファからピクセル単位で別フレームの色を取得
 ↓
出力: 時間方向にピクセル単位で歪んだ映像

Tips

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

リンク

まる。

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

パラメータ解説 ⚙️

TimeMachine Page 📋

Black Offset `.blackoffset` ⬛

Input 2 の黒い領域 (輝度 0) に適用される時間オフセット量

Black Offset .blackoffset ⬛
Black Offset (黒側オフセット) — Input 2 の黒いピクセルに対応する Input 1 の時間遅延量を指定します。負の値は過去フレーム、正の値は (バッファされていれば) 未来方向のフレームを参照します。単位は Black Offset Unit パラメータで切り替え可能です。

Black Offset Unit `.blackoffsetunit` 📐

Black Offset の単位指定

項目	内部名	説明
Index	`.index`	サンプルインデックス直接指定 (整数)。動画フレームでは frames とほぼ同義
Frames	`.frames`	フレーム数指定 (整数)。最も直感的な指定方法
Seconds	`.seconds`	秒指定 (実数)。プロジェクト FPS に依存しない時間指定に便利
Fraction	`.fraction`	バッファ全体に対する比率 (0.0〜1.0)。素材長によらず一定範囲の歪み量を維持

White Offset `.whiteoffset` ⬜

Input 2 の白い領域 (輝度 1) に適用される時間オフセット量

White Offset .whiteoffset ⬜
White Offset (白側オフセット) — Input 2 の白いピクセルに対応する Input 1 の時間遅延量を指定します。Input 2 の中間階調のピクセルは Black Offset と White Offset の間で線形補間された時刻のフレームから色をサンプリングします。

White Offset Unit `.whiteoffsetunit` 📐

White Offset の単位指定

項目	内部名	説明
Index	`.index`	サンプルインデックス直接指定 (整数)
Frames	`.frames`	フレーム数指定 (整数)。最も直感的
Seconds	`.seconds`	秒指定 (実数)。FPS 非依存
Fraction	`.fraction`	バッファ全体に対する比率 (0.0〜1.0)

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 のアスペクトを継承 (伝播事故の元、非推奨)
Resolution	`.resolution`	解像度から自動導出 (推奨デフォルト)
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`	アスペクト保持で外側まで覆う最小サイズ (はみ出しあり)
Native Resolution	`.nativeres`	テクスチャのネイティブ解像度のまま等倍表示

Viewer Smoothness `.filtertype` 🎛️

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

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

Passes `.npasses` 🔁

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

Passes: TOP の処理を何パス繰り返すかの整数値。前回パスの結果が次回パスの入力になる。Time Machine TOP では通常 1 のままで使う

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)	`.rgb11float`	11-11-10 ビット浮動小数 RGB (アルファなし、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: 流体タイムワープ 🌊

Movie File In TOP → Time Machine TOP (Input 1) / Ramp TOP → Time Machine TOP (Input 2)

Ramp TOP で生成した縦方向のグラデーションをタイムマップとして与えると、映像の上端と下端で再生時刻が異なるラインスキャン風のタイムワープを生成できます。輝度の連続変化により煙のような流体的な歪み表現が得られます。

Movie File In TOP で素材動画を読み込み、Time Machine TOP の Input 1 に接続
Ramp TOP で縦方向グラデーション (上が黒、下が白) を生成し、Time Machine TOP の Input 2 に接続
Black Offset = -60、White Offset = 0、両 Unit = Frames に設定し、上端ほど 60 フレーム過去の映像になる状態を確認
Ramp TOP の角度や位相をアニメーション化すると、歪みの方向が時間変化するエフェクトに発展できる

Example 2: 部分スローモーション 🎭

Movie File In TOP → Time Machine TOP (Input 1) / Circle TOP → Blur TOP → Time Machine TOP (Input 2)

Circle TOP や Rectangle TOP で生成した白黒マスクを Blur TOP で滑らかに整え Input 2 に与えると、白い領域だけ過去フレームを表示するため画面の一部だけスローモーション化したような演出を実装できます。マスク境界のぼかし量で時間遷移の柔らかさを調整できます。

Time Machine TOP の Input 1 に Movie File In TOP の出力を接続
Circle TOP でマスク領域を作成し、Blur TOP で境界を滑らかにしてから Input 2 に接続
Black Offset = 0、White Offset = -120、両 Unit = Frames に設定 (60fps なら白い部分が 2 秒前の映像)
Blur TOP の Size を変えて遷移の鋭さを調整し、マスク位置を Transform TOP で動かすとフォーカス領域の追従が可能

Example 3: 音響反応タイムシフト 🎵

Audio File In CHOP → Audio Spectrum CHOP → CHOP to TOP → Time Machine TOP (Input 2)

音響のスペクトラムを CHOP to TOP でテクスチャ化して Input 2 に与えると、周波数帯域ごとに映像が時間方向に歪むオーディオビジュアル表現を作成できます。低音域は大きく時間がずれ、高音域は瞬発的に変化する反応的な映像が得られます。

Audio File In CHOP で音楽を再生し、Audio Spectrum CHOP で周波数解析を実行
CHOP to TOP で 1 行のスペクトラム画像にし、Resolution を映像と同じ縦幅にストレッチ
Time Machine TOP の Input 1 に映像、Input 2 に CHOP to TOP の出力を接続
Black Offset = -90、White Offset = 0、両 Unit = Frames に設定し、低音帯ほど大きく時間がずれることを確認

Info情報 📊

TOP は Info CHOP / Info DAT に接続することで解像度・ピクセルフォーマット・クック情報を取得できます。Time Machine TOP では gpu_memory_used で内部フレームバッファのメモリ消費を、cook_frame でバッファ更新の同期状況を確認できます。

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共通情報 🖼️

resx: 出力テクスチャの横幅 (ピクセル単位)
resy: 出力テクスチャの縦幅 (ピクセル単位)
aspectx: アスペクト比の横成分
aspecty: アスペクト比の縦成分
depth: ピクセルフォーマットのビット深度
gpu_memory_used: Time Machine 内部フレームバッファが消費している GPU メモリ量 (バイト)

ノード共通情報 🔧

total_cooks: ノードがクックされた累積回数
cook_time: 直近フレームのクック時間 (ミリ秒)
cook_frame: 直近にクックされたフレーム番号 (バッファ同期確認用)
cooked_this_frame: 現フレームでクック済かどうか (0/1)

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

よくある問題と解決策 🔧

❌ Problem: 出力が真っ黒のまま、時間ずらしが効かない
✅ Solution:

Input 1 (ソース映像) と Input 2 (タイムマップ) の両方が接続されているか確認
Black Offset と White Offset が両方 0 になっていないか確認 (両方 0 では Input 1 が現在フレームのまま通過する)
起動直後は内部フレームバッファが未充填のため、再生開始から Offset 分のフレームが経過するまで出力が空になる挙動を確認

❌ Problem: 時間ずらしがカクついて滑らかでない
✅ Solution:

Black Offset Unit / White Offset Unit を Frames から Seconds や Fraction に統一して整数フレーム量子化を避ける
Input 2 のタイムマップに急峻な輝度変化がある場合は Blur TOP で前処理して滑らかに
Common Page の Pixel Format を 8-bit fixed (RGBA) から 16-bit float (RGBA) に上げて補間精度を確保

❌ Problem: GPU メモリ使用量が大きく動作が重い
✅ Solution:

Time Machine TOP は Black/White Offset の最大時間幅分のフレームを GPU メモリに保持するため、Offset 範囲を必要最小限に絞る
Common Page の Output Resolution を Half / Quarter に下げて消費メモリを削減
Pixel Format を 32-bit float (RGBA) から 16-bit float (RGBA) や 8-bit fixed (RGBA) に下げる

❌ Problem: Offset Unit を切り替えると結果が大きく変わってしまう
✅ Solution:

Frames は整数フレーム、Seconds は秒、Fraction はバッファ全体に対する比率なので、Unit 変更時は数値も再設定する必要がある
Index はサンプル位置の直接指定であり、動画フレームに対しては Frames とほぼ同義として扱える
プロジェクト FPS を後から変更する予定がある場合は Seconds や Fraction を選んでおくと相対関係が崩れにくい

参考資料 📚

その他 🔗

公式リソース 📖

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

まる。

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

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

↓日常垢
Instagram：＠malmal0v0

概要 📖 – ピクセル毎に時間を歪める

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

TimeMachine Page 📋

Black Offset .blackoffset ⬛

Black Offset Unit .blackoffsetunit 📐

White Offset .whiteoffset ⬜

White Offset Unit .whiteoffsetunit 📐

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 🎨