「TOPによる画像処理、たまに生成」と、「COMPによるUI組み立て」に特化した、
つまり、グラフィクスエンジニアに特化したTDの「最速入門講座」が欲しいなと思い、
ちょっと、その叩きを作ってる次第です。
下書きというか「叩き」の段階では、この、はてなブログでいいかなと思っていて(一時的なアウトプットであり、拡散される気が全くなく、すぐに忘れられてもいい情報、…に関しては、私ははてなブログに貯蔵している)
一定クオリティ以上に達したら、note ないし Qiita に改めてまとめようかなと思っています。
よって、ここ、はてなブログにある以上は、これはまだ下書き段階です。
ブログ記事の段階では、5部構成くらいを見てます。
(・そもそもTDって何をするものだとグラフィクスエンジニアは解釈すればいいか)←この章は難易度高いので今は書く気なし
・スニペットを1通り見てみた
・分類
・最初の25個(←今日はここまで)
・後半40個
・エディタ画面のTips集(その小技さっさと最初に教えてよ編)
・UIの組み立て方(爆速でCOMPとPalette群を集結させる)
さて、スニペットにあるノードを概観し、スニペットに掲載されてるノード群の役割を1つずつ軽くさらっていく記事です。
一応TD初心者のために経緯を説明します。
TDとは、数値データor画像データor立体CGデータ、を、「ノード」と呼ばれる「ひとまとまりの処理が記述された箱」の組み合わせによって、データを加工するソフトウェアです。
もちろん、写真や動画、あるいはプログラミングで生成した2次元データを加工して、はたまた別の動画を書きだすこともできるし、プロジェクションやVJも出来ます。用途は様々ですね。
とにかく「ノード」というのが、様々な操作を語るうえでの「最小単位」となります。
超具体的に言ってしまうと、画像データに対してなら「ぼかし」「モノクロ化」「コントラスト強調」とか、そういう操作です。
その1つ1つがノードになっているということです。
だから「ノードを見ていく」というのは、TDでは「どんな操作ができうるのか」を、おさらいしていくことに他なりません。
そして、各ノードの使い方をまとめたヘルプとして、"Operator Snippets" という機能が、TDには内蔵されています。
そこには、500を軽く超えるノード群のうち、何割かの重要なノードについてのみ解説や用法例が掲載されています。
しかしながら、今回はグラフィクスエンジニアのための解説を考えますから、TOPノード(画像データを処理するノード)についてしか考えません。
さて私が1番慣れ親しんでいるTDバージョンは2020.20020ですが、最近インストールしたのは2023.12000です。
正確なリリース日で言うと、4年以上の隔たりがあります。この4年の間にHelpのスニペットも、どうやら沢山追加があったようです。
実際スニペットを見ると:
このくらい違ってました。
スニペットに掲載されてる数は、65ノードから90ノードに増えています。なるほどな。
しかし、各ノードに対する複数の用法例自体は、そこまで変化なしでした。
うーん…。悩みましたが、【まずは2020.20020に既に掲載されているほう】で、見て行こうかな?と思います。数が少ないから解説もラクだというのと、基礎的な所は結局、4年では流石に変わんないですからね。
分類について
ひととおり65ノードをなめてみましたが、10カテゴリーくらいに分けられるなあ、という考え方に落ち着きました。
そこで「その10カテゴリーとは何なのか?」をまずは概観することで、「そういうノリなのね」と
その、TDで絵作り自体をすることは私は少ないですし、実用的な使い方の勘に優れている自負はありません。とはいえ、会社全体の中でもTDの使い方の知識は多い方です。上位10位には入るのではないでしょうか。
なのでTD中級者から眺める、そして画像処理の用途に特化した人間から眺める、TDノードの分類かもしれません。
ここから始まる系
- 0-1 constant
- 単色画像を出力するノード。1番分かりやすいかも
- 0-2 circle
- 円や楕円(正多角形や扇形やドーナツ型もいける)の画像を出す
- 0-3 text
- 文字がラスタライズされた画像を出力する。画像でUI作る時とかに便利かも
- 0-4 Noise
- 様々なNoise画像を提供します。複数の種類のノイズがあり、そして色んな動かし方できます。
- 0-5 Ramp
- グラデーションの画像を生成。Constantの上位互換かも。
- 0-1 constant
1-ブレンド系
- 1-1 Add
- 2つの画像の加算を返す。
- 1-2 Multiply
- 2つの画像の乗算を返す。
- 1-3 Over
- Input2の画像(半透明や一部透明を想定)を、Input1の上にのせ、アルファブレンドとする。
- 1-4 Inside
- Input1のRGBを使用するが、アルファにはInput2の画像を使用する。
- Input1-RGB, Input2-Aをマージする、とも言える
- 1-5 Difference
- 2つの画像の差の絶対値を返す
- 1-6 Switch
- 複数の画像を
- 1-7 Cross
- 2つの画像(2つとも不透明を想定)に対し、アルファを指定し、アルファブレンドする
- 1-8 Matte
- 1-SP Composite
- すべてのブレンドモードを選べる万能ノード。
*あれ?こいつだけでええやんか…
- 勘のいいガキは嫌いだよ
- すべてのブレンドモードを選べる万能ノード。
*あれ?こいつだけでええやんか…
- 1-1 Add
2- 時を超える系
- 2-1 Feedback
- 指定したTOPの、1フレーム前の結果を返す。時を超える系の中では初級編。1番気軽に使えるのでは。
- 2-4 Cache
- 第1Inputについて、指定したフレーム数ぶん、結果を保持し続ける
- 2-5 Cache Select
- Nフレーム分の履歴を保持したCacheから、1~Nの好きなフレーム番号を取り出す。
- やや複雑なので、時を超える系では中級編な気がする
- 2-4 3DTexture
- 過去Nフレーム分の画像出力を、連番データとして、3DTexture形式で保持し続ける
- 2-5 Time Machine
- 2-1 Feedback
3- エフェクト系
- 3-1 Anti Alias
- 3-2 Blur
- 画像をぼかします。ブラーです。
- 3-3 Luma Blur
- 画像内、地域によってブラーの強さを変えれます。
- 3-4 Edge
- エッジを強調します。元よりもギザギザになりがちです
- 3-5 Emboss
- エンボス加工、つまり、画像の色変化が立体情報となったモノクロ画像が返ってきます
- 3-6 Normal Map
- ↑のエンボス画像を面だと見立てて、それに対して法線を返した画像が得られます
- 3-7 Convolute
- 以上のエフェクト系は、畳み込み(Convolution)によって、自在に作れるわけです。
- EdgeやBlurのようなエフェクトを直接マニュアルに作りたい時はこのノードですね。わりと上級向け
4- RGB分解合体系
- 4-1 Chan Mix
- 4-2 Chroma Key
- HSVについて指定した範囲の色だけ選択し、残りを消去した画像、が得られる。
- 例えば「明度の高い部分だけ切り取る」「赤っぽい部分だけ切り取る」とかができる
- HSVについて指定した範囲の色だけ選択し、残りを消去した画像、が得られる。
- 4-3 RGB Key
- 4-2 Chroma Key のRGB空間編。なので、RGBについて一定範囲を満たす部分だけ切り取った画像を得られる。
- 4-4 Reorder
- RチャンネルはInput1のRを、GチャンネルはInput2のGを、BチャンネルはInput3のBをマージした画像を作る、みたいなのができる。
- Inputが4つもあるのが気持ち悪いノード。実際、きしょい操作だな~って思う(理解はしやすいけど)
5- メタ情報系
- 5-1 Select
- 同じ階層にないor遠いノードから、線を引っ張って繋げるのが面倒な時、ノード名の指定によってTOPを引っ張ってこれる。
- プログラマブルに接続ノードを変えたい・場合分けしたい時、とか、意外と便利ですよ
- 5-2 Resolution
- 画像の解像度を変更したい時とかに使う。
- 5-3 Chopto
- 数値や配列データ(CHOP)を画像(TOP)に変換する。音を画像にするときとかに便利
- 5-4 Analyze
- 画像の中での最も明るい点・最も暗い点・明るさの平均、を単色画像で出力してくれる
- 5-5 OP Viewer
- COMPの"OP Viewer"ノードとセットで使われる印象です。既にあるTOPノードをUIに表示させて、まじまじと眺めたいとき、に使われます
- 5-x Null
- スニペットには掲載されてないけど「何もしないノード」です。何もしないゆえに何の役に立つのか1番分かりにくいかもしれまえん。
- 個人的には、見通し良くノード群を構築するうえで最重要だと思うのですが、文面での説明が極めて難しいです。
- 存在は知っておいた方が良いのかなと思います。
- 5-1 Select
6- 補正系
- 6-1 Level
- いわゆるレベル補正をするノード
- Luma Levelと違い、数学的に素直な挙動なので、プログラミングの観点でいくとコントロールしやすいのがメリット
- 6-2 Luma Level
- 「色相・彩度を変えずに」レベル補正するノード。「あれ?Levelノードやると変な色相・彩度になっちゃうな」って時に使う。
- なので白黒画像(色相なし・彩度0)に対しては、基本、Levelと同じ挙動をする
- 6-3 Math
- 画像全体に対して、RGBを定数倍したり、定数分だけ足したりするノードです
- 特に「画像を数値データとして追いかけたい時」とかは重宝するはず。ChannnelMaskも併せて使用
- 6-4 Function
- 画像のRGB値に対して累乗をしたり変な算術関数を適用させて
- それで満足いかない時はGLSLへどうぞ
- 6-5 RGB2HSV
- 後述のHSV2RGBと併せて使い、「HSV補正」を自在にしたい時、使う印象です
- 6-6 HSV2RGB
- 前述のRGB2HSVと併せて使い、「HSV補正」を自在にしたい時、使う印象です
- 6-7 limit
- 6-1 Level
7- 変形シリーズ
- 7-1 Transform
- 回転・拡大・縮小、という、基本的な変形ができる。沢山お世話になるはずです
- ※アフィン変換行列の操作、のやや上位互換、とも言えそう。
- 7-2 Displace
- Remapより直感的に画像を歪ますことのできるノード。
- 第2Inputの明るさの分だけ、第1Input画像を縦または横に変形することができる
- 7-3 Remap
- UVマップを第2Inputに与えたら、第1引数をその通りに歪ます、という、汎用性高いノードです。
- Displaceのほぼ上位互換で、Noiseの第2引数への入力も、実はほぼ同じ話だったりする。
- 7-4 Corner pin
- 四隅の移動先を指定することで、長方形→任意の四辺形、への変形ができます
- この変形には有名な名前が付いてるんですが、忘れちゃいました。
- 7-1 Transform
8-切り貼りシリーズ
- 8-1 Crop
- 適当な長方形で画像の一部を切り抜くことができます
- 8-2 Fit
- 異なる解像度の画像Input2に合わせて、Input1をサイズ変更して貼りなおす感じです。
- 8-3 Flip
- 横に反転・縦に反転・対角線について反転(2通り)、ができます。単純だけどたまに欲しい奴。
- 8-4 Tile
- 反復して配置することで、単一画像によるタイリングができます。
- 8-1 Crop
9- IN/Out系
- 9-1 Movie in
- プリレンダー動画や画像素材を呼び出します。単純ですね
- 9-2 Movie out
- TD内で生成されたTOP(2次元データ)を、画像や動画として書き出します。
- 9-3 Video in
- 動画中継やらWebCamやらを
- 9-4 Point in (我々は使わないかも…SOPと併用が大半です)
- 9-1 Movie in
GOD- 神ノード
選外(3Dレンダリングと併せてしか使わない系)
- 特に説明しません。SOP(3D情報をサポートするノード群)と必ず併せて使うので、我々には不要です。
- 3D-1 Cube Map
- 3D-2 Depth
- 3D-3 Projection
- 3D-4 Render
- 3D-5 Render Pass
選外(用途がマニアックすぎて普通使わんだろ系)
- SP-1 Blob track
- 動点を簡易的に検出する機構。ComputerVisionの文脈っすね。かなりマニアック。
- SP-2 Pack
- 多分、高品質な画質を保ったままネットワーク通信で画像を送受信したい・特殊な形式で画像書き出ししたい人が前提。
- 圧縮された特殊な画像を生成するノード
- SP-3 OpenColorIO
- SP-4 Nvidia Flow
- Nvidiaが提供してる流体計算システムを利用して、流体を計算する何かっぽい。
- 流体計算したかったらライブラリ使うかシェーダー書くかが良いと思うんだけどなあ…(そもそもTDでやりたくないよー)
- SP-5 Lookup
- Chopの波形と第1Inputに従ってRGBを生成できる。5-3のChopToみたいだけど、ChopToより少し複雑な生成方法。
- ノードでなされてる操作自体は、そこまで難解ではないと思うのだが、用途が分からん…。使いどころ、どこだ…?
- SP-1 Blob track
0. ここから始まる系
0-1 Constant
・個人的な解釈
とにかくベタ塗り単色を出す。
全ノードの中で1番役割が明快なんじゃなかろうか。
謎にInputが1個あるが、
1・単色をInputの上に半透明で乗せたい
2・画像の解像度やFormatを、Inputと同じものにしたい
あたりが目的になると思う。
・用例
めっちゃ単純。
このように、赤を入力すれば、赤単色の画像が出てくる。単純明快ですね。
このように、2つの目的に関しては、用例の解説、後半で触れられている。
0-2 Circle
・解説
ベタ塗りの円は当然出せるし、フチだけを線として出したり、
中心角を指定できるので、円弧や扇形も出せたりする。
あと、用法2がちょっと面白い
実は「円じゃなく、正多角形だったら何角形でも出せますよ!例えば3角形とか!」という主張ですね。
長方形はいけないけど正方形ならいけるというわけ。
なんなら、こんなのとかも、1ノードで出せたりする
(境界線を違う色にして太くすることで、2色で塗ってるみたいになってる)
・個人的な解釈
UIを構成するうえでマウスポインタの位置と連動させてカーソル表示に使ったり、
意外と自由度が高い(ドーナツ型・扇形・多角形などが可能)なので、その辺慣れると全然違うのかも
0-3 Text
直接テキストの文字列をノードに指定することはできて、
まあ、多くはその用法なんじゃないかな?と思うけど、
用例では「TextDAT, TableDAT, Chop、などから、便利に1手でテキストを取り出す方法を用意しときましたよ!」を丁寧に扱ってますね。
沢山サンプルがありますが
「Chopの値をデバッグ表示するのは、一瞬で出来るよう用意しましたよ!」
という小技の解説ですね。
0-4 Noise
ノイズを提供します。結構強力かもしれません
・第2Inputの謎
これはノイズのUVを歪ませるためのツールだった。R,G,Bが、offset(x,y,z) に対応してるっぽい。
試しに画像(R,G,B) = (vUV.x, vUV.y, 0)な画像を第2Inputに入れると、何もInputを入れないのと同じ状態になるあたりから察せられる。
「ノイズにノイズを入れると、さらにぐちゃぐちゃなノイズができる」のは、そのためであった。
0-5 Ramp
グラデーションを作っています。 ある意味、Constantノードの上位互換とも解釈できます
Tableに各Key、つまり「位置と色」の列、が入ってて、それを読み込んでます。
RampTOP側は、Tableを編集するUIを用意しました、という形です
・用法
つまり、Keysの間の補完は、線形補間以外も選ぶことができ、特にStepにすると、パキッとした色の配置が可能だというわけですね
極座標にしたうえで、θ方向のグラデ、r方向のグラデどちらも選べますし、
ただ、
この用例4だけは、何言ってるか難解かも。TDに多少慣れた人じゃないと読み解けない。 理解するには要点が3つほどある。
コンテナは、
・マウスクリックされたU,Vをテーブルに渡す
・hsvrgb1 のTOPを、背景に表示している
ことしかしてないです。わりと、なんの変哲もない箱ですね。
evaluateDATが少しくせ者で、「入力テーブルの各セルを、Pythonコードだと思って計算した結果を、各セルに表示させる」と言うノードですね
で、とにかくrampノードの参照するテーブルは、所定の5列の形式を満たしてればOKなので、それをプロシージャルに作ったという形です
で最後にhsv2rgbですが、画像のR,G,Bを順にH,S,Vだと思って色変換します。そのRGBを計算した結果を画像としています。 Rampは赤成分だけが変化してますから、HSVとしてはHueのみが変化しているため、Rが変化すると色相がどんどん変化することになります。よって生成後の画像は、色相をたくさんまたいだサイケデリックな画像になります
TDの初中級技をいくつも使ったこの用例は、TDを一通り1周してる人がようやく「あー、そんな使い方もありか!」と面白がるような用法だと思ってて、そんなのもあるんだなという気持ち
1.ブレンド系
Compositeノードが、ブレンド系ノード群のほとんど上位互換なのですが、
これらをひとまず識別除外するだけで「あーこいつらただのブレンドか」となり、一気に少し見通しが良くなります
1-1: Add Top
ただ赤と緑を足したら黄色になる例
加算した上で回転や平行移動もできるよ、という例ですね
色んなノードに「とりあえずtransformも同時に出来るよ」という機能がくっついてるパターンが多いですが、
個人的には、各ノードの役割をしっかりさせる(設計でいう、単一クラス単一責任の原則)ため、ブレンドノードとかでtransformを同時にやることはせず、
別途transformノードを設けるのが良いのではないかと思います
過激かもしれませんがLevelノードとかも、「ネガを取る」とか「コントラストやガンマ補正」など、役割が違う操作であれば、2個のLevelノードに分けて置く方が、見通し良くなるんじゃないかなと思います
ただ、FixedLayerをどっちにするの?の選択は大事で、最初は詰まりポイントじゃないかな?と思います
解像度やアスペクト比を、入力1か2かどちらに合わすの?って話ですね
1-2: Multiplyノード
なんか、そのまんまですねえ…。
アルファも同様に乗算される点に注意です。
ちなみに「アルファは処理したくない!RGBだけについて操作したい!」みたいなとき
ここの下から2番目のChannnel Maskをいじるのが便利かなと思います
1-3 Over
基本的には、半透明部分や透明部分を含む画像を、不透明画像の上に貼り付ける、orアルファブレンドとして重ねる、ときのノードです。
が、Crop・Fit・Resolutionノードらの代わりとして使う小技もあります、というのは用例中で紹介されてる
・用例
いずれも「透明部分を含む画像を、一方の画像の上に張り付ける」というシチュエーションですね。
で、その際に"Pre-Fit"のパラメータを選んで、適切に切り取ったり、適当なtransformをかけて貼り付けることもできるよ、という、パラメータの紹介をしてる感じですね。
別の画像の解像度だけを反映させたい時はResolutionノード使うよりもOverの方がむしろ便利だよとか、別の画像Aの解像度で画像Bを切り取りたいとかにも使えるよ、みたいな小技の紹介もしています。
1-4 Inside
画像Bのアルファ情報を、画像Aに適用させる、って感じです。
用例を見る限りでも、それ以外の使い方は特になさそうな感じ。
1-5 Difference
・内容
2つの画像の絶対値の差ですね。
Photoshopにも標準で入ってるブレンドモードだったりしますが、これみんな、どういうシチュエーションで使うのかな。
個人的には「この2つのノードってちゃんと同じ結果を吐き出してるかな?」を調べる、さらにそれを利用して「この2つの処理群は等価表現になってるかな?」というデバッグ目的で便利だと思っていますが、、
あと、2つの似た絵を作ったときに「どのくらい絵として寄せれたかな」の指標になったりとか・・・
・用例
もしかすると用例分かりにくいかも。しかも少しマニアックな使用法だと思うんよなあ…
この例の中では、本質的な部分はここですね。
ここでの「Cache」は、1フレーム前の、左のノードの画像を出力している。 CacheやFeedbackなどいくつかのノードは、フレームを超えて画像を記憶できる性質があります。
Diffは、2つの画像の差分の絶対値かな。 結果的に、switchの現在フレームと、switchの1フレーム前の画像との、差分を表示してますね。
で、適当なプリレンダームービーの場合と、WebCam使った場合とで、
内容的には同じ処理だけど、例を2つ見せてますよ、と言う具合です。
1-6 Switch
1-7 Cross
1-8 Matte
1-SP Composite
実は、ほとんど全部(SwitchやCrossはブレンドとは少し違うので除く)のブレンドに関しては、このノードが上位互換になってます。
つまり ・3枚以上の画像も入力出来て ・ブレンドモードは全てプルダウンから選択できる という、超強力なノードですね。
「じゃあAddとかMultiplyなんて使わなくていいじゃん!」というのも多少そうですが、 プログラミングの型みたいな話かもしれない TypeScriptが好きという人も居るんだという話かもしれない
わざわざ変更不可能で2枚しか入力できないAddを、Compositeの代わりに置くことで
「ここは加算処理しか入りようがない場所だ!将来変更はここに起こりえないはず!」
という強烈なメッセージを置くこともできます
あとまあAddとかの方がプルダウン選ぶ操作が1つ省ける分、若干気軽というのがあります。
14
2-1 Feedback
2-2 TimeMachine
2-3 3DTexture
2-4 Cache
2-5 Cache Select
19
エフェクト系
3-1 Anti Areas
ギザギザな境界を滑らかにするアンチエイリアスですね。 Blurとの違いを正直よく分かってないです。
3-2 Blur
画像をぼかします。
ぼかし具合(フィルタサイズとか)を詳細に指定できるものの、 Luma Blurみたいに、場所によってBlurの強さを変えるとかは出来なさそうです。
3-3 Luma Blur
Blurだけど、「画像のどこをBlurするか?」を、第2Inputの画像によって指定できちゃう感じですかね。 ただ逆に詳細なぼかし具合のパラメータは指定できなさそうです。謎。
そして、それが目的なのだとしたら、Lumaの意味がよくわかりません。謎。
3-4 Edge
近隣のピクセルと差があるピクセルは明るくなります。 ようは変化してる場所が明るくなるため、境界線の表現みたいになります。
なだらかに変化してる場合は、あまりEdge判定されないですね。
3-5 Emboss
Edgeと毛色は似ているのですが、 画像で変化のある部分が沈んでいるような表現になります
Edgeよりも単に情報量が多いかもしれません。
3-6 NormalMap
近隣との色の差分をもとに、でこぼこした
なので、基本的にはXY平面を凸凹させた、z=f(x,y)で表現される曲面、に対して 法線を取ったMapが出力として返ってきます。 具体的には、たぶん(R,G,B) = normalize(vec3(grad(x,y), 1)) みたいなことじゃないかと思います。 例えば、何の変化もない=定数の画像を入力すると、全ての点で、法線は(0,0,1)になったりします。
でも、負の値は画像として表現したくないため、[-1,1]->[0,1]のアフィン変換(ある意味正規化かな)により、強制的に正の値として画像表現してます なんか、グラフィクスエンジニアをある程度やってたら、この辺の文脈は「まあどうせそういうことやろ」と汲み取れそう。 NormalMapがそういう形式で供されることも多いというコンテクストですかね。
3-7 Convolve
ある意味、Blur, Edge, Embossといったやつらの上位互換ですね。 係数を適切に指定することで、どれにでもなれるわけです。
結局、Blur, Edge, Embossといった奴らは、自分のピクセルを計算するために、近隣のピクセルを覗かないといけないわけで、 差分を取るにも平均をとるにも、結局は、畳み込みの処理である、と一般化して言えるわけですね。
気持ちを分かるには、シェーダーの並列化の考え方くらいは分かる必要がありそうです。
ここまで26
4-1 Chan Mix
4-2 Chroma Key
4-3 RGB Key
4-4 Reorder
30
5-1 Select
5-2 Resolution
5-3 Chopto
5-4 Analyze
5-5 OP Viewer
35
6-1 Level
6-2 Luma Level
6-3 Function
6-4 Math
6-5 RGB2HSV
6-6 HSV2RGB
6-7 limit
42
7-1 Transform
7-2 Remap
7-3 Displace
45
8-1 Crop
8-2 Corner pin
8-3 Fit
8-4 Flip
8-5 Tile
50
IO
IO-1 Movie in
IO-2 Movie out
IO-3 Video in
IO-4 Point in
GOD-1 GLSL
55
X-1 Cube Map
X-2 Depth
X-3 Projection
X-4 Render
X-5 Render Pass
60
SP
SP-1 Blob track
SP-2 Pack
SP-3 OpenColorIO
??-1 Nvidia Flow
??-2 Lookup
65