1
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

[連載 GLSL 物語] チカラが欲しいか……(第二話)新たなる力、その名はベクトルディスタンスフィールド!

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

vdfcircle.png
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

ちゃんと導けました!

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

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

次回

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?