ShaderJoy —— “跳动的❤️”的原理解析【GLSL】

最新推荐文章于 2025-06-27 09:38:38 发布

ShaderJoy

最新推荐文章于 2025-06-27 09:38:38 发布

阅读量9.4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： ShaderJoy —— Shader 实例详解【重制版】文章标签： OpenGL shader glsl

本文链接：https://blog.youkuaiyun.com/panda1234lee/article/details/52024465

ShaderJoy —— Shader 实例详解【重制版】同时被 2 个专栏收录

161 篇文章 ¥119.90 ¥299.90

订阅专栏

Shader

48 篇文章

订阅专栏

本文深入解析ShaderToy算法，通过GLSL实现‘跳动的❤️’效果。关键在于计算d的函数和使用smoothstep进行hermite插值，调整颜色渐变，最终通过d-r得到心形并修正位置。通过增加‘心跳’动画，使效果更加生动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

了解本专栏