[TouchDesigner] RGB(またはHSV)をチャンネルごとに抜き出す

はじめに

TouchDesignerでは、RGBAチャンネルをそれぞれ抜き出すノードがありません(見つけきれてないだけかも...)。
ので、GLSLで対処してみます。

サンプル

サンプルはこちら(GitHub)に置いています。

解説

色空間の変換

RGB値を抜き取りたい場合はこの工程を無視して頂いて結構です。

読み込んだファイルをHSV色空間に変換しています。
ややこしいですが、HSV値はそれぞれRGBに格納されます。
そのため、輝度を取り出したい場合はBチャンネルの値を抜き出せばよいことになります。

チャンネルごとに値を取り出す

GLSL TOPを用いて、指定したチャンネルのピクセル値を取り出します。
GLSLでは、ベクトル値のアクセスにxyz, rgb, [index]の形でアクセスすることができますから、
今回は[index]の形で取り出しています。

Decomposition.glsl

uniform int channel;

out vec4 fragColor;
void main() {
    vec4 tex = texture(sTD2DInputs[0], vUV.st);
    vec4 color = vec4(vec3(tex[channel]), tex.a);    // <- 
    fragColor = color;
}

取り出すチャンネルはスライダーで設定できるようにしてみました。

スライダーの値は0-1の範囲で動きますので、Math CHOPで3倍にしておき、0-3で動くようにしておきます。

結果

色相

彩度

明度

と、それぞれのRGBチャンネルを抜き出すことができました。