또한 그 앞으로

벡터 거리 필드에 벡터 거리 필드를 곱하고 더 많은 벡터 거리 필드를 곱해 보세요.


h tps://오. 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 이야기] 치카라를 원하는가…