效果图

两个粒子

多个粒子

原理简析

其中发光粒子所依据的数学公式是

$GLOW = \frac{0.04}{\sqrt{(x^{2}+y^{2})}}$

其对应的数学函数图如下

位置的周期性变换遵循三角函数 cos、 sin 就不过多赘述了

原理很简单，但是效果挺惊艳

完整代码与注释

#iUniform float glow = 0.04 in {0.00, 0.04}
/// @note 发光粒子
vec4 calcLight(vec4 color, vec2 pos, vec2 coord)
{
    return color * glow / distance(pos / iResolution.xy, coord / iResolution.xy);
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    fragColor = vec4(0, 0, 0, 0);


    fragColor += calcLight(
                     /// @note 颜色周期性变化
                     vec4(abs(sin(iTime * 2.22)), abs(cos(iTime * 12.0)), abs(sin(iTime * 2.20)), 0.5),
                     /// @note 位置周期性变化
                     vec2(abs(cos(iTime * 2.27)), abs(sin(iTime * 4.31))) * iResolution.xy,
                     fragCoord
                 );

    fragColor += calcLight(
                     /// @note 颜色周期性变化
                     vec4(abs(cos(iTime * 2.22)), abs(cos(iTime * 12.0)), abs(cos(iTime * 2.20)), 0.5),
                     /// @note 位置周期性变化
                     vec2(abs(sin(iTime * 2.27)), abs(sin(iTime * 3.3))) *  * iResolution.xy,
                     fragCoord
                 );
}
复制代码