簡單日食效果實作

原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 -  * iResolution.xy) / iResolution.y;

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

其中太陽效果實作：

其中：

- 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的值，表現出月亮邊緣有光照的效果。