Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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