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

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

Render TOP の 3D レンダリング機能を示すサムネイル

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

概要 📖 – 3Dシーンを画像に変換する

Render TOPは、Camera・Light・Geometry を組み合わせた 3D シーンをラスタライズして 2D テクスチャに描画する TouchDesigner の中核 3D レンダリング TOPです。Render Mode で 2D・Cube Map・Fish-Eye・UV Unwrap 等の投影方式を切り替え、Anti-Alias / Transparency / MRT (複数カラーバッファ) / Depth Peel で高品質・高機能なレンダリングを実現します。

主な用途 🎯

  • Camera COMP / Light COMP / Geometry COMP を組み合わせた 3D シーンのリアルタイムレンダリング
  • Render Mode 切替で 2D / Cube Map / Fish-Eye (180) / Dual Paraboloid / UV Unwrap / Cube Map (Omnidirectional Stereo) の各種投影に対応
  • Anti-Alias (1x〜32x MSAA) と Transparency (Sorted / Order Independent / Alpha-to-Coverage) で品質と表現を制御
  • # of Color Buffers (MRT) で 1 パスから複数 RGBA 出力 (normal / position / ID 等) を生成し GLSL MAT と連携
  • Override Material / Draw Depth Only / Display Overdraw 等のデバッグ・前処理パス支援機能

データフロー 🔄

入力: Camera COMP + Light COMP + Geometry COMP (シーン定義)

Render TOP (Render Mode / Anti-Alias / Transparency / MRT / Crop 等を適用してラスタライズ)

出力: 2D テクスチャ (RGBA + 深度バッファ、必要なら複数カラーバッファ)

Tips

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

まる。
まる。

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


パラメータ解説 ⚙️

Render Page 📋

シーン要素の指定 🎬

レンダリング対象となる Camera・Geometry・Light の指定

Camera(s) .camera 📷
シーンをのぞき込む対象 Camera COMP のパス。複数指定すると各カメラ画像を Render Select TOP で個別に取り出せる

Geometry .geometry 🧊
レンダリング対象の Geometry COMP のパス。geo*geo* ^geo7 のような Pattern Matching でまとめて指定可能

Lights .lights 💡
シーンを照らす Light COMP のパス。同じく Pattern Matching に対応

Multi-Camera Hint .multicamerahint 🎛️

複数カメラ使用時の Multi-Camera Rendering 最適化挙動を選択するメニューパラメータ

項目 内部名 説明
Automatic .automatic GPU 構成に基づき Multi-Camera Rendering を自動で有効化 (デフォルト)
Off (One Pass Per Camera) .off Multi-Camera Rendering を無効化し、各カメラごとに 1 パスでレンダリング
X-Offset Stereo Cameras .stereocameras X 軸方向のみ変位するステレオカメラペア (VR ヘッドセット用途) として扱い、高速化

Anti-Alias .antialias 🪞

シーンのアンチエイリアシング (MSAA) レベルを選択するメニューパラメータ。値が大きいほど高品質だが GPU メモリ消費も増加

項目 内部名 説明
1x (Off) .aa1 アンチエイリアシング無効
2x .aa2 2 サンプル MSAA
4x .aa4 4 サンプル MSAA
8x (Medium) .aa8mid 8 サンプル MSAA (中品質)
8x (High) .aa8high 8 サンプル MSAA (高品質)
16x (Low) .aa16low 16 サンプル MSAA (低品質モード)
16x (Medium) .aa16mid 16 サンプル MSAA (中品質モード)
16x (High) .aa16high 16 サンプル MSAA (高品質モード)
32x .aa32 32 サンプル MSAA (最高品質、GPU メモリ消費大)

背景色と Pre-Multiply 🎨

背景色 (Camera COMP 側 BG との合成) と Pre-Multiply RGB by Alpha:

  • Background Color: bgcolor (bgcolorr, bgcolorg, bgcolorb, bgcolora) — Camera COMP 側の Background Color と合成されて最終的な背景色になる R/G/B/A 各成分
  • Pre-Multiply RGB by Alpha: premultrgbbyalpha — オンにすると出力 RGB をアルファ値で事前乗算する (合成系 TOP に流す前提の処理に便利)

Render Mode .rendermode 🎛️

レンダリングの投影方式を選択するメニューパラメータ。通常の 2D 以外にキューブマップや魚眼など複数の特殊投影が可能

項目 内部名 説明
2D .render2d 標準的な 2D レンダリング (デフォルト)
Cube Map .cubemap 90 度 FOV で 6 方向 (±X/±Y/±Z) を順次レンダリング。Phong MAT の環境マップや Environment Light COMP で利用
Fish-Eye (180) .fisheye180 180 度 FOV の魚眼投影として 1 回でレンダリング (直線が歪むため細分化された Geometry 推奨)
Dual Paraboloid .dualparaboloid 前方・後方の 2 パスを 180 度ずつパラボラ投影 (レガシーモード)
UV Unwrap .uvunwrap Geometry の UV 座標に沿ってジオメトリを画像空間に展開して描画 (テクスチャベイク等に使用)
Cube Map (Omnidirectional Stereo) .cubemapods ステレオ 360 映像収録用にキューブマップを 2 眼分レンダリング (Render Select TOP の Camera Index で第 2 眼を取得)

Cube Map サイド指定 🧭

Cube Map レンダリング時に描画する正方向・負方向の面選択:

  • Positive Sides: posside (possidex, possidey, possidez) — Cube Map の +X / +Y / +Z 面をそれぞれ描画するかのトグル
  • Negative Sides: negside (negsidex, negsidey, negsidez) — Cube Map の -X / -Y / -Z 面をそれぞれ描画するかのトグル

UV Unwrap SOP Coord .uvunwrapcoord 🎛️

Render Mode が UV Unwrap で SOP 入力を扱う場合に、どのテクスチャレイヤ座標で展開するかを選択するメニューパラメータ

項目 内部名 説明
Texture Layer 0 (uv[0-2]) .uv0 Texture Layer 0 (uv[0-2]) を展開対象に使用
Texture Layer 1 (uv[3-5]) .uv1 Texture Layer 1 (uv[3-5]) を展開対象に使用
Texture Layer 2 (uv[6-8]) .uv2 Texture Layer 2 (uv[6-8]) を展開対象に使用
Texture Layer 3 (uv[9-11]) .uv3 Texture Layer 3 (uv[9-11]) を展開対象に使用
Texture Layer 4 (uv[12-14]) .uv4 Texture Layer 4 (uv[12-14]) を展開対象に使用
Texture Layer 5 (uv[15-17]) .uv5 Texture Layer 5 (uv[15-17]) を展開対象に使用
Texture Layer 6 (uv[18-20]) .uv6 Texture Layer 6 (uv[18-20]) を展開対象に使用
Texture Layer 7 (uv[21-23]) .uv7 Texture Layer 7 (uv[21-23]) を展開対象に使用

UV Unwrap POP Coord Attribute .uvunwrapcoordattrib 🏷️

POP 入力時の UV 展開対象テクスチャ座標属性名:

  • UV Unwrap POP Coord Attribute: uvunwrapcoordattrib — POP 側で UV 展開対象として扱う テクスチャ座標属性の名前

Transparency .transparency 🎛️

透明ジオメトリの正しい奥行き順処理方式を選択するメニューパラメータ

項目 内部名 説明
Sorted Draw with Blending .sortedblending ジオメトリを奥から手前にソートして通常ブレンドで描画
Order Independent Transparency .orderind Depth Peel を使用した順序非依存の透明合成 (Transparency/Peel Layers のパス数で品質を制御)
Alpha-to-Coverage .alphatocoverage MSAA サンプルカバレッジで擬似的に透明度を表現 (アンチエイリアスと併用、植生・髪の毛等の硬輪郭半透明に好適)

Depth Peel / Peel Layers 🧅

Depth Peel と OIT (Order Independent Transparency) のレイヤ数:

  • Depth Peel: depthpeel — 通常レンダ後、ピクセルごとに 1 段深い (隠れていた) ピクセルを別カラーバッファに分離保持する深度ピーリングを有効化。Render Select TOP で各レイヤを取得可能
  • Transparency/Peel Layers: transpeellayers — Order Independent Transparency / Depth Peel で何パス分のレイヤを生成するかの整数値

Advanced Page 📁

レンダリング有効化とパルス ⚙️

毎フレームのレンダ実行・単発レンダ要求・ディザリング:

  • Render: render — レンダリングを毎フレーム実行するかのトグル (1 = on / 0 = off)
  • Render Pulse: renderpulse — Render がオフのときに、このボタンを押した瞬間だけ 1 フレームレンダリング
  • Dither: dither — 8 ビットディスプレイで発生するバンディング軽減のためのディザリング

出力バッファ最適化 🚀

カラー / 深度バッファ生成と MRT (Multiple Render Targets) 設定:

  • Color Output Needed: coloroutputneeded — 色出力が不要な前処理パス向け最適化。オフでオフスクリーンバッファから TOP テクスチャへのコピーを省略
  • Draw Depth Only: drawdepthonly — 色を書かず深度バッファのみ描画。Depth TOP と組み合わせて深度マップ生成
  • # of Color Buffers: numcolorbufs — Multiple Render Targets (MRT) のバッファ数。GLSL 3.3+ では layout(location = N) out で複数 RGBA を同時出力できる
  • Allow Blending for Extra Buffers: allowbufblending — MAT 設定のブレンドを 2 番目以降の追加バッファにも適用するか (normal / position 用バッファは通常オフ)

Depth Buffer Format .depthformat 🎛️

深度バッファのビット精度を選択するメニューパラメータ

項目 内部名 説明
24-bit Fixed-Point .fixed24 24 ビット固定小数の深度バッファ (シングルチャンネル)
32-bit Floating-Point .float32 32 ビット浮動小数の深度バッファ (高精度、シャドウマップ等に好適)

Cull Face .cullface 🎛️

カリング (描画から除外する面の向き) を選択するメニューパラメータ

項目 内部名 説明
Neither .neither 両面を描画 (カリングなし)
Back Faces .backfaces 裏面を描画から除外 (一般的なソリッドモデル向け)
Front Faces .frontfaces 表面を描画から除外 (内面表示用途)
Both Faces .bothfaces 両面を除外 (描画されない、デバッグ用途)

Override Material .overridemat 🎨

全 Geometry に強制適用するマテリアル (前処理パス向け):

  • Override Material: overridemat — 指定すると、シーン内の全 Geometry が個別の MAT 設定を無視してこのマテリアルで描画される。normal / depth / ID 出力等の前処理パスで便利

Polygon Depth Offset 🪜

Polygon Depth Offset (Z-Fighting 対策・シャドウバイアス):

  • Polygon Depth Offset: polygonoffset — ポリゴンを深度方向にわずかにずらす機能を有効化 (重なり合う 2 ポリゴンの Z-Fighting 対策、シャドウマップでも重要)
  • Offset Factor: polygonoffsetfactor — 視線に対する面の傾きに応じた Z オフセット係数
  • Offset Units: polygonoffsetunits — Z 値への一定オフセット量

Display Overdraw 🔬

Display Overdraw (オーバードロー可視化デバッグ):

  • Display Overdraw: overdraw — シーン内のオーバードローを可視化するデバッグ表示 (Early Depth-Test の Analyzing Overdraw セクション参照)
  • Overdraw Limit: overdrawlimit — オーバードロー値を量子化する上限カウント (色階調がオーバードロー回数を表す)

Crop Page ✂️

Crop 範囲 📐

レンダ画像の各端 (Left / Right / Bottom / Top) のクロップ位置:

  • Crop Left: cropleft — レンダ画像の左端位置
  • Crop Right: cropright — レンダ画像の右端位置
  • Crop Bottom: cropbottom — レンダ画像の下端位置
  • Crop Top: croptop — レンダ画像の上端位置

Crop Unit .cropleftunit 🎛️

Crop 各端の単位 (4 つの Crop パラメータ共通のメニュー)。各端ごとに cropleftunit / croprightunit / cropbottomunit / croptopunit として個別に指定可能

項目 内部名 説明
Pixels (P) .pixels ピクセル単位で指定
Fraction (F) .fraction 0-1 の比率で指定 (画像幅・高さに対する割合)
Fraction Aspect (A) .fractionaspect アスペクト比を考慮した 0-1 比率で指定

Vectors Page 📁

Vector (シェーダ Uniform) .vec 🧮

GLSL MAT に渡す Uniform 名と値のペアシーケンス:

  • Vector: vec — Uniform 名と値ペアのシーケンス (動的に追加可能)
  • Uniform Name: vec0name — シェーダ側で宣言した Uniform 変数名
  • Value: vec0value (vec0valuex, vec0valuey, vec0valuez, vec0valuew) — Uniform に代入する 4 成分値

Samplers Page 📁

Sampler 基本設定 🎚️

GLSL MAT が参照するテクスチャサンプラ (Uniform 名・対象 TOP):

  • Uniform Name (uni0name): uni0name — シェーダ側で宣言した Uniform 名
  • Sampler: sampler — Uniform 名・TOP 参照・サンプリング設定をまとめたシーケンス
  • Sampler Name: sampler0name — GLSL プログラム側でこの TOP をサンプリングするときの名前 (sampler2D / sampler3D として TOP の次元と一致させる)
  • TOP: sampler0top — Sampler Name から参照される対象 TOP のパス

Extend U / V / W .sampler0extendu 🎛️

テクスチャ座標がサンプラ外に出たときの拡張方式 (U / V / W 各軸共通のメニュー)

項目 内部名 説明
Hold .hold 端のピクセル値で固定 (Clamp to Edge)
Zero .zero 範囲外を 0 として扱う (Border)
Repeat .repeat テクスチャをタイリングして繰り返す
Mirror .mirror ミラー反転してタイリング

Filter .sampler0filter 🎚️

サンプリングフィルタ方式を選択するメニューパラメータ

項目 内部名 説明
Nearest .nearest 最近傍ピクセルサンプリング
Linear .linear バイリニア / トライリニア補間
Mipmap Linear .mipmaplinear ミップマップ線形補間

Anisotropic Filter .sampler0anisotropy 🎛️

異方性フィルタリングのレベルを選択するメニューパラメータ

項目 内部名 説明
Off .off 異方性フィルタ無効
2x .2x 2x 異方性
4x .4x 4x 異方性
8x .8x 8x 異方性
16x .16x 16x 異方性 (最高品質)

Images Page 📁

Image 基本設定 🖼️

GLSL MAT 向け Image 出力の基本パラメータ:

  • Image: image — GLSL MAT が利用できる Image 出力のシーケンスパラメータ
  • Name: image0name — Image の Uniform 名
  • Array Length: image0arraylength — 1 以上を指定すると配列 Uniform として宣言 (シェーダ内で [] アクセス)。0 なら非配列
  • Resolution: image0res — Image の解像度 (W × H)
  • Depth: image0depth — 出力 Type が 2D Texture Array / 3D Texture のときの深度

Format .image0format 🎛️

Image 出力のピクセルフォーマットを選択するメニューパラメータ

項目 内部名 説明
Use Output .useoutput Render TOP メインテクスチャと同じピクセルフォーマット
8-bit fixed (RGBA) .rgba8fixed 8 ビット固定小数 RGBA
sRGB 8-bit fixed (RGBA) .srgba8fixed sRGB 8 ビット固定小数 RGBA
16-bit float (RGBA) .rgba16float 16 ビット浮動小数 RGBA
32-bit float (RGBA) .rgba32float 32 ビット浮動小数 RGBA
10-bit RGB, 2-bit Alpha, fixed (RGBA) .rgb10a2fixed 10-10-10-2 ビット固定小数
16-bit fixed (RGBA) .rgba16fixed 16 ビット固定小数 RGBA
11-bit float (RGB), Positive Values Only .rgba11float 11-11-10 ビット浮動小数 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
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 ビット浮動小数モノクロ+アルファ

Type .image0type 🎛️

Image 出力のテクスチャタイプを選択するメニューパラメータ

項目 内部名 説明
2D Texture .texture2d 標準 2D テクスチャ
2D Texture Array .texture2darray 2D テクスチャ配列 (Depth で枚数指定)
Cube Texture .texturecube キューブテクスチャ

Access .image0access 🎛️

Image 出力テクスチャへのアクセス権限を選択するメニューパラメータ

項目 内部名 説明
Write Only .writeonly 書き込み専用 (シェーダ内で読み出さない場合のデフォルト)
Read-Write .readwrite 同一フレーム内で読み書き両方を許可 (シェーダ内で前パスの値を参照する場合)

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 の処理を何パス繰り返すかの整数値。前回パスの結果が次回パスの入力になる。ブラー反復やフィードバック処理に利用

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: Camera+Light+Geoの基本描画 🎬

Camera COMP + Light COMP + Geometry COMP → Render TOP → Out TOP / Window COMP

TouchDesigner の 3D レンダリングの最小構成。Camera / Light / Geometry を 1 つずつ用意し、Render TOP の Camera(s) / Lights / Geometry パラメータでそれぞれを指すだけで 2D テクスチャとしてのレンダ結果が得られる。Anti-Alias と Background Color を調整すれば仕上がりがぐっと良くなる。

  1. Camera COMP / Light COMP / Geometry COMP をネットワークに配置 (Geometry には Torus SOP 等の中身を入れる)
  2. Render TOP を作成し、Camera(s) / Lights / Geometry にそれぞれのパスを入力
  3. Anti-Alias4x8x (Medium) に設定してジャギーを軽減
  4. Background Color でシーン背景を指定し、Window COMP / Out TOP に出力

Example 2: Cube Map で環境マップを生成 (Phong MAT 反射) 🪞

Scene Geometry + Camera COMP → Render TOP (Render Mode=Cube Map) → Phong MAT (Environment Map) → 反射するオブジェクト

Render ModeCube Map に切替えると、シーンを 6 方向に分けて 1 つのキューブマップテクスチャとしてレンダリングできる。これを Phong MAT の Environment Map に流し込むと、反射する金属表面のようなマテリアル表現が手軽に得られる。Environment Light COMP と組み合わせれば IBL (Image-Based Lighting) にも応用可能。

  • Render TOP を 1 つ目作成し、シーン全体をレンダリング (背景や周囲オブジェクトを含む)
  • 別の Render TOP を作成し Render Modecubemap に設定、Positive Sides / Negative Sides で必要な面のみ描画
  • Cube Map TOP や Phong MAT の Environment Map スロットに Render TOP を接続
  • 反射対象オブジェクトに Phong MAT を適用して環境マップ反射を確認

Example 3: MRTでnormal/positionを同時出力 🧮

Scene Geometry + GLSL MAT (複数 layout(location)) → Render TOP (# of Color Buffers=3) → Render Select TOP で各バッファ取得

Advanced ページの numcolorbufs を 2 以上に設定し、GLSL MAT のフラグメントシェーダで layout(location = 1) out / layout(location = 2) out を宣言すると、1 パスのレンダリングで color / normal / position 等の複数 RGBA バッファを同時生成できる。ポストプロセス (SSAO / motion blur) や G-Buffer 系パイプラインの定番構成。

  1. GLSL MAT を用意し、フラグメントシェーダで複数 out 変数を layout(location = N) で宣言
  2. Render TOP の Advanced ページで numcolorbufs を 2 以上に設定
  3. normal / position 用バッファは通常ブレンド不要のため Allow Blending for Extra Buffers をオフ
  4. Render Select TOP で 1 番目以降のバッファを個別に取り出す

関連オペレータ 🔗

類似機能OP 🔍

  • Render Select TOP — Render TOP の複数カメラ・複数バッファ・Depth Peel 結果から特定の出力を取り出す
  • Render Pass TOP — 前段の Render TOP の上に追加のレンダパスを重ねる (パーティクル等の合成に好適)
  • Depth TOP — Render TOP の深度バッファをカラー化して取り出す

組み合わせ推奨OP 🔄

  • Camera COMP — 視点 (位置・FOV・近遠平面・Background Color) を提供する必須コンポ
  • Light COMP — シーン光源 (Point / Cone / Distant / Environment 等) を提供
  • Geometry COMP — レンダリング対象の SOP / MAT を内包する 3D オブジェクトコンポ
  • Phong MAT — 標準的なライティング + テクスチャ + Environment Map マテリアル
  • GLSL MAT — カスタムシェーダで描画 (Render TOP の Vectors / Samplers / Images と連携)
  • Environment Light COMP — Cube Map レンダ結果を IBL 光源として使用
  • Cube Map TOP — Render Mode=Cube Map の結果を扱う / 静的キューブマップを供給

前処理・後処理TOP 🎯


Info CHOP情報 📊

Render TOP は Info CHOP による詳細情報取得に対応しています。

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: TOP の出力解像度 X (ピクセル単位)
  • resy: TOP の出力解像度 Y (ピクセル単位)
  • aspectx: アスペクト比 X
  • aspecty: アスペクト比 Y
  • depth: 3D テクスチャ / テクスチャ配列の深度 (2D テクスチャでは 1)
  • gpu_memory_used: TOP が消費している GPU メモリ量 (MB 単位)

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

よくある問題と解決策 🔧

❌ Problem: レンダ結果が真っ黒で何も映らない
✅ Solution:

  • Camera(s) / Lights / Geometry がそれぞれ有効な COMP を指しているか確認 (Pattern Matching の場合は対象が解決されているかも確認)
  • Advanced ページの Render がオン (= 1) か確認、オフの場合は Render Pulse で単発レンダリング
  • Light COMP が必要な照度・距離・色を持っているか、Camera COMP の near/far が Geometry を含んでいるか確認

❌ Problem: 透明オブジェクトの前後関係がおかしい
✅ Solution:

  • Transparencyorderind (Order Independent Transparency) に切替えて順序非依存合成を有効化
  • orderind 使用時は Transparency/Peel Layers の値を上げて品質を確保 (重い場合は 4-6 程度から調整)
  • Pre-Multiply RGB by Alpha の設定が後段の合成 TOP の期待と一致しているか確認

❌ Problem: アンチエイリアスが効かない / ジャギーが目立つ
✅ Solution:

  • Anti-Alias1x (Off) でないか確認、4x / 8x (Medium) 等に引き上げ
  • Transparencyalphatocoverage にすると MSAA と組み合わせて硬輪郭半透明にも効きやすい
  • GPU メモリ消費が大きい場合は Anti-Alias を下げて Common Page の Output Resolution を上げる方が効率的なケースもある

❌ Problem: レンダリングが重い / フレームレートが落ちる
✅ Solution:

  • Anti-Alias を 1 段階下げる、または Output ResolutionHalf / Quarter に下げて後段の Blur TOP 等で補間
  • Order Independent Transparency の Transparency/Peel Layers を減らす
  • Advanced ページの Display Overdraw で過剰なオーバードロー領域を可視化し、ジオメトリの並び順や Camera の near/far を見直す

参考資料 📚

その他 🔗

公式リソース 📖

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