Continue(s)

Twitter:@dn0t_ GitHub:@ogrew

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

f:id:taiga006:20191121133229j:plain

シリーズ化を宣言することで続けていかなければならないカルマを背負う。

今日はICSさんの記事にあったWebGLの簡単な画像処理をTouchDesignerでも使えるGLSLに。

★モノクロ

f:id:taiga006:20191121133817j:plain

// monochrome

out vec4 fragColor;

void main()
{
    vec4 color = texture(sTD2DInputs[0], vUV.st);
    float gray = dot(color.rgb, vec3(1.0/ 3.0));
    color = vec4(vec3(gray), 1.0);

    fragColor = TDOutputSwizzle(color);
}

(r,g,b)とvec3(1/3)の内積を取ることが平均になるところがポイント。

★ネガポジ反転

f:id:taiga006:20191121133352j:plain

// reversal

out vec4 fragColor;

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

    vec3 reversalColor = vec3(1) - color.rgb;
    color = vec4(reversalColor,1.);

    fragColor = TDOutputSwizzle(color);
}

シェーダーで使われるrgbは0.0~1.0なので反転させるには1.0から引けば十分です。

★モザイク

f:id:taiga006:20191121133555j:plain

// mosaic

uniform vec2 res;
uniform float mosaicScale;

out vec4 fragColor;

void main()
{
    vec2 mUV = floor(vUV.st * res / mosaicScale)  / (res/ mosaicScale) + (mosaicScale/2.) / res;
    vec4 color = texture(sTD2DInputs[0], mUV);

    fragColor = TDOutputSwizzle(color);
}

強引に1行にまとめました。 mosaicScaleで縦横分割した何ブロック目にいるのか、そしてそのブロックの中央のピクセルを見て色を決めます。

★すりガラス

f:id:taiga006:20191121133439j:plain

// glass

uniform vec2 res;
uniform float time;

out vec4 fragColor;

float rand(vec2 co){
    return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}

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

    float r = 7.;
    float x = (vUV.s * res.x) + rand(vUV.st) * r * 2. - r;
    float y = (vUV.t * res.y) + rand(vUV.ts) * r * 2. - r;

    color = texture(sTD2DInputs[0], vec2(x,y) / res);

    fragColor = TDOutputSwizzle(color);
}

ある一定の距離感覚の範囲の中からランダムでピクセルの色を取得しています。

★2値化

f:id:taiga006:20191121133512j:plain

// threshold

uniform float threshold;

out vec4 fragColor;

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

    float v = dot(color.rgb, vec3(1.0/3.0));
    if (v >= threshold) {
        v = 1.0;
    } else {
        v = 0.0;
    }

    fragColor = TDOutputSwizzle(vec4(v,v,v,1.0));
}

モノクロの応用です。と言ってもある閾値を設けてそれ以上であれば白、未満なら黒にするだけです。

★ランダムディザー

f:id:taiga006:20191121133634j:plain

// random dithering

uniform float threshold;

out vec4 fragColor;

float rand(vec2 co){
    return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}

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

    float v = dot(color.rgb, vec3(1.0/3.0));
    if (v >= rand(vUV.st)) {
        color.rgb = vec3(1.0);
    } else {
        color.rgb = vec3(0.0);
    }

    fragColor = TDOutputSwizzle(color);
}

先程作った2値化の閾値自体をランダムに決めるというものです。


ics.media