简单日食效果实现

原shader效果地址： http://glslsandbox.com/e#42084.1

个人实现效果：

width="600" height="350" src="https://www.shadertoy.com/embed/llBcDz?gui=false&t=0&paused=false" allowfullscreen="">

/*
float circle(vec2 center, vec2 pos, float scale)
{
    return length(center - pos) * scale;   
}

vec3 sun(vec2 center, vec2 pos)
{
    float t = 1.0 - smoothstep(0.2, 1.0, circle(center, pos, 2.0) );
    vec3 fc = t * vec3( 4.0, 2.0, 1.0);
    return fc;
}

vec3 moon(vec2 center, vec2 pos)
{
    float t = 1.0 - smoothstep(0.1, 1.0, circle(center, pos, 2.2) );
    vec3 fc = t * vec3( 100.0, 100.0, 200.0 );
    return fc;
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = (fragCoord.xy - 0.5 * iResolution.xy) / iResolution.y;

    vec3 s = sun( vec2( 0.0, 0.0), uv );
    vec3 m = moon( vec2( sin(iTime * 0.3) * 0.7, 0.0), uv );
    fragColor = vec4( s - m,1.0);
}
*/

// more concise
#define circle( c, p, s ) length(p - c) * s
#define sun(c, p) smoothstep(1., 0.2, circle(c, p, 2.)) * vec4( 4, 2, 1, 0)
#define moon(c, p) smoothstep(1., 0.1, circle(c, p, 2.2)) * vec4( 100, 100, 200, 0)

void mainImage(out vec4 O, in vec2 U)
{
    U = (U - 0.5 * iResolution.xy) / iResolution.y;

    O = sun(vec2(0, 0), U) 
        - moon(vec2(0, 0), U + vec2(0.7 * sin(0.3 * iTime), 0)) 
        + vec4( 0.3, 0.3, 0.3, 1);
}

其中太阳效果实现：

#define sun(c, p) smoothstep(1., 0.2, circle(c, p, 2.)) * vec4( 4, 2, 1, 0)

其中：

1.0 - smoothstep(a, b, t) = smoothstep(b, a, t)

由smoothstep实现三层渐变数值，乘与vec4(4, 2, 1, 0)实现多层光晕效果。

月亮效果与太亮一致，不过乘以vec4(100, 100, 200, 0)，由于颜色截取范围为0-1，所以月亮渐变效果只会在边缘有一个很小的渐变，如图：

同时由于月亮边缘值渐变为1到0，最终sun - moon 会在边缘产生一个>0的值，表现出月亮边缘有光照的效果。