さらにその先へ

ベクトルディスタンスフィールドにベクトルディスタンスフィールドを掛けてさらにベクトルディスタンスフィールドを掛けてみましょう

https://goo.gl/ds5B55

 precision mediump float;
 uniform vec2  m;       // mouse
 uniform float t;       // time
 uniform vec2  r;       // resolution
 uniform sampler2D smp; // prev scene
 
 #define PI 3.14159265359
 #define TWO_PI 6.28318530718

 #define N 60.
 #define N2 15.

 
 void main(void){
  vec2  p = (gl_FragCoord.xy * 2.0 - r) / min(r.x, r.y); // 正規化
  float r = floor(degrees(atan(p.y,p.x))/N)*N+N/2.;
  vec2  q = vec2(cos(radians(r)),sin(radians(r)))*.8-p;
  float r2 = floor(degrees(atan(q.y,q.x))/N2)*N2+N2/2.;
  vec2  s = vec2(cos(radians(r2)),sin(radians(r2)))*.2-q;

  float l=step(length(s),.02);
  gl_FragColor = vec4(vec3(l), 1.);
 }

単純に、ベクトルディスタンスフィールドをチェインするだけでいいですね。

これで、花火のように2段階で分裂するパーティクルのようなものも作ることができますね。

もちろん、さらに、無限にチェインすることができます。かつ、別に円のディスタンスフィールドでなくてもいいんですよ。分割数も、それぞれのチェイン毎に別々でも構わないです。

夢がひろがりませんか？

ベクトルディスタンスフィールドの正体に迫る

ところで、このベクトルディスタンスフィールド(=ディスタンスフィールド)って何者なんでしょう。ディスタンスフィールドは、イラストレーターやSVGのベクターデータと同じで拡大縮小してもジャギが出ないデータです。しかし、イラストレーターやSVGのベクターデータと全く互換性がありません。ディスタンスフィールドをベクトルディスタンスフィールドに戻したとき、同じベクトルデータということで関係性はあるのでしょうか？

もし、このシェーダーの世界にベジエ曲線を持ってこれたら、どれだけ表現力が上がるのでしょうか。フォントも表示できるし、夢が広がりますね。

次回、このベクトルディスタンスフィールドを可視化して正体に迫ります。

[連載 GLSL 物語] チカラが欲しいか……（最終話）ベクトルディスタンスフィールドの正体に迫る