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

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

Monochrome TOP のモノクロ変換機能を示す図

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

概要 📖 – カラー画像を白黒に変換

Monochrome TOPは、入力画像の色情報を取り除き、グレースケールに変換する TOPです。残す色の量を 0 から 1 まで連続的に指定でき、変換に使うチャンネルも選べます。

主な用途 🎯

  • カラー画像のグレースケール(白黒)変換
  • 輝度ベースのモノクロ化による陰影表現
  • マスク・しきい値処理に使う単一チャンネルの生成
  • 色を残す量を連続的に調整した部分的退色エフェクト
  • 特定チャンネル(赤・緑・青・アルファ)を抜き出した白黒化

データフロー 🔄

入力: カラー画像(RGBA)

モノクロ変換処理(変換方式と残色量に応じた計算)

出力: グレースケール画像

Tips

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

まる。
まる。

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


パラメータ解説 ⚙️

Monochrome Page 📁

退色量 .mono 🎚️

Monochrome .mono 🎚️
Monochrome (退色量) — 画像に残す色の量を調整します。
– 0 で元のフルカラー、1 で完全なグレースケールになります。

RGB変換方式 .rgb 🎛️

RGB (RGB変換方式) — RGB チャンネルを白黒に変換する際の計算方法を選択します。

項目 内部名 説明
Luminance .luminance 画像の輝度値を使って RGB チャンネルを白黒に変換
Red .red 赤チャンネルの値を使って白黒に変換
Green .green 緑チャンネルの値を使って白黒に変換
Blue .blue 青チャンネルの値を使って白黒に変換
Alpha .alpha アルファチャンネルの値を使って白黒に変換
RGB Average .rgbaverage RGB 3 チャンネルの平均値を使って白黒に変換
RGBA Average .average RGBA 4 チャンネルの平均値を使って白黒に変換

Alpha変換方式 .alpha 🎛️

Alpha (Alpha変換方式) — アルファチャンネルを白黒に変換する際の計算方法を選択します。

項目 内部名 説明
Luminance .luminance 画像の輝度値を使ってアルファチャンネルを白黒に変換
Red .red 赤チャンネルの値を使ってアルファチャンネルを白黒に変換
Green .green 緑チャンネルの値を使ってアルファチャンネルを白黒に変換
Blue .blue 青チャンネルの値を使ってアルファチャンネルを白黒に変換
Alpha .alpha アルファチャンネルの値を使ってアルファチャンネルを白黒に変換
RGB Average .rgbaverage RGB 3 チャンネルの平均値を使ってアルファチャンネルを白黒に変換
RGBA Average .average RGBA 4 チャンネルの平均値を使ってアルファチャンネルを白黒に変換

実践アイデア 💡

Example 1: 写真のモノクロ加工 🎞️

Movie File In TOP → Monochrome TOP (Luminance) → Out TOP

Movie File In TOP で読み込んだカラー写真を Monochrome TOP の輝度ベース変換に通し、自然な明暗バランスの白黒写真に仕上げる基本フローです。

  1. Movie File In TOP でカラー画像を読み込む
  2. Monochrome TOP を接続し RGB 変換方式を Luminance に設定
  3. Monochrome パラメータを 1 にしてフルグレースケールにする
  4. Out TOP に出力して白黒写真として確認

Example 2: 部分退色エフェクト 🎚️

入力 TOP → Monochrome TOP (Monochrome=0.6) → Composite

Monochrome パラメータを中間値に設定し、元のカラーを一部だけ残した退色トーンを作る演出です。映像の雰囲気をレトロに寄せたいときに使えます。

  • 入力画像を Monochrome TOP に接続
  • Monochrome パラメータを 0.6 前後に設定して色を部分的に残す
  • 後段の合成ノードで他のレイヤーと重ねて質感を調整

Example 3: 輝度マスクの生成 🎯

入力 TOP → Monochrome TOP (Luminance) → Threshold TOP → Mask

Monochrome TOP で輝度ベースの単一チャンネルを作り、後段のしきい値処理に渡してマスク画像を生成する用途です。明るい領域だけを抜き出す合成に役立ちます。

  • 入力画像を Monochrome TOP の Luminance 変換に通す
  • 出力を Threshold TOP に渡してマスク化
  • 得られたマスクを合成のアルファとして利用

関連オペレータ 🔗

類似機能OP 🔍

  • Luma Level TOP — 輝度のレベル補正に特化した白黒系オペレータ
  • RGB to HSV TOP — 彩度を 0 にして疑似的にモノクロ化する別アプローチ

組み合わせ推奨OP 🔄

  • Level TOP — 後段でコントラスト・明るさを調整
  • Threshold TOP — 白黒出力を二値化してマスク生成
  • Composite TOP — 退色レイヤーを他の画像と合成

前処理・後処理TOP 🎯


Info情報 📊

Monochrome TOP の解像度やピクセルフォーマット等の詳細情報は Info CHOP / Info DAT で取得できます。

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

解像度・フォーマット 📐

  • resx / resy: 出力画像の横・縦の解像度(ピクセル数)
  • aspectx / aspecty: 出力画像のアスペクト比

クック統計 ⏱️

  • cook_time: 1 フレームあたりの処理にかかった時間(ミリ秒)
  • total_cooks: このオペレータが処理された累計回数

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

よくある問題と解決策 🔧

❌ Problem: 完全に白黒にならない
✅ Solution:

  • Monochrome パラメータが 1 になっているか確認(中間値だと色が残ります)
  • 後段で再び色を足すオペレータが無いか接続を確認

❌ Problem: 思った明暗にならない
✅ Solution:

  • RGB 変換方式を Luminance 以外(Red / Green / Blue 等)に切り替えて見え方を比較
  • 前段に Level TOP を入れて明るさ・コントラストを整える

❌ Problem: アルファチャンネルが意図せず変わる
✅ Solution:

  • Alpha 変換方式の設定を確認し、不要なら元のアルファを保つ設定を選ぶ
  • Channel Mask で処理対象チャンネルを絞り込む

参考資料 📚

その他 🔗

公式リソース 📖

関連記事 🔗

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