소개

glsl로 심장을 그리는 방법에는 여러 가지가 있습니다.
이 기사에서는 glsl에서 다양한 하트를 그리는 방법의 소개와 직접 만든 하트를 그리는 방법을 소개하고 싶습니다.

오리지널 하트 1

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);
    p.x-=sign(p.x)*p.y*.4;
    float l = length(p);
    l=step(0.,.8-l);
    gl_FragColor = vec4(vec3(l), 1.0);
}

glsl에서 놀고 우연히 발견한 하트에서 식은 비교적 간단합니다.
제대로, 좌표의 중심으로부터 등간격으로 되어 있습니다.



하트의 움푹 들어간 부분을 조정할 수 없는 것이 난점이네요.

오리지널 하트 2

GLSL 레이마칭 연구거리 함수에 대해 공부해본 16

너무 아름다운 하트 수식

의 기사를 참고로 2D의 하트를 그려 보았던 것이 이쪽입니다.

precision mediump float;
uniform vec2  m;       // mouse
uniform float t;       // time
uniform vec2  r;       // resolution
uniform sampler2D smp; // prev scene

float heart(vec2 p){
 return pow(p.x*p.x+p.y*p.y-1.,3.)-p.x*p.x*p.y*p.y*p.y;
}

void main(void){
 vec2 p = (gl_FragCoord.xy * 2.0 - r) / min(r.x, r.y); // 正規化
 float l = 1.-step(0.,heart(p*1.3));
 gl_FragColor = vec4(vec3(.95,.4,.4)*l, 1.0);
}

수식을 직접 뿌려 무리하게 만들었기 때문에 의사 거리 필드가 됩니다.

(x^2+y^2-1)^3 - x^2*y^3 = 0

로 왼쪽만을 가져오면 만들 수 있으므로 수식에서 변환은 매우 편합니다.

의사 거리 필드는 거리를 변경하면 크게 도형을 왜곡합니다.
거리 필드를 채우기에 사용할 수 없는 것과 확대 축소를 할 수 없는 것이 난점입니다. (p에 의한 도형의 확대 축소는 할 수 있다)
다만, 의사 거리 필드를 거리 필드로 변환할 수 있을 것 같은 생각이 듭니다.



(x^2+y^2-1)^3 - x^2*y^3이 만들어내는 거리 필드는 하트와는 닮지 않은 형태로 보입니다만, 값이 0의 경계가 하트형으로 되어 있습니다. 대신 일반 거리 필드와 달리 0에서 급격히 1로 변화하므로 칠에 활용할 수 없습니다.

다양한 하트를 그리는 법

GLSL 레이마칭 연구거리 함수에 대해 공부해본 16

iq 님의 3D 하트

h tp // glsl 씨 d보 x. 이 m/E #38545.0

h tp // glsl 씨 d보 x. 이 m/E #42120.0

참고

너무 아름다운 하트 수식