TouchDesignerで画像処理シェーダー。その２

さっそく第二弾。

今回は、先日無事終わったGLSLスクールで学んだものとよく使うテクスチャいじりのものを載せておきます。

★RGBずらし

// RGB shift
uniform vec2 offset;

out vec4 fragColor;

void main()
{
    vec2 coord = vUV.st;
    vec4 color = texture(sTD2DInputs[0], coord);

    vec4 negColor = texture(sTD2DInputs[0], coord + vec2(-offset[0], 0.0));
    vec4 posColor = texture(sTD2DInputs[0], coord + vec2(offset[1], 0.0));

    fragColor = TDOutputSwizzle(vec4(negColor.r, color.g, posColor.b, color.a));
}

ちなみに色収差とRGBずらしは正しくは同じものではないとのこと。（同じだと思ってた。）

★クランプ

// clamp
uniform float clampMin;
uniform float clampMax;

out vec4 fragColor;

void main()
{
    vec2 coord = clamp(vUV.st, clampMin, clampMax);
    vec4 color = texture(sTD2DInputs[0], coord);

    fragColor = TDOutputSwizzle(color);
}

clamp関数はclamp(x, min, max)で最大最小を制御するものです。

★拡縮

// scaling
out vec4 fragColor;

void main()
{
    vec2 newUV = 6.0 * vUV.st;
    vec4 color = texture(sTD2DInputs[0], newUV);

    fragColor = TDOutputSwizzle(color);
}

基本的なやつです。よく使います。ここではInput Extend Mode UVをMirrorに変えています。

★テクスチャゆがみ

// distortion
uniform float scale;
uniform vec2 center;

out vec4 fragColor;
void main()
{
    vec2 direction = vUV.st - center;
    vec2 coord = vUV.st + scale * normalize(direction);
    vec4 color = texture(sTD2DInputs[0], coord);

    fragColor = TDOutputSwizzle(color);
}

centerからの方向に対してスケールさせることでゆがみを演出しています。scaleの正負を変えるとだいぶ印象が変わります。

★溶解

// melt
uniform float time;

out vec4 fragColor;

void main()
{
    vec2 coord = vUV.st;
    
    vec2 melt = vec2(coord.x, coord.y*0.15+time*0.1);
    vec3 meltTex = texture(sTD2DInputs[0],melt).rgb;
    meltTex = melttex / 10.0;
    coord = coord.xy - meltTex.xy;
    vec4 color = texture(sTD2DInputs[0], coord);
    
    fragColor =TDOutputSwizzle(color);
}

１つのテクスチャだけでやっていますが別の画像やノイズをInput[1]に入れて使うともっと面白くなります。

へこみ

// dent
uniform vec2 width;
uniform vec2 center;

out vec4 fragColor;
void main()
{
    vec2 coord = vec2(2.0) * vUV.st - vec2(1.0); // -1 ~ +1

    vec2 s = sign(coord);
    coord = abs(coord);
    coord = coord * (1. + smoothstep(width.x, width.y, coord + center));
    coord = 0.5 * s * coord;
    coord = coord / 2.0 + 0.5;

    fragColor = texture(sTD2DInputs[0],coord);
}

Paletteの中にあるdentに少し手を加えたものです。これもよく使いますね。