跟我一起学glsl编程13 - 彩虹漩涡 （rainbow swirl）

绘制彩虹漩涡

• 示例代码一

  先绘制一个螺旋状的图形

#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);

    float angle = atan(coord.y + 0.25, coord.x + 0.5) * 0.1;
    float len = length(coord - vec2(0.5, 0.25));

    color += sin(len * 50.0);

    gl_FragColor = vec4(color, 1.0);

}

• 代码效果

  中心点大体在（0.5，0.75)的位置上

• 示例代码二

#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);

    float angle = atan(-coord.y + 0.25, coord.x - 0.5) * 0.1;
    float len = length(coord - vec2(0.5, 0.25));
    
    // color += sin(len * 50.0 - angle);
    // color += sin(len * 50.0 - angle * 40.0);
    color += sin(len * 50.0 - angle * 40.0 + u_time);

    gl_FragColor = vec4(color, 1.0);

}

• 代码效果

  • 加入color += sin(len * 50.0 - angle);计算，圆圈发生了断裂

    

  • 继续修改代码color += sin(len * 50.0 - angle * 40.0);,呈现漩涡的效果

    

  • 加入u_time让漩涡动起来color += sin(len * 50.0 - angle * 40.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);

    float angle = atan(-coord.y + 0.25, coord.x - 0.5) * 0.1;
    float len = length(coord - vec2(0.5, 0.25));

    color.r += sin(len * 50.0 - angle * 40.0 + u_time);
    color.g += cos(len * 50.0 - angle * 40.0 - u_time);
    color.b += sin(len * 50.0 - angle * 40.0 + 6.0);
    gl_FragColor = vec4(color, 1.0);

}

• 代码效果

  • 红色效果，单独对红色处理color.r += sin(len * 50.0 - angle * 40.0 + u_time);

    

  • 再加入多绿色的处理color.g += cos(len * 50.0 - angle * 40.0 - u_time);,叠加的效果是

    

  • 再加入多蓝色的处理color.b += sin(len * 50.0 - angle * 40.0 + 6.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);

   float angle = atan(-coord.y + 0.25, coord.x - 0.5) * 0.1;
   float len = length(coord - vec2(0.5, 0.25));

   color.r += sin(len * 40.0 - angle * 40.0 + u_time);
   color.g += cos(len * 30.0 - angle * 60.0 - u_time);
   color.b += sin(len * 50.0 - angle * 50.0 + 6.0);

   gl_FragColor = vec4(color, 1.0);

}

• 代码效果 gif效果有些失真，补充一张Png效果图片

  

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