우선 원점을 중심으로 한 거리 필드를 시각화해 보겠습니다.

h tps://오. 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를 중심으로 점점 거리가 멀어져 가네요.
원형으로 퍼져 갑니다만, 이 시점에서는 아직 형태가 정해져 있지 않습니다.


h tps://오. gl / emfg

이 시점에서는 일반 벡터 공간입니다.

다음으로 거리를 정하여 원을 그려 봅시다.

h tps://오. 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로 정하면 원이 생겼습니다.
이것은, 그림에서 보면 어쩐지 그렇다고 알 수 있습니다.


h tps://오. gl / K 쿠 v9

하지만이 벡터 거리 필드를 시각화하면 .....

원점 O가 점이었던 것에 반해, 원점 O가 원형으로 되어 있다! ?
뭐 이거 키모이.

여기서 헤아릴 수 없는 사람은 이미 알겠다고 생각합니다만, 셰이더 아트는 원점으로 그리는 예술이었지요.

도형의 아핀 변환

그런데, 이 디스턴스 필드를 이동·회전은 정규화된 프래그먼트 셰이더가 실행되고 있는 좌표 p를 조작해 이동하는 것이었지요.

p를 4배로 하면, 도형은 1/4로 축소, 도형을 왼쪽으로 회전시키면 오른쪽으로 회전, 도형을 오른쪽으로 이동시키면 왼쪽으로 이동, 즉, p에 대한 조작이므로, 역행렬을 곱하고 있는 것 네요. 도형의 확대·축소·이동 등 아핀 변환에 대해서는 통상의 벡터 조작의 역행렬을 곱하면 좋기 때문에, 여기는 문제 없습니다.

그렇다면 모양은 어떻습니까?

극좌표 복제를 시각화

이번에는 극좌표 복제를 살펴 보겠습니다.

h tps://오. gl/C째 2rs

거리 필드를 보면


h tps://오. gl/F28WZt

더욱 기분 나쁜 도형이 떠오르고 왔습니다.
벡터 거리 필드를 보면


h tps://오. gl/ctW83

원점이 6개로 늘어나네요.

그건 그렇고, 흰색 경계는 6으로 나뉘어진 평행 세계의 세계선입니다.이 경계는 절대 넘지 않습니다. iq 선생님처럼 물체가 튀어나오게 되면 물체의 형태로 경계선을 왜곡시킨다. 그렇게 할 수있는 것 같습니다.

htps //w w. 샤로 r과 y. 이 m/ゔぃ에w/XtSczV

이론상, 이 물체의 형태로 경계선을 잘라 움직일 수 있을 것입니다만, 그 경우에서도, 같은 공간이 겹칠 수 없습니다. 단, 평행세계의 위상을 어긋난 좌우 옆의 평행세계를 거듭하는 것으로 의사적으로 경계선을 넘는 것처럼 보이는 것은 가능합니다. 이야기가 벗어났습니다. 이것은 또 다른 기사에서 해설합니다.

길어질 것 같아서 일단 게시
나중에 계속 씁니다.