1.双向垂直的扫描效果
加法表示并集
#define PI 3.1415926
float quadratic(float x) {
if(x > 1.0){
return 0.0;
}
return pow(1.0 - x,2.0);
}
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
// 定义贴图坐标
vec2 uv = fragCoord / iResolution.xy;
float v = quadratic(iTime * 0.1);
//up要从1变换到0.5
float up = v;
if(up < 0.5){
up = 0.5;
}
//down 从0到0.5
float down = 1.0 - v;
if(down > 0.5){
down = 0.5;
}
vec3 color = texture(iChannel0, uv).rgb;
// 输出颜色
vec3 c = vec3(0.0,0.0,0.0);
vec3 d = vec3(0.0,0.0,0.0);
//从1.0 变换到 0.0
if(uv.y > up){
c = color;
}
if(uv.y < down){
d = color;
}
vec3 e = c + d;
fragColor = vec4(vec3(e), 1.0);
}
上面代码等价于下面,||或也表示并集
#define PI 3.1415926
float quadratic(float x) {
if(x > 1.0){
return 0.0;
}
return pow(1.0 - x,2.0);
}
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
// 定义贴图坐标
vec2 uv = fragCoord / iResolution.xy;
float v = quadratic(iTime * 0.1);
//up要从1变换到0.5
float up = v;
if(up < 0.5){
up = 0.5;
}
//down 从0到0.5
float down = 1.0 - v;
if(down > 0.5){
down = 0.5;
}
vec3 color = texture(iChannel0, uv).rgb;
// 输出颜色
vec3 c = vec3(0.0,0.0,0.0);
//从1.0 变换到 0.0
if(uv.y > up || uv.y < down){
c = color;
}
fragColor = vec4(vec3(c), 1.0);
}
效果如下:
2.从左到右扫描
#define PI 3.1415926
float quadratic(float x) {
if(x > 1.0){
return 0.0;
}
return pow(1.0 - x,2.0);
}
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
// 定义贴图坐标
vec2 uv = fragCoord / iResolution.xy;
float v = quadratic(iTime * 0.1);
//从0到1
v = 1.0 - v;
//从0到0.25
v /= 4.0;
vec3 a = texture(iChannel0, uv).rgb;
vec3 c = vec3(0.0,0.0,0.0);
if(uv.x > 0.25 && uv.x < 0.25 + v){
c += a;
}
if(uv.x > 0.0 && uv.x < v){
c += a;
}
if(uv.x > 0.5 && uv.x < 0.5 + v){
c += a;
}
if(uv.x > 0.75 && uv.x < 0.75 + v){
c += a;
}
fragColor = vec4(vec3(c), 1.0);
}
效果如下: