ShaderJoy —— “跳动的❤️”的原理解析【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 值越小，反之亦然）：

文章来源: panda1234lee.blog.csdn.net，作者：panda1234lee，版权归原作者所有，如需转载，请联系作者。

原文链接：panda1234lee.blog.csdn.net/article/details/52024465