图片扫描线
同学们，go go go动起来，让我来实现这个效果，图片我们还使用前几讲使用过的图片
- 示例代码一
看过前几讲的例子，这里很容易看明白
#ifdef GL_ES
precision mediump float;
#endif
uniform float u_time;
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform sampler2D u_tex0;
void main(){
vec2 coord = gl_FragCoord.xy / u_resolution;
vec3 color = vec3(0.0);
vec4 image = texture2D(u_tex0, coord);
image.a = sin(floor(coord.x * 3.0) - u_time * 9.0 );
gl_FragColor = image;
}
- 代码效果
- 示例代码二
提取相关的参数，真正的程序中，你可以将这些变量通过uniform的方式传递给shader
#ifdef GL_ES
precision mediump float;
#endif
uniform float u_time;
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform sampler2D u_tex0;
float size = 6.0; // 一屏中的扫描线的数量
float speed = 10.0; // 扫描线的动画速度，如果是负数就会相反方向运动
bool flip = false; // 扫描线的运动是横向还是纵向进行
void main(){
vec2 coord = gl_FragCoord.xy / u_resolution;
vec3 color = vec3(0.0);
vec4 image = texture2D(u_tex0, coord);
if(flip){
image.a = sin(floor(coord.x * size) - u_time * speed );
} else {
image.a = sin(floor(coord.y * size) - u_time * speed );
}
gl_FragColor = image;
}
- 代码效果
通过这个小的示例，以后再做扫描线，你就不会那么恐慌了，go go go!
《跟我一起学glsl编程》期待你的关注与点赞
