TouchDesignerでGLSLを使ってみた〜チェック模様〜
こんにちは。
TDでGLSLを使う入門編として、カラフルなチェック模様を作ってみました。
と言ってもあまりイメージ通りには作れなかったのですが・・・
基本のチェック模様
step関数とfract関数を使うとチェック模様を作ることができます。
まず、step関数は、step(a,x)とした時に、xがaよりも大きければ1を返す関数です。
また、fract関数は、fract(x)とした時にxの小数部分を返す関数です。
なので、次のように書くと4マスのチェック模様になります。1が返される部分が白く塗りつぶされるからですね。
out vec4 fragColor;
void main()
{
vec2 pos = vUV.xy;
float check = abs(step(0.5, fract(pos.x)) - step(0.5, fract(pos.y)));
vec3 color = check * vec3(1.);
fragColor = TDOutputSwizzle(vec4(color, 1.0));
チェックを増やす
先ほど、vUVをわざわざposという変数に入れた理由が、チェック模様の数を増やすためです。vUV.xyに適当な数をかけると、チェックの数が増えます。
また、当然ですがcheckにかける色(ベクトル)を変えると色も変わります。
out vec4 fragColor;
void main()
{
vec2 pos = vUV.xy * 1.5;
float check = abs(step(0.5, fract(pos.x)) - step(0.5, fract(pos.y)));
vec3 color = check * vec3(0., 0., 1.);
fragColor = TDOutputSwizzle(vec4(color, 1.0));
2色にする
0を返している部分が黒くなっているので、その部分にも色を与えたら2色になります。
与える色をグラデーションにしたら多少カラフルにすることもできます。
out vec4 fragColor;
void main()
{
vec2 pos = vUV.xy * 1.5;
float check = abs(step(0.5, fract(pos.x)) - step(0.5, fract(pos.y)));
vec3 color = check * vec3(0.,0.,0.5) + (1.0 - check) * (1.);
fragColor = TDOutputSwizzle(vec4(color, 1.0));
カラフルなチェックを作る
上の方法だとカラフルな色が散らばっている感じにはできなかったので、step関数を使って色を重ね合わせてみました。
vec3 colorR = vec3(1.0, 0.0, 0.0);
vec3 colorG = vec3(0.0, 1.0, 0.0);
vec3 colorB = vec3(0.0, 0.0, 1.0);
out vec4 fragColor;
void main()
{
vec3 colors = step(1./3., vUV.x)*colorR*0.5 + (1-step(2./3., vUV.x))*colorB + step(1./3., vUV.y)*colorG*0.5 + (1-step(2./3., vUV.y))*colorR*0.3;
fragColor = TDOutputSwizzle(vec4(colors,1.0));
}
** 最終形
今まで書いたものを組み合わせてこんな感じにしてみました。
vUV.xyにかける数を外から入力することで時間変化するようになっています。
