Shader特效——“跳动的❤️”的原理解析【GLSL】

本文参考了ShaderToy的算法 ，对其原理进行了简单分析，并对代码进行精简

绘制❤️形

先看看关键代码

 float r = length(p);
 float a = atan(p.x,p.y)/3.141593;
 float h = abs(a);
 float d = (13.0*h - 22.0*h*h + 10.0*h*h*h)/(6.0-5.0*h);
    
 // Red
 vec3 hcol = vec3(1.0, 0.0, 0.0);
   
 // Draw Heart 
 vec3 col = mix( u_bgColor.xyz, hcol, clamp( d-r, 0., 1.));

其中，p 是片元坐标 x,y 从 [0,1] 域换算到 [-1,1] 的 vec2 形式，u_bgColor 是白色的背景，a 的含义不用解释了，值得一提的是a的范围是 [-1/2, 1/2] ，需要对它取绝对值，原因是 a 为负数的话，计算出的 d 也为负数，那么会被 mix 函数所忽略的（所以我们常常使用 clamp 来截断），如图（颜色越浅表示 d 值越小，反之亦然）：

 

当使用了 a 的绝对值，计算出的d效果如图：