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

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

概要 📖 – 6面画像を相互変換する

Cube Map TOPは、6 枚の個別画像または Vertical / Horizontal Cross 形式の画像をキューブマップテクスチャに変換する TOPです。Mode パラメータで One Input Per Side / Vertical Cross / Horizontal Cross の各方向に変換でき、生成されたキューブマップは Environment Light COMP や Phong MAT の environment map スロットに供給して Skybox / 反射 / IBL を構築できます。

主な用途 🎯

6 枚の個別画像 (PosX / NegX / PosY / NegY / PosZ / NegZ) を 1 枚のキューブマップテクスチャに統合
Vertical Cross / Horizontal Cross 形式の HDR 画像をキューブマップへ変換
キューブマップから Vertical Cross / Horizontal Cross 形式への書き出し変換 (アセット保存用)
Skybox / 環境マップとして Environment Light COMP や Phong MAT に供給するキューブマップの生成
IBL (Image Based Lighting) / 反射マッピング用 environment cubemap の前段準備

データフロー 🔄

入力: 6 inputs (One Input Per Side mode) または 1 input (Cross mode)
 ↓
Mode で変換方式を選択
 ↓
6 面の順序: PosX → NegX → PosY → NegY → PosZ → NegZ
 ↓
出力: キューブマップテクスチャ または Vertical / Horizontal Cross 画像

Tips

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

リンク

まる。

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

パラメータ解説 ⚙️

Cube Map Page 📋

Mode `.mode` 🎛️

キューブマップの組み立て方法 (6 面個別入力か Cross 形式変換かの切替)

項目	内部名	説明
One Input Per Side to Cube Map	`.onepersidetocubemap`	6 個の入力を各面に個別割り当ててキューブマップを生成。入力順序は `Positive X` / `Negative X` / `Positive Y` / `Negative Y` / `Positive Z` / `Negative Z`
Vertical Cross to Cube Map	`.verticalcrosstocubemap`	Vertical Cross 形式の 1 枚画像 (十字配置、縦長 3:4) をキューブマップへ変換
Cube Map to Vertical Cross	`.cubemaptoverticalcross`	キューブマップ入力を Vertical Cross 形式の 1 枚画像へ書き出し変換
Horizontal Cross to Cube Map	`.horizontalcrosstocubemap`	Horizontal Cross 形式の 1 枚画像 (十字配置、横長 4:3) をキューブマップへ変換
Cube Map to Horizontal Cross	`.cubemaptohorizontalcross`	キューブマップ入力を Horizontal Cross 形式の 1 枚画像へ書き出し変換

※ 注意: One Input Per Side モードでは 6 入力の順序が PosX / NegX / PosY / NegY / PosZ / NegZ で固定です。順序を間違えると面の向きがずれ、Skybox や反射が破綻するため必ずこの順で接続してください。

引用元: 公式 docs

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 倍
Custom Resolution	`.custom`	`Resolution` パラメータで任意指定

Resolution `.resolution` 📐

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

Resolution W: 出力幅 (ピクセル単位)。Output Resolution = Custom Resolution の時のみ有効
Resolution H: 出力高 (ピクセル単位)。同上

Output Aspect `.outputaspect` 📏

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

項目	内部名	説明
Use Input	`.useinput`	入力 TOP のアスペクトを継承
Custom Aspect	`.custom`	`Aspect1` / `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`	ネイティブ解像度のまま等倍表示

Pixel Format `.format` 🎨

出力テクスチャのピクセルフォーマット

項目	内部名	説明
Use Input	`.useinput`	入力 TOP のフォーマットを継承
8-bit fixed (RGBA)	`.rgba8fixed`	標準 8 ビット固定小数 RGBA (LDR 環境マップ向け)
sRGB 8-bit fixed (RGBA)	`.srgba8fixed`	sRGB ガンマ補正済 8 ビット RGBA
16-bit float (RGBA)	`.rgba16float`	16 ビット浮動小数 RGBA (HDR 環境マップ向け、IBL に推奨)
32-bit float (RGBA)	`.rgba32float`	32 ビット浮動小数 RGBA (最高精度 HDR)
11-bit float (RGB)	`.rgb11float`	11-11-10 ビット浮動小数 RGB (HDR 軽量、アルファなし)

実践アイデア 💡

Example 1: 6 面個別画像から Skybox 用キューブマップを構築 🌌

Movie File In TOP × 6 (PosX/NegX/PosY/NegY/PosZ/NegZ) → Cube Map TOP (Mode=One Input Per Side) → Environment Light COMP

6 面個別の HDR 画像を Movie File In TOP で読み込み、Cube Map TOP の One Input Per Side モードで 1 枚のキューブマップに統合。これを Environment Light COMP の environment map スロットに渡すと、シーン全体に環境照明と Skybox が反映される。

PosX / NegX / PosY / NegY / PosZ / NegZ の 6 面画像を Movie File In TOP 6 ノードで読み込み (HDR 推奨は .exr / .hdr)
Cube Map TOP を作成し Mode = One Input Per Side to Cube Map に設定
6 入力を必ず PosX → NegX → PosY → NegY → PosZ → NegZ の順に接続 (順序を間違えると面が入れ替わる)
Pixel Format = 16-bit float (RGBA) 以上に設定して HDR 範囲を保持
Environment Light COMP の Environment Map パラメータに Cube Map TOP の出力をドラッグ&ドロップで参照

Example 2: Vertical Cross HDR 画像からキューブマップへ変換 ✚

Movie File In TOP (vertical cross HDR) → Cube Map TOP (Mode=Vertical Cross to Cube Map) → Phong MAT (env map)

Paul Debevec の Light Probe Gallery 等で配布されている Vertical Cross 形式の HDR 環境マップを 1 枚 1 ノードでキューブマップ化し、Phong MAT の Environment Map スロットに繋いで金属マテリアルの反射に使う。

Vertical Cross 形式の HDR ファイル (.hdr / .exr、縦長 3:4 比率) を Movie File In TOP で読み込み
Cube Map TOP を接続し Mode = Vertical Cross to Cube Map に設定
Pixel Format = 16-bit float (RGBA) で HDR 値を保持
Phong MAT の Environment Map パラメータに Cube Map TOP 出力を参照させて反射マッピングを適用

Example 3: キューブマップを Horizontal Cross 画像に書き出し 📤

Render TOP (renderpasses=6, cube map output) → Cube Map TOP (Mode=Cube Map to Horizontal Cross) → Movie File Out TOP

Render TOP で 6 方向にレンダリングしたキューブマップを Horizontal Cross 形式の 1 枚画像に展開し、外部アセットとして書き出す。プレビューや他ツール (Blender / Unity 等) との受け渡しに便利な汎用フォーマット。

Render TOP でキューブマップ出力をレンダリング (Camera 6 方向 / Render Passes = 6 等)
Cube Map TOP を接続し Mode = Cube Map to Horizontal Cross に設定
出力を Movie File Out TOP に繋いで .exr / .png でファイル化

Info CHOP情報 📊

Cube Map 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: Skybox の面の向きがずれる / 天地が逆になる
✅ Solution:

One Input Per Side モードの 6 入力順序が PosX → NegX → PosY → NegY → PosZ → NegZ になっているか確認 (1 つでもずれると面が入れ替わる)
Vertical / Horizontal Cross 入力では十字配置の比率 (縦長 3:4 / 横長 4:3) が公式仕様と一致しているか確認
各面画像の上下方向 (Up vector) が TouchDesigner の座標系 (Y up) に一致しているか確認、必要なら前段に Flip TOP を挿入

❌ Problem: HDR の Cross 画像を読み込んでも値がクリップされる
✅ Solution:

Pixel Format を 16-bit float (RGBA) 以上に設定 (8-bit fixed では HDR 範囲を保持できない)
Movie File In TOP 側も Pixel Format = 16-bit float (RGBA) 以上を指定し、ソースの .hdr / .exr 値が劣化していないか確認
下流の MAT / Light COMP 側も sRGB 8-bit ではなく Linear / float フォーマットで受けているか確認

❌ Problem: Environment Light COMP に繋いでも反射が黒くなる
✅ Solution:

Cube Map TOP の出力が cube map texture フォーマットになっているか Info CHOP で確認 (Cross 出力モードでは平面テクスチャ扱いで使えない)
Environment Light COMP の Environment Map パラメータに Cube Map TOP のパスが正しく入っているか確認
PBR MAT 等の対応 MAT を使い、Environment Light リファレンスをマテリアル側で参照しているか確認

❌ Problem: 面の境界に継ぎ目 (シーム) が見える
✅ Solution:

Input Smoothness = Interpolate Pixels に設定して境界を滑らかに
Cross 形式入力の場合は十字配置の各面が正確にピクセル境界で揃っているか確認 (1 ピクセルのずれでシーム発生)
ソース 6 面画像同士の露光・ホワイトバランスが揃っているか確認、必要なら前段で Level TOP でマッチング

参考資料 📚

その他 🔗

公式リソース 📖

外部リソース 🌐

Paul Debevec Light Probe Gallery (Cross 形式 HDR サンプル)

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

まる。

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

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

↓日常垢
Instagram：＠malmal0v0

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

概要 📖 – 6面画像を相互変換する

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

Cube Map Page 📋

Mode `.mode` 🎛️

Common Page 🔧

Output Resolution `.outputresolution` 🖼️

Resolution `.resolution` 📐

Output Aspect `.outputaspect` 📏

Input Smoothness `.inputfiltertype` 🎚️

Fill Viewer `.fillmode` 🖥️

Pixel Format `.format` 🎨

実践アイデア 💡

Example 1: 6 面個別画像から Skybox 用キューブマップを構築 🌌

Example 2: Vertical Cross HDR 画像からキューブマップへ変換 ✚

Example 3: キューブマップを Horizontal Cross 画像に書き出し 📤

関連オペレータ 🔗

類似機能OP 🔍

組み合わせ推奨OP 🔄

前処理・後処理TOP 🎯

Info CHOP情報 📊

TOP固有情報 🖼️

汎用オペレータ情報 🔄

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

よくある問題と解決策 🔧

参考資料 📚

その他 🔗

公式リソース 📖

外部リソース 🌐

その他の記事はこちら

概要 📖 – 6面画像を相互変換する

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

Cube Map Page 📋

Mode .mode 🎛️

Common Page 🔧

Output Resolution .outputresolution 🖼️

Resolution .resolution 📐

Output Aspect .outputaspect 📏

Input Smoothness .inputfiltertype 🎚️

Fill Viewer .fillmode 🖥️

Pixel Format .format 🎨

実践アイデア 💡

Example 1: 6 面個別画像から Skybox 用キューブマップを構築 🌌

Example 2: Vertical Cross HDR 画像からキューブマップへ変換 ✚

Example 3: キューブマップを Horizontal Cross 画像に書き出し 📤

関連オペレータ 🔗

類似機能OP 🔍

組み合わせ推奨OP 🔄

前処理・後処理TOP 🎯

Info CHOP情報 📊

TOP固有情報 🖼️

汎用オペレータ情報 🔄

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

よくある問題と解決策 🔧

参考資料 📚

その他 🔗

公式リソース 📖

外部リソース 🌐

その他の記事はこちら

Mode `.mode` 🎛️

Output Resolution `.outputresolution` 🖼️

Resolution `.resolution` 📐

Output Aspect `.outputaspect` 📏

Input Smoothness `.inputfiltertype` 🎚️

Fill Viewer `.fillmode` 🖥️

Pixel Format `.format` 🎨