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

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

HSV Adjust TOP の色相・彩度・明度調整機能を示すサムネイル

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

概要 📖 – 色相・彩度・明度を調整

HSV Adjust TOPは、入力画像の中で指定した色相範囲のピクセルだけを選択し、その色相・彩度・明度を調整して新しい色味で出力する TOPです。Start Color (基準色) と Hue Range (色相範囲) で「どの色を変えるか」を決め、Hue Offset / Saturation Multiplier / Value Multiplier で「どう変えるか」を指定します。Falloff 系パラメータを併用すると範囲外との境界が滑らかにブレンドされ、自然な色変換が可能になります。

主な用途 🎯

  • 特定色相だけを別色に置き換える色相シフト (青空をオレンジ空に等)
  • 映像全体の彩度・明度を一括で調整 (ビビッド化 / デサチュレート / モノクロ風)
  • Hue Offset の時間アニメーションによる動的色相回転 (サイケデリック演出)
  • ブランドカラー・演出カラーへの色補正 (素材の色味を演出意図に揃える)
  • クロマキー前段の色相整形 (背景色を分離しやすい色相にシフトして分離精度を向上)

データフロー 🔄

入力: 任意の TOP (画像)

Start Color と Hue Range / Saturation Range / Value Range で対象画素を絞り込み

Hue Falloff / Saturation Falloff / Value Falloff で範囲外との境界を滑らかにブレンド

Hue Offset / Saturation Multiplier / Value Multiplier で色変換を適用

出力: 色相・彩度・明度を調整した同解像度テクスチャ

Tips

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

まる。
まる。

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


パラメータ解説 ⚙️

HSV Tweak Page 📋

基準色 .startcolor 🎯

色相調整の基準となる色 (基準色) を指定

Start Color .startcolor 🎨
Start Color (基準色) — HSV 調整処理の中心となる色を指定します。この色を基準に Hue Range で指定した範囲内の色相だけが調整対象となります。公式 docs の例では cyan (色相値 180) を基準色に設定したケースが示されています。

色相調整 .hue 🌈

色相の選択範囲・境界ぼかし・回転量

Hue Range .huerange 📏
Hue Range (色相範囲) — Start Color から調整対象とする色相の幅。値 1 では基準色とまったく同じ色相のピクセルのみが対象、値 360 では全色相が対象になります。公式の例として「Start Color = 180 (cyan)、Hue Range = 20」の場合は色相 170〜190 の範囲が調整対象になります。

Hue Falloff .huefalloff 〰️
Hue Falloff (色相境界のぼかし) — Hue Range の外側との境界をどれだけ滑らかにブレンドするかを制御します。値を大きくするほど、調整対象の色相から非対象色相へのフェードが緩やかになり、境界線の段差が目立たなくなります。

Hue Offset .hueoffset ↪️
Hue Offset (色相回転量) — 上記で選択した色相に対して加算する色相のオフセット値 (0〜360)。公式 docs の例: 入力ピクセル色相 180 (cyan) に Hue Offset = 100 を加えると色相 280 (violet) に変換されます。absTime.seconds * 60 等の式を入れると時間とともに色相が回転するアニメーションが作れます。

彩度調整 .saturation 🎨

彩度の選択範囲・境界ぼかし・倍率

Saturation Range .saturationrange 📐
Saturation Range (彩度範囲) — Start Color の彩度を基準に調整対象とする彩度の範囲 (0〜1)。値を小さくすると基準色と近い彩度のピクセルだけが対象になり、値を大きくするとより広い彩度範囲が対象になります。

Saturation Falloff .saturationfalloff 〰️
Saturation Falloff (彩度境界のぼかし) — Saturation Range の外側への境界の柔らかさを制御します。値を上げると彩度範囲外との切れ目がなめらかにブレンドされます。

Saturation Multiplier .saturationmult ✖️
Saturation Multiplier (彩度倍率) — 上記で選択した彩度値に乗算される倍率。0 にすると選択範囲の彩度がゼロ (グレースケール化)、1 で現在の彩度を維持、2 で彩度が 2 倍になります。デサチュレート (彩度を下げる) やビビッド化 (彩度を上げる) はこのパラメータで制御します。

明度調整 .value 💡

明度の選択範囲・境界ぼかし・倍率

Value Range .valuerange 📏
Value Range (明度範囲) — Start Color の明度を基準に調整対象とする明度の範囲 (0〜1)。例えば暗い部分だけを対象にしたい場合は基準色を暗い値に、Value Range を狭めに設定します。

Value Falloff .valuefalloff 〰️
Value Falloff (明度境界のぼかし) — Value Range の外側との境界をどれだけ滑らかにブレンドするかを制御します。

Value Multiplier .valuemult 🔆
Value Multiplier (明度倍率) — 上記で選択した明度値に乗算される倍率。1 未満で暗くし、1 より大きい値で明るくします。ハイライトだけを暗く落とす、シャドウだけ持ち上げるといったゾーン別の明度補正に利用します。


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 ResolutionCustom 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 の処理を何パス繰り返すかの整数値。前回パスの結果が次回パスの入力になる。HSV Adjust 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) .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 → HSV Adjust TOP (Start Color=青, Hue Offset=180) → Out TOP

風景動画の空の色 (青系) だけをオレンジ系に置き換えるワークフロー。Start Color で対象の基準色を指定し、Hue Range で対象色相の幅を絞ったうえで、Hue Offset で色相を 180 度回して反対色相にシフトする。Hue Falloff を併用すれば空と地面・建物の境界が滑らかにブレンドされ自然な変換になる。

  1. Movie File In TOP で風景動画を読み込み、HSV Adjust TOP の入力に接続
  2. Start Color を空の色 (青系) に設定 (色相 = 約 210)
  3. Hue Range を 30〜60 程度に設定し、空に近い色相だけを対象化
  4. Hue Offset を 180 に設定して青系 → オレンジ系に色相回転
  5. Hue Falloff を上げて空と他の色の境界を滑らかにブレンド

Example 2: 彩度を下げて映画調に統一 🎞️

入力 TOP → HSV Adjust TOP (Hue Range=360, Saturation Multiplier=0.3) → 出力 TOP

映像全体の彩度を一括で下げて、落ち着いた色調・映画調のトーンに統一する基本ワークフロー。Hue Range を最大の 360 に設定して全色相を対象化し、Saturation Multiplier を 1 未満に下げることで、色相は保ったまま彩度だけを抑える表現が作れる。完全モノクロが目的なら Monochrome TOP の方が軽量。

  1. 入力 TOP (Movie File In TOP や Render TOP 等) を HSV Adjust TOP に接続
  2. Hue Range を 360 に設定し全色相を調整対象化
  3. Saturation Multiplier を 0.3〜0.5 に下げて彩度を抑える
  4. より強くデサチュレートしたい場合は Saturation Multiplier = 0 (完全グレースケール)

Example 3: 時間に応じた動的色相回転 🌈

Constant TOP → HSV Adjust TOP (Hue Offset = absTime.seconds * 60) → Out TOP

Hue Offset パラメータに時間ベースの式を入力して画面全体の色相を時間とともに回転させ、サイケデリックなアニメーション効果を作る応用例。Hue Range を 360 にすれば全色相が回転し、特定色相だけ回したい場合は Start Color と Hue Range で対象を絞る。

  1. Constant TOP もしくは任意の入力 TOP を HSV Adjust TOP に接続
  2. Hue Range を 360 に設定し全色相を回転対象化
  3. Hue Offset パラメータに absTime.seconds * 60 等の式を入力 (1 秒で 60 度回転)
  4. 回転速度は係数 (60 の部分) で調整、逆回転は負の値

関連オペレータ 🔗

類似機能OP 🔍

  • Level TOP — 明度・コントラスト・ガンマ等の輝度ベース色補正 (HSV ではなく RGB 直接調整)
  • Lookup TOP — ルックアップテーブル (LUT) による任意色変換 (HSV より自由度高、テーブル定義の手間あり)
  • Monochrome TOP — RGB → グレースケール変換専用 (HSV Adjust の Saturation=0 より高速・軽量)
  • Channel Mix TOP — RGB チャンネル間の線形混合 (色相回転を行列演算で表現)

組み合わせ推奨OP 🔄

  • RGB to HSV TOP — RGB → HSV 色空間変換 (HSV Adjust の内部処理を明示化したい場合の前段)
  • HSV to RGB TOP — HSV → RGB 色空間逆変換 (手動 HSV 操作後に表示用 RGB に戻す)
  • Tone Map TOP — HDR → SDR のトーンマッピング (HSV Adjust の前後どちらでも組み合わせ可)
  • Chroma Key TOP — HSV Adjust で背景色相を整えてから Chroma Key で分離すると精度向上
  • Composite TOP — 色補正後の複数レイヤ合成

前処理・後処理TOP 🎯


Info CHOP情報 📊

HSV Adjust TOPは Info CHOP による詳細情報取得に対応しています。出力テクスチャの resolution_w / resolution_h / aspectx / aspecty / depth / num_components / gpu_mem_used 等の標準 TOP メタチャンネルを取得します。

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: エラー数

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

よくある問題と解決策 🔧

❌ Problem: 期待した色相だけが変わらない / 関係ない色まで変わる
✅ Solution:

  • Start Color がターゲット色とずれていないか色相値を確認 (HSV 色相値は 0〜360)
  • Hue Range を狭めて対象色相を絞り込み、広い場合は Hue Falloff も併用して境界を滑らかに
  • Saturation Range / Value Range も併用して、彩度・明度の条件で対象を限定する

❌ Problem: 色変換後の境界に色のにじみ・段差が出る
✅ Solution:

  • Hue Falloff / Saturation Falloff / Value Falloff を上げて境界をブレンド
  • Pixel Format16-bit float (RGBA) 以上に上げてバンディング・量子化誤差を低減
  • 上流で Blur TOP を軽く適用してエッジ周辺の高周波ノイズを抑える

❌ Problem: GPU 負荷が高くフレームレートが落ちる
✅ Solution:

  • Output ResolutionHalf / Quarter に下げて処理画素数を削減
  • Pixel Format8-bit fixed (RGBA) に固定してメモリ帯域を抑える
  • Crop TOP 等で HSV 調整が必要な領域だけを切り出してから処理

❌ Problem: Hue Offset アニメーションでフレームごとにちらつく
✅ Solution:

  • Hue Offset の式が連続値 (absTime.seconds * 60 等) になっているか確認 (フレーム単位の離散ジャンプを避ける)
  • Hue Falloff を上げて色相境界の急変を緩和
  • 前段に Tone Map TOP を入れてダイナミックレンジを安定させる

参考資料 📚

その他 🔗

公式リソース 📖

この記事は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をコピーしました