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

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

概要 📖 – HSVをRGBに変換

HSV to RGB TOPは、入力された HSV 形式の画像 (色相・彩度・明度) をピクセル単位で RGB (赤・緑・青) に変換し、表示・書き出しに使える形に戻す TOPです。入力 TOP の各ピクセルを HSV 色空間として解釈し、RGB 値に変換した同解像度のテクスチャを出力します。RGB to HSV TOP や HSV Adjust TOP で HSV 編集を行った最終段に挿入し、表示・書き出し前に RGB へ戻す用途で使われます。OP 固有のパラメータはなく、共通ページのパラメータ (解像度・ピクセルフォーマット等) のみで動作します。

主な用途 🎯

HSV 色空間で編集した画像を表示用 RGB に戻す (HSV Adjust TOP や手動 HSV 操作の終端)
HSV 値 (色相・彩度・明度) をパラメータから直接生成して RGB 画像化する色生成器
HSV 編集パイプラインの最終段 (HSV → RGB 変換) として出力・書き出し前に挿入
シェーダや GLSL TOP で HSV 操作した結果を表示用 RGB テクスチャに変換
色相空間で生成したマスク・グラデーションを RGB として可視化・ファイル書き出し

データフロー 🔄

入力: HSV 形式の TOP (R=Hue, G=Saturation, B=Value)
 ↓
ピクセル単位で HSV → RGB 色空間変換
 ↓
出力: 同解像度の RGB 画像 (R=Red, G=Green, B=Blue)

Tips

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

リンク

まる。

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

パラメータ解説 ⚙️

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 の処理を何パス繰り返すかの整数値。HSV to RGB TOP の場合、1 回目で RGB に変換された後さらに HSV → RGB の解釈を繰り返すため、2 パス以上にすると意図しない色変換が発生する。基本は 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: HSV編集の最終段 🎨

Movie File In TOP → RGB to HSV TOP → HSV Adjust TOP → HSV to RGB TOP → Out TOP

素材 RGB 画像を RGB to HSV TOP で HSV 色空間に変換し、HSV Adjust TOP で色相シフト・彩度調整を行った後、HSV to RGB TOP で RGB に戻して書き出すカラーグレーディングの典型フロー。HSV to RGB TOP は HSV 編集パイプラインの最終段として「表示・出力用 RGB に戻す」役割を担う。

Movie File In TOP で素材動画/画像を読み込む
RGB to HSV TOP で HSV 色空間に変換 (R=Hue, G=Saturation, B=Value のチャンネル割り当てで出力される)
HSV Adjust TOP で色相シフト・彩度倍率等の HSV 編集を適用
HSV to RGB TOP に通して RGB に戻す
Out TOP で書き出し、または Composite TOP で他レイヤと合成

Example 2: HSVで虹色グラデ生成 🌈

Ramp TOP (横方向グラデ→R=Hue) + Constant TOP (G=1, B=1) → Reorder TOP → HSV to RGB TOP → Out TOP

横方向に 0→1 のグラデーションを Hue (R チャンネル) として与え、Saturation・Value を 1 固定にすると、HSV to RGB TOP の出力として鮮やかな虹色グラデーションが得られる。色相環の可視化や UI 用カラーピッカー素材、ライティング用テストパターンの生成に使える。

Ramp TOP で横方向 0→1 のグラデーションを生成
Reorder TOP で R チャンネルに Ramp の輝度、G・B チャンネルに固定値 1 を割り当て (R=Hue, G=Sat, B=Val として解釈される)
HSV to RGB TOP に入力すると鮮やかな虹色グラデーション (赤 → 黄 → 緑 → シアン → 青 → マゼンタ → 赤) が得られる
彩度を下げたい場合は G チャンネルの値を 0.5 等に、明度を下げたい場合は B チャンネルの値を下げる

Example 3: 色相マスクの鮮やかな可視化 🎯

Movie File In TOP → RGB to HSV TOP → Threshold TOP (Hue 範囲) → HSV to RGB TOP → Composite TOP

RGB to HSV で取り出した色相 (R チャンネル) を Threshold TOP で特定色相だけ残し、HSV to RGB で RGB として書き出すと「指定色相だけが鮮やかに見える」マスク画像を作れる。色相ベースのオブジェクト抽出のデバッグや、特定色相の領域を強調するエフェクトに便利。

Movie File In TOP の画像を RGB to HSV TOP で HSV 化
Threshold TOP で R チャンネル (Hue) を範囲フィルタし、対象外色相をマスクアウト
HSV to RGB TOP に戻して RGB として可視化 (対象色相のみ鮮やかに残る)
Composite TOP で元画像と重ねれば「指定色相だけハイライト」のエフェクトになる

Info CHOP情報 📊

HSV to RGB 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:

入力 TOP の B チャンネル (HSV の Value/明度) が 0 になっていないか確認 (V=0 だと結果は黒)
入力 TOP の G チャンネル (Saturation/彩度) が 0 だと色相は無視されグレースケールになる (R チャンネルの Hue を変えても色がつかない)
そもそも入力が HSV 形式でない場合は前段に RGB to HSV TOP を挟んで HSV 化してから渡す

❌ Problem: 予想と違う色相の RGB が出てくる
✅ Solution:

HSV to RGB TOP の入力は R=Hue, G=Saturation, B=Value のチャンネル割り当てが期待される。Reorder TOP で実際のチャンネル順を確認
Hue 値は 0〜1 (0=赤, 0.33=緑, 0.66=青, 1=赤に戻る) として扱われる。0〜360 度値を直接入れると循環し意図しない色相に
入力の RGB to HSV TOP 設定や上流の色補正で Hue がずれていないか順に切り分ける

❌ Problem: 境界に色のジャギー・段差・バンディングが出る
✅ Solution:

Pixel Format を 16-bit float (RGBA) 以上に上げて HSV 中間値の精度を確保 (8-bit 固定だと Hue の量子化で段差が出やすい)
前段の Hue グラデーション (Ramp TOP や Constant TOP) のピクセルフォーマットも 16-bit 化して上流の精度を揃える
上流で Blur TOP を軽く適用してエッジ周辺の高周波ノイズを抑える

❌ Problem: GPU 負荷・メモリ使用量が高い
✅ Solution:

Output Resolution を Half / Quarter に下げて処理画素数を削減 (色空間変換は全画素処理のため解像度に比例)
Pixel Format を 32-bit から 16-bit / 8-bit に下げてメモリ帯域を抑える (中間処理として十分な精度を選ぶ)
HSV 編集が小領域だけなら Crop TOP で対象領域だけ切り出してから HSV to RGB を適用し、後で Composite TOP で戻す

参考資料 📚

その他 🔗

公式リソース 📖

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

まる。

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

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

↓日常垢
Instagram：＠malmal0v0

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

概要 📖 – HSVをRGBに変換

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

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: HSV編集の最終段 🎨

Example 2: HSVで虹色グラデ生成 🌈

Example 3: 色相マスクの鮮やかな可視化 🎯

関連オペレータ 🔗

類似機能OP 🔍

組み合わせ推奨OP 🔄

前処理・後処理TOP 🎯

Info CHOP情報 📊

TOP固有情報 🖼️

汎用オペレータ情報 🔄

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

よくある問題と解決策 🔧

参考資料 📚

その他 🔗

公式リソース 📖

その他の記事はこちら

概要 📖 – HSVをRGBに変換

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

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: HSV編集の最終段 🎨

Example 2: HSVで虹色グラデ生成 🌈

Example 3: 色相マスクの鮮やかな可視化 🎯

関連オペレータ 🔗

類似機能OP 🔍

組み合わせ推奨OP 🔄

前処理・後処理TOP 🎯

Info CHOP情報 📊

TOP固有情報 🖼️

汎用オペレータ情報 🔄

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

よくある問題と解決策 🔧

参考資料 📚

その他 🔗

公式リソース 📖

その他の記事はこちら

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` 🎨