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

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

More than 1 year has passed since last update.

まずは原点を中心としたディスタンスフィールドを可視化してみます。

acircle.png
https://goo.gl/JDmjGv

 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); // 正規化
   float l=0.;
   l=length(p);
   gl_FragColor = vec4(vec3(l), 1.);
 }

正規化されたpをlengthに掛けるだけですね。
原点oを中心に段々距離が遠くなっていきますね。
円状に広がっていきますが、この時点ではまだ形が定まっていません。

originarrow.png
https://goo.gl/emfgKe

この時点では普通のベクトル空間です。

次に距離を定めて円を描いてみましょう

circle65.png
https://goo.gl/sGp37W

 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); // 正規化
   float l=0.;
   l=length(normalize(p)*.65-p);
   gl_FragColor = vec4(vec3(l), 1.);
 }

半径を0.65と定めると円が出来ました。
これは、図で見るとなんとなくそうだなと分かります。

circlevdf.png
https://goo.gl/KQEv9N

でも、このベクトルディスタンスフィールドを可視化すると....。

原点Oが点だったのに対し、原点Oが円状になってる!?
何これキモイ。

ここで、察しがいい人はもう、お分かりかと思いますが、シェーダーアートは原点で描くアートだったんですね。

図形のアフィン変換

ところで、このディスタンスフィールドを移動・回転は正規化されたフラグメントシェーダーが実行されている座標pを操作して移動するのでしたよね。

pを4倍にしたら、図形は1/4に縮小、図形を左に回転させたら右に回転、図形を右に移動させたら左に移動、つまり、pに対する操作なので、逆行列を掛けてるわけですね。図形の拡大・縮小・移動などアフィン変換については通常のベクトル操作の逆行列を掛ければ良いので、ここは問題ありません。

では形の方はどうでしょうか?

極座標リプリケーションを可視化する

今度は極座標リプリケーションを見てみましょう。
6circle.png
https://goo.gl/CmE2rs

ディスタンスフィールドを表示してみると

6circledf.png
https://goo.gl/F28WZt

さらに気持ち悪い図形が浮かび上がってきました。
ベクトルディスタンスフィールドを表示してみると

6circlevdf.png
https://goo.gl/cctW83

原点が6個に増えてますね。

ちなみに、白い境界は、6つに分かれた平行世界の世界線です、この境界は絶対越えられません。iq先生みたいに、物体がはみ出そうになったら、物体の形で境界線を歪ませる。なんてことはできるみたいですけどね。
sekaisenyugami.png
https://www.shadertoy.com/view/XtSczV

理論上は、この物体の形に境界線を切って動かすことは可能な筈ですが、その場合でも、同一の空間が重なることはできません。但し、平行世界の位相をずらした左右隣の平行世界を重ねることで疑似的に境界線を越えるように見せることは可能です。話が逸れました。これは、また別記事で解説します。

長くなりそうだったので一旦投稿
あとで続き書きます。

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