跟我一起学glsl编程15 - 移动的太阳

绘制移动的太阳

• 示例代码一

还是前面的套路，一步一步来

    #ifdef GL_ES
    precision mediump float;
    #endif
    
    uniform vec2 u_resolution;
    uniform float u_time;
    
    void main(){
        vec2 coord = (gl_FragCoord.xy / u_resolution);
        float color = 0.0;
    
        color +=  length(coord);
    
        gl_FragColor = vec4(vec3(color),1.0);    
    }

• 代码效果

径向渐变的效果

• 示例代码二

在左下角已经可以看到太阳了

    #ifdef GL_ES
    precision mediump float;
    #endif
    
    uniform vec2 u_resolution;
    uniform float u_time;
    
    void main(){
        vec2 coord = (gl_FragCoord.xy / u_resolution);
        float color = 0.0;
    
        color += 0.1 * 0.1 /  length(coord);
    
        gl_FragColor = vec4(vec3(color),1.0);    
    }

• 代码效果

  注意图片的左小角

  

• 示例代码三

我们把太阳放到画布的正中间

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

void main(){
    vec2 coord = (gl_FragCoord.xy * 2.0 - u_resolution)/ min(u_resolution.x, u_resolution.y) ;
    float color = 0.0;

    color += 0.1 * 0.1 /  length(coord);

    gl_FragColor = vec4(vec3(color),1.0);    
}

• 代码效果

• 示例代码四

正在的太阳效果，包括光晕马上就可以看到了,加入shader的内部函数abs,效果会更好

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

void main(){
    vec2 coord = (gl_FragCoord.xy * 2.0 - u_resolution)/ min(u_resolution.x, u_resolution.y) ;
    float color = 0.0;

    color += 0.1 * abs(sin(u_time)) + 0.1 /  length(coord);

    gl_FragColor = vec4(vec3(color),1.0);    
}

• 代码效果

• 示例代码五

让太阳呈现放大缩小的状态

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

void main(){
    vec2 coord = (gl_FragCoord.xy * 2.0 - u_resolution)/ min(u_resolution.x, u_resolution.y) ;
    float color = 0.0;

    color += 0.1 * (abs(sin(u_time)) + 0.1) /  length(coord);

    gl_FragColor = vec4(vec3(color),1.0);    
}

• 代码效果

• 示例代码六

让太阳移动起来

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

void main(){
    vec2 coord = (gl_FragCoord.xy * 2.0 - u_resolution)/ min(u_resolution.x, u_resolution.y) ;
    float color = 0.0;

    coord.x += sin(u_time) + cos(u_time * 2.1);
    coord.y += cos(u_time) + sin(u_time * 1.6);

    color += 0.1 * (abs(sin(u_time)) + 0.1) /  length(coord);

    gl_FragColor = vec4(vec3(color),1.0);    
}

• 代码效果

  

《跟我一起学glsl编程》期待你的关注与点赞