Shader 实现彩虹旋涡的4个示例代码

本文分享绘制彩虹漩涡的4个示例代码。

示例代码一

先绘制一个螺旋状的图形

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

}