取余运算应用(2)-在glsl中_glsl 取余

取余运算应用(2)-在glsl中

初始化,根据到圆心的距离绘制一个圆

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
  vec2 uv = (fragCoord.xy/iResolution.xy-0.5);
  float l = length(uv);
	fragColor = vec4(vec3(l),1.);
}
1
2
3
4
5

一、mod(x,1)

只改变mod(x,y) 的x,y 始终等于1

1、情况1,对1取余

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
  vec2 uv = (fragCoord.xy/iResolution.xy-0.5);
  float len = length(uv);

	float f = mod(len, 1.);
	fragColor = vec4(vec3(f),1.);
}
1
2
3
4
5
6
7

分析:
len的范围是 0~0.5+, 对1取模后被限制到0~1之间,但是len本身就是这个范围,所以len值保持不变。

2、情况2,扩大2倍,不取余

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
  vec2 uv = (fragCoord.xy/iResolution.xy-0.5);
  float len = length(uv);
	fragColor = vec4(vec3(len*2.),1.);
}
1
2
3
4
5

分析:
len的范围是: 0~1+,在半径0.5上,len=1;大于半径0.5,len>1;小于半径0.5,len<1;

3、情况3,扩大2倍,对1取余

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
  vec2 uv = (fragCoord.xy/iResolution.xy-0.5);
  float len = length(uv);
  float f = mod(len*2., 1.);
	fragColor = vec4(vec3(f),1.);
}
1
2
3
4
5
6

分析:
len*2的范围是: 0~1+,大于1的部分限制成0了,所以大于半径0.5外面的部分就都是黑色的了。

4、情况4,扩大4倍,对1取余

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
  vec2 uv = (fragCoord.xy/iResolution.xy-0.5);
  float len = length(uv);
  float f = mod(len*4., 1.);
	fragColor = vec4(vec3(f),1.);
}
1
2
3
4
5
6

分析:
len*5的范围是: 0~2+,所以重复了2次: 0~1,1~2

二、mod(x,y)

改变y.

1、情况1,对0.5取余

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
  vec2 uv = (fragCoord.xy/iResolution.xy-0.5);
  float len = length(uv);
  float f = mod(len, 0.5);
	fragColor = vec4(vec3(f),1.);
}
1
2
3
4
5
6

分析:
len的范围是 0~0.5, 对0.5取模后被限制到0~0.5之间,但是len本身就是这个范围,所以len值保持不变。大于0.5的部分变成0。

2、情况2,扩大2倍,对0.5取余

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
  vec2 uv = (fragCoord.xy/iResolution.xy-0.5);
  float len = length(uv);
  float f = mod(len*2.0, 0.5);
	fragColor = vec4(vec3(f),1.);
}
1
2
3
4
5
6