跟我一起学glsl编程10 - 水彩效果（waterColor）

绘制水彩效果

• 示例代码一

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

    color += vec3(0.5 * sin(coord.x)+0.5,0.5 * sin(coord.y)+0.5,sin(coord.x+coord.y));

    gl_FragColor = vec4(color,1.0);   
}

• 代码效果

• 示例代码二 加入u_time 让屏幕上的像素点动起来，在上面的例子中加入如下代码

  vec2 coord = gl_FragCoord.xy / u_resolution;
  // 新增代码
  coord += vec2(0.7 / sin(coord.y + u_time + 0.3) + 0.8, 0.4 / sin(coord.x + u_time + 0.3) + 1.6);

• 代码效果 gif效果失真，真正的效果是很细腻的。

  

• 示例代码三 修改像素坐标，放大6倍，在第一行修改

  //vec2 coord = gl_FragCoord.xy / u_resolution;
  vec2 coord =6.0 *  gl_FragCoord.xy / u_resolution;

• 代码效果 哇，太神奇了

• 示例代码四 在shader中也可以使用循环（for）,使用for循环获得更加神奇的效果

  #ifdef GL_ES
    precision mediump float;
    #endif
    
    uniform vec2 u_resolution;
    uniform float u_time;
    
    void main(){
        vec2 coord = 6.0 * gl_FragCoord.xy / u_resolution;
        vec3  color = vec3(0);
    
        for(int n=1; n<8; n++){
            float i = float(n);
            coord += vec2(0.7 / sin(coord.y + u_time + 0.3) + 0.8, 0.4 / sin(coord.x + u_time + 0.3) + 1.6);
        }


        color += vec3(0.5 * sin(coord.x)+0.5,0.5 * sin(coord.y)+0.5,sin(coord.x+coord.y));
    
        gl_FragColor = vec4(color,1.0);   
    }

• 代码效果

• 代码示例五 将参数i加入到代码中，这不就是window系统的屏保吗？

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

void main(){
    vec2 coord = 6.0 * gl_FragCoord.xy / u_resolution;
    vec3  color = vec3(0);
    
    const int count = 8;
    for(int n=1; n < count; n++){
        float i = float(n);
        coord += vec2(0.7 / i * sin(coord.y + u_time + 0.3 * i) + 0.8, 0.4 / i * sin(coord.x + u_time + 0.3 * i) + 1.6);
    }


    color += vec3(0.5 * sin(coord.x)+0.5,0.5 * sin(coord.y)+0.5,sin(coord.x+coord.y));

    gl_FragColor = vec4(color,1.0);   
}

• 代码效果 count=8 的效果

count=6 的效果

• 代码示例6

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

void main(){
    vec2 coord = 6.0 * gl_FragCoord.xy / u_resolution;
    vec3  color = vec3(0);

    const int count = 3;
    for(int n=1; n < count; n++){
        float i = float(n);
        coord += vec2(0.7 / i * sin(coord.y + u_time + 0.3 * i) + 0.8, 0.4 / i * sin(coord.x + u_time + 0.3 * i) + 1.6);
    }
    // 再次加入
    coord += vec2(0.7 / sin(coord.y + u_time + 0.3) + 0.8, 0.4 / sin(coord.x + u_time + 0.3) + 1.6);
    
    color += vec3(0.5 * sin(coord.x)+0.5,0.5 * sin(coord.y)+0.5,sin(coord.x+coord.y));
    //coord -= vec2(0.7 / sin(coord.y + u_time + 0.3) + 0.8, 0.4 / sin(coord.x + u_time + 0.3) + 1.6);
    //coord *= vec2(0.7 / sin(coord.y + u_time + 0.3) + 0.8, 0.4 / sin(coord.x + u_time + 0.3) + 1.6);

    gl_FragColor = vec4(color,1.0);   
}

• 代码效果