ベクトルディスタンスフィールド

https://goo.gl/BnkcKU

 precision mediump float;
 uniform vec2  m;       // mouse
 uniform float t;       // time
 uniform vec2  r;       // resolution
 uniform sampler2D smp; // prev scene
  
 void main(void){
  vec2 p = (gl_FragCoord.xy * 2.0 - r) / min(r.x, r.y); // 正規化
  vec2 q = normalize(p)*.8-p;

  float l=step(length(q),.03);
  gl_FragColor = vec4(vec3(l), 1.);
 }

まずは、ベクトルディタンスフィールドを使って円を描いてみましょう。
普通に円を描いたのと変わりないですね。

ひと手間無駄な変換が入っただけなので、当たり前ですね。

  vec2 q = normalize(p)*.8-p;

このqがベクトルディスタンスフィールドで

length関数を掛けるだけで

  float l=length(q);

いつでも、ディスタンスフィールドに戻すことができます。

さて、2Dでは使われないnormalize(p)という見慣れないglslの関数が使われていますね。

円のディスタンスフィールドは

1.-length(p)

でしたが、ここから、円のベクトルディスタンスフィールドを推測してみましょう。
1.というのは元は、pの単位ベクトルと推測できるので、normalize(p)と推測ができます。

length(normalize(p)) = 1.

ということは

length(normalize(p)) - length(p)

lengthをまとめると

length(normalize(p)-p)

ベクトルディスタンスフィールドはlengthを使ってスカラーにする前ですので

normalize(p)-p

ちゃんと導けました！

これだけだと、単にひと手間無駄な処理が入るだけなので、

早速、円のベクトルディスタンスフィールドに円のベクトルディスタンスフィールドを乗せていきましょう！

次回

[連載 GLSL 物語] チカラが欲しいか……（第三話）極座標リプリケーション