跟我一起学glsl编程14 - 扫描线 （scanning line）

绘制扫描线

• 示例代码一

通过alpha让屏幕闪烁起来

   #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(1.0);
   
        float size = 6.0;
        float alpha = sin(u_time * 4.0);
   
        gl_FragColor = vec4(color,alpha);   
   }

• 代码效果

  

• 示例代码二

使用shader内部函数 floor 向下取整，floor(0.6)=0，floor(5.4)=5

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

     float size = 6.0;
     float alpha = sin(floor(coord.y * size) + u_time * 4.0);

     gl_FragColor = vec4(color,alpha);   
}

• 代码效果

  已经可以看到从上向下的扫描线了

  

• 示例代码三

优化参数，x方向的扫描线

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

     float size = 12.0;
     float alpha = sin(floor(coord.x * size) + u_time * 4.0)+0.5;

     gl_FragColor = vec4(color,alpha);   
}

• 代码效果

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