跟我一起学glsl编程12 - 波浪线（wavyLine）

绘制波浪线

跟着我一步一步来，怎样通过shader绘制wavy line

• 示例代码一

  先绘制一个黑白渐变的样子

#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 += sin(coord.x) * 0.5;

    gl_FragColor = vec4(vec3(color, color, 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 += sin(coord.x * 6.0 + sin(u_time+coord.y)) * 0.5;

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

• 代码效果

  

• 示例代码三

  现在我们想要看到的波浪线(wavy line)出现了

#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 += sin(coord.x * 6.0 + sin(u_time+coord.y * 90.0+cos(coord.x))) * 0.5;

    gl_FragColor = vec4(vec3(color, color, 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 += sin(coord.x * 6.0 + sin(u_time+coord.y * 90.0+cos(coord.x * 30.0+u_time * 2.0))) * 0.5;

    gl_FragColor = vec4(vec3(color, color, 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 += sin(coord.x * 6.0 + sin(u_time+coord.y * 90.0+cos(coord.x * 30.0+u_time * 2.0))) * 0.5;

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

• 代码效果

效果太酷了

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