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

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

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

★モノクロ

// 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)の内積を取ることが平均になるところがポイント。

★ネガポジ反転

// 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から引けば十分です。

★モザイク

// 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で縦横分割した何ブロック目にいるのか、そしてそのブロックの中央のピクセルを見て色を決めます。

★すりガラス

// 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値化

// 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));
}

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

★ランダムディザー

// 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

HOW TO RENDERを読んだ。

立ち読みしたら読み物として普通に面白そうだったので借りてみた。

— 0KAWARA (@dot_not_) 2019年11月19日

オフィスが鎌倉から秋葉原になってから会社の本棚というものをよく見るようになった。鎌倉のときは良くも悪くもほとんど事業部ごとに各ジャンルの専門書籍がまとまっていた。一方で秋葉原のオフィスはすべての書籍が一箇所にまとまっており、それこそ最近の漫画から今日紹介するような専門書まで追いてあり背表紙を眺めているだけでも興味深い。

さてスコットロバートソンといえば”HOW TO DRAW”が有名だと思うが（専門外の自分でも聞いたことがあったので）、今回読んだのは”HOW TO RENDER”。まえがきに当たる部分で「この本は”HOW TO DRAW”の続きにあたる」といったことが書かれてる。実はまだ”HOW TO DRAW”を読んだことはないのだけれど（え？）、ざっと立ち読みして面白そうだったので借りて読んでみた。

読んでみて、たしかにこの書籍はアーティスト（特に3Dオブジェクトを2Dで表現する人たち）に向けた専門書の位置づけというのが相応しい内容で具体的には光や影、そして反射といった様々な自然の中の事象ごとに、ドローイングされたものをよりリアリスティックに表現し、それを見る人（主に非アーティスト）に対しての視覚言語の意味合いをより強く裏付ける手法として、実際の物理的な側面から学ぶと言ったものだった。

また、自分のようなエセ3D芸術家ごっこをしている人間でもちょっと学びはあった。特に反射、光沢あたりのパートはいわゆるアーティストと言われる人間でなくても日常の観察眼としてモノを見るときの楽しみ方をより豊かにしてくれるような内容だった。ところどころ翻訳がうまく言っていないようなところが見受けられたがそこまで気にするレベルのものでもなかった。

そして、これは特にアーティスト向けのコンテンツとなるが、この書籍（そしてどうやら”HOW TO DRAW”のほうも）には専用のアプリがありそれをダウンロードすると専用のカメラツールが立ち上がり本書内の各スケッチにそれをかざすとスケッチの様子の解説動画が再生されるようである。

自分は特にやろうとは思わないが、実際に手を動かして学ぶこともできるという意味で非常に教育向けの本であることは間違いないと言える。

さて、次は何を借りてみようかなー。