Shader|Shader特效——“跳动的??”的原理解析【GLSL】 ——|Shader|实例详解|ShaderJoy

本文参考了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 值越小，反之亦然）：