跟我一起学glsl编程19 - 绘制一个圆形彩色冲击波

绘制一个彩色的冲击波

看代码，看效果，一步一步的实现

• 示例代码一

圆形的径向渐变，从黑到红的效果

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

void main(){
    vec2 coord = gl_FragCoord.xy / u_resolution;

    vec3 color = vec3(0.0);

    vec2 translate = vec2(-0.5);

    coord += translate;

    color.r += abs(0.1 + length(coord));

    gl_FragColor = vec4(color, 1.0);

}

• 代码效果

• 示例代码二

稍作改动，-0.6,中间的过渡更大了

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

void main(){
    vec2 coord = gl_FragCoord.xy / u_resolution;

    vec3 color = vec3(0.0);

    vec2 translate = vec2(-0.5);

    coord += translate;

    color.r += abs(0.1 + length(coord) - 0.6);

    gl_FragColor = vec4(color, 1.0);

}

-代码效果

• 示例代码三

加入u_time 红色的冲击波开始有动画了

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

void main(){
    vec2 coord = gl_FragCoord.xy / u_resolution;

    vec3 color = vec3(0.0);

    vec2 translate = vec2(-0.5);

    coord += translate;

    color.r += abs(0.1 + length(coord) - 0.6 * abs(sin(u_time * 0.9)));

    gl_FragColor = vec4(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;

    vec3 color = vec3(0.0);

    vec2 translate = vec2(-0.5);

    coord += translate;

    color.r += abs(0.1 + length(coord) - 0.6 * abs(sin(u_time * 0.9 / 6.0)));
    color.g += abs(0.1 + length(coord) - 0.6 * abs(sin(u_time * 0.6 / 4.0)));
    color.b += abs(0.1 + length(coord) - 0.6 * abs(sin(u_time * 0.6 / 9.0)));

    gl_FragColor = vec4(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;

    vec3 color = vec3(0.0);

    vec2 translate = vec2(-0.5);

    coord += translate;

    color.r += abs(0.1 + length(coord) - 0.6 * abs(sin(u_time * 0.9 / 12.0)));
    color.g += abs(0.1 + length(coord) - 0.6 * abs(sin(u_time * 0.6 / 4.0)));
    color.b += abs(0.1 + length(coord) - 0.6 * abs(sin(u_time * 0.6 / 9.0)));

    gl_FragColor = vec4(0.1 / color, 1.0);

}

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